From d308468f1bb40b5fdabe02a806cce3e092ea01cd Mon Sep 17 00:00:00 2001 From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com> Date: Tue, 12 Oct 2021 17:47:24 +0300 Subject: [PATCH] Feature/UI/mizu analysis with up9 auth (#346) * analysis button layout * get auth status api * status auth state * css --- ui/.env.example | 2 +- ui/src/App.tsx | 65 ++++++++++++++++++--------- ui/src/components/assets/logo_up9.svg | 39 ++++++++++++++++ ui/src/helpers/api.js | 17 ++++--- 4 files changed, 95 insertions(+), 28 deletions(-) create mode 100644 ui/src/components/assets/logo_up9.svg diff --git a/ui/.env.example b/ui/.env.example index cebc16952..fa321de05 100644 --- a/ui/.env.example +++ b/ui/.env.example @@ -1,2 +1,2 @@ REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws" -REACT_APP_OVERRIDE_API_URL="http://localhost:8899/api/" +REACT_APP_OVERRIDE_API_URL="http://localhost:8899/" diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 3783e061f..f09aed239 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,6 +1,7 @@ import React, {useEffect, 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"; @@ -27,18 +28,24 @@ const App = () => { const [showTLSWarning, setShowTLSWarning] = useState(false); const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false); const [addressesWithTLS, setAddressesWithTLS] = useState(new Set()); + const [statusAuth, setStatusAuth] = useState(null); useEffect(() => { (async () => { - const recentTLSLinks = await api.getRecentTLSLinks(); - - if (recentTLSLinks?.length > 0) { - setAddressesWithTLS(new Set([...addressesWithTLS, ...recentTLSLinks])); - setShowTLSWarning(true); + try { + const recentTLSLinks = await api.getRecentTLSLinks(); + if (recentTLSLinks?.length > 0) { + setAddressesWithTLS(new Set([...addressesWithTLS, ...recentTLSLinks])); + setShowTLSWarning(true); + } + const auth = await api.getAuthStatus(); + setStatusAuth(auth); + } catch (e) { + console.error(e); } })(); - }); + },[]); const onTLSDetected = (destAddress: string) => { addressesWithTLS.add(destAddress); @@ -99,22 +106,38 @@ const App = () => {
logo
Traffic viewer for Kubernetes
- {analyzeStatus?.isAnalyzing && - -
+
- -
- - } + {analyzeStatus?.isAnalyzing && +
+ +
+ +
+ +
+ } + {statusAuth?.email &&
+
+
{statusAuth.email}
+
{statusAuth.model}
+
+
} +
diff --git a/ui/src/components/assets/logo_up9.svg b/ui/src/components/assets/logo_up9.svg new file mode 100644 index 000000000..4446859b5 --- /dev/null +++ b/ui/src/components/assets/logo_up9.svg @@ -0,0 +1,39 @@ + diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js index 6b8626cac..14b15ff9d 100644 --- a/ui/src/helpers/api.js +++ b/ui/src/helpers/api.js @@ -10,7 +10,7 @@ export default class Api { constructor() { // When working locally cp `cp .env.example .env` - const apiURL = process.env.REACT_APP_OVERRIDE_API_URL ? process.env.REACT_APP_OVERRIDE_API_URL : `${window.location.origin}${mizuAPIPathPrefix}/api/`; + const apiURL = process.env.REACT_APP_OVERRIDE_API_URL ? process.env.REACT_APP_OVERRIDE_API_URL : `${window.location.origin}${mizuAPIPathPrefix}/`; this.client = axios.create({ baseURL: apiURL, @@ -22,27 +22,32 @@ export default class Api { } tapStatus = async () => { - const response = await this.client.get("/tapStatus"); + const response = await this.client.get("/api/tapStatus"); return response.data; } analyzeStatus = async () => { - const response = await this.client.get("/analyzeStatus"); + const response = await this.client.get("/api/analyzeStatus"); return response.data; } getEntry = async (entryId) => { - const response = await this.client.get(`/entries/${entryId}`); + const response = await this.client.get(`/api/entries/${entryId}`); return response.data; } fetchEntries = async (operator, timestamp) => { - const response = await this.client.get(`/entries?limit=50&operator=${operator}×tamp=${timestamp}`); + const response = await this.client.get(`/api/entries?limit=50&operator=${operator}×tamp=${timestamp}`); return response.data; } getRecentTLSLinks = async () => { - const response = await this.client.get("/recentTLSLinks"); + const response = await this.client.get("/api/recentTLSLinks"); + return response.data; + } + + getAuthStatus = async () => { + const response = await this.client.get("/status/auth"); return response.data; } }