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

cli/mizu/controlSocket.go

@@ -21,13 +21,13 @@ func CreateControlSocket(socketServerAddress string) (*ControlSocket, error) {
 	}
 }
 
-func (controlSocket *ControlSocket) SendNewTappedPodsListMessage(namespace string, pods []core.Pod) error {
+func (controlSocket *ControlSocket) SendNewTappedPodsListMessage(pods []core.Pod) error {
 	podInfos := make([]shared.PodInfo, 0)
 	for _, pod := range pods {
-		podInfos = append(podInfos, shared.PodInfo{Name: pod.Name})
+		podInfos = append(podInfos, shared.PodInfo{Name: pod.Name, Namespace: pod.Namespace})
 	}
-	tapStatus := shared.TapStatus{Namespace: namespace, Pods: podInfos}
-	socketMessage := shared.MizuSocketMessage{MessageType: shared.TAPPING_STATUS_MESSAGE_TYPE, Data: tapStatus}
+	tapStatus := shared.TapStatus{Pods: podInfos}
+	socketMessage := shared.CreateWebSocketStatusMessage(tapStatus)
 
 	jsonMessage, err := json.Marshal(socketMessage)
 	if err != nil {

cli/mizu/mizuRunner.go

@@ -205,7 +205,7 @@ func syncApiStatus(ctx context.Context, cancel context.CancelFunc, namespace str
 		case <- ctx.Done():
 			return
 		default:
-			err = controlSocket.SendNewTappedPodsListMessage(namespace, currentlyTappedPods)
+			err = controlSocket.SendNewTappedPodsListMessage(currentlyTappedPods)
 			if err != nil {
 				fmt.Printf("error Sending message via control socket %s\n", err)
 			}

shared/models.go

@@ -1,21 +1,35 @@
 package shared
 
-type ControlSocketMessageType string
-
+type WebSocketMessageType string
 const (
-	TAPPING_STATUS_MESSAGE_TYPE ControlSocketMessageType = "tappingStatus"
+	WebSocketMessageTypeEntry        WebSocketMessageType = "entry"
+	WebSocketMessageTypeTappedEntry        WebSocketMessageType = "tappedEntry"
+	WebSocketMessageTypeUpdateStatus WebSocketMessageType = "status"
 )
 
-type MizuSocketMessage struct {
-	MessageType ControlSocketMessageType `json:"messageType"`
-	Data        interface{} `json:"data"`
+type WebSocketMessageMetadata struct {
+	MessageType WebSocketMessageType `json:"messageType,omitempty"`
+}
+
+type WebSocketStatusMessage struct {
+	*WebSocketMessageMetadata
+	TappingStatus TapStatus `json:"tappingStatus"`
 }
 
 type TapStatus struct {
-	Namespace string `json:"namespace"`
 	Pods      []PodInfo `json:"pods"`
 }
 
 type PodInfo struct {
+	Namespace string `json:"namespace"`
 	Name string `json:"name"`
 }
+
+func CreateWebSocketStatusMessage(tappingStatus TapStatus) WebSocketStatusMessage {
+	return WebSocketStatusMessage{
+		WebSocketMessageMetadata: &WebSocketMessageMetadata{
+			MessageType: WebSocketMessageTypeUpdateStatus,
+		},
+		TappingStatus: tappingStatus,
+	}
+}

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