Fix the CSS issues in queryable vertical protocol element (#526)

* Include milliseconds information into the timestamps in the UI

* Upgrade Basenine version from `0.2.16` to `0.2.17`

* Increase the `width` of timestamp

Dockerfile

@@ -42,8 +42,8 @@ RUN go build -ldflags="-s -w \
      -X 'mizuserver/pkg/version.SemVer=${SEM_VER}'" -o mizuagent .
 
 # Download Basenine executable, verify the sha1sum and move it to a directory in $PATH
-ADD https://github.com/up9inc/basenine/releases/download/v0.2.16/basenine_linux_amd64 ./basenine_linux_amd64
-ADD https://github.com/up9inc/basenine/releases/download/v0.2.16/basenine_linux_amd64.sha256 ./basenine_linux_amd64.sha256
+ADD https://github.com/up9inc/basenine/releases/download/v0.2.17/basenine_linux_amd64 ./basenine_linux_amd64
+ADD https://github.com/up9inc/basenine/releases/download/v0.2.17/basenine_linux_amd64.sha256 ./basenine_linux_amd64.sha256
 RUN shasum -a 256 -c basenine_linux_amd64.sha256
 RUN chmod +x ./basenine_linux_amd64
 

agent/pkg/api/socket_routes.go

@@ -127,8 +127,15 @@ func websocketHandler(w http.ResponseWriter, r *http.Request, eventHandlers Even
 					var dataMap map[string]interface{}
 					err = json.Unmarshal(bytes, &dataMap)
 
-					base := dataMap["base"].(map[string]interface{})
-					base["id"] = uint(dataMap["id"].(float64))
+					var base map[string]interface{}
+					switch dataMap["base"].(type) {
+					case map[string]interface{}:
+						base = dataMap["base"].(map[string]interface{})
+						base["id"] = uint(dataMap["id"].(float64))
+					default:
+						logger.Log.Debugf("Base field has an unrecognized type: %+v", dataMap)
+						continue
+					}
 
 					baseEntryBytes, _ := models.CreateBaseEntryWebSocketMessage(base)
 					SendToSocket(socketId, baseEntryBytes)

cli/Makefile

@@ -18,8 +18,9 @@ build: ## Build mizu CLI binary (select platform via GOOS / GOARCH env variables
 	go build -ldflags="-X 'github.com/up9inc/mizu/cli/mizu.GitCommitHash=$(COMMIT_HASH)' \
 					   -X 'github.com/up9inc/mizu/cli/mizu.Branch=$(GIT_BRANCH)' \
 					   -X 'github.com/up9inc/mizu/cli/mizu.BuildTimestamp=$(BUILD_TIMESTAMP)' \
+					   -X 'github.com/up9inc/mizu/cli/mizu.Platform=$(SUFFIX)' \
 					   -X 'github.com/up9inc/mizu/cli/mizu.SemVer=$(SEM_VER)'" \
-					   -o bin/mizu_$(SUFFIX) mizu.go 
+					   -o bin/mizu_$(SUFFIX) mizu.go
 	(cd bin && shasum -a 256 mizu_${SUFFIX} > mizu_${SUFFIX}.sha256)
 
 build-all: ## Build for all supported platforms.

cli/mizu/consts.go

@@ -11,9 +11,12 @@ var (
 	GitCommitHash                             = "" // this var is overridden using ldflags in makefile when building
 	BuildTimestamp                            = "" // this var is overridden using ldflags in makefile when building
 	RBACVersion                               = "v1"
+	Platform                                  = ""
 	DaemonModePersistentVolumeSizeBufferBytes = int64(500 * 1000 * 1000) //500mb
 )
 
+const DEVENVVAR = "MIZU_DISABLE_TELEMTRY"
+
 func GetMizuFolderPath() string {
 	home, homeDirErr := os.UserHomeDir()
 	if homeDirErr != nil {

cli/mizu/version/versionCheck.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"io/ioutil"
 	"net/http"
+	"os"
 	"runtime"
 	"strings"
 	"time"
@@ -39,6 +40,10 @@ func CheckVersionCompatibility(apiServerProvider *apiserver.Provider) (bool, err
 }
 
 func CheckNewerVersion(versionChan chan string) {
+	if _, present := os.LookupEnv(mizu.DEVENVVAR); present {
+		versionChan <- ""
+		return
+	}
 	logger.Log.Debugf("Checking for newer version...")
 	start := time.Now()
 	client := github.NewClient(nil)

cli/telemetry/telemetry.go

@@ -63,7 +63,7 @@ func ReportAPICalls(apiProvider *apiserver.Provider) {
 }
 
 func shouldRunTelemetry() bool {
-	if _, present := os.LookupEnv("MIZU_DISABLE_TELEMTRY"); present {
+	if _, present := os.LookupEnv(mizu.DEVENVVAR); present {
 		return false
 	}
 	if !config.Config.Telemetry {
@@ -83,6 +83,7 @@ func sendTelemetry(telemetryType string, argsMap map[string]interface{}) error {
 	argsMap["buildTimestamp"] = mizu.BuildTimestamp
 	argsMap["branch"] = mizu.Branch
 	argsMap["version"] = mizu.SemVer
+	argsMap["Platform"] = mizu.Platform
 
 	if machineId, err := machineid.ProtectedID("mizu"); err == nil {
 		argsMap["machineId"] = machineId

debug.Dockerfile

@@ -37,8 +37,8 @@ COPY agent .
 RUN go build -gcflags="all=-N -l" -o mizuagent .
 
 # Download Basenine executable, verify the sha1sum and move it to a directory in $PATH
-ADD https://github.com/up9inc/basenine/releases/download/v0.2.16/basenine_linux_amd64 ./basenine_linux_amd64
-ADD https://github.com/up9inc/basenine/releases/download/v0.2.16/basenine_linux_amd64.sha256 ./basenine_linux_amd64.sha256
+ADD https://github.com/up9inc/basenine/releases/download/v0.2.17/basenine_linux_amd64 ./basenine_linux_amd64
+ADD https://github.com/up9inc/basenine/releases/download/v0.2.17/basenine_linux_amd64.sha256 ./basenine_linux_amd64.sha256
 RUN shasum -a 256 -c basenine_linux_amd64.sha256
 RUN chmod +x ./basenine_linux_amd64
 

ui/package-lock.json

@@ -11080,6 +11080,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

ui/package.json

@@ -16,6 +16,7 @@
     "@uiw/react-textarea-code-editor": "^1.4.12",
     "axios": "^0.21.1",
     "jsonpath": "^1.1.1",
+    "moment": "^2.29.1",
     "node-sass": "^5.0.0",
     "numeral": "^2.0.6",
     "protobuf-decoder": "^0.1.0",

ui/src/components/EntriesList.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
 import styles from './style/EntriesList.module.sass';
 import ScrollableFeedVirtualized from "react-scrollable-feed-virtualized";
+import Moment from 'moment';
 import {EntryItem} from "./EntryListItem/EntryListItem";
 import down from "./assets/downImg.svg";
 import spinner from './assets/spinner.svg';
@@ -136,7 +137,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
 
                 <div className={styles.footer}>
                     <div>Displaying <b>{entries?.length}</b> results out of <b>{queriedTotal}</b> total</div>
-                    {startTime !== 0 && <div>Started listening at <span style={{marginRight: 5, fontWeight: 600, fontSize: 13}}>{new Date(startTime).toLocaleString()}</span></div>}
+                    {startTime !== 0 && <div>Started listening at <span style={{marginRight: 5, fontWeight: 600, fontSize: 13}}>{Moment(startTime).utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}</span></div>}
                 </div>
             </div>
     </>;

ui/src/components/EntryListItem/EntryListItem.module.sass

@@ -60,7 +60,7 @@
   color: $secondary-font-color
   padding-left: 12px
   flex-shrink: 0
-  width: 145px
+  width: 185px
   text-align: left
 
 .endpointServiceContainer
@@ -68,7 +68,6 @@
   flex-direction: column
   overflow: hidden
   padding-right: 10px
-  padding-left: 10px
   flex-grow: 1
 
 .separatorRight

ui/src/components/EntryListItem/EntryListItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Moment from 'moment';
 import styles from './EntryListItem.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode";
 import Protocol, {ProtocolInterface} from "../UI/Protocol"
@@ -119,6 +120,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
             break;
     }
 
+    const isStatusCodeEnabled = ((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0);
+    var endpointServiceContainer = "10px";
+    if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
+
     return <>
         <div
             id={`entry-${entry.id.toString()}`}
@@ -141,10 +146,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
                 horizontal={false}
                 updateQuery={updateQuery}
             /> : null}
-            {((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0) && <div>
+            {isStatusCodeEnabled && <div>
                 <StatusCode statusCode={entry.statusCode} updateQuery={updateQuery}/>
             </div>}
-            <div className={styles.endpointServiceContainer}>
+            <div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
                 <Summary method={entry.method} summary={entry.summary} updateQuery={updateQuery}/>
                 <div className={styles.service}>
                     <Queryable
@@ -268,7 +273,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
             </div>
             <div className={styles.timestamp}>
                 <Queryable
-                        query={`timestamp >= datetime("${new Date(+entry.timestamp)?.toLocaleString("en-US", {timeZone: 'UTC' })}")`}
+                        query={`timestamp >= datetime("${Moment(+entry.timestamp)?.utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}")`}
                         updateQuery={updateQuery}
                         displayIconOnMouseOver={true}
                         flipped={false}
@@ -276,7 +281,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
                     <span
                         title="Timestamp"
                     >
-                        {new Date(+entry.timestamp)?.toLocaleString("en-US")}
+                        {Moment(+entry.timestamp)?.utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}
                     </span>
                 </Queryable>
             </div>

ui/src/components/Filters.tsx

@@ -214,7 +214,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                             <SyntaxHighlighter
                                 isWrapped={false}
                                 showLineNumbers={false}
-                                code={`timestamp < datetime("10/28/2021, 9:13:02 PM")`}
+                                code={`timestamp < datetime("10/28/2021, 9:13:02.905 PM")`}
                                 language="python"
                             />
                         </Grid>
@@ -305,7 +305,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                             <SyntaxHighlighter
                                 isWrapped={false}
                                 showLineNumbers={false}
-                                code={`timestamp >= datetime("10/19/2021, 6:29:02 PM")`}
+                                code={`timestamp >= datetime("10/19/2021, 6:29:02.593 PM")`}
                                 language="python"
                             />
                             <Typography id="modal-modal-description">

ui/src/components/UI/Protocol.tsx

@@ -48,7 +48,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
             updateQuery={updateQuery}
             displayIconOnMouseOver={true}
             flipped={false}
-            iconStyle={{marginTop: "48px"}}
+            iconStyle={{marginTop: "52px", marginRight: "10px", zIndex: 1000}}
         >
             <span
                 className={`${styles.base} ${styles.vertical}`}
@@ -56,6 +56,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
                     backgroundColor: protocol.backgroundColor,
                     color: protocol.foregroundColor,
                     fontSize: protocol.fontSize,
+                    marginRight: "-20px",
                 }}
                 title={protocol.longName}
             >

ui/src/components/UI/StatusCode.tsx

@@ -22,7 +22,7 @@ const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
         updateQuery={updateQuery}
         displayIconOnMouseOver={true}
         flipped={true}
-        iconStyle={{marginTop: "40px"}}
+        iconStyle={{marginTop: "40px", paddingLeft: "10px"}}
     >
         <span
             title="Status Code"