Mizu enterprise preparing (#567)

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

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<string>());
 
     const onTLSDetected = (destAddress: string) => {
         addressesWithTLS.add(destAddress);
@@ -56,96 +20,16 @@ const App = () => {
         }
     };
 
-    const analysisMessage = analyzeStatus?.isRemoteReady ?
-        <span>
-            <table>
-                <tr>
-                    <td>Status</td>
-                    <td><b>Available</b></td>
-                </tr>
-                <tr>
-                    <td>Messages</td>
-                    <td><b>{analyzeStatus?.sentCount}</b></td>
-                </tr>
-            </table>
-        </span> :
-        analyzeStatus?.sentCount > 0 ?
-            <span>
-                <table>
-                    <tr>
-                        <td>Status</td>
-                        <td><b>Processing</b></td>
-                    </tr>
-                    <tr>
-                        <td>Messages</td>
-                        <td><b>{analyzeStatus?.sentCount}</b></td>
-                    </tr>
-                    <tr>
-                        <td colSpan={2}> Please allow a few minutes for the analysis to complete</td>
-                    </tr>
-                </table>
-            </span> :
-            <span>
-                <table>
-                    <tr>
-                        <td>Status</td>
-                        <td><b>Waiting for traffic</b></td>
-                    </tr>
-                    <tr>
-                        <td>Messages</td>
-                        <td><b>{analyzeStatus?.sentCount}</b></td>
-                    </tr>
-                </table>
-
-            </span>
-
     return (
         <div className="mizuApp">
-            <div className="header">
-                <div style={{display: "flex", alignItems: "center"}}>
-                    <div className="title"><img src={logo} alt="logo"/></div>
-                    <div className="description">Traffic viewer for Kubernetes</div>
-                </div>
-                <div style={{display: "flex", alignItems: "center"}}>
-
-                    {analyzeStatus?.isAnalyzing &&
-                        <div>
-                            <Tooltip title={analysisMessage} isSimple classes={classes}>
-                                <div>
-                                    <Button
-                                        style={{fontFamily: "system-ui",
-                                            fontWeight: 600,
-                                            fontSize: 12,
-                                            padding: 8}}
-                                        size={"small"}
-                                        variant="contained"
-                                        color="primary"
-                                        startIcon={<img style={{height: 24, maxHeight: "none", maxWidth: "none"}} src={logo_up9} alt={"up9"}/>}
-                                        disabled={!analyzeStatus?.isRemoteReady}
-                                        onClick={() => {
-                                            window.open(analyzeStatus?.remoteUrl)
-                                        }}>
-                                        Analysis
-                                    </Button>
-                                </div>
-                            </Tooltip>
-                        </div>
-                    }
-                    {statusAuth?.email && <div style={{display: "flex", borderLeft: "2px #87878759 solid", paddingLeft: 10, marginLeft: 10}}>
-                        <div style={{color: "rgba(0,0,0,0.75)"}}>
-                            <div style={{fontWeight: 600, fontSize: 13}}>{statusAuth.email}</div>
-                            <div style={{fontSize:11}}>{statusAuth.model}</div>
-                        </div>
-                    </div>}
-                </div>
-            </div>
+            <Header analyzeStatus={analyzeStatus}/>
             <TrafficPage setAnalyzeStatus={setAnalyzeStatus} onTLSDetected={onTLSDetected}/>
-            <Snackbar open={showTLSWarning && !userDismissedTLSWarning}>
-                <MuiAlert classes={{ filledWarning: 'customWarningStyle' }} elevation={6} variant="filled" onClose={() => setUserDismissedTLSWarning(true)} severity="warning">
-                    Mizu is detecting TLS traffic, this type of traffic will not be displayed.
-                    {addressesWithTLS.size > 0 && <ul className="httpsDomains"> {Array.from(addressesWithTLS, address => <li>{address}</li>)} </ul>}
-                </MuiAlert>
-            </Snackbar>
+            <TLSWarning showTLSWarning={showTLSWarning}
+                        setShowTLSWarning={setShowTLSWarning}
+                        addressesWithTLS={addressesWithTLS}
+                        setAddressesWithTLS={setAddressesWithTLS}
+                        userDismissedTLSWarning={userDismissedTLSWarning}
+                        setUserDismissedTLSWarning={setUserDismissedTLSWarning}/>
         </div>
     );
 }

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<AnalyseButtonProps>  = ({analyzeStatus}) => {
+
+    const classes = useStyles();
+
+    const analysisMessage = analyzeStatus?.isRemoteReady ?
+        <span>
+            <table>
+                <tr>
+                    <td>Status</td>
+                    <td><b>Available</b></td>
+                </tr>
+                <tr>
+                    <td>Messages</td>
+                    <td><b>{analyzeStatus?.sentCount}</b></td>
+                </tr>
+            </table>
+        </span> :
+        analyzeStatus?.sentCount > 0 ?
+            <span>
+                <table>
+                    <tr>
+                        <td>Status</td>
+                        <td><b>Processing</b></td>
+                    </tr>
+                    <tr>
+                        <td>Messages</td>
+                        <td><b>{analyzeStatus?.sentCount}</b></td>
+                    </tr>
+                    <tr>
+                        <td colSpan={2}> Please allow a few minutes for the analysis to complete</td>
+                    </tr>
+                </table>
+            </span> :
+            <span>
+                <table>
+                    <tr>
+                        <td>Status</td>
+                        <td><b>Waiting for traffic</b></td>
+                    </tr>
+                    <tr>
+                        <td>Messages</td>
+                        <td><b>{analyzeStatus?.sentCount}</b></td>
+                    </tr>
+                </table>
+            </span>
+
+    return ( <div>
+        <Tooltip title={analysisMessage} isSimple classes={classes}>
+            <div>
+                <Button
+                    style={{fontFamily: "system-ui",
+                        fontWeight: 600,
+                        fontSize: 12,
+                        padding: 8}}
+                    size={"small"}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<img style={{height: 24, maxHeight: "none", maxWidth: "none"}} src={logo_up9} alt={"up9"}/>}
+                    disabled={!analyzeStatus?.isRemoteReady}
+                    onClick={() => {
+                        window.open(analyzeStatus?.remoteUrl)
+                    }}>
+                    Analysis
+                </Button>
+            </div>
+        </Tooltip>
+    </div>);
+}

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

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 && <div className="authPresentationContainer">
+                <div>
+                    <div className="authEmail">{statusAuth.email}</div>
+                    <div className="authModel">{statusAuth.model}</div>
+                </div>
+            </div>}
+    </>;
+}

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<HeaderProps> = ({analyzeStatus}) => {
+
+    return <div className="header">
+        <div style={{display: "flex", alignItems: "center"}}>
+            <div className="title"><img src={logo} alt="logo"/></div>
+            <div className="description">Traffic viewer for Kubernetes</div>
+        </div>
+        <div style={{display: "flex", alignItems: "center"}}>
+            {analyzeStatus?.isAnalyzing && <AnalyzeButton analyzeStatus={analyzeStatus}/>}
+            <AuthPresentation/>
+        </div>
+    </div>;
+}

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

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<string>
+    setAddressesWithTLS: (addresses: Set<string>) => void
+    userDismissedTLSWarning: boolean
+    setUserDismissedTLSWarning: (flag: boolean) => void
+}
+
+export const TLSWarning: React.FC<TLSWarningProps>  = ({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 (<Snackbar open={showTLSWarning && !userDismissedTLSWarning}>
+        <MuiAlert classes={{filledWarning: 'customWarningStyle'}} elevation={6} variant="filled"
+                  onClose={() => setUserDismissedTLSWarning(true)} severity="warning">
+            Mizu is detecting TLS traffic, this type of traffic will not be displayed.
+            {addressesWithTLS.size > 0 &&
+            <ul className="httpsDomains"> {Array.from(addressesWithTLS, address => <li>{address}</li>)} </ul>}
+        </MuiAlert>
+    </Snackbar>);
+}