Merge pull request #13 from up9inc/feature/ui/Live_traffic_web_socket

Live traffic web socket

ui/package-lock.json

@@ -13420,6 +13420,11 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-scrollable-feed": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-scrollable-feed/-/react-scrollable-feed-1.3.0.tgz",
+      "integrity": "sha512-ZoaWcrYlzNoGHNuYy//Wkz9jtFiy+pb8VvHzRVmthktU4cJAN4//aYzEIATyT+amAROL8qpZnoWUZJypDtmvfg=="
+    },
     "react-syntax-highlighter": {
       "version": "15.4.3",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.3.tgz",
@@ -13443,6 +13448,11 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-use-websocket": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-2.6.1.tgz",
+      "integrity": "sha512-Nx1jUab+7eHpVftBpscgVG26UMVjy4P8ss+I3sE6LijHXC0chFej7unzH9YXElN9stEm1of+qZA+YX/ZlPIQBQ=="
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

ui/package.json

@@ -17,7 +17,9 @@
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "react-scrollable-feed": "^1.3.0",
     "react-syntax-highlighter": "^15.4.3",
+    "react-use-websocket": "^2.6.1",
     "typescript": "^4.2.4",
     "web-vitals": "^1.1.1"
   },

ui/src/components/HarEntriesList.tsx

@@ -1,6 +1,7 @@
 import {HarEntry} from "./HarEntry";
 import React, {useEffect, useRef} from "react";
 import styles from './style/HarEntriesList.module.sass';
+import ScrollableFeed from 'react-scrollable-feed'
 
 interface HarEntriesListProps {
     entries: any[];
@@ -9,24 +10,16 @@ interface HarEntriesListProps {
 }
 
 export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, focusedEntryId, setFocusedEntryId}) => {
-    const entriesDiv = useRef(null);
-    const totalCount = null; //todo
-
-    // Scroll to bottom in case results do not fit in screen
-    useEffect(() => {
-        if (entriesDiv.current && totalCount > 0) {
-            entriesDiv.current.scrollTop = entriesDiv.current.scrollHeight;
-        }
-    }, [entriesDiv, totalCount])
 
     return <>
-        <div ref={entriesDiv} className={styles.list}>
+            <div className={styles.list}>
+                <ScrollableFeed>
                     {entries?.map(entry => <HarEntry key={entry.id}
                                                      entry={entry}
                                                      setFocusedEntryId={setFocusedEntryId}
                                                      isSelected={focusedEntryId === entry.id}
                     />)}
-
+                </ScrollableFeed>
             </div>
     </>;
 };

ui/src/components/HarEntryDetailed.tsx

@@ -12,7 +12,9 @@ const useStyles = makeStyles(() => ({
         minHeight: 46,
         maxHeight: 46,
         alignItems: 'center',
-        marginBottom: 8
+        marginBottom: 8,
+        padding: 5,
+        paddingBottom: 0
     }
 }));
 

ui/src/components/HarPage.tsx

@@ -5,7 +5,7 @@ import {makeStyles} from "@material-ui/core";
 import "./style/HarPage.sass";
 import styles from './style/HarEntriesList.module.sass';
 import {HAREntryDetailed} from "./HarEntryDetailed";
-// import {HarPaging} from "./HarPaging";
+import useWebSocket from 'react-use-websocket';
 
 const useLayoutStyles = makeStyles(() => ({
     details: {
@@ -19,6 +19,8 @@ const useLayoutStyles = makeStyles(() => ({
         display: 'flex',
         overflowY: 'auto',
         height: "calc(100% - 58px)",
+        padding: 5,
+        paddingBottom: 0
     }
 }));
 
@@ -30,11 +32,15 @@ export const HarPage: React.FC = () => {
     const [focusedEntryId, setFocusedEntryId] = useState(null);
     const [selectedHarEntry, setSelectedHarEntry] = useState(null);
 
+    const socketUrl = 'ws://localhost:8899/ws';
+    const {lastMessage} = useWebSocket(socketUrl, {shouldReconnect: (closeEvent) => true});
+
     useEffect(() => {
-        fetch("http://localhost:8899/api/entries")
+        if(!lastMessage?.data) return;
-            .then(response => response.json())
+        const entry = JSON.parse(lastMessage.data);
-            .then(data => {setEntries(data); setFocusedEntryId(data[0]?.id)});
+        if(!focusedEntryId) setFocusedEntryId(entry.id)
-    }, []);
+        setEntries([...entries, entry])
+    },[lastMessage?.data])
 
     useEffect(() => {
         if(!focusedEntryId) return;
@@ -50,16 +56,11 @@ export const HarPage: React.FC = () => {
                     {/*<HarFilters />*/}
                     <div className={styles.container}>
                         <HarEntriesList entries={entries} focusedEntryId={focusedEntryId} setFocusedEntryId={setFocusedEntryId}/>
-                        {/*<Box flexGrow={0} flexShrink={0}>*/}
-                        {/*    {!harStore.data.isFirstLoading &&*/}
-                        {/*    <HarPaging showPageNumber />*/}
-                        {/*    }*/}
-                        {/*</Box>*/}
                     </div>
                 </div>
-                <div className={classes.details}>
+                {selectedHarEntry && <div className={classes.details}>
                     <HAREntryDetailed harEntry={selectedHarEntry} classes={{root: classes.harViewer}}/>
-                </div>
+                </div>}
             </div>
         </div>
     )

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

@@ -8,6 +8,7 @@
   border-radius: 4px
   cursor: pointer
   border: solid 1px transparent
+  margin-right: 5px
   &:not(:first-child)
     margin-top: 10px
 

ui/src/index.sass

@@ -22,7 +22,7 @@ code
   width: 8px
 
 ::-webkit-scrollbar-thumb
-  background-color: rgba(0,0,0,0.5)
+  background-color: #272d44
   border-radius: 16px
 
 ::-webkit-scrollbar-button