Added vite.

openzipkin · Feb 4, 2023 · b6945a1 · b6945a1
1 parent c6ad4a2
commit b6945a1
Show file tree

Hide file tree

Showing 30 changed files with 143 additions and 22,865 deletions.
diff --git a/zipkin-lens/public/index.html → zipkin-lens/index.html b/zipkin-lens/public/index.html → zipkin-lens/index.html
@@ -18,10 +18,11 @@
   <head>
     <base href="/zipkin/">
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/zipkin-lens/package-lock.json b/zipkin-lens/package-lock.json
diff --git a/zipkin-lens/package.json b/zipkin-lens/package.json
@@ -15,10 +15,6 @@
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
-    "@lingui/cli": "3.0.0-13",
-    "@lingui/core": "3.0.0-13",
-    "@lingui/macro": "3.0.0-13",
-    "@lingui/react": "3.0.0-13",
     "@material-ui/core": "^4.1.1",
     "@material-ui/data-grid": "4.0.0-alpha.37",
     "@material-ui/icons": "^4.9.1",
@@ -40,7 +36,7 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
-    "@types/recharts": "^1.8.14",
+    "@types/recharts": "^2.0.0",
     "@types/redux-mock-store": "^1.0.2",
     "@types/shortid": "0.0.29",
     "@types/styled-components": "^5.1.0",
@@ -57,9 +53,12 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^2.5.0",
+    "events": "^3.3.0",
     "fetch-mock": "^9.4.0",
     "history": "^4.10.1",
     "http-proxy-middleware": "^1.0.3",
+    "i18next": "^22.4.9",
+    "i18next-browser-languagedetector": "^7.0.1",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "lodash": "^4.17.20",
     "moment": "^2.24.0",
@@ -68,13 +67,13 @@
     "prop-types": "^15.6.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-i18next": "^12.1.5",
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "^3.4.3",
     "react-use": "^14.2.0",
     "react-virtualized-auto-sizer": "1.0.7",
     "react-window": "^1.8.8",
-    "recharts": "^1.8.5",
+    "recharts": "^2.3.2",
     "redux": "^4.0.0",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^2.3.0",
@@ -86,8 +85,8 @@
     "compile": "lingui compile --namespace es",
     "extract": "lingui extract",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "vite",
+    "build": "tsc&& vite build",
     "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject"
   },
@@ -106,6 +105,7 @@
   "devDependencies": {
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
-    "typescript": "4.9.4"
+    "typescript": "4.9.4",
+    "vite": "^4.1.1"
   }
 }
diff --git a/zipkin-lens/pom.xml b/zipkin-lens/pom.xml
@@ -34,9 +34,9 @@
     <!-- Update occasionally based on LTS, but don't overrun what's in Alpine:
          https://nodejs.org/en/download/
          https://pkgs.alpinelinux.org/packages?name=nodejs&branch=edge -->
-    <node.version>14.15.3</node.version>
+    <node.version>19.1.0</node.version>
     <exec-maven-plugin.version>3.0.0</exec-maven-plugin.version>
-    <frontend-maven-plugin.version>1.11.0</frontend-maven-plugin.version>
+    <frontend-maven-plugin.version>1.12.1</frontend-maven-plugin.version>
     <maven-clean-plugin.version>3.1.0</maven-clean-plugin.version>
     <maven-resources-plugin.version>3.2.0</maven-resources-plugin.version>
   </properties>
@@ -116,17 +116,7 @@
               <goal>npm</goal>
             </goals>
             <configuration>
-              <arguments>install</arguments>
-            </configuration>
-          </execution>
-          <execution>
-            <id>npm lint</id>
-            <goals>
-              <goal>npm</goal>
-            </goals>
-            <phase>compile</phase>
-            <configuration>
-              <arguments>run lint</arguments>
+              <arguments>install --legacy-peer-deps</arguments>
             </configuration>
           </execution>
           <execution>
@@ -226,10 +216,6 @@
                 <id>npm install</id>
                 <phase>none</phase>
               </execution>
-              <execution>
-                <id>npm lint</id>
-                <phase>none</phase>
-              </execution>
               <execution>
                 <id>npm run build</id>
                 <phase>none</phase>
@@ -262,21 +248,7 @@
                 <configuration>
                   <executable>npm</executable>
                   <arguments>
-                    <argument>install</argument>
-                  </arguments>
-                </configuration>
-              </execution>
-              <execution>
-                <id>npm lint</id>
-                <goals>
-                  <goal>exec</goal>
-                </goals>
-                <phase>compile</phase>
-                <configuration>
-                  <executable>npm</executable>
-                  <arguments>
-                    <argument>run</argument>
-                    <argument>lint</argument>
+                    <argument>install --legacy-peer-deps</argument>
                   </arguments>
                 </configuration>
               </execution>

diff --git a/zipkin-lens/src/components/App/App.tsx b/zipkin-lens/src/components/App/App.tsx
@@ -13,7 +13,6 @@
  */
 
 import MomentUtils from '@date-io/moment';
-import { I18nProvider } from '@lingui/react';
 import {
   CircularProgress,
   ThemeProvider as MuiThemeProvider,
@@ -32,7 +31,6 @@ import TracePage from '../TracePage';
 import { UiConfig, UiConfigConsumer } from '../UiConfig';
 import configureStore from '../../store/configure-store';
 import { theme } from '../../constants/color';
-import { i18n } from '../../util/locale';
 import { BASE_PATH } from '../../constants/api';
 import AlertSnackbar from './AlertSnackbar';
 
@@ -49,7 +47,6 @@ const App: React.FC = () => {
                 {(config) => (
                   <Provider store={configureStore(config)}>
                     <AlertSnackbar />
-                    <I18nProvider i18n={i18n}>
                       <BrowserRouter basename={BASE_PATH}>
                         <Layout>
                           <Route exact path="/" component={DiscoverPage} />
@@ -67,7 +64,6 @@ const App: React.FC = () => {
                           />
                         </Layout>
                       </BrowserRouter>
-                    </I18nProvider>
                   </Provider>
                 )}
               </UiConfigConsumer>

diff --git a/zipkin-lens/src/components/App/LanguageSelector.test.tsx b/zipkin-lens/src/components/App/LanguageSelector.test.tsx
diff --git a/zipkin-lens/src/components/App/LanguageSelector.tsx b/zipkin-lens/src/components/App/LanguageSelector.tsx
@@ -11,13 +11,11 @@
  * or implied. See the License for the specific language governing permissions and limitations under
  * the License.
  */
-import { useLingui } from '@lingui/react';
 import { Button, Menu, MenuItem } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import TranslateIcon from '@material-ui/icons/Translate';
 import React, { useCallback } from 'react';
 
-import { setLocale } from '../../util/locale';
 
 // We want to display all the languages in native language, not current locale, so hard-code the
 // strings here instead of using internationalization.
@@ -43,9 +41,9 @@ export const LANGUAGES = [
 ];
 
 const LanguageSelector = () => {
-  const { i18n } = useLingui();
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [currentLocale, setLocale] = React.useState('en');
 
   const handleButtonClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -59,7 +57,6 @@ const LanguageSelector = () => {
     setAnchorEl(null);
   }, []);
 
-  const currentLocale = i18n.locale;
 
   const handleMenuItemClick = useCallback(
     (event: React.MouseEvent<HTMLLIElement>) => {

diff --git a/zipkin-lens/src/components/App/Layout.tsx b/zipkin-lens/src/components/App/Layout.tsx
@@ -17,8 +17,6 @@ import {
   faQuestionCircle,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { t } from '@lingui/macro';
-import { useLingui } from '@lingui/react';
 import {
   AppBar as MuiAppBar,
   Box,
@@ -39,9 +37,10 @@ import TraceJsonUploader from './TraceJsonUploader';
 import { useUiConfig } from '../UiConfig';
 import { darkTheme } from '../../constants/color';
 import logoSrc from '../../img/zipkin-logo.png';
+import {useTranslation} from "react-i18next";
 
 const Layout: React.FC = ({ children }) => {
-  const { i18n } = useLingui();
+  const {t } = useTranslation();
   const config = useUiConfig();
 
   return (
@@ -63,20 +62,20 @@ const Layout: React.FC = ({ children }) => {
                 justifyContent="center"
                 alignItems="center"
               >
-                <Logo alt={i18n._(t`Zipkin`)} />
+                <Logo alt={t(`Zipkin`).toString()} />
               </Box>
               <Title>
                 <strong>Zipkin</strong>
               </Title>
               <Box display="flex" ml={3}>
                 <HeaderMenuItem
-                  title={i18n._(t`Find a trace`)}
+                  title={t(`Find a trace`)}
                   path="/"
                   icon={faSearch}
                 />
                 {config.dependency.enabled && (
                   <HeaderMenuItem
-                    title={i18n._(t`Dependencies`)}
+                    title={t(`Dependencies`)}
                     path="/dependency"
                     icon={faProjectDiagram}
                   />
@@ -92,7 +91,7 @@ const Layout: React.FC = ({ children }) => {
                 <TraceIdSearch />
                 {config.supportUrl && (
                   <Box ml={1}>
-                    <Tooltip title={i18n._(t`Support`)}>
+                    <Tooltip title={t(`Support`).toString()}>
                       <MuiIconButton href={config.supportUrl}>
                         <FontAwesomeIcon icon={faQuestionCircle} />
                       </MuiIconButton>

diff --git a/zipkin-lens/src/components/App/TraceIdSearch.tsx b/zipkin-lens/src/components/App/TraceIdSearch.tsx
@@ -12,14 +12,13 @@
  * the License.
  */
 
-import { useLingui } from '@lingui/react';
 import { TextField } from '@material-ui/core';
-import { t } from '@lingui/macro';
 import React, { useCallback, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import {useTranslation} from "react-i18next";
 
 const TraceIdSearch: React.FC = () => {
-  const { i18n } = useLingui();
+  const { t} = useTranslation();
   const history = useHistory();
 
   const [traceId, setTraceId] = useState('');
@@ -50,7 +49,7 @@ const TraceIdSearch: React.FC = () => {
       onKeyDown={handleKeyDown}
       variant="outlined"
       size="small"
-      placeholder={`${i18n._(t`Trace ID`)}...`}
+      placeholder={t(`Trace ID`).toString()}
     />
   );
 };

diff --git a/zipkin-lens/src/components/App/TraceJsonUploader.tsx b/zipkin-lens/src/components/App/TraceJsonUploader.tsx
@@ -1,4 +1,3 @@
-import { Trans } from '@lingui/macro';
 /*
  * Copyright 2015-2020 The OpenZipkin Authors
  *
@@ -24,11 +23,13 @@ import styled from 'styled-components';
 
 import { setAlert } from './slice';
 import { loadJsonTrace } from '../../slices/tracesSlice';
+import {Trans, useTranslation} from "react-i18next";
 
 const TraceJsonUploader: React.FC = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const inputEl = useRef<HTMLInputElement>(null);
+  const {t} = useTranslation()
 
   const handleClick = useCallback(() => {
     if (inputEl.current) {
@@ -61,7 +62,7 @@ const TraceJsonUploader: React.FC = () => {
   return (
     <>
       <FileInput ref={inputEl} onChange={handleFileChange} />
-      <Tooltip title={<Trans>Upload JSON</Trans>}>
+      <Tooltip title={<Trans t={t}>Upload JSON</Trans>}>
         <IconButton onClick={handleClick}>
           <FontAwesomeIcon icon={faUpload} size="sm" />
         </IconButton>