TRA-4276 Folder structure refactor (#1131)

* mizu-common folder structure refactor

* no message

* change images import from absolute to relative

* relative sass imports

* no message

* remove tgz

* spinner style

acceptanceTests/Makefile

@@ -1,2 +1,3 @@
 test: ## Run acceptance tests.
+	@npm install cypress@10.0.1 -y
 	@go test ./... -timeout 1h -v

acceptanceTests/cypress.config.js

@@ -0,0 +1,31 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  watchForFileChanges: false,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  video: false,
+  screenshotOnRunFailure: false,
+  defaultCommandTimeout: 6000,
+  env: {
+    testUrl: 'http://localhost:8899/',
+    redactHeaderContent: 'User-Header[REDACTED]',
+    redactBodyContent: '{ "User": "[REDACTED]" }',
+    regexMaskingBodyContent: '[REDACTED]',
+    greenFilterColor: 'rgb(210, 250, 210)',
+    redFilterColor: 'rgb(250, 214, 220)',
+    bodyJsonClass: '.hljs',
+    mizuWidth: 1920,
+    normalMizuHeight: 1080,
+    hugeMizuHeight: 3500,
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    // setupNodeEvents(on, config) {
+    //   return require('./cypress/plugins/index.js')(on, config)
+    // },
+    specPattern: 'cypress/e2e/tests/*.js',
+    supportFile: false
+  },
+})

acceptanceTests/cypress.json

@@ -1,34 +0,0 @@
-{
-  "watchForFileChanges":false,
-  "viewportWidth": 1920,
-  "viewportHeight": 1080,
-  "video": false,
-  "screenshotOnRunFailure": false,
-  "defaultCommandTimeout": 6000,
-  "testFiles": [
-    "tests/GuiPort.js",
-    "tests/MultipleNamespaces.js",
-    "tests/Redact.js",
-    "tests/NoRedact.js",
-    "tests/Regex.js",
-    "tests/RegexMasking.js",
-    "tests/IgnoredUserAgents.js",
-    "tests/UiTest.js",
-    "tests/Redis.js",
-    "tests/Rabbit.js",
-    "tests/serviceMapFunction.js"
-  ],
-
-  "env": {
-    "testUrl": "http://localhost:8899/",
-    "redactHeaderContent": "User-Header[REDACTED]",
-    "redactBodyContent": "{ \"User\": \"[REDACTED]\" }",
-    "regexMaskingBodyContent": "[REDACTED]",
-    "greenFilterColor": "rgb(210, 250, 210)",
-    "redFilterColor": "rgb(250, 214, 220)",
-    "bodyJsonClass": ".hljs",
-    "mizuWidth": 1920,
-    "normalMizuHeight": 1080,
-    "hugeMizuHeight": 3500
-  }
-}

acceptanceTests/cypress/e2e/testHelpers/TrafficHelper.js

@@ -4,8 +4,6 @@ export const valueTabs = {
     none: null
 }
 
-const maxEntriesInDom = 13;
-
 export function isValueExistsInElement(shouldInclude, content, domPathToContainer){
     it(`should ${shouldInclude ? '' : 'not'} include '${content}'`, function () {
         cy.get(domPathToContainer).then(htmlText => {

acceptanceTests/extensions_test.go

@@ -105,7 +105,7 @@ func TestRedis(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress run --spec  \"cypress/integration/tests/Redis.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Redis.js\"")
 }
 
 func TestAmqp(t *testing.T) {
@@ -236,5 +236,5 @@ func TestAmqp(t *testing.T) {
 		ch.Close()
 	}
 
-	RunCypressTests(t, "npx cypress run --spec  \"cypress/integration/tests/Rabbit.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Rabbit.js\"")
 }

acceptanceTests/setup.sh

@@ -27,7 +27,7 @@ else
 fi
 
 echo "Starting minikube..."
-minikube start
+minikube start --cpus 2 --memory 6946
 
 echo "Creating mizu tests namespaces"
 kubectl create namespace mizu-tests --dry-run=client -o yaml | kubectl apply -f -

acceptanceTests/tap_test.go

@@ -78,7 +78,7 @@ func basicTapTest(t *testing.T, shouldCheckSrcAndDest bool, extraArgs... string)
 				expectedPodsStr += fmt.Sprintf("Name:%vNamespace:%v", expectedPods[i].Name, expectedPods[i].Namespace)
 			}
 
-			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/UiTest.js\" --env entriesCount=%d,arrayDict=%v,shouldCheckSrcAndDest=%v",
+			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/UiTest.js\" --env entriesCount=%d,arrayDict=%v,shouldCheckSrcAndDest=%v",
 				entriesCount, expectedPodsStr, shouldCheckSrcAndDest))
 		})
 	}
@@ -135,7 +135,7 @@ func TestTapGuiPort(t *testing.T) {
 				}
 			}
 
-			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec \"cypress/integration/tests/GuiPort.js\" --env name=%v,namespace=%v,port=%d",
+			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec \"cypress/e2e/tests/GuiPort.js\" --env name=%v,namespace=%v,port=%d",
 				"httpbin", "mizu-tests", guiPort))
 		})
 	}
@@ -182,7 +182,7 @@ func TestTapAllNamespaces(t *testing.T) {
 		return
 	}
 
-	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
 		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }
 
@@ -231,7 +231,7 @@ func TestTapMultipleNamespaces(t *testing.T) {
 		return
 	}
 
-	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
 		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }
 
@@ -277,7 +277,7 @@ func TestTapRegex(t *testing.T) {
 		return
 	}
 
-	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/Regex.js\" --env name=%v,namespace=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/Regex.js\" --env name=%v,namespace=%v",
 		expectedPods[0].Name, expectedPods[0].Namespace))
 }
 
@@ -376,7 +376,7 @@ func TestTapRedact(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress run --spec  \"cypress/integration/tests/Redact.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Redact.js\"")
 }
 
 func TestTapNoRedact(t *testing.T) {
@@ -426,7 +426,7 @@ func TestTapNoRedact(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress run --spec  \"cypress/integration/tests/NoRedact.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/NoRedact.js\"")
 }
 
 func TestTapRegexMasking(t *testing.T) {
@@ -479,7 +479,7 @@ func TestTapRegexMasking(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress run --spec \"cypress/integration/tests/RegexMasking.js\"")
+	RunCypressTests(t, "npx cypress run --spec \"cypress/e2e/tests/RegexMasking.js\"")
 
 }
 
@@ -541,7 +541,7 @@ func TestTapIgnoredUserAgents(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress run --spec  \"cypress/integration/tests/IgnoredUserAgents.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/IgnoredUserAgents.js\"")
 }
 
 func TestTapDumpLogs(t *testing.T) {

ui-common/package.json

@@ -24,22 +24,25 @@
   },
   "peerDependencies": {
     "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
     "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.52",
+    "@types/node": "^12.20.54",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
-    "recoil": "^0.5.2"
+    "recoil": "^0.7.2"
   },
   "dependencies": {
     "@craco/craco": "^6.4.3",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.2",
+    "@mui/lab": "^5.0.0-alpha.84",
+    "@mui/material": "^5.8.2",
+    "@mui/styles": "^5.8.0",
     "@types/lodash": "^4.14.182",
     "@uiw/react-textarea-code-editor": "^1.6.0",
-    "axios": "^0.25.0",
+    "axios": "^0.27.2",
     "core-js": "^3.22.7",
     "highlight.js": "^11.5.1",
     "json-beautify": "^1.1.1",
@@ -57,9 +60,9 @@
     "react-scrollable-feed-virtualized": "^1.4.9",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^8.2.0",
-    "redoc": "^2.0.0-rc.59",
+    "redoc": "^2.0.0-rc.71",
     "styled-components": "^5.3.5",
-    "web-vitals": "^1.1.2",
+    "web-vitals": "^2.1.4",
     "xml-formatter": "^2.6.1"
   },
   "devDependencies": {
@@ -67,7 +70,7 @@
     "@svgr/rollup": "^6.2.1",
     "cross-env": "^7.0.3",
     "env-cmd": "^10.1.0",
-    "gh-pages": "^2.2.0",
+    "gh-pages": "^4.0.0",
     "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",

ui-common/src/components/EntriesList/EntriesList.tsx

@@ -1,15 +1,15 @@
 import React, {useCallback, useEffect, useMemo, useState} from "react";
-import styles from '../style/EntriesList.module.sass';
+import styles from './EntriesList.module.sass';
 import ScrollableFeedVirtualized from "react-scrollable-feed-virtualized";
 import Moment from 'moment';
-import {EntryItem} from "./EntryListItem/EntryListItem";
-import down from "assets/downImg.svg";
-import spinner from 'assets/spinner.svg';
+import {EntryItem} from "../EntryListItem/EntryListItem";
+import down from "../assets/downImg.svg";
+import spinner from '../assets/spinner.svg';
 import {RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
 import entriesAtom from "../../recoil/entries";
 import queryAtom from "../../recoil/query";
 import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi";
-import TrafficViewerApi from "./TrafficViewerApi";
+import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import {toast} from "react-toastify";
 import {MAX_ENTRIES, TOAST_CONTAINER_ID} from "../../configs/Consts";

ui-common/src/components/EntryDetailed/EntryDetailed.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from "react";
-import EntryViewer from "./EntryDetailed/EntryViewer";
-import { EntryItem } from "./EntryListItem/EntryListItem";
-import { makeStyles } from "@material-ui/core";
-import Protocol from "../UI/Protocol"
-import Queryable from "../UI/Queryable";
+import EntryViewer from "./EntryViewer/EntryViewer";
+import { EntryItem } from "../EntryListItem/EntryListItem";
+import makeStyles from '@mui/styles/makeStyles';
+import Protocol from "../UI/Protocol/Protocol"
+import Queryable from "../UI/Queryable/Queryable";
 import { toast } from "react-toastify";
 import { RecoilState, useRecoilValue } from "recoil";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
-import TrafficViewerApi from "./TrafficViewerApi";
+import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
 import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
 import queryAtom from "../../recoil/query/atom";
 import useWindowDimensions, { useRequestTextByWidth } from "../../hooks/WindowDimensionsHook";
 import { TOAST_CONTAINER_ID } from "../../configs/Consts";
-import spinner from "assets/spinner.svg";
+import spinner from "../assets/spinner.svg";
 
 const useStyles = makeStyles(() => ({
     entryTitle: {

ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx

@@ -1,10 +1,10 @@
 import styles from "./EntrySections.module.sass";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
-import CollapsibleContainer from "../../UI/CollapsibleContainer";
-import FancyTextDisplay from "../../UI/FancyTextDisplay";
-import Queryable from "../../UI/Queryable";
-import Checkbox from "../../UI/Checkbox";
+import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter";
+import CollapsibleContainer from "../../UI/CollapsibleContainer/CollapsibleContainer";
+import FancyTextDisplay from "../../UI/FancyTextDisplay/FancyTextDisplay";
+import Queryable from "../../UI/Queryable/Queryable";
+import Checkbox from "../../UI/Checkbox/Checkbox";
 import ProtobufDecoder from "protobuf-decoder";
 import { default as jsonBeautify } from "json-beautify";
 import { default as xmlBeautify } from "xml-formatter";

ui-common/src/components/EntryDetailed/EntryViewer/EntryViewer.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import styles from './EntryViewer.module.sass';
-import Tabs from "../../UI/Tabs";
-import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "./EntrySections";
+import Tabs from "../../UI/Tabs/Tabs";
+import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "../EntrySections/EntrySections";
 
 enum SectionTypes {
     SectionTable = "table",

ui-common/src/components/EntryListItem/EntryListItem.module.sass

@@ -1,4 +1,4 @@
-@import '../../../variables.module'
+@import '../../variables.module'
 
 .row
   display: flex

ui-common/src/components/EntryListItem/EntryListItem.tsx

@@ -1,21 +1,21 @@
 import React from "react";
 import Moment from 'moment';
-import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import styles from './EntryListItem.module.sass';
-import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
-import Protocol, {ProtocolInterface} from "../../UI/Protocol"
-import eBPFLogo from 'assets/lock.svg';
-import {Summary} from "../../UI/Summary";
-import Queryable from "../../UI/Queryable";
-import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
-import ingoingIconFailure from "assets/ingoing-traffic-failure.svg"
-import ingoingIconNeutral from "assets/ingoing-traffic-neutral.svg"
-import outgoingIconSuccess from "assets/outgoing-traffic-success.svg"
-import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
-import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
+import StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode/StatusCode";
+import Protocol, {ProtocolInterface} from "../UI/Protocol/Protocol"
+import eBPFLogo from './assets/lock.svg';
+import {Summary} from "../UI/Summary/Summary";
+import Queryable from "../UI/Queryable/Queryable";
+import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg"
+import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
+import ingoingIconNeutral from "./assets/ingoing-traffic-neutral.svg"
+import outgoingIconSuccess from "./assets/outgoing-traffic-success.svg"
+import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
+import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
 import {useRecoilState} from "recoil";
-import focusedEntryIdAtom from "../../../recoil/focusedEntryId";
-import queryAtom from "../../../recoil/query";
+import focusedEntryIdAtom from "../../recoil/focusedEntryId";
+import queryAtom from "../../recoil/query";
 
 interface TCPInterface {
     ip: string

ui-common/src/components/Filters/Filters.tsx

@@ -1,36 +1,43 @@
-import React, {useRef, useState} from "react";
-import styles from '../style/Filters.module.sass';
-import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider} from "@material-ui/core";
+import React, { FC, useEffect, useMemo, useRef, useState } from "react";
+import styles from './Filters.module.sass';
+import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider, debounce} from "@mui/material";
 import CodeEditor from '@uiw/react-textarea-code-editor';
-import MenuBookIcon from '@material-ui/icons/MenuBook';
-import {SyntaxHighlighter} from "../UI/SyntaxHighlighter/index";
-import filterUIExample1 from "assets/filter-ui-example-1.png"
-import filterUIExample2 from "assets/filter-ui-example-2.png"
+import MenuBookIcon from '@mui/icons-material/MenuBook';
+import { SyntaxHighlighter } from "../UI/SyntaxHighlighter";
+import filterUIExample1 from "../TrafficViewer/assets/filter-ui-example-1.png"
+import filterUIExample2 from "../TrafficViewer/assets/filter-ui-example-2.png"
 import variables from '../../variables.module.scss';
-import {useRecoilState, useRecoilValue} from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import queryAtom from "../../recoil/query";
 import useKeyPress from "../../hooks/useKeyPress"
 import shortcutsKeyboard from "../../configs/shortcutsKeyboard"
-import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
+import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
 
 
 interface FiltersProps {
-    backgroundColor: string
     reopenConnection: any;
 }
 
-export const Filters: React.FC<FiltersProps> = ({backgroundColor, reopenConnection}) => {
+export const Filters: React.FC<FiltersProps> = ({ reopenConnection }) => {
+    const [query, setQuery] = useRecoilState(queryAtom);
+    const api: any = useRecoilValue(TrafficViewerApiAtom)
+
     return <div className={styles.container}>
         <QueryForm
-            backgroundColor={backgroundColor}
+            query={query}
             reopenConnection={reopenConnection}
-        />
+            onQueryChange={(query) => { setQuery(query?.trim()); }} validateQuery={api?.validateQuery} />
     </div>;
 };
 
+type OnQueryChange = { valid: boolean, message: string, query: string }
+
 interface QueryFormProps {
-    backgroundColor: string
-    reopenConnection: any;
+    reopenConnection?: any;
+    query: string
+    onQueryChange?: (query: string) => void
+    validateQuery: (query: string) => Promise<{ valid: boolean, message: string }>;
+    onValidationChanged?: (event: OnQueryChange) => void
 }
 
 export const modalStyle = {
@@ -47,20 +54,57 @@ export const modalStyle = {
     color: '#000',
 };
 
-export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, reopenConnection}) => {
+export const CodeEditorWrap: FC<QueryFormProps> = ({ query, onQueryChange, validateQuery, onValidationChanged }) => {
+    const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
+    const handleQueryChange = useMemo(
+        () =>
+            debounce(async (query: string) => {
+                if (!query) {
+                    setQueryBackgroundColor("#f5f5f5");
+                    onValidationChanged && onValidationChanged({ query: query, message: "", valid: true })
+                } else {
+                    const data = await validateQuery(query);
+                    if (!data) {
+                        return;
+                    }
+                    if (data.valid) {
+                        setQueryBackgroundColor("#d2fad2");
+                    } else {
+                        setQueryBackgroundColor("#fad6dc");
+                    }
+                    onValidationChanged && onValidationChanged({ query: query, message: data.message, valid: data.valid })
+                }
+            }, 500),
+        [onValidationChanged, validateQuery]
+    ) as (query: string) => void;
+
+    useEffect(() => {
+        handleQueryChange(query);
+    }, [query, handleQueryChange]);
+
+    return <CodeEditor
+        value={query}
+        language="py"
+        placeholder="Mizu Filter Syntax"
+        onChange={(event) => onQueryChange(event.target.value)}
+        padding={8}
+        style={{
+            fontSize: 14,
+            backgroundColor: `${queryBackgroundColor}`,
+            fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
+        }}
+    />
+}
+
+export const QueryForm: React.FC<QueryFormProps> = ({ validateQuery, reopenConnection, query, onQueryChange, onValidationChanged }) => {
 
     const formRef = useRef<HTMLFormElement>(null);
-    const [query, setQuery] = useRecoilState(queryAtom);
 
     const [openModal, setOpenModal] = useState(false);
 
     const handleOpenModal = () => setOpenModal(true);
     const handleCloseModal = () => setOpenModal(false);
 
-    const handleChange = async (e) => {
-        setQuery(e.target.value.trim());
-    }
-
     const handleSubmit = (e) => {
         reopenConnection();
         e.preventDefault();
@@ -86,18 +130,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, reopenConn
                     }}
                 >
                     <label>
-                        <CodeEditor
-                            value={query}
-                            language="py"
-                            placeholder="Mizu Filter Syntax"
-                            onChange={handleChange}
-                            padding={8}
-                            style={{
-                                fontSize: 14,
-                                backgroundColor: `${backgroundColor}`,
-                                fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
-                            }}
-                        />
+                        <CodeEditorWrap validateQuery={validateQuery} query={query} onQueryChange={onQueryChange} onValidationChanged={onValidationChanged} />
                     </label>
                 </Grid>
                 <Grid item xs={4}>

ui-common/src/components/TrafficViewer/TrafficViewer.module.sass

@@ -1,4 +1,4 @@
-@import 'src/variables.module'
+@import '../../variables.module'
 
 .TrafficPage
     width: 100%

ui-common/src/components/TrafficViewer/TrafficViewer.tsx

@@ -1,24 +1,23 @@
-import React, {useEffect, useMemo, useRef, useState} from "react";
-import {Filters} from "./Filters";
-import {EntriesList} from "./EntriesList";
-import {makeStyles} from "@material-ui/core";
+import React, { useEffect, useRef, useState } from "react";
+import { Filters } from "../Filters/Filters";
+import { EntriesList } from "../EntriesList/EntriesList";
+import makeStyles from '@mui/styles/makeStyles';
 import TrafficViewerStyles from "./TrafficViewer.module.sass";
-import styles from '../style/EntriesList.module.sass';
-import {EntryDetailed} from "./EntryDetailed";
+import styles from '../EntriesList/EntriesList.module.sass';
+import { EntryDetailed } from "../EntryDetailed/EntryDetailed";
 import playIcon from 'assets/run.svg';
 import pauseIcon from 'assets/pause.svg';
 import variables from '../../variables.module.scss';
-import {ToastContainer} from 'react-toastify';
-import debounce from 'lodash/debounce';
-import {RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
+import { ToastContainer } from 'react-toastify';
+import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import entriesAtom from "../../recoil/entries";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import queryAtom from "../../recoil/query";
 import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
 import TrafficViewerApi from "./TrafficViewerApi";
-import {StatusBar} from "../UI/StatusBar";
+import { StatusBar } from "../UI/StatusBar/StatusBar";
 import tappingStatusAtom from "../../recoil/tappingStatus/atom";
-import {TOAST_CONTAINER_ID} from "../../configs/Consts";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 import leftOffTopAtom from "../../recoil/leftOffTop";
 import { DEFAULT_LEFTOFF, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS } from '../../hooks/useWS';
 
@@ -70,34 +69,12 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
   const [wsReadyState, setWsReadyState] = useState(0);
 
-  const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
-
   const setLeftOffTop = useSetRecoilState(leftOffTopAtom);
   const scrollableRef = useRef(null);
 
-  const handleQueryChange = useMemo(
-    () =>
-      debounce(async (query: string) => {
-        if (!query) {
-          setQueryBackgroundColor("#f5f5f5");
-        } else {
-          const data = await trafficViewerApiProp.validateQuery(query);
-          if (!data) {
-            return;
-          }
-          if (data.valid) {
-            setQueryBackgroundColor("#d2fad2");
-          } else {
-            setQueryBackgroundColor("#fad6dc");
-          }
-        }
-      }, 500),
-    []
-  ) as (query: string) => void;
 
-  useEffect(() => {
-    handleQueryChange(query);
-  }, [query, handleQueryChange]);
+
+
 
   useEffect(() => {
     if(shouldCloseWebSocket){
@@ -262,7 +239,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
       {<div className={TrafficViewerStyles.TrafficPageContainer}>
         <div className={TrafficViewerStyles.TrafficPageListContainer}>
           <Filters
-            backgroundColor={queryBackgroundColor}
             reopenConnection={reopenConnection}
           />
           <div className={styles.container}>

ui-common/src/components/TrafficViewer/assets/spinner.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<circle cx="50" cy="50" fill="none" stroke="#1d3f72" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(275.903 50 50)">
-  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
-</circle>
-<!-- [ldio] generated by https://loading.io/ --></svg>

ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import collapsedImg from "assets/collapsed.svg";
-import expandedImg from "assets/expanded.svg";
-import styles from "./style/CollapsibleContainer.module.sass";
+import collapsedImg from "../assets/collapsed.svg";
+import expandedImg from "../assets/expanded.svg";
+import styles from "./CollapsibleContainer.module.sass";
 
 interface Props {
     title: string | React.ReactNode,

ui-common/src/components/UI/CustomModal/CustomModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { makeStyles, Modal, Backdrop, Fade, Box } from '@material-ui/core';
-import {useCommonStyles} from "../../helpers/commonStyle";
+import { Modal, Backdrop, Fade, Box } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import {useCommonStyles} from "../../../helpers/commonStyle";
 
 const useStyles = makeStyles({
     modal: {
@@ -9,10 +10,10 @@ const useStyles = makeStyles({
         justifyContent: "center"
     },
     modalContents: {
-        borderRadius: "5px",      
+        borderRadius: "5px",
         outline: "none",
         minWidth: "300px",
-        backgroundColor: "rgb(255, 255, 255)",       
+        backgroundColor: "rgb(255, 255, 255)",
     },
     modalBackdrop :{
         background : "rgba(24, 51, 121, 0.8)"
@@ -32,16 +33,16 @@ export interface CustomModalProps {
 const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className}) => {
     const classes = useStyles({});
     const globals = useCommonStyles().modal
-     
+
 
     const onModalClose = (reason) => {
         if(reason === 'backdropClick' && disableBackdropClick)
-            return;   
+            return;
         onClose();
     }
 
     return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)}
-                  className={`${classes.modal}`}     
+                  className={`${classes.modal}`}
                   closeAfterTransition
                   BackdropComponent={Backdrop}
                   BackdropProps={{
@@ -58,4 +59,4 @@ const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false,
             </Modal>
 }
 
-export default CustomModal;
+export default CustomModal;

ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import duplicateImg from "assets/duplicate.svg";
-import styles from './style/FancyTextDisplay.module.sass';
+import duplicateImg from "../assets/duplicate.svg";
+import styles from './FancyTextDisplay.module.sass';
 
 interface Props {
     text: string | number,

ui-common/src/components/UI/InformationIcon/InformationIcon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./style/InformationIcon.module.sass"
+import styles from "./InformationIcon.module.sass"
 
 const DEFUALT_LINK = "https://getmizu.io/docs"
 
@@ -19,4 +19,4 @@ export const InformationIcon: React.FC<LinkProps> = ({ className }) => {
     return <Link title="documentation" className={`${styles.linkStyle} ${className}`} link={DEFUALT_LINK}>
         <span>Docs</span>
     </Link>
-}
+}

ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import style from '../style/LoadingOverlay.module.sass';
+import style from './LoadingOverlay.module.sass';
 
 const SpinnerShowDelayMs = 350;
 

ui-common/src/components/UI/NoDataMessage/NoDataMessage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import circleImg from 'assets/dotted-circle.svg';
-import styles from './style/NoDataMessage.module.sass'
+import circleImg from '../assets/dotted-circle.svg';
+import styles from './NoDataMessage.module.sass'
 
 export interface Props {
     messageText: string;
@@ -10,7 +10,7 @@ const NoDataMessage: React.FC<Props> = ({ messageText = "No data found" }) => {
     return (
         <div data-cy="noDataMessage" className={styles.messageContainer__noData}>
             <div className={styles.container}>
-                <img src={circleImg} alt="No data Found"></img>
+                <img src={circleImg} alt="No data Found"/>
                 <div className={styles.messageContainer__noDataMessage}>{messageText}</div>
             </div>
         </div>

ui-common/src/components/UI/Protocol/Protocol.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styles from './style/Protocol.module.sass';
-import Queryable from "./Queryable";
+import styles from './Protocol.module.sass';
+import Queryable from "../Queryable/Queryable";
 
 export interface ProtocolInterface {
     name: string

ui-common/src/components/UI/Queryable/Queryable.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
-import QueryableStyle from './style/Queryable.module.sass';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import QueryableStyle from './Queryable.module.sass';
 import {useRecoilState} from "recoil";
-import queryAtom from "../../recoil/query";
+import queryAtom from "../../../recoil/query";
 
 interface Props {
     query: string,

ui-common/src/components/UI/Resizeable/Resizeable.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 
-import styles from './style/Resizeable.module.sass'
+import styles from './Resizeable.module.sass'
 
 export interface Props {
     children
@@ -56,4 +56,4 @@ const Resizeable: React.FC<Props> = ({ children, minWidth, maxWidth }) => {
     );
 };
 
-export default Resizeable;
+export default Resizeable;

ui-common/src/components/UI/SearchableDropdown/SearchableDropdown.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import { Autocomplete } from "@material-ui/lab";
-import { Checkbox, TextField } from "@material-ui/core";
-import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
-import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import makeStyles from '@mui/styles/makeStyles';
+import { Autocomplete } from "@mui/material";
+import { Checkbox, TextField } from "@mui/material";
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import DefaultIconDown from "DefaultIconDown.svg";
 import styles from "./SearchableDropdown.module.sass";
 
@@ -56,8 +56,9 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({ options, select
         onChange={(event, val) => onChange(val)}
         size={"small"}
         popupIcon={<img style={{ padding: 7 }} alt="iconDown" src={DefaultIconDown} />}
-        renderOption={(option, { selected }) => (
-            <div id={`option-${option}`} className={styles.optionItem}>
+        renderOption={(props, option, { selected }) => (
+            <li {...props}>
+            <div id={`option-${option}`} className={styles.optionItem} key={option}>
                 {multiple && <Checkbox
                     icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
                     checkedIcon={<CheckBoxIcon fontSize="small" />}
@@ -66,6 +67,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({ options, select
                 />}
                 <div title={option} className={styles.title}>{option}</div>
             </div>
+            </li>
         )}
         renderTags={() => <div className={styles.optionListItem}>
             <div title={selectedValues?.length > 0 ? `${selectedValues[0]} (+${selectedValues.length - 1})` : ""} className={styles.optionListItemTitle}>

ui-common/src/components/UI/Select/Select.tsx

@@ -1,8 +1,7 @@
-import {ReactComponent as DefaultIconDown} from './assets/default_icon_down.svg';
-import {MenuItem, Select as MUISelect} from '@material-ui/core';
+import {ReactComponent as DefaultIconDown} from '../assets/default_icon_down.svg';
+import {MenuItem, Select as MUISelect, SelectProps as MUISelectProps} from '@mui/material';
 import React from 'react';
-import {SelectProps as MUISelectProps} from '@material-ui/core/Select/Select';
-import styles from './style/Select.module.sass';
+import styles from './Select.module.sass';
 
 export const ALL_KEY= 'All';
 

ui-common/src/components/UI/SelectList/SelectList.module.sass

@@ -3,7 +3,7 @@
 
 .selectListTable
     user-select: none // when resizble moved we get unwanted beheviour
-    height: 100%
+    height: calc(100% - 53px)
 
     table
         width: 100%

ui-common/src/components/UI/SelectList/SelectList.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import Radio from "./Radio";
-import styles from './style/SelectList.module.sass'
-import NoDataMessage from "./NoDataMessage";
-import Checkbox from "./Checkbox";
-import { useCommonStyles } from "../../helpers/commonStyle";
+import Radio from "../Radio/Radio";
+import styles from './SelectList.module.sass'
+import NoDataMessage from "../NoDataMessage/NoDataMessage";
+import Checkbox from "../Checkbox/Checkbox";
+import { useCommonStyles } from "../../../helpers/commonStyle";
 
 
 export interface Props {
@@ -21,7 +21,7 @@ export interface Props {
 const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], multiSelect = true, setCheckedValues, tableClassName,
     checkBoxWidth = 50 ,inputSearchClass,isFilterable = true}) => {
     const commonClasses = useCommonStyles();
-    const [searchValue, setSearchValue] = useState("")  
+    const [searchValue, setSearchValue] = useState("")
     const noItemsMessage = "No items to show";
     const [headerChecked, setHeaderChecked] = useState(false)
 

ui-common/src/components/UI/StatusBar/StatusBar.tsx

@@ -1,11 +1,11 @@
-import style from './style/StatusBar.module.sass';
+import style from './StatusBar.module.sass';
 import React, {useState} from "react";
-import warningIcon from 'assets/warning_icon.svg';
-import failIcon from 'assets/failed.svg';
-import successIcon from 'assets/success.svg';
+import warningIcon from '../assets/warning_icon.svg';
+import failIcon from '../assets/failed.svg';
+import successIcon from '../assets/success.svg';
 import {useRecoilValue} from "recoil";
-import tappingStatusAtom, {tappingStatusDetails} from "../../recoil/tappingStatus";
-import Tooltip from "./Tooltip";
+import tappingStatusAtom, {tappingStatusDetails} from "../../../recoil/tappingStatus";
+import Tooltip from "../Tooltip/Tooltip";
 
 const pluralize = (noun: string, amount: number) => {
     return `${noun}${amount !== 1 ? 's' : ''}`

ui-common/src/components/UI/StatusCode/StatusCode.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styles from './style/StatusCode.module.sass';
-import Queryable from "./Queryable";
+import styles from './StatusCode.module.sass';
+import Queryable from "../Queryable/Queryable";
 
 export enum StatusCodeClassification {
     SUCCESS = "success",

ui-common/src/components/UI/Summary/Summary.tsx

@@ -1,7 +1,7 @@
-import miscStyles from "./style/misc.module.sass";
+import miscStyles from "./misc.module.sass";
 import React from "react";
-import styles from './style/Summary.module.sass';
-import Queryable from "./Queryable";
+import styles from './Summary.module.sass';
+import Queryable from "../Queryable/Queryable";
 
 interface SummaryProps {
     method: string

ui-common/src/components/UI/Tabs/Tabs.tsx

@@ -1,7 +1,9 @@
-import Tooltip from "./Tooltip";
+import Tooltip from "../Tooltip/Tooltip";
 import React from "react";
-import { makeStyles, Theme,createStyles } from '@material-ui/core/styles';
-import variables from '../../variables.module.scss';
+import { createStyles } from '@mui/styles';
+import { Theme } from '@mui/material/styles'
+import makeStyles from '@mui/styles/makeStyles';
+import variables from '../../../variables.module.scss';
 
 interface Tab {
     tab: string,

ui-common/src/components/UI/Tooltip/Tooltip.tsx

@@ -1,4 +1,5 @@
-import {Tooltip as MUITooltip, Fade, TooltipProps as MUITooltipProps, makeStyles} from "@material-ui/core";
+import {Tooltip as MUITooltip, Fade, TooltipProps as MUITooltipProps } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import React from "react";
 
 export interface TooltipProps extends MUITooltipProps {
@@ -36,7 +37,6 @@ const Tooltip: React.FC<TooltipProps> = (props) => {
     return (
         <MUITooltip
             classes={{tooltip: `${backgroundClass} ` + classes[variant]}}
-            interactive={true}
             enterDelay={200}
             TransitionComponent={Fade}
             {..._props}

ui-common/src/components/UI/index.ts

@@ -1,14 +1,13 @@
-import LoadingOverlay from "./LoadingOverlay";
-import { Select } from "./Select";
-import Tabs from "./Tabs";
-import Tooltip from "./Tooltip";
-import Checkbox from "./Checkbox"
-import { StatusBar } from "./StatusBar";
-import CustomModal from "./CustomModal";
-import { InformationIcon, Link } from "./InformationIcon";
-import SelectList from "./SelectList";
-import NoDataMessage from "./NoDataMessage";
+import LoadingOverlay from "./LoadingOverlay/LoadingOverlay";
+import { Select } from "./Select/Select";
+import Tabs from "./Tabs/Tabs";
+import Tooltip from "./Tooltip/Tooltip";
+import Checkbox from "./Checkbox/Checkbox"
+import { StatusBar } from "./StatusBar/StatusBar";
+import CustomModal from "./CustomModal/CustomModal";
+import { InformationIcon, Link } from "./InformationIcon/InformationIcon";
+import SelectList from "./SelectList/SelectList";
+import NoDataMessage from "./NoDataMessage/NoDataMessage";
 
-
-export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link }
-export { StatusBar }
+export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link };
+export { StatusBar }

ui-common/src/components/UI/style/FilterSelect.module.sass

@@ -1,3 +0,0 @@
-.SelectLabel
-    color: #8f9bb2
-    font-size: 11px

ui-common/src/components/UI/style/Spinner.module.sass

@@ -1,6 +0,0 @@
-@import "../../../variables.module"
-
-.spinnerContainer
-  display: flex
-  justify-content: center
-  margin-bottom: 10px

ui-common/src/components/modals/OasModal/OasModal.module.sass

@@ -1,4 +1,4 @@
-@import '../../variables.module.scss'
+@import '../../../variables.module'
 
 .closeIcon
     cursor: pointer

ui-common/src/components/modals/OasModal/OasModal.tsx

@@ -1,14 +1,14 @@
-import { Box, Fade, FormControl, Modal, Backdrop } from "@material-ui/core";
+import { Box, Fade, FormControl, Modal, Backdrop } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
-import closeIcon from "assets/closeIcon.svg";
+import closeIcon from "./assets/closeIcon.svg";
 import { toast } from 'react-toastify';
 import style from './OasModal.module.sass';
-import openApiLogo from 'assets/openApiLogo.png'
+import openApiLogo from './assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { TOAST_CONTAINER_ID } from "../../configs/Consts";
-import SearchableDropdown from "../UI/SearchableDropdown/SearchableDropdown";
+import { TOAST_CONTAINER_ID } from "../../../configs/Consts";
+import SearchableDropdown from "../../UI/SearchableDropdown/SearchableDropdown";
 
 
 const modalStyle = {
@@ -112,4 +112,4 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
   );
 };
 
-export default OasModal;
+export default OasModal;

ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass

@@ -1,5 +1,5 @@
-@import "../../variables.module"
-@import "../../components"
+@import "../../../variables.module"
+@import "../../../components"
 
 .closeIcon
   position: absolute
@@ -94,3 +94,8 @@
 
 .servicesFilterList
   height: calc(100% - 30px - 52px)
+
+.spinnerContainer
+  display: flex
+  justify-content: center
+  margin-bottom: 10px

ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.tsx

@@ -1,22 +1,21 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Box, Fade, Modal, Backdrop, Button } from "@material-ui/core";
+import { Box, Fade, Modal, Backdrop, Button } from "@mui/material";
 import { toast } from "react-toastify";
-import spinnerStyle from '../UI/style/Spinner.module.sass';
-import spinnerImg from 'assets/spinner.svg';
+import spinnerImg from '../../assets/spinner.svg';
 import Graph from "react-graph-vis";
 import debounce from 'lodash/debounce';
 import ServiceMapOptions from './ServiceMapOptions'
-import { useCommonStyles } from "../../helpers/commonStyle";
-import refreshIcon from "assets/refresh.svg";
-import filterIcon from "assets/filter-icon.svg";
-import filterIconClicked from "assets/filter-icon-clicked.svg";
-import closeIcon from "assets/close.svg"
+import { useCommonStyles } from "../../../helpers/commonStyle";
+import refreshIcon from "./assets/refresh.svg";
+import filterIcon from "./assets/filter-icon.svg";
+import filterIconClicked from "./assets/filter-icon-clicked.svg";
+import closeIcon from "./assets/close.svg"
 import styles from './ServiceMapModal.module.sass'
-import SelectList from "../UI/SelectList";
+import SelectList from "../../UI/SelectList/SelectList";
 import { GraphData, ServiceMapGraph } from "./ServiceMapModalTypes"
-import { Utils } from "../../helpers/Utils";
-import { TOAST_CONTAINER_ID } from "../../configs/Consts";
-import Resizeable from "../UI/Resizeable"
+import { Utils } from "../../../helpers/Utils";
+import { TOAST_CONTAINER_ID } from "../../../configs/Consts";
+import Resizeable from "../../UI/Resizeable/Resizeable"
 
 const modalStyle = {
     position: 'absolute',
@@ -244,7 +243,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                         <div className={styles.graphSection}>
                             <div style={{ display: "flex", justifyContent: "space-between" }}>
                             </div>
-                            {isLoading && <div className={spinnerStyle.spinnerContainer}>
+                            {isLoading && <div className={styles.spinnerContainer}>
                                 <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
                             </div>}
                             {!isLoading && <div style={{ height: "100%", width: "100%" }}>

ui-common/src/helpers/commonStyle.ts

@@ -1,5 +1,4 @@
-import { makeStyles } from "@material-ui/core";
-import variables from "../variables.module.scss"
+import makeStyles from '@mui/styles/makeStyles';
 
 // @ts-ignore
 export const useCommonStyles = makeStyles(() => ({

ui-common/src/index.tsx

@@ -2,9 +2,10 @@ import TrafficViewer from './components/TrafficViewer/TrafficViewer';
 import * as UI from "./components/UI"
 import { StatusBar } from './components/UI';
 import useWS, { DEFAULT_LEFTOFF } from './hooks/useWS';
-import OasModal from './components/OasModal/OasModal';
-import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal';
+import OasModal from './components/modals/OasModal/OasModal';
+import { ServiceMapModal } from './components/modals/ServiceMapModal/ServiceMapModal';
 
+export { CodeEditorWrap as QueryForm } from './components/Filters/Filters';
 export { UI, StatusBar, OasModal, ServiceMapModal }
 export { useWS, DEFAULT_LEFTOFF }
 export default TrafficViewer;

ui-common/src/recoil/TrafficViewerApi/atom.ts

@@ -3,7 +3,7 @@ import TrafficViewerApi from "../../components/TrafficViewer/TrafficViewerApi";
 
 const TrafficViewerApiAtom = atom({
     key: "TrafficViewerApiAtom",
-    default: {} as TrafficViewerApi
+    default: {}
 });
 
 export default TrafficViewerApiAtom;

ui/craco.config.js

@@ -13,7 +13,8 @@ module.exports = {
                 instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
 
             webpackConfig.resolve.alias['react']= path.resolve(__dirname, 'node_modules/react'); // solve 2  react instances
-            webpackConfig.resolve.alias['@material-ui/styles']= path.resolve("node_modules", "@material-ui/styles");
+            webpackConfig.resolve.alias['@emotion/react']= path.resolve("node_modules", "@emotion/react");
+            webpackConfig.resolve.alias['@mui/styles']= path.resolve("node_modules", "@mui/styles");
 
             return webpackConfig;
         }

ui/package.json

@@ -4,14 +4,15 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.2",
+    "@mui/styles": "^5.8.0",
     "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.52",
+    "@types/node": "^12.20.54",
     "@uiw/react-textarea-code-editor": "^1.6.0",
     "@up9/mizu-common": "file:up9-mizu-common-0.0.0.tgz",
-    "axios": "^0.25.0",
+    "axios": "^0.27.2",
     "core-js": "^3.22.7",
     "craco-babel-loader": "^1.0.3",
     "highlight.js": "^11.5.1",
@@ -33,10 +34,10 @@
     "react-scrollable-feed-virtualized": "^1.4.9",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^8.2.0",
-    "redoc": "^2.0.0-rc.59",
+    "redoc": "^2.0.0-rc.71",
     "styled-components": "^5.3.5",
     "typescript": "^4.7.2",
-    "web-vitals": "^1.1.2",
+    "web-vitals": "^2.1.4",
     "xml-formatter": "^2.6.1"
   },
   "devDependencies": {
@@ -45,7 +46,7 @@
     "react-app-rewire-alias": "^1.1.7",
     "react-dev-utils": "^12.0.1",
     "react-error-overlay": "6.0.9",
-    "recoil": "^0.5.2"
+    "recoil": "^0.7.2"
   },
   "scripts": {
     "prestart": "../devops/ui-common-pack.sh $PWD",

ui/src/App.tsx

@@ -7,6 +7,7 @@ import serviceMapModalOpenAtom from "./recoil/serviceMapModalOpen";
 import oasModalOpenAtom from './recoil/oasModalOpen/atom';
 import { OasModal } from '@up9/mizu-common';
 import Api from './helpers/api';
+import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material';
 
 const api = Api.getInstance()
 
@@ -16,21 +17,25 @@ const App = () => {
     const [oasModalOpen, setOasModalOpen] = useRecoilState(oasModalOpenAtom)
 
     return (
-        <div className="mizuApp">
-            <Header />
-            <TrafficPage />
-            {window["isServiceMapEnabled"] && <ServiceMapModal
-                isOpen={serviceMapModalOpen}
-                onOpen={() => setServiceMapModalOpen(true)}
-                onClose={() => setServiceMapModalOpen(false)}
-                getServiceMapDataApi={api.serviceMapData} />}
-            {window["isOasEnabled"] && <OasModal
-                getOasServices={api.getOasServices}
-                getOasByService={api.getOasByService}
-                openModal={oasModalOpen}
-                handleCloseModal={() => setOasModalOpen(false)}
-            />}
-        </div>
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={createTheme(({}))}>
+                <div className="mizuApp">
+                    <Header />
+                    <TrafficPage />
+                    {window["isServiceMapEnabled"] && <ServiceMapModal
+                        isOpen={serviceMapModalOpen}
+                        onOpen={() => setServiceMapModalOpen(true)}
+                        onClose={() => setServiceMapModalOpen(false)}
+                        getServiceMapDataApi={api.serviceMapData} />}
+                    {window["isOasEnabled"] && <OasModal
+                        getOasServices={api.getOasServices}
+                        getOasByService={api.getOasByService}
+                        openModal={oasModalOpen}
+                        handleCloseModal={() => setOasModalOpen(false)}
+                    />}
+                </div>
+            </ThemeProvider>
+        </StyledEngineProvider>
     );
 }
 

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import Api, { MizuWebsocketURL } from "../../../helpers/api";
 import debounce from 'lodash/debounce';
 import { useRecoilState } from "recoil";