UI Splitting to common components (#883)

* initial commit * removing files * after pr * move StatusBar to common * last changes from dev * update common-ui * webSocket was added to TrafficViewerApi * useWS * actionButtons added to TrafficV * comment clean * api clean up * api clean up * statusbar position changed * Checkbox changed * AnalyzeButton exported to common * CustomModal added from Ent * oas modal exported to common * removed redundant * oasmodal usage * es6 function * api changed * removed react-scripts Co-authored-by: Leon <>
2025-09-12 21:01:36 +00:00 · 2022-03-15 18:45:43 +02:00
parent edbe4ab00b
commit 9430e291b4
152 changed files with 111762 additions and 6735 deletions
--- a/ui-common/example/README.md
+++ b/ui-common/example/README.md
@@ -0,0 +1,5 @@
+This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+It is linked to the liraz-test package in the parent directory for development purposes.
+
+You can run `npm install` and then `npm start` to test your package.
--- a/ui-common/example/craco.config.js
+++ b/ui-common/example/craco.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  webpack: {
+      configure: (webpackConfig) => {
+          const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
+              (plugin) => plugin.options && plugin.options.ignoreOrder != null,
+          );
+          if(instanceOfMiniCssExtractPlugin)
+              instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
+
+          return webpackConfig;
+      }
+  }
+}
--- a/ui-common/example/package-lock.json
+++ b/ui-common/example/package-lock.json
--- a/ui-common/example/package.json
+++ b/ui-common/example/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@up9/mizu-common-example",
+  "homepage": ".",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "craco start",
+    "comment-start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
+    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
+    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
+    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
+    "@testing-library/react": "file:../node_modules/@testing-library/react",
+    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
+    "@types/jest": "file:../node_modules/@types/jest",
+    "@types/node": "file:../node_modules/@types/node",
+    "@types/react": "file:../node_modules/@types/react",
+    "@types/react-dom": "file:../node_modules/@types/react-dom",
+    "@up9/mizu-common": "file:..",
+    "react": "file:../node_modules/react",
+    "react-dom": "file:../node_modules/react-dom"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+    "@craco/craco": "^6.4.3",
+    "eslint": "^7.11.0",
+    "node-sass": "^6.0.0",
+    "recoil": "^0.5.2",
+    "react-scripts": "^4.0.3"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/ui-common/example/public/favicon.ico
+++ b/ui-common/example/public/favicon.ico
--- a/ui-common/example/public/index.html
+++ b/ui-common/example/public/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>@up9/mizu-common</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/ui-common/example/public/manifest.json
+++ b/ui-common/example/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "@up9/mizu-common",
+  "name": "@up9/mizu-common",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/ui-common/example/src/App.test.tsx
+++ b/ui-common/example/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
--- a/ui-common/example/src/App.tsx
+++ b/ui-common/example/src/App.tsx
@@ -0,0 +1,25 @@
+import TrafficViewer,{useWS, DEFAULT_QUERY} from '@up9/mizu-common';
+import "@up9/mizu-common/dist/index.css"
+import {useEffect} from 'react';
+import Api, {getWebsocketUrl} from "./api";
+
+const api = Api.getInstance()
+
+const App = () => { 
+  const {message,error,isOpen, openSocket, closeSocket, sendQuery} = useWS(getWebsocketUrl())
+  const trafficViewerApi = {...api, webSocket:{open : openSocket, close: closeSocket, sendQuery: sendQuery}}
+  sendQuery(DEFAULT_QUERY);
+
+  useEffect(() => {
+    return () =>{
+      closeSocket()
+    }
+  },[])
+
+  return <>
+    <TrafficViewer message={message} error={error} isWebSocketOpen={isOpen}
+                   trafficViewerApiProp={trafficViewerApi} ></TrafficViewer>
+  </>
+}
+
+export default App
--- a/ui-common/example/src/api.js
+++ b/ui-common/example/src/api.js
@@ -0,0 +1,124 @@
+import * as axios from "axios";
+
+export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL :
+    window.location.protocol === 'https:' ? `wss://${window.location.host}/ws` : `ws://${window.location.host}/ws`;
+
+export const FormValidationErrorType = "formError";
+
+const CancelToken = axios.CancelToken;
+
+const apiURL = process.env.REACT_APP_OVERRIDE_API_URL ? process.env.REACT_APP_OVERRIDE_API_URL : `${window.location.origin}/`;
+
+let token = null
+let client = null
+let source = null
+
+export default class Api {
+    static instance;
+
+    static getInstance() {
+        if (!Api.instance) {
+            Api.instance = new Api();
+        }
+        return Api.instance;
+    }
+
+    constructor() {
+        token = localStorage.getItem("token");
+
+        client = this.getAxiosClient();
+        source = null;
+    }
+
+    tapStatus = async () => {
+        const response = await client.get("/status/tap");
+        return response.data;
+    }
+
+
+    analyzeStatus = async () => {
+        const response = await client.get("/status/analyze");
+        return response.data;
+    }
+
+    getEntry = async (id, query) => {
+        const response = await client.get(`/entries/${id}?query=${query}`);
+        return response.data;
+    }
+
+    fetchEntries = async (leftOff, direction, query, limit, timeoutMs) => {
+        const response = await client.get(`/entries/?leftOff=${leftOff}&direction=${direction}&query=${query}&limit=${limit}&timeoutMs=${timeoutMs}`).catch(function (thrown) {
+            console.error(thrown.message);
+            return {};
+        });
+        return response.data;
+    }
+
+    getRecentTLSLinks = async () => {
+        const response = await client.get("/status/recentTLSLinks");
+        return response.data;
+    }
+
+    getOasServices = async () => {
+        const response = await client.get("/oas");
+        return response.data;
+    }
+
+    getOasByService = async (selectedService) => {
+        const response = await client.get(`/oas/${selectedService}`);
+        return response.data;
+    }
+
+    validateQuery = async (query) => {
+        if (source) {
+            source.cancel();
+        }
+        source = CancelToken.source();
+
+        const form = new FormData();
+        form.append('query', query)
+        const response = await client.post(`/query/validate`, form, {
+            cancelToken: source.token
+        }).catch(function (thrown) {
+            if (!axios.isCancel(thrown)) {
+                console.error('Validate error', thrown.message);
+            }
+        });
+
+        if (!response) {
+            return null;
+        }
+
+        return response.data;
+    }
+
+    persistToken = (tk) => {
+        token = tk;
+        client = this.getAxiosClient();
+        localStorage.setItem('token', token);
+    }
+
+    getAxiosClient = () => {
+        const headers = {
+            Accept: "application/json"
+        }
+
+        if (token) {
+            headers['x-session-token'] = `${token}`; // we use `x-session-token` instead of `Authorization` because the latter is reserved by kubectl proxy, making mizu view not work
+        }
+        return axios.create({
+            baseURL: apiURL,
+            timeout: 31000,
+            headers
+        });
+    }
+}
+
+export function getWebsocketUrl(){
+    let websocketUrl = MizuWebsocketURL;
+    if (token) {
+      websocketUrl += `/${token}`;
+    }
+
+    return websocketUrl;
+}
--- a/ui-common/example/src/index.css
+++ b/ui-common/example/src/index.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/ui-common/example/src/index.tsx
+++ b/ui-common/example/src/index.tsx
@@ -0,0 +1,7 @@
+import './index.css'
+
+import ReactDOM from 'react-dom'
+import App from './App'
+
+
+ReactDOM.render(<App />, document.getElementById('root'))
--- a/ui-common/example/src/react-app-env.d.ts
+++ b/ui-common/example/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/ui-common/example/src/setupTests.ts
+++ b/ui-common/example/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
--- a/ui-common/example/tsconfig.json
+++ b/ui-common/example/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": false,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+  
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "exmaple"
+  ]
+}