Replace cluster warning event polling with watches (#1521)

* replace cluster warning event polling with watches

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix loadAll calls

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/app.tsx

@@ -37,13 +37,17 @@ import { webFrame } from "electron";
 import { clusterPageRegistry, getExtensionPageUrl, PageRegistration, RegisteredPage } from "../../extensions/registries/page-registry";
 import { extensionLoader } from "../../extensions/extension-loader";
 import { appEventBus } from "../../common/event-bus";
-import { requestMain } from "../../common/ipc";
+import { broadcastMessage, requestMain } from "../../common/ipc";
 import whatInput from 'what-input';
 import { clusterSetFrameIdHandler } from "../../common/cluster-ipc";
 import { ClusterPageMenuRegistration, clusterPageMenuRegistry } from "../../extensions/registries";
 import { TabLayoutRoute, TabLayout } from "./layout/tab-layout";
-import { Trans } from "@lingui/macro";
-import {StatefulSetScaleDialog} from "./+workloads-statefulsets/statefulset-scale-dialog";
+import { StatefulSetScaleDialog } from "./+workloads-statefulsets/statefulset-scale-dialog";
+import { eventStore } from "./+events/event.store";
+import { reaction, computed } from "mobx";
+import { nodesStore } from "./+nodes/nodes.store";
+import { podsStore } from "./+workloads-pods/pods.store";
+import { sum } from "lodash";
 
 @observer
 export class App extends React.Component {
@@ -69,6 +73,39 @@ export class App extends React.Component {
     whatInput.ask(); // Start to monitor user input device
   }
 
+  async componentDidMount() {
+    const cluster = getHostedCluster();
+    const promises: Promise<void>[] = [];
+    if (isAllowedResource("events") && isAllowedResource("pods")) {
+      promises.push(eventStore.loadAll());
+      promises.push(podsStore.loadAll());
+    }
+    if (isAllowedResource("nodes")) {
+      promises.push(nodesStore.loadAll());
+    }
+    await Promise.all(promises);
+    if (eventStore.isLoaded && podsStore.isLoaded) {
+      eventStore.subscribe();
+      podsStore.subscribe();
+    }
+    if (nodesStore.isLoaded) {
+      nodesStore.subscribe();
+    }
+
+    reaction(() => this.warningsCount, (count) => {
+      broadcastMessage(`cluster-warning-event-count:${cluster.id}`, count);
+    });
+  }
+
+  @computed
+  get warningsCount() {
+    let warnings = sum(nodesStore.items
+      .map(node => node.getWarningConditions().length));
+    warnings = warnings + eventStore.getWarnings().length;
+
+    return warnings;
+  }
+
   get startURL() {
     if (isAllowedResource(["events", "nodes", "pods"])) {
       return clusterURL();

src/renderer/components/cluster-icon/cluster-icon.tsx

@@ -1,13 +1,17 @@
 import "./cluster-icon.scss";
 
 import React, { DOMAttributes } from "react";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { Params as HashiconParams } from "@emeraldpay/hashicon";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Cluster } from "../../../main/cluster";
 import { cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
 import { Tooltip } from "../tooltip";
+import { eventStore } from "../+events/event.store";
+import { forCluster } from "../../api/kube-api";
+import { subscribeToBroadcast, unsubscribeAllFromBroadcast } from "../../../common/ipc";
+import { observable, when } from "mobx";
 
 interface Props extends DOMAttributes<HTMLElement> {
   cluster: Cluster;
@@ -29,12 +33,29 @@ const defaultProps: Partial<Props> = {
 export class ClusterIcon extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
+  @observable eventCount = 0;
+
+  get eventCountBroadcast() {
+    return `cluster-warning-event-count:${this.props.cluster.id}`;
+  }
+
+  componentDidMount() {
+    const subscriber = subscribeToBroadcast(this.eventCountBroadcast, (ev, eventCount) => {
+      this.eventCount = eventCount;
+    });
+
+    disposeOnUnmount(this, [
+      subscriber
+    ]);
+  }
+
   render() {
     const {
       cluster, showErrors, showTooltip, errorClass, options, interactive, isActive,
       children, ...elemProps
     } = this.props;
-    const { isAdmin, name, eventCount, preferences, id: clusterId } = cluster;
+    const { name, preferences, id: clusterId } = cluster;
+    const eventCount = this.eventCount;
     const { icon } = preferences;
     const clusterIconId = `cluster-icon-${clusterId}`;
     const className = cssNames("ClusterIcon flex inline", this.props.className, {
@@ -48,7 +69,7 @@ export class ClusterIcon extends React.Component<Props> {
         )}
         {icon && <img src={icon} alt={name}/>}
         {!icon && <Hashicon value={clusterId} options={options}/>}
-        {showErrors && isAdmin && eventCount > 0 && (
+        {showErrors && eventCount > 0 && !isActive && (
           <Badge
             className={cssNames("events-count", errorClass)}
             label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) + "k+" : eventCount}