Mizu enterprise preparing (#567)

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>);
+}