Add link to exposing mizu wiki page in README (#455)

* Fix the CSS issues in the cheatsheet modal

* Change the Sass variable names

README.md

@@ -131,30 +131,7 @@ $ mizu clean # mizu will continue running in cluster until clean is executed
   Removing mizu resources
 ```
 
-
-
-### To run mizu daemon mode with LoadBalancer kubernetes service
-```bash
-$ mizu tap "^ca.*" --daemon
-  Mizu will store up to 200MB of traffic, old traffic will be cleared once the limit is reached.
-  Tapping pods in namespaces "sock-shop"
-  Waiting for mizu to be ready... (may take a few minutes)
-  ..
-
-$ kubectl expose deployment -n mizu --port 80 --target-port 8899 mizu-api-server --type=LoadBalancer --name=mizu-lb
-  service/mizu-lb exposed
-  ..
-  
-$ kubectl get services -n mizu
-  NAME              TYPE           CLUSTER-IP       EXTERNAL-IP     PORT(S)        AGE
-  mizu-api-server   ClusterIP      10.107.200.100   <none>          80/TCP         5m5s
-  mizu-lb           LoadBalancer   10.107.200.101   34.77.120.116   80:30141/TCP   76s
-```
-Note that `LoadBalancer` services only work on supported clusters (usually cloud providers) and might incur extra costs
-
-If you changed the `mizu-resources-namespace` value, make sure the `-n mizu` flag of the `kubectl expose` command is changed to the value of `mizu-resources-namespace` 
-
-mizu will now be available both by running `mizu view` or by accessing the `EXTERNAL-IP` of the `mizu-lb` service through your browser.
+`mizu view` provides one way to access Mizu. For other options, see [Accessing Mizu Wiki Page](https://github.com/up9inc/mizu/wiki/Accessing-Mizu).
 
 ## Configuration
 

acceptanceTests/tap_test.go

@@ -827,21 +827,21 @@ func TestTapDumpLogs(t *testing.T) {
 		return
 	}
 
-	var dumpsLogsPath string
+	var dumpLogsPath string
 	for _, file := range files {
 		fileName := file.Name()
 		if strings.Contains(fileName, "mizu_logs") {
-			dumpsLogsPath = path.Join(mizuFolderPath, fileName)
+			dumpLogsPath = path.Join(mizuFolderPath, fileName)
 			break
 		}
 	}
 
-	if dumpsLogsPath == "" {
+	if dumpLogsPath == "" {
 		t.Errorf("dump logs file not found")
 		return
 	}
 
-	zipReader, zipError := zip.OpenReader(dumpsLogsPath)
+	zipReader, zipError := zip.OpenReader(dumpLogsPath)
 	if zipError != nil {
 		t.Errorf("failed to get zip reader, err: %v", zipError)
 		return

acceptanceTests/testsUtils.go

@@ -93,16 +93,16 @@ func getDefaultCommandArgs() []string {
 	telemetry := "telemetry=false"
 	agentImage := "agent-image=gcr.io/up9-docker-hub/mizu/ci:0.0.0"
 	imagePullPolicy := "image-pull-policy=Never"
+	headless := "headless=true"
 
-	return []string{setFlag, telemetry, setFlag, agentImage, setFlag, imagePullPolicy}
+	return []string{setFlag, telemetry, setFlag, agentImage, setFlag, imagePullPolicy, setFlag, headless}
 }
 
 func getDefaultTapCommandArgs() []string {
-	headless := "--headless"
 	tapCommand := "tap"
 	defaultCmdArgs := getDefaultCommandArgs()
 
-	return append([]string{tapCommand, headless}, defaultCmdArgs...)
+	return append([]string{tapCommand}, defaultCmdArgs...)
 }
 
 func getDefaultTapCommandArgsWithDaemonMode() []string {
@@ -135,11 +135,17 @@ func getDefaultConfigCommandArgs() []string {
 }
 
 func getDefaultCleanCommandArgs() []string {
-	return []string{"clean"}
+	cleanCommand := "clean"
+	defaultCmdArgs := getDefaultCommandArgs()
+
+	return append([]string{cleanCommand}, defaultCmdArgs...)
 }
 
 func getDefaultViewCommandArgs() []string {
-	return []string{"view"}
+	viewCommand := "view"
+	defaultCmdArgs := getDefaultCommandArgs()
+
+	return append([]string{viewCommand}, defaultCmdArgs...)
 }
 
 func retriesExecute(retriesCount int, executeFunc func() error) error {

agent/pkg/api/socket_routes.go

@@ -92,7 +92,7 @@ func websocketHandler(w http.ResponseWriter, r *http.Request, eventHandlers Even
 	eventHandlers.WebSocketConnect(socketId, isTapper)
 
 	startTimeBytes, _ := models.CreateWebsocketStartTimeMessage(startTime)
-	BroadcastToBrowserClients(startTimeBytes)
+	SendToSocket(socketId, startTimeBytes)
 
 	for {
 		_, msg, err := ws.ReadMessage()
@@ -110,7 +110,7 @@ func websocketHandler(w http.ResponseWriter, r *http.Request, eventHandlers Even
 					AutoClose: 5000,
 					Text:      fmt.Sprintf("Syntax error: %s", err.Error()),
 				})
-				BroadcastToBrowserClients(toastBytes)
+				SendToSocket(socketId, toastBytes)
 				break
 			}
 
@@ -131,7 +131,7 @@ func websocketHandler(w http.ResponseWriter, r *http.Request, eventHandlers Even
 					base["id"] = uint(dataMap["id"].(float64))
 
 					baseEntryBytes, _ := models.CreateBaseEntryWebSocketMessage(base)
-					BroadcastToBrowserClients(baseEntryBytes)
+					SendToSocket(socketId, baseEntryBytes)
 				}
 			}
 
@@ -150,7 +150,7 @@ func websocketHandler(w http.ResponseWriter, r *http.Request, eventHandlers Even
 					}
 
 					metadataBytes, _ := models.CreateWebsocketQueryMetadataMessage(metadata)
-					BroadcastToBrowserClients(metadataBytes)
+					SendToSocket(socketId, metadataBytes)
 				}
 			}
 

cli/cmd/tap.go

@@ -113,5 +113,4 @@ func init() {
 	tapCmd.Flags().String(configStructs.EnforcePolicyFile, defaultTapConfig.EnforcePolicyFile, "Yaml file path with policy rules")
 	tapCmd.Flags().String(configStructs.ContractFile, defaultTapConfig.ContractFile, "OAS/Swagger file to validate to monitor the contracts")
 	tapCmd.Flags().Bool(configStructs.DaemonModeTapName, defaultTapConfig.DaemonMode, "Run mizu in daemon mode, detached from the cli")
-	tapCmd.Flags().Bool(configStructs.HeadlessMode, defaultTapConfig.HeadlessMode, "Enable headless mode.")
 }

cli/cmd/tapRunner.go

@@ -33,7 +33,7 @@ import (
 	"github.com/up9inc/mizu/tap/api"
 )
 
-const cleanupTimeout = time.Minute
+const cleanupTimeout = 5 * time.Minute
 
 type tapState struct {
 	apiServerService         *core.Service
@@ -626,7 +626,7 @@ func watchApiServerPod(ctx context.Context, kubernetesProvider *kubernetes.Provi
 				}
 
 				logger.Log.Infof("Mizu is available at %s\n", url)
-				if !config.Config.Tap.HeadlessMode {
+				if !config.Config.HeadlessMode {
 					uiUtils.OpenBrowser(url)
 				}
 				if err := apiProvider.ReportTappedPods(state.tapperSyncer.CurrentlyTappedPods); err != nil {

cli/cmd/viewRunner.go

@@ -58,7 +58,9 @@ func runMizuView() {
 
 	logger.Log.Infof("Mizu is available at %s\n", url)
 
-	uiUtils.OpenBrowser(url)
+	if !config.Config.HeadlessMode {
+		uiUtils.OpenBrowser(url)
+	}
 
 	if isCompatible, err := version.CheckVersionCompatibility(apiServerProvider); err != nil {
 		logger.Log.Errorf("Failed to check versions compatibility %v", err)

cli/config/configStruct.go

@@ -31,6 +31,7 @@ type ConfigStruct struct {
 	DumpLogs               bool                        `yaml:"dump-logs" default:"false"`
 	KubeConfigPathStr      string                      `yaml:"kube-config-path"`
 	ConfigFilePath         string                      `yaml:"config-path,omitempty" readonly:""`
+	HeadlessMode           bool                        `yaml:"headless" default:"false"`
 }
 
 func (config *ConfigStruct) SetDefaults() {

cli/config/configStructs/tapConfig.go

@@ -23,7 +23,6 @@ const (
 	EnforcePolicyFile             = "traffic-validation-file"
 	ContractFile                  = "contract"
 	DaemonModeTapName             = "daemon"
-	HeadlessMode                  = "headless"
 )
 
 type TapConfig struct {
@@ -46,7 +45,6 @@ type TapConfig struct {
 	ApiServerResources     shared.Resources `yaml:"api-server-resources"`
 	TapperResources        shared.Resources `yaml:"tapper-resources"`
 	DaemonMode             bool             `yaml:"daemon" default:"false"`
-	HeadlessMode           bool             `yaml:"headless" default:"false"`
 }
 
 func (config *TapConfig) PodRegex() *regexp.Regexp {

ui/src/components/Filters.tsx

@@ -38,9 +38,9 @@ interface QueryFormProps {
 
 const style = {
     position: 'absolute',
-    top: '50%',
+    top: '10%',
     left: '50%',
-    transform: 'translate(-50%, -50%)',
+    transform: 'translate(-50%, 0%)',
     width: '80vw',
     bgcolor: 'background.paper',
     borderRadius: '5px',
@@ -214,7 +214,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                                 language="python"
                             />
                         </Grid>
-                        <Divider orientation="vertical" flexItem />
+                        <Divider className={styles.divider1} orientation="vertical" flexItem />
                         <Grid item xs style={{margin: "10px"}}>
                             <Typography id="modal-modal-description">
                                 Since Mizu supports various protocols like gRPC, AMQP, Kafka and Redis. It's possible to write complex queries that match multiple protocols like this:
@@ -262,7 +262,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                                 language="python"
                             />
                         </Grid>
-                        <Divider orientation="vertical" flexItem />
+                        <Divider className={styles.divider2} orientation="vertical" flexItem />
                         <Grid item xs style={{margin: "10px"}}>
                             <Typography id="modal-modal-description">
                                 There are a few helper methods included the in the filter language* to help building queries more easily.

ui/src/components/style/Filters.module.sass

@@ -31,3 +31,19 @@
     border: 1px solid #BCC6DD
   fieldset
     border: none
+
+$divider-breakpoint-1: 1474px
+$divider-breakpoint-2: 1366px
+$divider-breakpoint-3: 1980px
+
+@media (max-width: $divider-breakpoint-1)
+  .divider1
+    display: none
+
+@media (max-width: $divider-breakpoint-2)
+  .divider2
+    display: none
+
+@media (min-width: $divider-breakpoint-1) and (max-width: $divider-breakpoint-3)
+  .divider2
+    display: none