store subscribing refactoring -- part 2

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/api/kube-watch-api.ts

@@ -22,8 +22,8 @@ export interface IKubeWatchMessage<T extends KubeObject = any> {
 }
 
 export interface IKubeWatchSubscribeStoreOptions {
-  autoLoad?: boolean;
-  waitUntilLoaded?: boolean;
+  preload?: boolean; // preload store items, default: true
+  waitUntilLoaded?: boolean; // subscribe only after loading all stores, default: true
 }
 
 export interface IKubeWatchLog {
@@ -79,32 +79,41 @@ export class KubeWatchApi {
     };
   }
 
-  async subscribeStores(stores: KubeObjectStore[], options: IKubeWatchSubscribeStoreOptions = {}): Promise<() => void> {
-    this.log({
-      message: "Subscribing to stores",
-      meta: { stores, options },
-    });
-
-    const { autoLoad = true, waitUntilLoaded = true } = options;
+  subscribeStores(stores: KubeObjectStore[], options: IKubeWatchSubscribeStoreOptions = {}): () => void {
+    const { preload = true, waitUntilLoaded = true } = options;
     const loading: Promise<any>[] = [];
+    const disposers: Function[] = [];
+    let isDisposed = false;
 
-    if (autoLoad) {
+    async function subscribe() {
+      if (isDisposed) return;
+      const unsubscribeList = await Promise.all(stores.map(store => store.subscribe()));
+      disposers.push(...unsubscribeList);
+      if (isDisposed) unsubscribe();
+    }
+
+    function unsubscribe() {
+      isDisposed = true;
+      disposers.forEach(dispose => dispose());
+      disposers.length = 0;
+    }
+
+    if (preload) {
       loading.push(...stores.map(store => store.loadAll()));
     }
 
     if (waitUntilLoaded) {
-      try {
-        await Promise.all(loading);
-      } catch (error) {
+      Promise.all(loading).then(subscribe, error => {
         this.log({
           message: new Error("Loading stores has failed"),
           meta: { stores, error, options },
-        })
-      }
+        });
+      });
+    } else {
+      subscribe();
     }
 
-    const disposers = await Promise.all(stores.map(store => store.subscribe()));
-    return () => disposers.forEach(dispose => dispose()); // unsubscribe
+    return unsubscribe;
   }
 
   protected async resolveCluster(): Promise<Cluster> {

src/renderer/components/+cluster/cluster-overview.tsx

@@ -24,12 +24,12 @@ export class ClusterOverview extends React.Component {
     getHostedCluster().available && clusterOverviewStore.loadMetrics();
   }
 
-  async componentDidMount() {
+  componentDidMount() {
     this.metricPoller.start(true);
 
     disposeOnUnmount(this, [
-      await kubeWatchApi.subscribeStores([nodesStore, podsStore, eventStore], {
-        autoLoad: true,
+      kubeWatchApi.subscribeStores([nodesStore, podsStore, eventStore], {
+        preload: true,
       }),
       reaction(
         () => clusterOverviewStore.metricNodeRole, // Toggle Master/Worker node switcher

src/renderer/components/+namespaces/namespace-select.tsx

@@ -9,6 +9,7 @@ import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
 import { FilterIcon } from "../item-object-list/filter-icon";
 import { FilterType } from "../item-object-list/page-filters.store";
+import { kubeWatchApi } from "../../api/kube-watch-api";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
@@ -29,12 +30,11 @@ const defaultProps: Partial<Props> = {
 export class NamespaceSelect extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
-  async componentDidMount() {
-    if (!namespaceStore.isLoaded) {
-      await namespaceStore.loadAll();
-    }
+  componentDidMount() {
     disposeOnUnmount(this, [
-      await namespaceStore.subscribe(),
+      kubeWatchApi.subscribeStores([namespaceStore], {
+        preload: !namespaceStore.isLoaded,
+      })
     ]);
   }
 

src/renderer/components/+network-services/service-details.tsx

@@ -12,18 +12,18 @@ import { ServicePortComponent } from "./service-port-component";
 import { endpointStore } from "../+network-endpoints/endpoints.store";
 import { ServiceDetailsEndpoint } from "./service-details-endpoint";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { kubeWatchApi } from "../../api/kube-watch-api";
 
 interface Props extends KubeObjectDetailsProps<Service> {
 }
 
 @observer
 export class ServiceDetails extends React.Component<Props> {
-  async componentDidMount() {
-    if (!endpointStore.isLoaded) {
-      endpointStore.loadAll();
-    }
+  componentDidMount() {
     disposeOnUnmount(this, [
-      await endpointStore.subscribe(),
+      kubeWatchApi.subscribeStores([endpointStore], {
+        preload: !endpointStore.isLoaded,
+      }),
     ]);
   }
 

src/renderer/components/+workloads-overview/overview.tsx

@@ -26,13 +26,14 @@ export class WorkloadsOverview extends React.Component<Props> {
   @observable isLoading = false;
   @observable isUnmounting = false;
 
-  async componentDidMount() {
+  componentDidMount() {
     disposeOnUnmount(this, [
-      await kubeWatchApi.subscribeStores([
-        podsStore, deploymentStore, daemonSetStore,
-        statefulSetStore, replicaSetStore,
+      kubeWatchApi.subscribeStores([
+        podsStore, deploymentStore, daemonSetStore, statefulSetStore, replicaSetStore,
         jobStore, cronJobStore, eventStore,
-      ])
+      ], {
+        preload: true,
+      }),
     ]);
 
     // fixme: reload stores

src/renderer/components/app.tsx

@@ -76,17 +76,14 @@ export class App extends React.Component {
     whatInput.ask(); // Start to monitor user input device
   }
 
-  async componentDidMount() {
-    const cluster = getHostedCluster();
-
+  componentDidMount() {
     disposeOnUnmount(this, [
-      await kubeWatchApi.subscribeStores([podsStore, nodesStore, eventStore], {
-        autoLoad: true,
-        waitUntilLoaded: true,
+      kubeWatchApi.subscribeStores([podsStore, nodesStore, eventStore], {
+        preload: true,
       }),
 
       reaction(() => this.warningsCount, (count) => {
-        broadcastMessage(`cluster-warning-event-count:${cluster.id}`, count);
+        broadcastMessage(`cluster-warning-event-count:${getHostedCluster().id}`, count);
       }),
     ]);
   }

src/renderer/components/kube-object/kube-object-list-layout.tsx

@@ -20,12 +20,14 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
     return this.props.store.getByPath(kubeSelectedUrlParam.get());
   }
 
-  async componentDidMount() {
-    const { store, dependentStores } = this.props;
+  componentDidMount() {
+    const { store, dependentStores = [] } = this.props;
     const stores = Array.from(new Set([store, ...dependentStores]));
 
     disposeOnUnmount(this, [
-      await kubeWatchApi.subscribeStores(stores)
+      kubeWatchApi.subscribeStores(stores, {
+        preload: true
+      })
     ]);
   }