diff --git a/cli/mizu/controlSocket.go b/cli/mizu/controlSocket.go index 163fe9502..f35b9377c 100644 --- a/cli/mizu/controlSocket.go +++ b/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 { diff --git a/cli/mizu/mizuRunner.go b/cli/mizu/mizuRunner.go index 4daa8b40c..ba12af046 100644 --- a/cli/mizu/mizuRunner.go +++ b/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) } diff --git a/shared/models.go b/shared/models.go index 69f1bade6..dba9e1731 100644 --- a/shared/models.go +++ b/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, + } +} diff --git a/ui/src/components/HarPage.tsx b/ui/src/components/HarPage.tsx index 83184bb50..c4ee0a136 100644 --- a/ui/src/components/HarPage.tsx +++ b/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 && } } + {apiStatus && } ) }; diff --git a/ui/src/components/StatusBar.tsx b/ui/src/components/StatusBar.tsx index e69de29bb..ee09369c5 100644 --- a/ui/src/components/StatusBar.tsx +++ b/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 = ({tappingStatus}) => { + const uniqueNamespaces = Array.from(new Set(tappingStatus.pods.map(pod => pod.namespace))); + const amountOfPods = tappingStatus.pods.length; + + return
+ {`Tapping ${amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`} +
; +} diff --git a/ui/src/components/style/HarPage.sass b/ui/src/components/style/HarPage.sass index 90f8b5aea..bd72d48a6 100644 --- a/ui/src/components/style/HarPage.sass +++ b/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 diff --git a/ui/src/components/style/StatusBar.sass b/ui/src/components/style/StatusBar.sass index e69de29bb..470166b25 100644 --- a/ui/src/components/style/StatusBar.sass +++ b/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