controller status live update

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -23,6 +23,8 @@ type StateType = {
   podPendingDelete: any;
   websockets: Record<string, any>;
   selectors: string[];
+  available: number;
+  total: number;
 };
 
 // Controller tab in log section that displays list of pods on click.
@@ -34,6 +36,8 @@ export default class ControllerTab extends Component<PropsType, StateType> {
     podPendingDelete: null as any,
     websockets: {} as Record<string, any>,
     selectors: [] as string[],
+    available: null as number,
+    total: null as number,
   };
 
   updatePods = () => {
@@ -148,13 +152,17 @@ export default class ControllerTab extends Component<PropsType, StateType> {
       let event = JSON.parse(evt.data);
       let object = event.Object;
       object.metadata.kind = event.Kind;
+      console.log(object)
 
-      // update pods no matter what
-      if (event.Kind == "pod") {
-        this.updatePods();
-      }
+      // update pods no matter what if ws message is a pod event. 
+      // If controller event, check if ws message corresponds to the designated controller in props.
+      if (event.Kind != "pod" && object.metadata.uid != this.props.controller.metadata.uid) return;
 
-      if (object.metadata.uid != this.props.controller.metadata.uid) return;
+      if (event.Kind != "pod") {
+        let [ available, total ] = this.getAvailability(object.metadata.kind, object);
+        this.setState({ available, total })
+      }
+      
       this.updatePods();
     };
 
@@ -265,7 +273,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
 
   render() {
     let { controller, selectedPod, isLast, selectPod, isFirst } = this.props;
-    let [available, total] = this.getAvailability(controller.kind, controller);
+    let { available, total } = this.state;
     let status = available == total ? "running" : "waiting";
 
     controller?.status?.conditions?.forEach((condition: any) => {