Update controlSocket.go, mizuRunner.go, and 5 more files...

ui/src/components/HarPage.tsx

@@ -8,6 +8,7 @@ import {HAREntryDetailed} from "./HarEntryDetailed";
 import playIcon from './assets/play.svg';
 import pauseIcon from './assets/pause.svg';
 import variables from './style/variables.module.scss';
+import {StatusBar} from "./StatusBar";
 
 const useLayoutStyles = makeStyles(() => ({
     details: {
@@ -49,6 +50,8 @@ export const HarPage: React.FC = () => {
     const [statusFilter, setStatusFilter] = useState([]);
     const [pathFilter, setPathFilter] = useState("");
 
+    const [apiStatus, setApiStatus] = useState(null);
+
     const ws = useRef(null);
 
     const openWebSocket = () => {
@@ -77,8 +80,9 @@ export const HarPage: React.FC = () => {
                     }
                     setEntries([...newEntries, entry])
                     break
-                case "updateStatus":
-                    console.log("not implemented yet")
+                case "status":
+                    console.log('status update', message);
+                    setApiStatus(message.tappingStatus);
                     break
                 default:
                     console.error(`unsupported websocket message type, Got: ${message.messageType}`)
@@ -88,6 +92,9 @@ export const HarPage: React.FC = () => {
 
     useEffect(() => {
         openWebSocket();
+        fetch(`http://localhost:8899/api/tapStatus`)
+            .then(response => response.json())
+            .then(data => setApiStatus(data));
     }, []);
 
 
@@ -166,6 +173,7 @@ export const HarPage: React.FC = () => {
                     {selectedHarEntry && <HAREntryDetailed harEntry={selectedHarEntry} classes={{root: classes.harViewer}}/>}
                 </div>
             </div>}
+            {apiStatus && <StatusBar tappingStatus={apiStatus}/>}
         </div>
     )
 };

ui/src/components/StatusBar.tsx

@@ -0,0 +1,28 @@
+import './style/StatusBar.sass';
+import React from "react";
+
+export interface TappingStatusPod {
+    name: string;
+    namespace: string;
+}
+
+export interface TappingStatus {
+    pods: TappingStatusPod[];
+}
+
+export interface Props {
+    tappingStatus: TappingStatus
+}
+
+const pluralize = (noun: string, amount: number) => {
+    return `${noun}${amount != 1 ? 's' : ''}`
+}
+
+export const StatusBar: React.FC<Props> = ({tappingStatus}) => {
+    const uniqueNamespaces = Array.from(new Set(tappingStatus.pods.map(pod => pod.namespace)));
+    const amountOfPods = tappingStatus.pods.length;
+
+    return <div className='StatusBar'>
+        <span>{`Tapping ${amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}</span>
+    </div>;
+}

ui/src/components/style/HarPage.sass

@@ -6,7 +6,7 @@
     flex-direction: column
     overflow: hidden
     flex-grow: 1
-    height: calc(100vh - 100px)
+    height: calc(100vh - 80px)
 
     .harPageHeader
         padding: 20px 24px

ui/src/components/style/StatusBar.sass

@@ -0,0 +1,20 @@
+@import 'variables.module.scss'
+
+.StatusBar
+    position: absolute
+    transform: translate(-50%, -3px)
+    left: 50%
+    z-index: 9999
+    min-width: 200px
+    height: 32px
+    background: $blue-color
+    color: $light-blue-color
+    border-bottom-left-radius: 8px
+    border-bottom-right-radius: 8px
+    top: 0
+    display: flex
+    align-items: center
+    padding: 2px 10px
+    user-select: none
+    font-size: 14px
+    opacity: 0.8