meta information

ui/src/App.sass

@@ -1,5 +1,5 @@
 .mizuApp
-  background-color: #090b14
+  background-color: #111629
   width: 100%
 
   .header

ui/src/components/HarEntriesList.tsx

@@ -20,6 +20,10 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, focusedE
                                                      isSelected={focusedEntryId === entry.id}
                     />)}
                 </ScrollableFeed>
+                {entries?.length > 0 && <div className={styles.footer}>
+                    <div><b>{entries?.length}</b> requests</div>
+                    <div>Started listening at <span style={{marginRight: 5, fontWeight: 600, fontSize: 13}}>{new Date(+entries[0].timestamp*1000)?.toLocaleString()}</span></div>
+                </div>}
             </div>
     </>;
 };

ui/src/components/HarEntryViewer/HAREntryViewer.module.sass

@@ -54,3 +54,4 @@
             text-decoration: none
             font-weight: 600
             margin-bottom: .5rem
+            overflow-wrap: anywhere

ui/src/components/HarPage.tsx

@@ -11,8 +11,9 @@ const useLayoutStyles = makeStyles(() => ({
     details: {
         flex: "0 0 50%",
         width: "45vw",
-        backgroundColor: "#171c30",
         padding: "12px 24px",
+        backgroundColor: "#090b14",
+        borderLeft: "2px #11162a solid"
     },
 
     harViewer: {
@@ -31,19 +32,28 @@ export const HarPage: React.FC = () => {
     const [entries, setEntries] = useState([] as any);
     const [focusedEntryId, setFocusedEntryId] = useState(null);
     const [selectedHarEntry, setSelectedHarEntry] = useState(null);
+    const [connectionOpen, setConnectionOpen] = useState(false);
 
     const socketUrl = 'ws://localhost:8899/ws';
-    const {lastMessage} = useWebSocket(socketUrl, {shouldReconnect: (closeEvent) => true});
+    const {lastMessage} = useWebSocket(socketUrl, {
+        onOpen: () => setConnectionOpen(true),
+        onClose: () => setConnectionOpen(false),
+        shouldReconnect: (closeEvent) => true});
 
     useEffect(() => {
         if(!lastMessage?.data) return;
         const entry = JSON.parse(lastMessage.data);
         if(!focusedEntryId) setFocusedEntryId(entry.id)
-        setEntries([...entries, entry])
+        let newEntries = [...entries];
+        if(entries.length === 1000) {
+            newEntries = newEntries.splice(1)
+        }
+        setEntries([...newEntries, entry])
     },[lastMessage?.data])
 
     useEffect(() => {
         if(!focusedEntryId) return;
+        setSelectedHarEntry(null)
         fetch(`http://localhost:8899/api/entries/${focusedEntryId}`)
             .then(response => response.json())
             .then(data => setSelectedHarEntry(data));
@@ -51,17 +61,23 @@ export const HarPage: React.FC = () => {
 
     return (
         <div className="HarPage">
-            <div className="HarPage-Container">
+            <div style={{padding: "0 24px 24px 24px"}}>
+                <div className="connectionText">
+                    {connectionOpen ? "connected, waiting for traffic" : "not connected"}
+                    <div className={connectionOpen ? "greenIndicator" : "redIndicator"}/>
+                </div>
+            </div>
+            {entries.length > 0 && <div className="HarPage-Container">
                 <div className="HarPage-ListContainer">
                     {/*<HarFilters />*/}
                     <div className={styles.container}>
                         <HarEntriesList entries={entries} focusedEntryId={focusedEntryId} setFocusedEntryId={setFocusedEntryId}/>
                     </div>
                 </div>
-                {selectedHarEntry && <div className={classes.details}>
+                <div className={classes.details}>
-                    <HAREntryDetailed harEntry={selectedHarEntry} classes={{root: classes.harViewer}}/>
+                    {selectedHarEntry && <HAREntryDetailed harEntry={selectedHarEntry} classes={{root: classes.harViewer}}/>}
-                </div>}
+                </div>
-            </div>
+            </div>}
         </div>
     )
 };

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

@@ -3,6 +3,7 @@
   display: flex
   flex-grow: 1
   flex-direction: column
+  justify-content: space-between
 
 .container
   position: relative
@@ -10,3 +11,14 @@
   flex-direction: column
   overflow: hidden
   flex-grow: 1
+  padding-top: 20px
+  background-color: #090b14
+
+.footer
+  display: flex
+  justify-content: space-between
+  border-top: 1px solid rgba(255,255,255,0.5)
+  align-items: center
+  padding-top: 10px
+  margin-top: 10px
+  margin-right: 15px

ui/src/components/style/HarPage.sass

@@ -55,6 +55,7 @@
     display: flex
     flex-grow: 1
     overflow: hidden
+    background-color: #090b14
 
 .HarPage-ListContainer
     display: flex
@@ -69,3 +70,26 @@
     background-color: #171c30
     flex: 0 0 50%
     padding: 12px 24px
+
+.greenIndicator
+    height: 10px
+    width: 10px
+    background-color: #1acd37
+    border-radius: 50%
+    box-shadow: 0 0 3px 3px #1acd3787
+    margin-left: 10px
+
+.redIndicator
+    height: 10px
+    width: 10px
+    background-color: #ff3a30
+    border-radius: 50%
+    box-shadow: 0 0 3px 3px #ff3a3073
+    margin-left: 10px
+
+.connectionText
+    display: flex
+    align-items: center
+    height: 17px
+    font-size: 16px
+    color: rgba(255,255,255,0.75)

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

@@ -2,7 +2,7 @@
     border-radius: 4px
     border: solid 1px #bcc6dd60
     margin-left: 4px
-    padding: 1px 3px
+    padding: 2px 5px
     color: #ffffff88
     text-transform: uppercase
     font-family: "Source Sans Pro", sans-serif