Cypress: first-time-using cypress files + new GuiPort test on the UI (#584)

Motivation: Allow users to change the default RBAC resources (ServiceAccount, ClusterRole, ClusterRoleBinding, Role and RoleBinding) without having Mizu delete them every run.

Adds app.kubernetes.io/created-by and app.kubernetes.io/managed-by labels to all resources.
The value of app.kubernetes.io/created-by is either mizu-cli or mizu-agent.
The value of app.kubernetes.io/managed-by is mizu.
When Mizu cleans resources (ctrl-c in tap cmd or mizu clean cmd) it removes all RBAC resources that have managed-by=mizu, and only those.

A user may have a ClusterRole named mizu-clusterrole. If it doesn't have the label app.kubernetes.io/managed-by=mizu, then Mizu won't overwrite it and won't delete it.
Other resources (deployments, services etc.) are always removed, regardless of their labels.

.gitignore

@@ -35,3 +35,12 @@ pprof/*
 
 # Nohup Files - https://man7.org/linux/man-pages/man1/nohup.1p.html
 nohup.*
+
+# Cypress tests
+cypress.env.json
+*/cypress/downloads
+*/cypress/fixtures
+*/cypress/plugins
+*/cypress/screenshots
+*/cypress/videos
+*/cypress/support

README.md

@@ -52,8 +52,8 @@ Pick one from the [Releases](https://github.com/up9inc/mizu/releases) page
 ## How to Run
 
 1. Find pods you'd like to tap to in your Kubernetes cluster
-2. Run `mizu tap` or `mizu tap PODNAME`  
-3. Open browser on `http://localhost:8899/mizu` **or** as instructed in the CLI
+2. Run `mizu tap` or `mizu tap PODNAME`
+3. Open browser on `http://localhost:8899` **or** as instructed in the CLI
 4. Watch the API traffic flowing
 5. Type ^C to stop
 
@@ -172,12 +172,10 @@ Please see [CONTRACT MONITORING](docs/CONTRACT_MONITORING.md) page for more deta
 
 ### Configure proxy host 
 
-By default, mizu will be accessible via local host: 'http://localhost:8899/mizu/', it is possible to change the host,
-for instance, to '0.0.0.0' which can grant access via machine IP address.
-This setting can be changed via command line flag `--set tap.proxy-host=<value>` or via config file:
-tap
-    proxy-host: 0.0.0.0
-and when changed it will support accessing by IP
+By default, mizu will be accessible via local host: 'http://localhost:8899', it is possible to change the host, for
+instance, to '0.0.0.0' which can grant access via machine IP address. This setting can be changed via command line
+flag `--set tap.proxy-host=<value>` or via config file:
+tap proxy-host: 0.0.0.0 and when changed it will support accessing by IP
 
 ### Install Mizu standalone
 

acceptanceTests/cypress.json

@@ -0,0 +1,8 @@
+{
+  "watchForFileChanges":false,
+  "viewportWidth": 1920,
+  "viewportHeight": 1080,
+  "video": false,
+  "screenshotOnRunFailure": false,
+  "testFiles": ["tests/GuiPort.js"]
+}

acceptanceTests/cypress/integration/tests/GuiPort.js

@@ -0,0 +1,8 @@
+it('check', function () {
+    cy.visit(`http://localhost:${Cypress.env('port')}/`)
+
+    cy.get('.header').should('be.visible')
+    cy.get('.TrafficPageHeader').should('be.visible')
+    cy.get('.TrafficPage-ListContainer').should('be.visible')
+    cy.get('.TrafficPage-Container').should('be.visible')
+})

acceptanceTests/tap_test.go

@@ -138,6 +138,8 @@ func TestTapGuiPort(t *testing.T) {
 				t.Errorf("failed to start tap pods on time, err: %v", err)
 				return
 			}
+
+			runCypressTests(t, fmt.Sprintf("npx cypress run --spec \"cypress/integration/tests/GuiPort.js\" --env port=%d", guiPort))
 		})
 	}
 }

acceptanceTests/testsUtils.go

@@ -13,6 +13,7 @@ import (
 	"strings"
 	"sync"
 	"syscall"
+	"testing"
 	"time"
 
 	"github.com/gorilla/websocket"
@@ -143,6 +144,17 @@ func getDefaultViewCommandArgs() []string {
 	return append([]string{viewCommand}, defaultCmdArgs...)
 }
 
+func runCypressTests(t *testing.T, cypressRunCmd string) {
+	cypressCmd := exec.Command("bash", "-c", cypressRunCmd)
+	t.Logf("running command: %v", cypressCmd.String())
+	out, err := cypressCmd.Output()
+	if err != nil {
+		t.Errorf("%s", out)
+		return
+	}
+	t.Logf("%s", out)
+}
+
 func retriesExecute(retriesCount int, executeFunc func() error) error {
 	var lastError interface{}
 

agent/main.go

@@ -1,7 +1,6 @@
 package main
 
 import (
-	"context"
 	"encoding/json"
 	"errors"
 	"flag"
@@ -11,7 +10,6 @@ import (
 	"mizuserver/pkg/config"
 	"mizuserver/pkg/controllers"
 	"mizuserver/pkg/models"
-	"mizuserver/pkg/providers"
 	"mizuserver/pkg/routes"
 	"mizuserver/pkg/up9"
 	"mizuserver/pkg/utils"
@@ -22,12 +20,12 @@ import (
 	"path"
 	"path/filepath"
 	"plugin"
-	"regexp"
 	"sort"
+	"strconv"
+	"strings"
 	"syscall"
 	"time"
 
-	"github.com/up9inc/mizu/shared/kubernetes"
 	v1 "k8s.io/api/core/v1"
 
 	"github.com/antelman107/net-wait-go/wait"
@@ -59,6 +57,7 @@ const (
 	socketConnectionRetries    = 30
 	socketConnectionRetryDelay = time.Second * 2
 	socketHandshakeTimeout     = time.Second * 2
+	uiIndexPath                = "./site/index.html"
 )
 
 func main() {
@@ -251,10 +250,20 @@ func hostApi(socketHarOutputChannel chan<- *tapApi.OutputChannelItem) {
 	}
 
 	app.Use(DisableRootStaticCache())
+
+	if err := setUIMode(); err != nil {
+		logger.Log.Errorf("Error setting ui mode, err: %v", err)
+	}
 	app.Use(static.ServeRoot("/", "./site"))
+
 	app.Use(CORSMiddleware()) // This has to be called after the static middleware, does not work if its called before
 
 	api.WebSocketRoutes(app, &eventHandlers, startTime)
+
+	if config.Config.StandaloneMode {
+		routes.StandaloneRoutes(app)
+	}
+
 	routes.QueryRoutes(app)
 	routes.EntriesRoutes(app)
 	routes.MetadataRoutes(app)
@@ -291,6 +300,22 @@ func CORSMiddleware() gin.HandlerFunc {
 	}
 }
 
+func setUIMode() error {
+	read, err := ioutil.ReadFile(uiIndexPath)
+	if err != nil {
+		return err
+	}
+
+	replacedContent := strings.Replace(string(read), "__IS_STANDALONE__", strconv.FormatBool(config.Config.StandaloneMode), 1)
+
+	err = ioutil.WriteFile(uiIndexPath, []byte(replacedContent), 0)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func parseEnvVar(env string) map[string][]v1.Pod {
 	var mapOfList map[string][]v1.Pod
 
@@ -447,67 +472,3 @@ func handleIncomingMessageAsTapper(socketConnection *websocket.Conn) {
 		}
 	}
 }
-
-func startMizuTapperSyncer(ctx context.Context, provider *kubernetes.Provider, targetNamespaces []string, podFilterRegex regexp.Regexp, ignoredUserAgents []string, mizuApiFilteringOptions tapApi.TrafficFilteringOptions, istio bool) (*kubernetes.MizuTapperSyncer, error) {
-	tapperSyncer, err := kubernetes.CreateAndStartMizuTapperSyncer(ctx, provider, kubernetes.TapperSyncerConfig{
-		TargetNamespaces:         targetNamespaces,
-		PodFilterRegex:           podFilterRegex,
-		MizuResourcesNamespace:   config.Config.MizuResourcesNamespace,
-		AgentImage:               config.Config.AgentImage,
-		TapperResources:          config.Config.TapperResources,
-		ImagePullPolicy:          v1.PullPolicy(config.Config.PullPolicy),
-		LogLevel:                 config.Config.LogLevel,
-		IgnoredUserAgents:        ignoredUserAgents,
-		MizuApiFilteringOptions:  mizuApiFilteringOptions,
-		MizuServiceAccountExists: true, //assume service account exists since install mode will not function without it anyway
-		Istio:                    istio,
-	}, time.Now())
-
-	if err != nil {
-		return nil, err
-	}
-
-	// handle tapperSyncer events (pod changes and errors)
-	go func() {
-		for {
-			select {
-			case syncerErr, ok := <-tapperSyncer.ErrorOut:
-				if !ok {
-					logger.Log.Debug("mizuTapperSyncer err channel closed, ending listener loop")
-					return
-				}
-				logger.Log.Fatalf("fatal tap syncer error: %v", syncerErr)
-			case tapPodChangeEvent, ok := <-tapperSyncer.TapPodChangesOut:
-				if !ok {
-					logger.Log.Debug("mizuTapperSyncer pod changes channel closed, ending listener loop")
-					return
-				}
-				providers.TapStatus = shared.TapStatus{Pods: kubernetes.GetPodInfosForPods(tapperSyncer.CurrentlyTappedPods)}
-
-				tappedPodsStatus := utils.GetTappedPodsStatus()
-
-				serializedTapStatus, err := json.Marshal(shared.CreateWebSocketStatusMessage(tappedPodsStatus))
-				if err != nil {
-					logger.Log.Fatalf("error serializing tap status: %v", err)
-				}
-				api.BroadcastToBrowserClients(serializedTapStatus)
-				providers.ExpectedTapperAmount = tapPodChangeEvent.ExpectedTapperAmount
-			case tapperStatus, ok := <-tapperSyncer.TapperStatusChangedOut:
-				if !ok {
-					logger.Log.Debug("mizuTapperSyncer tapper status changed channel closed, ending listener loop")
-					return
-				}
-				if providers.TappersStatus == nil {
-					providers.TappersStatus = make(map[string]shared.TapperStatus)
-				}
-				providers.TappersStatus[tapperStatus.NodeName] = tapperStatus
-
-			case <-ctx.Done():
-				logger.Log.Debug("mizuTapperSyncer event listener loop exiting due to context done")
-				return
-			}
-		}
-	}()
-
-	return tapperSyncer, nil
-}

agent/pkg/api/socket_routes.go

@@ -83,10 +83,10 @@ func websocketHandler(w http.ResponseWriter, r *http.Request, eventHandlers Even
 	meta := make(chan []byte)
 
 	defer func() {
+		socketCleanup(socketId, connectedWebsockets[socketId])
 		data <- []byte(basenine.CloseChannel)
 		meta <- []byte(basenine.CloseChannel)
 		connection.Close()
-		socketCleanup(socketId, connectedWebsockets[socketId])
 	}()
 
 	eventHandlers.WebSocketConnect(socketId, isTapper)
@@ -97,7 +97,12 @@ func websocketHandler(w http.ResponseWriter, r *http.Request, eventHandlers Even
 	for {
 		_, msg, err := ws.ReadMessage()
 		if err != nil {
-			logger.Log.Errorf("Error reading message, socket id: %d, error: %v", socketId, err)
+			if _, ok := err.(*websocket.CloseError); ok {
+				logger.Log.Debugf("Received websocket close message, socket id: %d", socketId)
+			} else {
+				logger.Log.Errorf("Error reading message, socket id: %d, error: %v", socketId, err)
+			}
+
 			break
 		}
 

agent/pkg/controllers/standalone_controller.go

@@ -0,0 +1,133 @@
+package controllers
+
+import (
+	"context"
+	"github.com/gin-gonic/gin"
+	"github.com/up9inc/mizu/shared"
+	"github.com/up9inc/mizu/shared/kubernetes"
+	"github.com/up9inc/mizu/shared/logger"
+	tapApi "github.com/up9inc/mizu/tap/api"
+	v1 "k8s.io/api/core/v1"
+	"mizuserver/pkg/config"
+	"mizuserver/pkg/models"
+	"mizuserver/pkg/providers"
+	"net/http"
+	"regexp"
+	"time"
+)
+
+var globalTapConfig *models.StandaloneTapConfig
+var cancelTapperSyncer context.CancelFunc
+var kubernetesProvider *kubernetes.Provider
+
+func PostTapConfig(c *gin.Context) {
+	tapConfig := &models.StandaloneTapConfig{}
+
+	if err := c.Bind(tapConfig); err != nil {
+		c.JSON(http.StatusBadRequest, err)
+		return
+	}
+
+	if cancelTapperSyncer != nil {
+		cancelTapperSyncer()
+
+		providers.TapStatus = shared.TapStatus{}
+		providers.TappersStatus = make(map[string]shared.TapperStatus)
+
+		broadcastTappedPodsStatus()
+	}
+
+	if kubernetesProvider == nil {
+		var err error
+		kubernetesProvider, err = kubernetes.NewProviderInCluster()
+		if err != nil {
+			c.JSON(http.StatusBadRequest, err)
+			return
+		}
+	}
+
+	ctx, cancel := context.WithCancel(context.Background())
+
+	var tappedNamespaces []string
+	for namespace, tapped := range tapConfig.TappedNamespaces {
+		if tapped {
+			tappedNamespaces = append(tappedNamespaces, namespace)
+		}
+	}
+
+	podRegex, _ := regexp.Compile(".*")
+
+	if _, err := startMizuTapperSyncer(ctx, kubernetesProvider, tappedNamespaces, *podRegex, []string{} , tapApi.TrafficFilteringOptions{}, false); err != nil {
+		c.JSON(http.StatusBadRequest, err)
+		cancel()
+		return
+	}
+
+	cancelTapperSyncer = cancel
+	globalTapConfig = tapConfig
+
+	c.JSON(http.StatusOK, "OK")
+}
+
+func GetTapConfig(c *gin.Context) {
+	if globalTapConfig != nil {
+		c.JSON(http.StatusOK, globalTapConfig)
+	}
+
+	c.JSON(http.StatusBadRequest, "Not config found")
+}
+
+func startMizuTapperSyncer(ctx context.Context, provider *kubernetes.Provider, targetNamespaces []string, podFilterRegex regexp.Regexp, ignoredUserAgents []string, mizuApiFilteringOptions tapApi.TrafficFilteringOptions, istio bool) (*kubernetes.MizuTapperSyncer, error) {
+	tapperSyncer, err := kubernetes.CreateAndStartMizuTapperSyncer(ctx, provider, kubernetes.TapperSyncerConfig{
+		TargetNamespaces:         targetNamespaces,
+		PodFilterRegex:           podFilterRegex,
+		MizuResourcesNamespace:   config.Config.MizuResourcesNamespace,
+		AgentImage:               config.Config.AgentImage,
+		TapperResources:          config.Config.TapperResources,
+		ImagePullPolicy:          v1.PullPolicy(config.Config.PullPolicy),
+		LogLevel:                 config.Config.LogLevel,
+		IgnoredUserAgents:        ignoredUserAgents,
+		MizuApiFilteringOptions:  mizuApiFilteringOptions,
+		MizuServiceAccountExists: true, //assume service account exists since install mode will not function without it anyway
+		Istio:                    istio,
+	}, time.Now())
+
+	if err != nil {
+		return nil, err
+	}
+
+	// handle tapperSyncer events (pod changes and errors)
+	go func() {
+		for {
+			select {
+			case syncerErr, ok := <-tapperSyncer.ErrorOut:
+				if !ok {
+					logger.Log.Debug("mizuTapperSyncer err channel closed, ending listener loop")
+					return
+				}
+				logger.Log.Fatalf("fatal tap syncer error: %v", syncerErr)
+			case _, ok := <-tapperSyncer.TapPodChangesOut:
+				if !ok {
+					logger.Log.Debug("mizuTapperSyncer pod changes channel closed, ending listener loop")
+					return
+				}
+
+				providers.TapStatus = shared.TapStatus{Pods: kubernetes.GetPodInfosForPods(tapperSyncer.CurrentlyTappedPods)}
+				broadcastTappedPodsStatus()
+			case tapperStatus, ok := <-tapperSyncer.TapperStatusChangedOut:
+				if !ok {
+					logger.Log.Debug("mizuTapperSyncer tapper status changed channel closed, ending listener loop")
+					return
+				}
+
+				addTapperStatus(tapperStatus)
+				broadcastTappedPodsStatus()
+			case <-ctx.Done():
+				logger.Log.Debug("mizuTapperSyncer event listener loop exiting due to context done")
+				return
+			}
+		}
+	}()
+
+	return tapperSyncer, nil
+}

agent/pkg/controllers/status_controller.go

@@ -54,21 +54,28 @@ func broadcastTappedPodsStatus() {
 	}
 }
 
+func addTapperStatus(tapperStatus shared.TapperStatus) {
+	if providers.TappersStatus == nil {
+		providers.TappersStatus = make(map[string]shared.TapperStatus)
+	}
+
+	providers.TappersStatus[tapperStatus.NodeName] = tapperStatus
+}
+
 func PostTapperStatus(c *gin.Context) {
 	tapperStatus := &shared.TapperStatus{}
 	if err := c.Bind(tapperStatus); err != nil {
 		c.JSON(http.StatusBadRequest, err)
 		return
 	}
+
 	if err := validation.Validate(tapperStatus); err != nil {
 		c.JSON(http.StatusBadRequest, err)
 		return
 	}
+
 	logger.Log.Infof("[Status] POST request, tapper status: %v", tapperStatus)
-	if providers.TappersStatus == nil {
-		providers.TappersStatus = make(map[string]shared.TapperStatus)
-	}
-	providers.TappersStatus[tapperStatus.NodeName] = *tapperStatus
+	addTapperStatus(*tapperStatus)
 	broadcastTappedPodsStatus()
 }
 

agent/pkg/models/models.go

@@ -16,6 +16,10 @@ func GetEntry(r *tapApi.MizuEntry, v tapApi.DataUnmarshaler) error {
 	return v.UnmarshalData(r)
 }
 
+type StandaloneTapConfig struct {
+	TappedNamespaces map[string]bool `json:"tappedNamespaces"`
+}
+
 type EntriesRequest struct {
 	LeftOff   int    `form:"leftOff" validate:"required,min=-1"`
 	Direction int    `form:"direction" validate:"required,oneof='1' '-1'"`

agent/pkg/providers/status_provider.go

@@ -20,7 +20,6 @@ var (
 	TappersStatus        map[string]shared.TapperStatus
 	authStatus           *models.AuthStatus
 	RecentTLSLinks       = cache.New(tlsLinkRetainmentTime, tlsLinkRetainmentTime)
-	ExpectedTapperAmount = -1 //only relevant in install mode as cli manages tappers otherwise
 	tappersCountLock     = sync.Mutex{}
 )
 

agent/pkg/routes/standalone_routes.go

@@ -0,0 +1,13 @@
+package routes
+
+import (
+	"github.com/gin-gonic/gin"
+	"mizuserver/pkg/controllers"
+)
+
+func StandaloneRoutes(ginApp *gin.Engine) {
+	routeGroup := ginApp.Group("/standalone")
+
+	routeGroup.POST("/tapConfig", controllers.PostTapConfig)
+	routeGroup.GET("/tapConfig", controllers.GetTapConfig)
+}

cli/apiserver/provider.go

@@ -4,11 +4,9 @@ import (
 	"bytes"
 	"encoding/json"
 	"fmt"
-	"io"
 	"io/ioutil"
 	"net/http"
 	"net/url"
-	"strings"
 	"time"
 
 	"github.com/up9inc/mizu/shared/kubernetes"
@@ -41,7 +39,7 @@ func NewProvider(url string, retries int, timeout time.Duration) *Provider {
 func (provider *Provider) TestConnection() error {
 	retriesLeft := provider.retries
 	for retriesLeft > 0 {
-		if _, err := provider.GetHealthStatus(); err != nil {
+		if isReachable, err := provider.isReachable(); err != nil || !isReachable {
 			logger.Log.Debugf("api server not ready yet %v", err)
 		} else {
 			logger.Log.Debugf("connection test to api server passed successfully")
@@ -57,27 +55,14 @@ func (provider *Provider) TestConnection() error {
 	return nil
 }
 
-func (provider *Provider) GetHealthStatus() (*shared.HealthResponse, error) {
-	healthUrl := fmt.Sprintf("%s/echo", provider.url)
-	if response, err := provider.client.Get(healthUrl); err != nil {
-		return nil, err
-	} else if response.StatusCode > 299 {
-		responseBody := new(strings.Builder)
-
-		if _, err := io.Copy(responseBody, response.Body); err != nil {
-			return nil, fmt.Errorf("status code: %d - (bad response - %v)", response.StatusCode, err)
-		} else {
-			singleLineResponse := strings.ReplaceAll(responseBody.String(), "\n", "")
-			return nil, fmt.Errorf("status code: %d - (response - %v)", response.StatusCode, singleLineResponse)
-		}
+func (provider *Provider) isReachable() (bool, error) {
+	echoUrl := fmt.Sprintf("%s/echo", provider.url)
+	if response, err := provider.client.Get(echoUrl); err != nil {
+		return false, err
+	} else if response.StatusCode != 200 {
+		return false, fmt.Errorf("invalid status code %v", response.StatusCode)
 	} else {
-		defer response.Body.Close()
-
-		healthResponse := &shared.HealthResponse{}
-		if err := json.NewDecoder(response.Body).Decode(&healthResponse); err != nil {
-			return nil, err
-		}
-		return healthResponse, nil
+		return true, nil
 	}
 }
 

cli/cmd/installRunner.go

@@ -65,6 +65,7 @@ func getInstallMizuAgentConfig(maxDBSizeBytes int64, tapperResources shared.Reso
 		TapperResources:        tapperResources,
 		MizuResourcesNamespace: config.Config.MizuResourcesNamespace,
 		AgentDatabasePath:      shared.DataDirPath,
+		StandaloneMode:         true,
 	}
 
 	return &mizuAgentConfig

cli/resources/cleanResources.go

@@ -42,14 +42,29 @@ func cleanUpNonRestrictedMode(ctx context.Context, cancel context.CancelFunc, ku
 		defer waitUntilNamespaceDeleted(ctx, cancel, kubernetesProvider, mizuResourcesNamespace)
 	}
 
-	if err := kubernetesProvider.RemoveClusterRole(ctx, kubernetes.ClusterRoleName); err != nil {
-		resourceDesc := fmt.Sprintf("ClusterRole %s", kubernetes.ClusterRoleName)
+	if resources, err := kubernetesProvider.ListManagedClusterRoles(ctx); err != nil {
+		resourceDesc := "ClusterRoles"
 		handleDeletionError(err, resourceDesc, &leftoverResources)
+	} else {
+		for _, resource := range resources.Items {
+			if err := kubernetesProvider.RemoveClusterRole(ctx, resource.Name); err != nil {
+				resourceDesc := fmt.Sprintf("ClusterRole %s", resource.Name)
+				handleDeletionError(err, resourceDesc, &leftoverResources)
+			}
+		}
 	}
 
-	if err := kubernetesProvider.RemoveClusterRoleBinding(ctx, kubernetes.ClusterRoleBindingName); err != nil {
-		resourceDesc := fmt.Sprintf("ClusterRoleBinding %s", kubernetes.ClusterRoleBindingName)
+
+	if resources, err := kubernetesProvider.ListManagedClusterRoleBindings(ctx); err != nil {
+		resourceDesc := "ClusterRoleBindings"
 		handleDeletionError(err, resourceDesc, &leftoverResources)
+	} else {
+		for _, resource := range resources.Items {
+			if err := kubernetesProvider.RemoveClusterRoleBinding(ctx, resource.Name); err != nil {
+				resourceDesc := fmt.Sprintf("ClusterRoleBinding %s", resource.Name)
+				handleDeletionError(err, resourceDesc, &leftoverResources)
+			}
+		}
 	}
 
 	return leftoverResources
@@ -91,14 +106,40 @@ func cleanUpRestrictedMode(ctx context.Context, kubernetesProvider *kubernetes.P
 		handleDeletionError(err, resourceDesc, &leftoverResources)
 	}
 
-	if err := kubernetesProvider.RemoveServicAccount(ctx, mizuResourcesNamespace, kubernetes.ServiceAccountName); err != nil {
-		resourceDesc := fmt.Sprintf("Service Account %s in namespace %s", kubernetes.ServiceAccountName, mizuResourcesNamespace)
+	if resources, err := kubernetesProvider.ListManagedServiceAccounts(ctx, mizuResourcesNamespace); err != nil {
+		resourceDesc := fmt.Sprintf("ServiceAccounts in namespace %s", mizuResourcesNamespace)
 		handleDeletionError(err, resourceDesc, &leftoverResources)
+	} else {
+		for _, resource := range resources.Items {
+			if err := kubernetesProvider.RemoveServicAccount(ctx, mizuResourcesNamespace, resource.Name); err != nil {
+				resourceDesc := fmt.Sprintf("ServiceAccount %s in namespace %s", resource.Name, mizuResourcesNamespace)
+				handleDeletionError(err, resourceDesc, &leftoverResources)
+			}
+		}
 	}
 
-	if err := kubernetesProvider.RemoveRole(ctx, mizuResourcesNamespace, kubernetes.RoleName); err != nil {
-		resourceDesc := fmt.Sprintf("Role %s in namespace %s", kubernetes.RoleName, mizuResourcesNamespace)
+	if resources, err := kubernetesProvider.ListManagedRoles(ctx, mizuResourcesNamespace); err != nil {
+		resourceDesc := fmt.Sprintf("Roles in namespace %s", mizuResourcesNamespace)
 		handleDeletionError(err, resourceDesc, &leftoverResources)
+	} else {
+		for _, resource := range resources.Items {
+			if err := kubernetesProvider.RemoveRole(ctx, mizuResourcesNamespace, resource.Name); err != nil {
+				resourceDesc := fmt.Sprintf("Role %s in namespace %s", resource.Name, mizuResourcesNamespace)
+				handleDeletionError(err, resourceDesc, &leftoverResources)
+			}
+		}
+	}
+
+	if resources, err := kubernetesProvider.ListManagedRoleBindings(ctx, mizuResourcesNamespace); err != nil {
+		resourceDesc := fmt.Sprintf("RoleBindings in namespace %s", mizuResourcesNamespace)
+		handleDeletionError(err, resourceDesc, &leftoverResources)
+	} else {
+		for _, resource := range resources.Items {
+			if err := kubernetesProvider.RemoveRoleBinding(ctx, mizuResourcesNamespace, resource.Name); err != nil {
+				resourceDesc := fmt.Sprintf("RoleBinding %s in namespace %s", resource.Name, mizuResourcesNamespace)
+				handleDeletionError(err, resourceDesc, &leftoverResources)
+			}
+		}
 	}
 
 	if err := kubernetesProvider.RemovePod(ctx, mizuResourcesNamespace, kubernetes.ApiServerPodName); err != nil {
@@ -107,10 +148,6 @@ func cleanUpRestrictedMode(ctx context.Context, kubernetesProvider *kubernetes.P
 	}
 
 	//install mode resources
-	if err := kubernetesProvider.RemoveRoleBinding(ctx, mizuResourcesNamespace, kubernetes.RoleBindingName); err != nil {
-		resourceDesc := fmt.Sprintf("RoleBinding %s in namespace %s", kubernetes.RoleBindingName, mizuResourcesNamespace)
-		handleDeletionError(err, resourceDesc, &leftoverResources)
-	}
 
 	if err := kubernetesProvider.RemoveDeployment(ctx, mizuResourcesNamespace, kubernetes.ApiServerPodName); err != nil {
 		resourceDesc := fmt.Sprintf("Deployment %s in namespace %s", kubernetes.ApiServerPodName, mizuResourcesNamespace)
@@ -122,16 +159,6 @@ func cleanUpRestrictedMode(ctx context.Context, kubernetesProvider *kubernetes.P
 		handleDeletionError(err, resourceDesc, &leftoverResources)
 	}
 
-	if err := kubernetesProvider.RemoveRole(ctx, mizuResourcesNamespace, kubernetes.DaemonRoleName); err != nil {
-		resourceDesc := fmt.Sprintf("Role %s in namespace %s", kubernetes.DaemonRoleName, mizuResourcesNamespace)
-		handleDeletionError(err, resourceDesc, &leftoverResources)
-	}
-
-	if err := kubernetesProvider.RemoveRoleBinding(ctx, mizuResourcesNamespace, kubernetes.DaemonRoleBindingName); err != nil {
-		resourceDesc := fmt.Sprintf("RoleBinding %s in namespace %s", kubernetes.DaemonRoleBindingName, mizuResourcesNamespace)
-		handleDeletionError(err, resourceDesc, &leftoverResources)
-	}
-
 	return leftoverResources
 }
 

shared/kubernetes/consts.go

@@ -17,3 +17,12 @@ const (
 	PersistentVolumeClaimName  = MizuResourcesPrefix + "volume-claim"
 	MinKubernetesServerVersion = "1.16.0"
 )
+
+const (
+	LabelPrefixApp      = "app.kubernetes.io/"
+	LabelManagedBy      = LabelPrefixApp + "managed-by"
+	LabelCreatedBy      = LabelPrefixApp + "created-by"
+	LabelValueMizu      = "mizu"
+	LabelValueMizuCLI   = "mizu-cli"
+	LabelValueMizuAgent = "mizu-agent"
+)

shared/kubernetes/mizuTapperSyncer.go

@@ -18,7 +18,6 @@ const updateTappersDelay = 5 * time.Second
 type TappedPodChangeEvent struct {
 	Added                []core.Pod
 	Removed              []core.Pod
-	ExpectedTapperAmount int
 }
 
 // MizuTapperSyncer uses a k8s pod watch to update tapper daemonsets when targeted pods are removed or created
@@ -93,6 +92,10 @@ func (tapperSyncer *MizuTapperSyncer) watchTapperPods() {
 				continue
 			}
 
+			if tapperSyncer.startTime.After(pod.CreationTimestamp.Time) {
+				continue
+			}
+
 			logger.Log.Debugf("Watching tapper pods loop, tapper: %v, node: %v, status: %v", pod.Name, pod.Spec.NodeName, pod.Status.Phase)
 			if pod.Spec.NodeName != "" {
 				tapperStatus := shared.TapperStatus{TapperName: pod.Name, NodeName: pod.Spec.NodeName, Status: string(pod.Status.Phase)}
@@ -147,7 +150,7 @@ func (tapperSyncer *MizuTapperSyncer) watchTapperEvents() {
 
 			pod, err1 := tapperSyncer.kubernetesProvider.GetPod(tapperSyncer.context, tapperSyncer.config.MizuResourcesNamespace, event.Regarding.Name)
 			if err1 != nil {
-				logger.Log.Debugf(fmt.Sprintf("Failed to get tapper pod %s", event.Regarding.Name))
+				logger.Log.Debugf(fmt.Sprintf("Couldn't get tapper pod %s", event.Regarding.Name))
 				continue
 			}
 
@@ -284,7 +287,6 @@ func (tapperSyncer *MizuTapperSyncer) updateCurrentlyTappedPods() (err error, ch
 			tapperSyncer.TapPodChangesOut <- TappedPodChangeEvent{
 				Added:                addedPods,
 				Removed:              removedPods,
-				ExpectedTapperAmount: len(tapperSyncer.nodeToTappedPodMap),
 			}
 			return nil, true
 		}

shared/kubernetes/provider.go

@@ -43,6 +43,8 @@ type Provider struct {
 	kubernetesConfig clientcmd.ClientConfig
 	clientConfig     restclient.Config
 	Namespace        string
+	managedBy   string
+	createdBy   string
 }
 
 const (
@@ -86,6 +88,8 @@ func NewProvider(kubeConfigPath string) (*Provider, error) {
 		clientSet:        clientSet,
 		kubernetesConfig: kubernetesConfig,
 		clientConfig:     *restClientConfig,
+		managedBy:        LabelValueMizu,
+		createdBy:        LabelValueMizuCLI,
 	}, nil
 }
 
@@ -103,6 +107,8 @@ func NewProviderInCluster() (*Provider, error) {
 		clientSet:        clientSet,
 		kubernetesConfig: nil, // not relevant in cluster
 		clientConfig:     *restClientConfig,
+		managedBy:        LabelValueMizu,
+		createdBy:        LabelValueMizuAgent,
 	}, nil
 }
 
@@ -158,6 +164,10 @@ func (provider *Provider) CreateNamespace(ctx context.Context, name string) (*co
 	namespaceSpec := &core.Namespace{
 		ObjectMeta: metav1.ObjectMeta{
 			Name: name,
+			Labels: map[string]string{
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 	}
 	return provider.clientSet.CoreV1().Namespaces().Create(ctx, namespaceSpec, metav1.CreateOptions{})
@@ -243,7 +253,11 @@ func (provider *Provider) GetMizuApiServerPodObject(opts *ApiServerOptions, moun
 	pod := &core.Pod{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   opts.PodName,
-			Labels: map[string]string{"app": opts.PodName},
+			Labels: map[string]string{
+				"app": opts.PodName,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Spec: core.PodSpec{
 			Containers: []core.Container{
@@ -303,6 +317,10 @@ func (provider *Provider) CreateDeployment(ctx context.Context, namespace string
 	deployment := &v1.Deployment{
 		ObjectMeta: metav1.ObjectMeta{
 			Name: deploymentName,
+			Labels: map[string]string{
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Spec: v1.DeploymentSpec{
 			Selector: &metav1.LabelSelector{
@@ -319,6 +337,10 @@ func (provider *Provider) CreateService(ctx context.Context, namespace string, s
 	service := core.Service{
 		ObjectMeta: metav1.ObjectMeta{
 			Name: serviceName,
+			Labels: map[string]string{
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Spec: core.ServiceSpec{
 			Ports:    []core.ServicePort{{TargetPort: intstr.FromInt(shared.DefaultApiServerPort), Port: 80}},
@@ -351,13 +373,21 @@ func (provider *Provider) CreateMizuRBAC(ctx context.Context, namespace string,
 	serviceAccount := &core.ServiceAccount{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   serviceAccountName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 	}
 	clusterRole := &rbac.ClusterRole{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   clusterRoleName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Rules: []rbac.PolicyRule{
 			{
@@ -370,7 +400,11 @@ func (provider *Provider) CreateMizuRBAC(ctx context.Context, namespace string,
 	clusterRoleBinding := &rbac.ClusterRoleBinding{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   clusterRoleBindingName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		RoleRef: rbac.RoleRef{
 			Name:     clusterRoleName,
@@ -404,13 +438,21 @@ func (provider *Provider) CreateMizuRBACNamespaceRestricted(ctx context.Context,
 	serviceAccount := &core.ServiceAccount{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   serviceAccountName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 	}
 	role := &rbac.Role{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   roleName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Rules: []rbac.PolicyRule{
 			{
@@ -423,7 +465,11 @@ func (provider *Provider) CreateMizuRBACNamespaceRestricted(ctx context.Context,
 	roleBinding := &rbac.RoleBinding{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   roleBindingName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		RoleRef: rbac.RoleRef{
 			Name:     roleName,
@@ -457,7 +503,11 @@ func (provider *Provider) CreateDaemonsetRBAC(ctx context.Context, namespace str
 	role := &rbac.Role{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   roleName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Rules: []rbac.PolicyRule{
 			{
@@ -475,7 +525,11 @@ func (provider *Provider) CreateDaemonsetRBAC(ctx context.Context, namespace str
 	roleBinding := &rbac.RoleBinding{
 		ObjectMeta: metav1.ObjectMeta{
 			Name:   roleBindingName,
-			Labels: map[string]string{"mizu-cli-version": version},
+			Labels: map[string]string{
+				"mizu-cli-version": version,
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		RoleRef: rbac.RoleRef{
 			Name:     roleName,
@@ -588,6 +642,10 @@ func (provider *Provider) CreateConfigMap(ctx context.Context, namespace string,
 		},
 		ObjectMeta: metav1.ObjectMeta{
 			Name: configMapName,
+			Labels: map[string]string{
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Data: configMapData,
 	}
@@ -746,14 +804,23 @@ func (provider *Provider) ApplyMizuTapperDaemonSet(ctx context.Context, namespac
 	podSpec.WithVolumes(&configMapVolume, procfsVolume)
 
 	podTemplate := applyconfcore.PodTemplateSpec()
-	podTemplate.WithLabels(map[string]string{"app": tapperPodName})
+	podTemplate.WithLabels(map[string]string{
+		"app": tapperPodName,
+		LabelManagedBy: provider.managedBy,
+		LabelCreatedBy: provider.createdBy,
+	})
 	podTemplate.WithSpec(podSpec)
 
 	labelSelector := applyconfmeta.LabelSelector()
 	labelSelector.WithMatchLabels(map[string]string{"app": tapperPodName})
 
 	daemonSet := applyconfapp.DaemonSet(daemonSetName, namespace)
-	daemonSet.WithSpec(applyconfapp.DaemonSetSpec().WithSelector(labelSelector).WithTemplate(podTemplate))
+	daemonSet.
+		WithLabels(map[string]string{
+			LabelManagedBy: provider.managedBy,
+			LabelCreatedBy: provider.createdBy,
+		}).
+		WithSpec(applyconfapp.DaemonSetSpec().WithSelector(labelSelector).WithTemplate(podTemplate))
 
 	_, err = provider.clientSet.AppsV1().DaemonSets(namespace).Apply(ctx, daemonSet, metav1.ApplyOptions{FieldManager: fieldManagerName})
 	return err
@@ -827,6 +894,41 @@ func (provider *Provider) GetNamespaceEvents(ctx context.Context, namespace stri
 	return eventList.String(), nil
 }
 
+func (provider *Provider) ListManagedServiceAccounts(ctx context.Context, namespace string) (*core.ServiceAccountList, error) {
+	listOptions := metav1.ListOptions{
+		LabelSelector: fmt.Sprintf("%s=%s", LabelManagedBy, provider.managedBy),
+	}
+	return provider.clientSet.CoreV1().ServiceAccounts(namespace).List(ctx, listOptions)
+}
+
+func (provider *Provider) ListManagedClusterRoles(ctx context.Context) (*rbac.ClusterRoleList, error) {
+	listOptions := metav1.ListOptions{
+		LabelSelector: fmt.Sprintf("%s=%s", LabelManagedBy, provider.managedBy),
+	}
+	return provider.clientSet.RbacV1().ClusterRoles().List(ctx, listOptions)
+}
+
+func (provider *Provider) ListManagedClusterRoleBindings(ctx context.Context) (*rbac.ClusterRoleBindingList, error) {
+	listOptions := metav1.ListOptions{
+		LabelSelector: fmt.Sprintf("%s=%s", LabelManagedBy, provider.managedBy),
+	}
+	return provider.clientSet.RbacV1().ClusterRoleBindings().List(ctx, listOptions)
+}
+
+func (provider *Provider) ListManagedRoles(ctx context.Context, namespace string) (*rbac.RoleList, error) {
+	listOptions := metav1.ListOptions{
+		LabelSelector: fmt.Sprintf("%s=%s", LabelManagedBy, provider.managedBy),
+	}
+	return provider.clientSet.RbacV1().Roles(namespace).List(ctx, listOptions)
+}
+
+func (provider *Provider) ListManagedRoleBindings(ctx context.Context, namespace string) (*rbac.RoleBindingList, error) {
+	listOptions := metav1.ListOptions{
+		LabelSelector: fmt.Sprintf("%s=%s", LabelManagedBy, provider.managedBy),
+	}
+	return provider.clientSet.RbacV1().RoleBindings(namespace).List(ctx, listOptions)
+}
+
 func (provider *Provider) IsDefaultStorageProviderAvailable(ctx context.Context) (bool, error) {
 	storageClassList, err := provider.clientSet.StorageV1().StorageClasses().List(ctx, metav1.ListOptions{})
 	if err != nil {
@@ -845,6 +947,10 @@ func (provider *Provider) CreatePersistentVolumeClaim(ctx context.Context, names
 	volumeClaim := &core.PersistentVolumeClaim{
 		ObjectMeta: metav1.ObjectMeta{
 			Name: volumeClaimName,
+			Labels: map[string]string{
+				LabelManagedBy: provider.managedBy,
+				LabelCreatedBy: provider.createdBy,
+			},
 		},
 		Spec: core.PersistentVolumeClaimSpec{
 			AccessModes: []core.PersistentVolumeAccessMode{core.ReadWriteOnce},

shared/models.go

@@ -40,6 +40,7 @@ type MizuAgentConfig struct {
 	TapperResources        Resources     `json:"tapperResources"`
 	MizuResourcesNamespace string        `json:"mizuResourceNamespace"`
 	AgentDatabasePath      string        `json:"agentDatabasePath"`
+	StandaloneMode         bool          `json:"standaloneMode"`
 }
 
 type WebSocketMessageMetadata struct {

ui/public/index.html

@@ -25,6 +25,14 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>MIZU</title>
+    <script>
+      try {
+        // Injected from server
+        window.isEnt = __IS_STANDALONE__
+      }
+      catch (e) {
+      }
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

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

ui/src/components/TrafficPage.tsx

@@ -211,7 +211,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                 const entryData = await api.getEntry(focusedEntryId);
                 setSelectedEntryData(entryData);
             } catch (error) {
-                if (error.response) {
+                if (error.response?.data?.type) {
                     toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
                         position: "bottom-right",
                         theme: "colored",

ui/src/helpers/api.js

@@ -1,7 +1,8 @@
 import * as axios from "axios";
 
 // When working locally cp `cp .env.example .env`
-export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL : `ws://${window.location.host}/ws`;
+export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL :
+                        window.location.protocol === 'https:' ? `wss://${window.location.host}/ws` : `ws://${window.location.host}/ws`;
 
 const CancelToken = axios.CancelToken;