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
 

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"