diff --git a/ui/src/App.sass b/ui/src/App.sass index 0bc2e9505..c9c6ae28a 100644 --- a/ui/src/App.sass +++ b/ui/src/App.sass @@ -23,16 +23,3 @@ font-size: 11px font-weight: bold color: $light-blue-color - - .httpsDomains - display: none - margin: 0 - padding: 0 - list-style: none - - .customWarningStyle - &:hover - overflow-y: scroll - height: 85px - .httpsDomains - display: block diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 8f654a325..8e6ab26e1 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,51 +1,15 @@ -import React, {useEffect, useState} from 'react'; +import React, {useState} from 'react'; import './App.sass'; -import logo from './components/assets/Mizu-logo.svg'; -import logo_up9 from './components/assets/logo_up9.svg'; -import {Button, Snackbar} from "@material-ui/core"; import {TrafficPage} from "./components/TrafficPage"; -import Tooltip from "./components/UI/Tooltip"; -import {makeStyles} from "@material-ui/core/styles"; -import MuiAlert from '@material-ui/lab/Alert'; -import Api from "./helpers/api"; - - -const useStyles = makeStyles(() => ({ - tooltip: { - backgroundColor: "#3868dc", - color: "white", - fontSize: 13, - }, -})); - -const api = new Api(); +import {TLSWarning} from "./components/TLSWarning/TLSWarning"; +import {Header} from "./components/Header/Header"; const App = () => { - const classes = useStyles(); - const [analyzeStatus, setAnalyzeStatus] = useState(null); const [showTLSWarning, setShowTLSWarning] = useState(false); const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false); - const [addressesWithTLS, setAddressesWithTLS] = useState(new Set()); - const [statusAuth, setStatusAuth] = useState(null); - - useEffect(() => { - (async () => { - try { - const recentTLSLinks = await api.getRecentTLSLinks(); - if (recentTLSLinks?.length > 0) { - setAddressesWithTLS(new Set(recentTLSLinks)); - setShowTLSWarning(true); - } - const auth = await api.getAuthStatus(); - setStatusAuth(auth); - } catch (e) { - console.error(e); - } - - })(); - }, []); + const [addressesWithTLS, setAddressesWithTLS] = useState(new Set()); const onTLSDetected = (destAddress: string) => { addressesWithTLS.add(destAddress); @@ -56,96 +20,16 @@ const App = () => { } }; - const analysisMessage = analyzeStatus?.isRemoteReady ? - - - - - - - - - - -
StatusAvailable
Messages{analyzeStatus?.sentCount}
- : - analyzeStatus?.sentCount > 0 ? - - - - - - - - - - - - - -
StatusProcessing
Messages{analyzeStatus?.sentCount}
Please allow a few minutes for the analysis to complete
- : - - - - - - - - - - -
StatusWaiting for traffic
Messages{analyzeStatus?.sentCount}
- - - return (
-
-
-
logo
-
Traffic viewer for Kubernetes
-
-
- - {analyzeStatus?.isAnalyzing && -
- -
- -
- -
- } - {statusAuth?.email &&
-
-
{statusAuth.email}
-
{statusAuth.model}
-
-
} -
-
+
- - setUserDismissedTLSWarning(true)} severity="warning"> - Mizu is detecting TLS traffic, this type of traffic will not be displayed. - {addressesWithTLS.size > 0 &&
    {Array.from(addressesWithTLS, address =>
  • {address}
    • )}
} - - +
); } diff --git a/ui/src/components/AnalyzeButton/AnalyzeButton.tsx b/ui/src/components/AnalyzeButton/AnalyzeButton.tsx new file mode 100644 index 000000000..4f6e0f45b --- /dev/null +++ b/ui/src/components/AnalyzeButton/AnalyzeButton.tsx @@ -0,0 +1,86 @@ +import {Button} from "@material-ui/core"; +import React from "react"; +import Tooltip from "../UI/Tooltip"; +import logo_up9 from "../assets/logo_up9.svg"; +import {makeStyles} from "@material-ui/core/styles"; + +const useStyles = makeStyles(() => ({ + tooltip: { + backgroundColor: "#3868dc", + color: "white", + fontSize: 13, + }, +})); + +interface AnalyseButtonProps { + analyzeStatus: any +} + +export const AnalyzeButton: React.FC = ({analyzeStatus}) => { + + const classes = useStyles(); + + const analysisMessage = analyzeStatus?.isRemoteReady ? + + + + + + + + + + +
StatusAvailable
Messages{analyzeStatus?.sentCount}
+ : + analyzeStatus?.sentCount > 0 ? + + + + + + + + + + + + + +
StatusProcessing
Messages{analyzeStatus?.sentCount}
Please allow a few minutes for the analysis to complete
+ : + + + + + + + + + + +
StatusWaiting for traffic
Messages{analyzeStatus?.sentCount}
+ + + return (
+ +
+ +
+ +
); +} diff --git a/ui/src/components/AuthPresentation/AuthPresentation.sass b/ui/src/components/AuthPresentation/AuthPresentation.sass new file mode 100644 index 000000000..2d973ec0c --- /dev/null +++ b/ui/src/components/AuthPresentation/AuthPresentation.sass @@ -0,0 +1,13 @@ +.authPresentationContainer + display: flex + border-left: 2px #87878759 solid + padding-left: 10px + margin-left: 10px + color: rgba(0,0,0,0.75) + + .authEmail + font-weight: 600 + font-size: 13px + + .authModel + font-size: 11px diff --git a/ui/src/components/AuthPresentation/AuthPresentation.tsx b/ui/src/components/AuthPresentation/AuthPresentation.tsx new file mode 100644 index 000000000..8efa739ea --- /dev/null +++ b/ui/src/components/AuthPresentation/AuthPresentation.tsx @@ -0,0 +1,30 @@ +import React, {useEffect, useState} from "react"; +import Api from "../../helpers/api"; +import './AuthPresentation.sass'; + +const api = new Api(); + +export const AuthPresentation = () => { + + const [statusAuth, setStatusAuth] = useState(null); + + useEffect(() => { + (async () => { + try { + const auth = await api.getAuthStatus(); + setStatusAuth(auth); + } catch (e) { + console.error(e); + } + })(); + }, []); + + return <> + {statusAuth?.email &&
+
+
{statusAuth.email}
+
{statusAuth.model}
+
+
} + ; +} diff --git a/ui/src/components/Header/Header.tsx b/ui/src/components/Header/Header.tsx new file mode 100644 index 000000000..7fa7d4a9d --- /dev/null +++ b/ui/src/components/Header/Header.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import {AuthPresentation} from "../AuthPresentation/AuthPresentation"; +import {AnalyzeButton} from "../AnalyzeButton/AnalyzeButton"; +import logo from '../assets/Mizu-logo.svg'; + +interface HeaderProps { + analyzeStatus: any +} + +export const Header: React.FC = ({analyzeStatus}) => { + + return
+
+
logo
+
Traffic viewer for Kubernetes
+
+
+ {analyzeStatus?.isAnalyzing && } + +
+
; +} diff --git a/ui/src/components/TLSWarning/TLSWarning.sass b/ui/src/components/TLSWarning/TLSWarning.sass new file mode 100644 index 000000000..76f77b401 --- /dev/null +++ b/ui/src/components/TLSWarning/TLSWarning.sass @@ -0,0 +1,12 @@ +.httpsDomains + display: none + margin: 0 + padding: 0 + list-style: none + +.customWarningStyle + &:hover + overflow-y: scroll + height: 85px + .httpsDomains + display: block diff --git a/ui/src/components/TLSWarning/TLSWarning.tsx b/ui/src/components/TLSWarning/TLSWarning.tsx new file mode 100644 index 000000000..e96002c57 --- /dev/null +++ b/ui/src/components/TLSWarning/TLSWarning.tsx @@ -0,0 +1,42 @@ +import {Snackbar} from "@material-ui/core"; +import MuiAlert from "@material-ui/lab/Alert"; +import React, {useEffect} from "react"; +import Api from "../../helpers/api"; +import './TLSWarning.sass'; + +const api = new Api(); + +interface TLSWarningProps { + showTLSWarning: boolean + setShowTLSWarning: (show: boolean) => void + addressesWithTLS: Set + setAddressesWithTLS: (addresses: Set) => void + userDismissedTLSWarning: boolean + setUserDismissedTLSWarning: (flag: boolean) => void +} + +export const TLSWarning: React.FC = ({showTLSWarning, setShowTLSWarning, addressesWithTLS, setAddressesWithTLS, userDismissedTLSWarning, setUserDismissedTLSWarning}) => { + + useEffect(() => { + (async () => { + try { + const recentTLSLinks = await api.getRecentTLSLinks(); + if (recentTLSLinks?.length > 0) { + setAddressesWithTLS(new Set(recentTLSLinks)); + setShowTLSWarning(true); + } + } catch (e) { + console.error(e); + } + })(); + }, []); + + return ( + setUserDismissedTLSWarning(true)} severity="warning"> + Mizu is detecting TLS traffic, this type of traffic will not be displayed. + {addressesWithTLS.size > 0 && +
    {Array.from(addressesWithTLS, address =>
  • {address}
    • )}
} + + ); +}