From 80418f1802aafe8cca0f852217e7f6bc2dbbb460 Mon Sep 17 00:00:00 2001 From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com> Date: Tue, 25 Jan 2022 10:45:07 +0200 Subject: [PATCH] TRA-4205 React router (#684) * React router * removed comment --- ui/package-lock.json | 58 ++++++++++++ ui/package.json | 1 + ui/src/App.tsx | 33 ++----- ui/src/EntApp.tsx | 94 ++----------------- ui/src/components/AppSwitchRoutes.tsx | 80 ++++++++++++++++ ui/src/components/Header/EntHeader.tsx | 5 +- ui/src/components/Header/Header.sass | 3 + .../AuthPage}/AuthBasePage.sass | 2 +- .../{ => Pages/AuthPage}/AuthPageBase.tsx | 8 +- .../{ => Pages/AuthPage}/InstallPage.tsx | 14 +-- .../{ => Pages/AuthPage}/LoginPage.tsx | 12 +-- .../Pages/SystemViewer/SystemViewer.tsx | 23 +++++ .../TrafficPage}/TrafficPage.sass | 2 +- .../{ => Pages/TrafficPage}/TrafficPage.tsx | 66 ++++++++----- ui/src/helpers/routes.ts | 5 + ui/src/index.tsx | 35 ++++--- ui/src/recoil/serviceMapModalOpen/atom.ts | 8 ++ ui/src/recoil/serviceMapModalOpen/index.ts | 2 + 18 files changed, 275 insertions(+), 176 deletions(-) create mode 100644 ui/src/components/AppSwitchRoutes.tsx rename ui/src/components/{style => Pages/AuthPage}/AuthBasePage.sass (97%) rename ui/src/components/{ => Pages/AuthPage}/AuthPageBase.tsx (70%) rename ui/src/components/{ => Pages/AuthPage}/InstallPage.tsx (87%) rename ui/src/components/{ => Pages/AuthPage}/LoginPage.tsx (85%) create mode 100644 ui/src/components/Pages/SystemViewer/SystemViewer.tsx rename ui/src/components/{style => Pages/TrafficPage}/TrafficPage.sass (98%) rename ui/src/components/{ => Pages/TrafficPage}/TrafficPage.tsx (83%) create mode 100644 ui/src/helpers/routes.ts create mode 100644 ui/src/recoil/serviceMapModalOpen/atom.ts create mode 100644 ui/src/recoil/serviceMapModalOpen/index.ts diff --git a/ui/package-lock.json b/ui/package-lock.json index 78f30c9c6..b980d090b 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -38,6 +38,7 @@ "react-dom": "^17.0.2", "react-graph-vis": "^1.0.7", "react-lowlight": "^3.0.0", + "react-router-dom": "^6.2.1", "react-scrollable-feed-virtualized": "^1.4.9", "react-syntax-highlighter": "^15.4.3", "react-toastify": "^8.0.3", @@ -11790,6 +11791,14 @@ "node": ">=12.0.0" } }, + "node_modules/history": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz", + "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -19663,6 +19672,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", + "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz", + "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.2.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", @@ -35700,6 +35733,14 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.3.1.tgz", "integrity": "sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==" }, + "history": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz", + "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -41850,6 +41891,23 @@ "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==", "peer": true }, + "react-router": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", + "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz", + "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==", + "requires": { + "history": "^5.2.0", + "react-router": "6.2.1" + } + }, "react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", diff --git a/ui/package.json b/ui/package.json index 84730a74d..06baecb42 100644 --- a/ui/package.json +++ b/ui/package.json @@ -33,6 +33,7 @@ "react-dom": "^17.0.2", "react-graph-vis": "^1.0.7", "react-lowlight": "^3.0.0", + "react-router-dom": "^6.2.1", "react-scrollable-feed-virtualized": "^1.4.9", "react-syntax-highlighter": "^15.4.3", "react-toastify": "^8.0.3", diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 465128cda..75f5063ef 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,41 +1,24 @@ import React, {useState} from 'react'; import './App.sass'; -import {TLSWarning} from "./components/TLSWarning/TLSWarning"; import {Header} from "./components/Header/Header"; -import {TrafficPage} from "./components/TrafficPage"; +import {TrafficPage} from "./components/Pages/TrafficPage/TrafficPage"; import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal'; +import {useRecoilState} from "recoil"; +import serviceMapModalOpenAtom from "./recoil/serviceMapModalOpen"; const App = () => { const [analyzeStatus, setAnalyzeStatus] = useState(null); - const [showTLSWarning, setShowTLSWarning] = useState(false); - const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false); - const [addressesWithTLS, setAddressesWithTLS] = useState(new Set()); - const [openServiceMapModal, setOpenServiceMapModal] = useState(false); - - const onTLSDetected = (destAddress: string) => { - addressesWithTLS.add(destAddress); - setAddressesWithTLS(new Set(addressesWithTLS)); - - if (!userDismissedTLSWarning) { - setShowTLSWarning(true); - } - }; + const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom); return (
- - + {window["isServiceMapEnabled"] && setOpenServiceMapModal(true)} - onClose={() => setOpenServiceMapModal(false)} + isOpen={serviceMapModalOpen} + onOpen={() => setServiceMapModalOpen(true)} + onClose={() => setServiceMapModalOpen(false)} />}
); diff --git a/ui/src/EntApp.tsx b/ui/src/EntApp.tsx index 9a22b60c6..3419ce228 100644 --- a/ui/src/EntApp.tsx +++ b/ui/src/EntApp.tsx @@ -1,97 +1,15 @@ -import React, {useCallback, useEffect, useState} from 'react'; +import React from 'react'; import './App.sass'; -import {TrafficPage} from "./components/TrafficPage"; -import {TLSWarning} from "./components/TLSWarning/TLSWarning"; -import {EntHeader} from "./components/Header/EntHeader"; -import Api from "./helpers/api"; -import {toast} from "react-toastify"; -import InstallPage from "./components/InstallPage"; -import LoginPage from "./components/LoginPage"; -import LoadingOverlay from "./components/LoadingOverlay"; -import AuthPageBase from './components/AuthPageBase'; -import entPageAtom, {Page} from "./recoil/entPage"; -import {useRecoilState} from "recoil"; -import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal'; - -const api = Api.getInstance(); +import AppSwitchRoutes from "./components/AppSwitchRoutes"; +import {BrowserRouter} from "react-router-dom"; const EntApp = () => { - const [isLoading, setIsLoading] = useState(true); - const [showTLSWarning, setShowTLSWarning] = useState(false); - const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false); - const [addressesWithTLS, setAddressesWithTLS] = useState(new Set()); - const [entPage, setEntPage] = useRecoilState(entPageAtom); - const [isFirstLogin, setIsFirstLogin] = useState(false); - const [openServiceMapModal, setOpenServiceMapModal] = useState(false); - - const determinePage = useCallback(async () => { // TODO: move to state management - try { - const isInstallNeeded = await api.isInstallNeeded(); - if (isInstallNeeded) { - setEntPage(Page.Setup); - } else { - const isAuthNeeded = await api.isAuthenticationNeeded(); - if(isAuthNeeded) { - setEntPage(Page.Login); - } - } - } catch (e) { - toast.error("Error occured while checking Mizu API status, see console for mode details"); - console.error(e); - } finally { - setIsLoading(false); - } - },[setEntPage]); - - useEffect(() => { - determinePage(); - }, [determinePage]); - - const onTLSDetected = (destAddress: string) => { - addressesWithTLS.add(destAddress); - setAddressesWithTLS(new Set(addressesWithTLS)); - - if (!userDismissedTLSWarning) { - setShowTLSWarning(true); - } - }; - - let pageComponent: any; - - switch (entPage) { // TODO: move to state management / proper routing - case Page.Traffic: - pageComponent = ; - break; - case Page.Setup: - pageComponent = setIsFirstLogin(true)}/>; - break; - case Page.Login: - pageComponent = ; - break; - default: - pageComponent =
Unknown Error
; - } - - if (isLoading) { - return ; - } - return (
- {entPage === Page.Traffic && } - {pageComponent} - {entPage === Page.Traffic && } - {entPage === Page.Traffic && window["isServiceMapEnabled"] && setOpenServiceMapModal(true)} - onClose={() => setOpenServiceMapModal(false)} - />} + + +
); } diff --git a/ui/src/components/AppSwitchRoutes.tsx b/ui/src/components/AppSwitchRoutes.tsx new file mode 100644 index 000000000..29f623b1a --- /dev/null +++ b/ui/src/components/AppSwitchRoutes.tsx @@ -0,0 +1,80 @@ +import React, {useCallback, useEffect, useState} from "react"; +import {Route, Routes, useNavigate} from "react-router-dom"; +import {RouterRoutes} from "../helpers/routes"; +import {useRecoilState} from "recoil"; +import entPageAtom, {Page} from "../recoil/entPage"; +import {toast} from "react-toastify"; +import AuthPageBase from "./Pages/AuthPage/AuthPageBase"; +import InstallPage from "./Pages/AuthPage/InstallPage"; +import LoginPage from "./Pages/AuthPage/LoginPage"; +import LoadingOverlay from "./LoadingOverlay"; +import SystemViewer from "./Pages/SystemViewer/SystemViewer"; +import Api from "../helpers/api"; +import {TrafficPage} from "./Pages/TrafficPage/TrafficPage"; + +const api = Api.getInstance(); + +const AppSwitchRoutes = () => { + + const navigate = useNavigate(); + + const [isLoading, setIsLoading] = useState(true); + const [entPage, setEntPage] = useRecoilState(entPageAtom); + const [isFirstLogin, setIsFirstLogin] = useState(false); + + const determinePage = useCallback(async () => { + try { + const isInstallNeeded = await api.isInstallNeeded(); + if (isInstallNeeded) { + setEntPage(Page.Setup); + } else { + const isAuthNeeded = await api.isAuthenticationNeeded(); + if(isAuthNeeded) { + setEntPage(Page.Login); + } + } + } catch (e) { + toast.error("Error occured while checking Mizu API status, see console for mode details"); + console.error(e); + } finally { + setIsLoading(false); + } + },[setEntPage]); + + useEffect(() => { + determinePage(); + }, [determinePage]); + + useEffect(() => { + switch (entPage) { + case Page.Traffic: + navigate("/"); + break; + case Page.Setup: + navigate(RouterRoutes.SETUP); + break; + case Page.Login: + navigate(RouterRoutes.LOGIN); + break; + default: + navigate(RouterRoutes.LOGIN); + } + // eslint-disable-next-line + },[entPage]) + + + if (isLoading) { + return ; + } + + return + }> + } /> + } /> {/*todo: set settings component*/} + + }/> + setIsFirstLogin(true)}/>}/> + +} + +export default AppSwitchRoutes; diff --git a/ui/src/components/Header/EntHeader.tsx b/ui/src/components/Header/EntHeader.tsx index b67e76d01..3f79225a2 100644 --- a/ui/src/components/Header/EntHeader.tsx +++ b/ui/src/components/Header/EntHeader.tsx @@ -11,6 +11,7 @@ import Api from "../../helpers/api"; import {toast} from "react-toastify"; import {useSetRecoilState} from "recoil"; import entPageAtom, {Page} from "../../recoil/entPage"; +import {useNavigate} from "react-router-dom"; const api = Api.getInstance(); @@ -20,7 +21,7 @@ interface EntHeaderProps { } export const EntHeader: React.FC = ({isFirstLogin, setIsFirstLogin}) => { - + const navigate = useNavigate(); const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); useEffect(() => { @@ -37,7 +38,7 @@ export const EntHeader: React.FC = ({isFirstLogin, setIsFirstLog return
- logo + logo navigate("/")}/>
diff --git a/ui/src/components/Header/Header.sass b/ui/src/components/Header/Header.sass index dfc2c4cad..acbffff05 100644 --- a/ui/src/components/Header/Header.sass +++ b/ui/src/components/Header/Header.sass @@ -21,3 +21,6 @@ .headerIcon cursor: pointer + + .entLogo + cursor: pointer diff --git a/ui/src/components/style/AuthBasePage.sass b/ui/src/components/Pages/AuthPage/AuthBasePage.sass similarity index 97% rename from ui/src/components/style/AuthBasePage.sass rename to ui/src/components/Pages/AuthPage/AuthBasePage.sass index 776978606..9407a42d1 100644 --- a/ui/src/components/style/AuthBasePage.sass +++ b/ui/src/components/Pages/AuthPage/AuthBasePage.sass @@ -1,4 +1,4 @@ -@import "../../variables.module" +@import "src/variables.module" .authContainer height: 100vh diff --git a/ui/src/components/AuthPageBase.tsx b/ui/src/components/Pages/AuthPage/AuthPageBase.tsx similarity index 70% rename from ui/src/components/AuthPageBase.tsx rename to ui/src/components/Pages/AuthPage/AuthPageBase.tsx index cceab632e..d44a660e7 100644 --- a/ui/src/components/AuthPageBase.tsx +++ b/ui/src/components/Pages/AuthPage/AuthPageBase.tsx @@ -1,8 +1,8 @@ import React from "react"; -import background from "./assets/authBackground.png"; -import logo from './assets/MizuEntLogoNoPowBy.svg'; -import poweredBy from './assets/powered-by.svg' -import "./style/AuthBasePage.sass"; +import background from "../../assets/authBackground.png"; +import logo from '../../assets/MizuEntLogoNoPowBy.svg'; +import poweredBy from '../../assets/powered-by.svg' +import "./AuthBasePage.sass"; export const AuthPageBase: React.FC = ({children}) => { diff --git a/ui/src/components/InstallPage.tsx b/ui/src/components/Pages/AuthPage/InstallPage.tsx similarity index 87% rename from ui/src/components/InstallPage.tsx rename to ui/src/components/Pages/AuthPage/InstallPage.tsx index 7eeca68ba..5565c2299 100644 --- a/ui/src/components/InstallPage.tsx +++ b/ui/src/components/Pages/AuthPage/InstallPage.tsx @@ -1,14 +1,14 @@ import { Button } from "@material-ui/core"; import React, { useState,useRef } from "react"; -import { adminUsername } from "../consts"; -import Api, { FormValidationErrorType } from "../helpers/api"; +import { adminUsername } from "../../../consts"; +import Api, { FormValidationErrorType } from "../../../helpers/api"; import { toast } from 'react-toastify'; -import LoadingOverlay from "./LoadingOverlay"; -import { useCommonStyles } from "../helpers/commonStyle"; +import LoadingOverlay from "../../LoadingOverlay"; +import { useCommonStyles } from "../../../helpers/commonStyle"; import {useSetRecoilState} from "recoil"; -import entPageAtom, {Page} from "../recoil/entPage"; -import useKeyPress from "../hooks/useKeyPress" -import shortcutsKeyboard from "../configs/shortcutsKeyboard" +import entPageAtom, {Page} from "../../../recoil/entPage"; +import useKeyPress from "../../../hooks/useKeyPress" +import shortcutsKeyboard from "../../../configs/shortcutsKeyboard" const api = Api.getInstance(); diff --git a/ui/src/components/LoginPage.tsx b/ui/src/components/Pages/AuthPage/LoginPage.tsx similarity index 85% rename from ui/src/components/LoginPage.tsx rename to ui/src/components/Pages/AuthPage/LoginPage.tsx index f6e8537de..b7a3c96bd 100644 --- a/ui/src/components/LoginPage.tsx +++ b/ui/src/components/Pages/AuthPage/LoginPage.tsx @@ -1,13 +1,13 @@ import { Button } from "@material-ui/core"; import React, { useState,useRef } from "react"; import { toast } from "react-toastify"; -import Api from "../helpers/api"; -import { useCommonStyles } from "../helpers/commonStyle"; -import LoadingOverlay from "./LoadingOverlay"; -import entPageAtom, {Page} from "../recoil/entPage"; +import Api from "../../../helpers/api"; +import { useCommonStyles } from "../../../helpers/commonStyle"; +import LoadingOverlay from "../../LoadingOverlay"; +import entPageAtom, {Page} from "../../../recoil/entPage"; import {useSetRecoilState} from "recoil"; -import useKeyPress from "../hooks/useKeyPress" -import shortcutsKeyboard from "../configs/shortcutsKeyboard" +import useKeyPress from "../../../hooks/useKeyPress" +import shortcutsKeyboard from "../../../configs/shortcutsKeyboard" const api = Api.getInstance(); diff --git a/ui/src/components/Pages/SystemViewer/SystemViewer.tsx b/ui/src/components/Pages/SystemViewer/SystemViewer.tsx new file mode 100644 index 000000000..84cbdda8b --- /dev/null +++ b/ui/src/components/Pages/SystemViewer/SystemViewer.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import {Outlet} from "react-router-dom"; +import {ServiceMapModal} from "../../ServiceMapModal/ServiceMapModal"; +import {EntHeader} from "../../Header/EntHeader"; +import {useRecoilState} from "recoil"; +import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen"; + +const SystemViewer = ({isFirstLogin, setIsFirstLogin}) => { + + const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom); + + return <> + + + {window["isServiceMapEnabled"] && setServiceMapModalOpen(true)} + onClose={() => setServiceMapModalOpen(false)} + />} + +} + +export default SystemViewer; diff --git a/ui/src/components/style/TrafficPage.sass b/ui/src/components/Pages/TrafficPage/TrafficPage.sass similarity index 98% rename from ui/src/components/style/TrafficPage.sass rename to ui/src/components/Pages/TrafficPage/TrafficPage.sass index b684cd6fc..8f0e28c66 100644 --- a/ui/src/components/style/TrafficPage.sass +++ b/ui/src/components/Pages/TrafficPage/TrafficPage.sass @@ -1,4 +1,4 @@ -@import '../../variables.module.scss' +@import 'src/variables.module' .TrafficPage width: 100% diff --git a/ui/src/components/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx similarity index 83% rename from ui/src/components/TrafficPage.tsx rename to ui/src/components/Pages/TrafficPage/TrafficPage.tsx index 9a0ddb529..9ccb729c1 100644 --- a/ui/src/components/TrafficPage.tsx +++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx @@ -1,25 +1,27 @@ import React, { useEffect, useMemo, useRef, useState } from "react"; -import { Filters } from "./Filters"; -import { EntriesList } from "./EntriesList"; +import { Filters } from "../../Filters"; +import { EntriesList } from "../../EntriesList"; import { makeStyles, Button } from "@material-ui/core"; -import "./style/TrafficPage.sass"; -import styles from './style/EntriesList.module.sass'; -import {EntryDetailed} from "./EntryDetailed"; -import playIcon from './assets/run.svg'; -import pauseIcon from './assets/pause.svg'; -import variables from '../variables.module.scss'; -import {StatusBar} from "./UI/StatusBar"; -import Api, {MizuWebsocketURL} from "../helpers/api"; +import "./TrafficPage.sass"; +import styles from '../../style/EntriesList.module.sass'; +import {EntryDetailed} from "../../EntryDetailed"; +import playIcon from '../../assets/run.svg'; +import pauseIcon from '../../assets/pause.svg'; +import variables from '../../../variables.module.scss'; +import {StatusBar} from "../../UI/StatusBar"; +import Api, {MizuWebsocketURL} from "../../../helpers/api"; import { toast } from 'react-toastify'; import debounce from 'lodash/debounce'; -import {useRecoilState, useRecoilValue} from "recoil"; -import tappingStatusAtom from "../recoil/tappingStatus"; -import entriesAtom from "../recoil/entries"; -import focusedEntryIdAtom from "../recoil/focusedEntryId"; -import websocketConnectionAtom, {WsConnectionStatus} from "../recoil/wsConnection"; -import queryAtom from "../recoil/query"; -import OasModal from "./OasModal/OasModal"; -import {useCommonStyles} from "../helpers/commonStyle" +import {useRecoilState, useRecoilValue, useSetRecoilState} from "recoil"; +import tappingStatusAtom from "../../../recoil/tappingStatus"; +import entriesAtom from "../../../recoil/entries"; +import focusedEntryIdAtom from "../../../recoil/focusedEntryId"; +import websocketConnectionAtom, {WsConnectionStatus} from "../../../recoil/wsConnection"; +import queryAtom from "../../../recoil/query"; +import OasModal from "../../OasModal/OasModal"; +import {useCommonStyles} from "../../../helpers/commonStyle" +import {TLSWarning} from "../../TLSWarning/TLSWarning"; +import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen"; const useLayoutStyles = makeStyles(() => ({ details: { @@ -43,19 +45,18 @@ const useLayoutStyles = makeStyles(() => ({ interface TrafficPageProps { setAnalyzeStatus?: (status: any) => void; - onTLSDetected: (destAddress: string) => void; - setOpenServiceMapModal?: (open: boolean) => void; } const api = Api.getInstance(); -export const TrafficPage: React.FC = ({setAnalyzeStatus,onTLSDetected, setOpenServiceMapModal}) => { +export const TrafficPage: React.FC = ({setAnalyzeStatus}) => { const commonClasses = useCommonStyles(); const classes = useLayoutStyles(); const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom); const [entries, setEntries] = useRecoilState(entriesAtom); const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom); const [wsConnection, setWsConnection] = useRecoilState(websocketConnectionAtom); + const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom); const query = useRecoilValue(queryAtom); const [noMoreDataTop, setNoMoreDataTop] = useState(false); @@ -76,6 +77,10 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus,onTLSD const handleOpenModal = () => setOpenOasModal(true); const handleCloseModal = () => setOpenOasModal(false); + const [showTLSWarning, setShowTLSWarning] = useState(false); + const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false); + const [addressesWithTLS, setAddressesWithTLS] = useState(new Set()); + const handleQueryChange = useMemo( () => debounce(async (query: string) => { @@ -216,6 +221,15 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus,onTLSD } } + const onTLSDetected = (destAddress: string) => { + addressesWithTLS.add(destAddress); + setAddressesWithTLS(new Set(addressesWithTLS)); + + if (!userDismissedTLSWarning) { + setShowTLSWarning(true); + } + }; + const getConnectionStatusClass = (isContainer) => { const container = isContainer ? "Container" : ""; switch (wsConnection) { @@ -225,7 +239,7 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus,onTLSD return "redIndicator" + container; } } - + const getConnectionTitle = () => { switch (wsConnection) { case WsConnectionStatus.Connected: @@ -243,7 +257,7 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus,onTLSD } const openServiceMapModalDebounce = debounce(() => { - setOpenServiceMapModal(true) + setServiceMapModalOpen(true) }, 500); return ( @@ -320,6 +334,12 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus,onTLSD
} {tappingStatus && !openOasModal && } + ); }; diff --git a/ui/src/helpers/routes.ts b/ui/src/helpers/routes.ts new file mode 100644 index 000000000..ecd81c030 --- /dev/null +++ b/ui/src/helpers/routes.ts @@ -0,0 +1,5 @@ +export enum RouterRoutes { + LOGIN = "/login", + SETUP = "/setup", + SETTINGS = "/settings" +} diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 95a868313..f1efbbf31 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -6,23 +6,20 @@ import 'react-toastify/dist/ReactToastify.css'; import {RecoilRoot} from "recoil"; import AppChooser from "./AppChooser"; -ReactDOM.render( - - <> - - - - - - , +ReactDOM.render( <> + + + + +, document.getElementById('root')); diff --git a/ui/src/recoil/serviceMapModalOpen/atom.ts b/ui/src/recoil/serviceMapModalOpen/atom.ts new file mode 100644 index 000000000..181255bbb --- /dev/null +++ b/ui/src/recoil/serviceMapModalOpen/atom.ts @@ -0,0 +1,8 @@ +import { atom } from "recoil" + +const serviceMapModalOpenAtom = atom({ + key: "serviceMapModalOpenAtom", + default: false +}) + +export default serviceMapModalOpenAtom; diff --git a/ui/src/recoil/serviceMapModalOpen/index.ts b/ui/src/recoil/serviceMapModalOpen/index.ts new file mode 100644 index 000000000..5d094a22c --- /dev/null +++ b/ui/src/recoil/serviceMapModalOpen/index.ts @@ -0,0 +1,2 @@ +import atom from "./atom"; +export default atom;