Update helm chart to latest stable release (#694)

* React router

* removed comment

.dockerignore

@@ -2,7 +2,6 @@
 .dockerignore
 .editorconfig
 .gitignore
-**/.env*
 Dockerfile
 Makefile
 LICENSE

Dockerfile

@@ -7,7 +7,7 @@ COPY ui/package-lock.json .
 RUN npm i
 COPY ui .
 RUN npm run build
-
+RUN npm run build-ent
 
 FROM golang:1.16-alpine AS builder
 # Set necessary environment variables needed for our image.
@@ -54,6 +54,7 @@ WORKDIR /app
 COPY --from=builder ["/app/agent-build/mizuagent", "."]
 COPY --from=builder ["/app/agent/build/extensions", "extensions"]
 COPY --from=site-build ["/app/ui-build/build", "site"]
+COPY --from=site-build ["/app/ui-build/build-ent", "site-standalone"]
 RUN mkdir /app/data/
 
 # gin-gonic runs in debug mode without this

agent/main.go

@@ -247,7 +247,12 @@ func hostApi(socketHarOutputChannel chan<- *tapApi.OutputChannelItem) {
 	if err := setUIFlags(); err != nil {
 		logger.Log.Errorf("Error setting ui mode, err: %v", err)
 	}
-	app.Use(static.ServeRoot("/", "./site"))
+
+	if config.Config.StandaloneMode {
+		app.Use(static.ServeRoot("/", "./site-standalone"))
+	} else {
+		app.Use(static.ServeRoot("/", "./site"))
+	}
 
 	app.Use(middlewares.CORSMiddleware()) // This has to be called after the static middleware, does not work if its called before
 
@@ -290,8 +295,7 @@ func setUIFlags() error {
 		return err
 	}
 
-	replacedContent := strings.Replace(string(read), "__IS_STANDALONE__", strconv.FormatBool(config.Config.StandaloneMode), 1)
-	replacedContent = strings.Replace(replacedContent, "__IS_OAS_ENABLED__", strconv.FormatBool(config.Config.OAS), 1)
+	replacedContent := strings.Replace(string(read), "__IS_OAS_ENABLED__", strconv.FormatBool(config.Config.OAS), 1)
 	replacedContent = strings.Replace(replacedContent, "__IS_SERVICE_MAP_ENABLED__", strconv.FormatBool(config.Config.ServiceMap), 1)
 
 	err = ioutil.WriteFile(uiIndexPath, []byte(replacedContent), 0)

cli/cmd/cleanRunner.go

@@ -1,7 +1,6 @@
 package cmd
 
 import (
-	"github.com/up9inc/mizu/cli/apiserver"
 	"github.com/up9inc/mizu/cli/config"
 )
 
@@ -11,5 +10,5 @@ func performCleanCommand() {
 		return
 	}
 
-	finishMizuExecution(kubernetesProvider, apiserver.NewProvider(GetApiServerUrl(), apiserver.DefaultRetries, apiserver.DefaultTimeout), config.Config.IsNsRestrictedMode(), config.Config.MizuResourcesNamespace)
+	finishMizuExecution(kubernetesProvider, config.Config.IsNsRestrictedMode(), config.Config.MizuResourcesNamespace)
 }

cli/cmd/common.go

@@ -11,7 +11,6 @@ import (
 	"github.com/up9inc/mizu/cli/mizu"
 	"github.com/up9inc/mizu/cli/mizu/fsUtils"
 	"github.com/up9inc/mizu/cli/resources"
-	"github.com/up9inc/mizu/cli/telemetry"
 	"github.com/up9inc/mizu/cli/uiUtils"
 	"github.com/up9inc/mizu/shared"
 	"path"
@@ -35,7 +34,7 @@ func startProxyReportErrorIfAny(kubernetesProvider *kubernetes.Provider, cancel
 		return
 	}
 
-	apiProvider = apiserver.NewProviderWithoutRetries(GetApiServerUrl(), time.Second)  // short check for proxy
+	apiProvider = apiserver.NewProviderWithoutRetries(GetApiServerUrl(), time.Second) // short check for proxy
 	if err := apiProvider.TestConnection(); err != nil {
 		logger.Log.Debugf("Couldn't connect using proxy, stopping proxy and trying to create port-forward")
 		if err := httpServer.Shutdown(context.Background()); err != nil {
@@ -93,8 +92,7 @@ func handleKubernetesProviderError(err error) {
 	}
 }
 
-func finishMizuExecution(kubernetesProvider *kubernetes.Provider, apiProvider *apiserver.Provider, isNsRestrictedMode bool, mizuResourcesNamespace string) {
-	telemetry.ReportAPICalls(apiProvider)
+func finishMizuExecution(kubernetesProvider *kubernetes.Provider, isNsRestrictedMode bool, mizuResourcesNamespace string) {
 	removalCtx, cancel := context.WithTimeout(context.Background(), cleanupTimeout)
 	defer cancel()
 	dumpLogsIfNeeded(removalCtx, kubernetesProvider)

cli/cmd/tap.go

@@ -12,7 +12,6 @@ import (
 	"github.com/up9inc/mizu/cli/config"
 	"github.com/up9inc/mizu/cli/config/configStructs"
 	"github.com/up9inc/mizu/cli/errormessage"
-	"github.com/up9inc/mizu/cli/telemetry"
 	"github.com/up9inc/mizu/cli/uiUtils"
 	"github.com/up9inc/mizu/shared"
 	"github.com/up9inc/mizu/shared/logger"
@@ -26,7 +25,6 @@ var tapCmd = &cobra.Command{
 	Long: `Record the ingoing traffic of a kubernetes pod.
 Supported protocols are HTTP and gRPC.`,
 	RunE: func(cmd *cobra.Command, args []string) error {
-		go telemetry.ReportRun("tap", config.Config.Tap)
 		RunMizuTap()
 		return nil
 	},

cli/cmd/tapRunner.go

@@ -10,6 +10,7 @@ import (
 	"time"
 
 	"github.com/up9inc/mizu/cli/resources"
+	"github.com/up9inc/mizu/cli/telemetry"
 	"github.com/up9inc/mizu/cli/utils"
 
 	"github.com/getkin/kin-openapi/openapi3"
@@ -137,7 +138,7 @@ func RunMizuTap() {
 		return
 	}
 
-	defer finishMizuExecution(kubernetesProvider, apiProvider, config.Config.IsNsRestrictedMode(), config.Config.MizuResourcesNamespace)
+	defer finishTapExecution(kubernetesProvider)
 
 	go goUtils.HandleExcWrapper(watchApiServerEvents, ctx, kubernetesProvider, cancel)
 	go goUtils.HandleExcWrapper(watchApiServerPod, ctx, kubernetesProvider, cancel)
@@ -146,6 +147,12 @@ func RunMizuTap() {
 	utils.WaitForFinish(ctx, cancel)
 }
 
+func finishTapExecution(kubernetesProvider *kubernetes.Provider) {
+	telemetry.ReportTapTelemetry(apiProvider, config.Config.Tap, state.startTime)
+
+	finishMizuExecution(kubernetesProvider, config.Config.IsNsRestrictedMode(), config.Config.MizuResourcesNamespace)
+}
+
 func getTapMizuAgentConfig() *shared.MizuAgentConfig {
 	mizuAgentConfig := shared.MizuAgentConfig{
 		MaxDBSizeBytes:         config.Config.Tap.MaxEntriesDBSizeBytes(),

cli/telemetry/telemetry.go

@@ -4,21 +4,21 @@ import (
 	"bytes"
 	"encoding/json"
 	"fmt"
-	"net/http"
-	"os"
-
 	"github.com/denisbrodbeck/machineid"
 	"github.com/up9inc/mizu/cli/apiserver"
 	"github.com/up9inc/mizu/cli/config"
 	"github.com/up9inc/mizu/cli/mizu"
 	"github.com/up9inc/mizu/shared/logger"
+	"net/http"
+	"os"
+	"time"
 )
 
 const telemetryUrl = "https://us-east4-up9-prod.cloudfunctions.net/mizu-telemetry"
 
 func ReportRun(cmd string, args interface{}) {
 	if !shouldRunTelemetry() {
-		logger.Log.Debugf("not reporting telemetry")
+		logger.Log.Debug("not reporting telemetry")
 		return
 	}
 
@@ -28,7 +28,7 @@ func ReportRun(cmd string, args interface{}) {
 		"args": string(argsBytes),
 	}
 
-	if err := sendTelemetry("Execution", argsMap); err != nil {
+	if err := sendTelemetry(argsMap); err != nil {
 		logger.Log.Debug(err)
 		return
 	}
@@ -36,30 +36,31 @@ func ReportRun(cmd string, args interface{}) {
 	logger.Log.Debugf("successfully reported telemetry for cmd %v", cmd)
 }
 
-func ReportAPICalls(apiProvider *apiserver.Provider) {
+func ReportTapTelemetry(apiProvider *apiserver.Provider, args interface{}, startTime time.Time) {
 	if !shouldRunTelemetry() {
-		logger.Log.Debugf("not reporting telemetry")
+		logger.Log.Debug("not reporting telemetry")
 		return
 	}
 
 	generalStats, err := apiProvider.GetGeneralStats()
 	if err != nil {
-		logger.Log.Debugf("[ERROR] failed get general stats from api server %v", err)
+		logger.Log.Debugf("[ERROR] failed to get general stats from api server %v", err)
 		return
 	}
-
+	argsBytes, _ := json.Marshal(args)
 	argsMap := map[string]interface{}{
-		"apiCallsCount":         generalStats["EntriesCount"],
-		"firstAPICallTimestamp": generalStats["FirstEntryTimestamp"],
-		"lastAPICallTimestamp":  generalStats["LastEntryTimestamp"],
+		"cmd":                    "tap",
+		"args":                   string(argsBytes),
+		"executionTimeInSeconds": int(time.Since(startTime).Seconds()),
+		"apiCallsCount":          generalStats["EntriesCount"],
 	}
 
-	if err := sendTelemetry("APICalls", argsMap); err != nil {
+	if err := sendTelemetry(argsMap); err != nil {
 		logger.Log.Debug(err)
 		return
 	}
 
-	logger.Log.Debugf("successfully reported telemetry of api calls")
+	logger.Log.Debug("successfully reported telemetry of tap command")
 }
 
 func shouldRunTelemetry() bool {
@@ -77,13 +78,12 @@ func shouldRunTelemetry() bool {
 	return true
 }
 
-func sendTelemetry(telemetryType string, argsMap map[string]interface{}) error {
-	argsMap["telemetryType"] = telemetryType
+func sendTelemetry(argsMap map[string]interface{}) error {
 	argsMap["component"] = "mizu_cli"
 	argsMap["buildTimestamp"] = mizu.BuildTimestamp
 	argsMap["branch"] = mizu.Branch
 	argsMap["version"] = mizu.SemVer
-	argsMap["Platform"] = mizu.Platform
+	argsMap["platform"] = mizu.Platform
 
 	if machineId, err := machineid.ProtectedID("mizu"); err == nil {
 		argsMap["machineId"] = machineId

debug.Dockerfile

@@ -8,6 +8,7 @@ COPY ui/package-lock.json .
 RUN npm i
 COPY ui .
 RUN npm run build
+RUN npm run build-ent
 
 FROM golang:1.16-alpine AS builder
 # Set necessary environment variables needed for our image.
@@ -52,6 +53,7 @@ WORKDIR /app
 COPY --from=builder ["/app/agent-build/mizuagent", "."]
 COPY --from=builder ["/app/agent/build/extensions", "extensions"]
 COPY --from=site-build ["/app/ui-build/build", "site"]
+COPY --from=site-build ["/app/ui-build/build-ent", "site-standalone"]
 RUN mkdir /app/data/
 
 # install delve

deploy/kubernetes/helm-chart/values.yaml

@@ -21,23 +21,23 @@ pod:
 container:
   mizuAgent:
     image:
-      repository: "709825985650.dkr.ecr.us-east-1.amazonaws.com/up9/mizufree"
-      tag: "0.21.29"
+      repository: "gcr.io/up9-docker-hub/mizu/main"
+      tag: "0.22.0"
   tapper:
     image:
-      repository: "709825985650.dkr.ecr.us-east-1.amazonaws.com/up9/mizufree"
-      tag: "0.21.29"
+      repository: "gcr.io/up9-docker-hub/mizu/main"
+      tag: "0.22.0"
   basenine:
     name: "basenine"
     port: 9099
     image:
-      repository: "709825985650.dkr.ecr.us-east-1.amazonaws.com/up9/basenine"
+      repository: "ghcr.io/up9inc/basenine"
       tag: "v0.3.0"
   kratos:
     name: "kratos"
     port: 4433
     image:
-      repository: "709825985650.dkr.ecr.us-east-1.amazonaws.com/up9/kratos"
+      repository: "gcr.io/up9-docker-hub/mizu-kratos/stable"
       tag: "0.0.0"
 
 deployment:

ui/.env.basic

@@ -0,0 +1,2 @@
+REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws"
+REACT_APP_OVERRIDE_API_URL="http://localhost:8899/"

ui/.env.enterprise

@@ -0,0 +1,3 @@
+REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws"
+REACT_APP_OVERRIDE_API_URL="http://localhost:8899/"
+REACT_APP_OVERRIDE_IS_ENTERPRISE="true"

ui/.gitignore

@@ -16,6 +16,7 @@
 
 # production
 /build
+/build-ent
 
 # misc
 .DS_Store

ui/craco.config.js

@@ -0,0 +1,15 @@
+// this workaround fix a warning of mini-css-extract-plugin throws "Conflicting order" during build
+// https://github.com/facebook/create-react-app/issues/5372
+module.exports = {
+    webpack: {
+        configure: (webpackConfig) => {
+            const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
+                (plugin) => plugin.options && plugin.options.ignoreOrder != null,
+            );
+            if(instanceOfMiniCssExtractPlugin)
+                instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
+
+            return webpackConfig;
+        },
+    }
+}

ui/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.4.3",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -32,7 +33,7 @@
     "react-dom": "^17.0.2",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.2.1",
     "react-scrollable-feed-virtualized": "^1.4.9",
     "react-syntax-highlighter": "^15.4.3",
     "react-toastify": "^8.0.3",
@@ -43,11 +44,16 @@
     "web-vitals": "^1.1.1",
     "xml-formatter": "^2.6.0"
   },
+  "devDependencies": {
+    "env-cmd": "^10.0.1"
+  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "start-ent": "./node_modules/.bin/env-cmd -f .env.enterprise craco start",
+    "build": "./node_modules/.bin/env-cmd -f .env.basic craco build",
+    "build-ent": "BUILD_PATH='./build-ent' ./node_modules/.bin/env-cmd -f .env.enterprise craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [

ui/public/index.html

@@ -28,7 +28,6 @@
     <script>
       try {
         // Injected from server
-        window.isEnt = __IS_STANDALONE__
         window.isOasEnabled = __IS_OAS_ENABLED__
         window.isServiceMapEnabled = __IS_SERVICE_MAP_ENABLED__
       }

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<string>());
-    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 (
         <div className="mizuApp">
             <Header analyzeStatus={analyzeStatus} />
-            <TrafficPage setAnalyzeStatus={setAnalyzeStatus} onTLSDetected={onTLSDetected} setOpenServiceMapModal={setOpenServiceMapModal} />
-            <TLSWarning showTLSWarning={showTLSWarning}
-                setShowTLSWarning={setShowTLSWarning}
-                addressesWithTLS={addressesWithTLS}
-                setAddressesWithTLS={setAddressesWithTLS}
-                userDismissedTLSWarning={userDismissedTLSWarning}
-                setUserDismissedTLSWarning={setUserDismissedTLSWarning} />
+            <TrafficPage setAnalyzeStatus={setAnalyzeStatus}/>
             {window["isServiceMapEnabled"] && <ServiceMapModal
-                isOpen={openServiceMapModal}
-                onOpen={() => setOpenServiceMapModal(true)}
-                onClose={() => setOpenServiceMapModal(false)}
+                isOpen={serviceMapModalOpen}
+                onOpen={() => setServiceMapModalOpen(true)}
+                onClose={() => setServiceMapModalOpen(false)}
             />}
         </div>
     );

ui/src/AppChooser.tsx

@@ -0,0 +1,18 @@
+import React, {Suspense} from 'react';
+import LoadingOverlay from "./components/LoadingOverlay";
+
+const AppChooser = () => {
+
+    let MainComponent;
+    if (process.env.REACT_APP_OVERRIDE_IS_ENTERPRISE === "true") {
+        MainComponent = React.lazy(() => import('./EntApp'));
+    } else {
+        MainComponent = React.lazy(() => import('./App'));
+    }
+
+    return <Suspense fallback={<LoadingOverlay/>}>
+        <MainComponent/>
+    </Suspense>;
+}
+
+export default AppChooser;

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<string>());
-    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 = <TrafficPage onTLSDetected={onTLSDetected} setOpenServiceMapModal={setOpenServiceMapModal} />;
-            break;
-        case Page.Setup:
-            pageComponent = <AuthPageBase><InstallPage onFirstLogin={() => setIsFirstLogin(true)}/></AuthPageBase>;
-            break;
-        case Page.Login:
-            pageComponent = <AuthPageBase><LoginPage/></AuthPageBase>;
-            break;
-        default:
-            pageComponent = <div>Unknown Error</div>;
-    }
-
-    if (isLoading) {
-        return <LoadingOverlay/>;
-    }
-
     return (
         <div className="mizuApp">
-            {entPage === Page.Traffic && <EntHeader isFirstLogin={isFirstLogin} setIsFirstLogin={setIsFirstLogin} />}
-            {pageComponent}
-            {entPage === Page.Traffic && <TLSWarning showTLSWarning={showTLSWarning}
-                setShowTLSWarning={setShowTLSWarning}
-                addressesWithTLS={addressesWithTLS}
-                setAddressesWithTLS={setAddressesWithTLS}
-                userDismissedTLSWarning={userDismissedTLSWarning}
-                setUserDismissedTLSWarning={setUserDismissedTLSWarning} />}
-            {entPage === Page.Traffic && window["isServiceMapEnabled"] && <ServiceMapModal
-                isOpen={openServiceMapModal}
-                onOpen={() => setOpenServiceMapModal(true)}
-                onClose={() => setOpenServiceMapModal(false)}
-            />}
+            <BrowserRouter>
+                <AppSwitchRoutes/>
+            </BrowserRouter>
         </div>
     );
 }

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 <LoadingOverlay/>;
+    }
+
+    return <Routes>
+        <Route path={"/"} element={<SystemViewer isFirstLogin={isFirstLogin} setIsFirstLogin={setIsFirstLogin}/>}>
+            <Route path={"/"} element={<TrafficPage/>} />
+            <Route path={RouterRoutes.SETTINGS} element={<></>} /> {/*todo: set settings component*/}
+        </Route>
+        <Route path={RouterRoutes.LOGIN} element={<AuthPageBase><LoginPage/></AuthPageBase>}/>
+        <Route path={RouterRoutes.SETUP} element={<AuthPageBase><InstallPage onFirstLogin={() => setIsFirstLogin(true)}/></AuthPageBase>}/>
+    </Routes>
+}
+
+export default AppSwitchRoutes;

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<EntHeaderProps> = ({isFirstLogin, setIsFirstLogin}) => {
-
+    const navigate = useNavigate();
     const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
 
     useEffect(() => {
@@ -37,7 +38,7 @@ export const EntHeader: React.FC<EntHeaderProps> = ({isFirstLogin, setIsFirstLog
     return <div className="header">
         <div>
             <div className="title">
-                <img style={{height: 55}} src={logo} alt="logo"/>
+                <img className="entLogo" style={{height: 55}} src={logo} alt="logo" onClick={() => navigate("/")}/>
             </div>
         </div>
         <div style={{display: "flex", alignItems: "center"}}>

ui/src/components/Header/Header.sass

@@ -21,3 +21,6 @@
 
   .headerIcon
     cursor: pointer
+
+  .entLogo
+    cursor: pointer

ui/src/components/Pages/AuthPage/AuthBasePage.sass

@@ -1,4 +1,4 @@
-@import "../../variables.module"
+@import "src/variables.module"
    
 .authContainer
     height: 100vh

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}) => {

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();

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();

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 <>
+        <EntHeader isFirstLogin={isFirstLogin} setIsFirstLogin={setIsFirstLogin} />
+        <Outlet/>
+        {window["isServiceMapEnabled"] && <ServiceMapModal
+            isOpen={serviceMapModalOpen}
+            onOpen={() => setServiceMapModalOpen(true)}
+            onClose={() => setServiceMapModalOpen(false)}
+        />}
+    </>
+}
+
+export default SystemViewer;

ui/src/components/Pages/TrafficPage/TrafficPage.sass

@@ -1,4 +1,4 @@
-@import '../../variables.module.scss'
+@import 'src/variables.module'
 
 .TrafficPage
     width: 100%

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<TrafficPageProps> = ({setAnalyzeStatus,onTLSDetected, setOpenServiceMapModal}) => {
+export const TrafficPage: React.FC<TrafficPageProps> = ({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<TrafficPageProps> = ({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<string>());
+
     const handleQueryChange = useMemo(
       () =>
         debounce(async (query: string) => {
@@ -216,6 +221,15 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({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<TrafficPageProps> = ({setAnalyzeStatus,onTLSD
                 return "redIndicator" + container;
         }
     }
- 
+
     const getConnectionTitle = () => {
         switch (wsConnection) {
             case WsConnectionStatus.Connected:
@@ -243,7 +257,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus,onTLSD
     }
 
     const openServiceMapModalDebounce = debounce(() => {
-        setOpenServiceMapModal(true)
+        setServiceMapModalOpen(true)
     }, 500);
 
   return (
@@ -320,6 +334,12 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus,onTLSD
         </div>
       </div>}
       {tappingStatus && !openOasModal && <StatusBar />}
+       <TLSWarning showTLSWarning={showTLSWarning}
+                   setShowTLSWarning={setShowTLSWarning}
+                   addressesWithTLS={addressesWithTLS}
+                   setAddressesWithTLS={setAddressesWithTLS}
+                   userDismissedTLSWarning={userDismissedTLSWarning}
+                   setUserDismissedTLSWarning={setUserDismissedTLSWarning} />
     </div>
   );
 };

ui/src/helpers/routes.ts

@@ -0,0 +1,5 @@
+export enum RouterRoutes {
+    LOGIN = "/login",
+    SETUP = "/setup",
+    SETTINGS = "/settings"
+}

ui/src/index.tsx

@@ -1,30 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.sass';
-import App from './App';
-import EntApp from "./EntApp";
 import {ToastContainer} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 import {RecoilRoot} from "recoil";
+import AppChooser from "./AppChooser";
 
-ReactDOM.render(
-  <React.StrictMode>
-      <RecoilRoot>
-        <>
-          {window["isEnt"] ? <EntApp/> : <App/>}
-          <ToastContainer
-              position="bottom-right"
-              autoClose={5000}
-              hideProgressBar={false}
-              newestOnTop={false}
-              closeOnClick
-              rtl={false}
-              pauseOnFocusLoss
-              draggable
-              pauseOnHover
-          />
-        </>
-      </RecoilRoot>
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+ReactDOM.render( <>
+    <RecoilRoot>
+        <AppChooser/>
+        <ToastContainer
+            position="bottom-right"
+            autoClose={5000}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+        />
+    </RecoilRoot>
+</>,
+document.getElementById('root'));

ui/src/recoil/serviceMapModalOpen/atom.ts

@@ -0,0 +1,8 @@
+import { atom } from "recoil"
+
+const serviceMapModalOpenAtom = atom({
+    key: "serviceMapModalOpenAtom",
+    default: false
+})
+
+export default serviceMapModalOpenAtom;

ui/src/recoil/serviceMapModalOpen/index.ts

@@ -0,0 +1,2 @@
+import atom from "./atom";
+export default atom;