store subscribing refactoring -- part 1

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

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

@@ -3,13 +3,9 @@ import "./cluster-overview.scss";
 import React from "react";
 import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-
-import { eventStore } from "../+events/event.store";
 import { nodesStore } from "../+nodes/nodes.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { getHostedCluster } from "../../../common/cluster-store";
-import { isAllowedResource } from "../../../common/rbac";
-import { KubeObjectStore } from "../../kube-object.store";
 import { interval } from "../../utils";
 import { TabLayout } from "../layout/tab-layout";
 import { Spinner } from "../spinner";
@@ -17,45 +13,32 @@ import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetrics } from "./cluster-metrics";
 import { clusterOverviewStore } from "./cluster-overview.store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
+import { eventStore } from "../+events/event.store";
+import { kubeWatchApi } from "../../api/kube-watch-api";
 
 @observer
 export class ClusterOverview extends React.Component {
-  private stores: KubeObjectStore<any>[] = [];
-  private subscribers: Array<() => void> = [];
-  private metricPoller = interval(60, this.loadMetrics);
-
-  @disposeOnUnmount
-  fetchMetrics = reaction(
-    () => clusterOverviewStore.metricNodeRole, // Toggle Master/Worker node switcher
-    () => this.metricPoller.restart(true)
-  );
+  private metricPoller = interval(60, () => this.loadMetrics());
 
   loadMetrics() {
     getHostedCluster().available && clusterOverviewStore.loadMetrics();
   }
 
   async componentDidMount() {
-    if (isAllowedResource("nodes")) {
-      this.stores.push(nodesStore);
-    }
+    this.metricPoller.start(true);
 
-    if (isAllowedResource("pods")) {
-      this.stores.push(podsStore);
-    }
-
-    if (isAllowedResource("events")) {
-      this.stores.push(eventStore);
-    }
-
-    await Promise.all(this.stores.map(store => store.loadAll()));
-    this.loadMetrics();
-
-    this.subscribers = this.stores.map(store => store.subscribe());
-    this.metricPoller.start();
+    disposeOnUnmount(this, [
+      await kubeWatchApi.subscribeStores([nodesStore, podsStore, eventStore], {
+        autoLoad: true,
+      }),
+      reaction(
+        () => clusterOverviewStore.metricNodeRole, // Toggle Master/Worker node switcher
+        () => this.metricPoller.restart(true)
+      ),
+    ]);
   }
 
   componentWillUnmount() {
-    this.subscribers.forEach(dispose => dispose()); // unsubscribe all
     this.metricPoller.stop();
   }
 

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

@@ -2,9 +2,9 @@ import "./namespace-select.scss";
 
 import React from "react";
 import { computed } from "mobx";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { Select, SelectOption, SelectProps } from "../select";
-import { cssNames, noop } from "../../utils";
+import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
 import { FilterIcon } from "../item-object-list/filter-icon";
@@ -28,17 +28,14 @@ const defaultProps: Partial<Props> = {
 @observer
 export class NamespaceSelect extends React.Component<Props> {
   static defaultProps = defaultProps as object;
-  private unsubscribe = noop;
 
   async componentDidMount() {
     if (!namespaceStore.isLoaded) {
       await namespaceStore.loadAll();
     }
-    this.unsubscribe = namespaceStore.subscribe();
-  }
-
-  componentWillUnmount() {
-    this.unsubscribe();
+    disposeOnUnmount(this, [
+      await namespaceStore.subscribe(),
+    ]);
   }
 
   @computed get options(): SelectOption[] {
@@ -60,7 +57,7 @@ export class NamespaceSelect extends React.Component<Props> {
 
     return label || (
       <>
-        {showIcons && <Icon small material="layers" />}
+        {showIcons && <Icon small material="layers"/>}
         {value}
       </>
     );
@@ -103,9 +100,9 @@ export class NamespaceSelectFilter extends React.Component {
 
           return (
             <div className="flex gaps align-center">
-              <FilterIcon type={FilterType.NAMESPACE} />
+              <FilterIcon type={FilterType.NAMESPACE}/>
               <span>{namespace}</span>
-              {isSelected && <Icon small material="check" className="box right" />}
+              {isSelected && <Icon small material="check" className="box right"/>}
             </div>
           );
         }}

src/renderer/components/+namespaces/namespace.store.ts

@@ -117,15 +117,15 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
     return namespaces;
   }
 
-  subscribe(apis = [this.api]) {
+  getSubscribeApis() {
     const { accessibleNamespaces } = getHostedCluster();
 
     // if user has given static list of namespaces let's not start watches because watch adds stuff that's not wanted
     if (accessibleNamespaces.length > 0) {
-      return Function; // no-op
+      return []; // no-op
     }
 
-    return super.subscribe(apis);
+    return super.getSubscribeApis();
   }
 
   protected async loadItems(params: KubeObjectStoreLoadingParams) {

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

@@ -1,12 +1,12 @@
 import "./service-details.scss";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { Service, endpointApi } from "../../api/endpoints";
+import { Service } from "../../api/endpoints";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { ServicePortComponent } from "./service-port-component";
 import { endpointStore } from "../+network-endpoints/endpoints.store";
@@ -18,11 +18,13 @@ interface Props extends KubeObjectDetailsProps<Service> {
 
 @observer
 export class ServiceDetails extends React.Component<Props> {
-  componentDidMount() {
+  async componentDidMount() {
     if (!endpointStore.isLoaded) {
       endpointStore.loadAll();
     }
-    endpointApi.watch();
+    disposeOnUnmount(this, [
+      await endpointStore.subscribe(),
+    ]);
   }
 
   render() {
@@ -77,7 +79,7 @@ export class ServiceDetails extends React.Component<Props> {
         )}
         <DrawerTitle title={`Endpoint`}/>
 
-        <ServiceDetailsEndpoint endpoint={endpoint} />
+        <ServiceDetailsEndpoint endpoint={endpoint}/>
       </div>
     );
   }

src/renderer/components/+user-management-roles-bindings/role-bindings.store.ts

@@ -9,8 +9,8 @@ import { apiManager } from "../../api/api-manager";
 export class RoleBindingsStore extends KubeObjectStore<RoleBinding> {
   api = clusterRoleBindingApi;
 
-  subscribe() {
-    return super.subscribe([clusterRoleBindingApi, roleBindingApi]);
+  getSubscribeApis() {
+    return [clusterRoleBindingApi, roleBindingApi];
   }
 
   protected sortItems(items: RoleBinding[]) {

src/renderer/components/+user-management-roles/roles.store.ts

@@ -7,8 +7,8 @@ import { apiManager } from "../../api/api-manager";
 export class RolesStore extends KubeObjectStore<Role> {
   api = clusterRoleApi;
 
-  subscribe() {
-    return super.subscribe([roleApi, clusterRoleApi]);
+  getSubscribeApis() {
+    return [roleApi, clusterRoleApi];
   }
 
   protected sortItems(items: Role[]) {

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

@@ -1,8 +1,8 @@
 import "./overview.scss";
 
 import React from "react";
-import { observable, when } from "mobx";
-import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { OverviewStatuses } from "./overview-statuses";
 import { RouteComponentProps } from "react-router";
 import { IWorkloadsOverviewRouteParams } from "../+workloads";
@@ -15,9 +15,8 @@ import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
 import { jobStore } from "../+workloads-jobs/job.store";
 import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
 import { Events } from "../+events";
-import { KubeObjectStore } from "../../kube-object.store";
 import { isAllowedResource } from "../../../common/rbac";
-import { namespaceStore } from "../+namespaces/namespace.store";
+import { kubeWatchApi } from "../../api/kube-watch-api";
 
 interface Props extends RouteComponentProps<IWorkloadsOverviewRouteParams> {
 }
@@ -28,47 +27,18 @@ export class WorkloadsOverview extends React.Component<Props> {
   @observable isUnmounting = false;
 
   async componentDidMount() {
-    const stores: KubeObjectStore[] = [
-      isAllowedResource("pods") && podsStore,
-      isAllowedResource("deployments") && deploymentStore,
-      isAllowedResource("daemonsets") && daemonSetStore,
-      isAllowedResource("statefulsets") && statefulSetStore,
-      isAllowedResource("replicasets") && replicaSetStore,
-      isAllowedResource("jobs") && jobStore,
-      isAllowedResource("cronjobs") && cronJobStore,
-      isAllowedResource("events") && eventStore,
-    ].filter(Boolean);
+    disposeOnUnmount(this, [
+      await kubeWatchApi.subscribeStores([
+        podsStore, deploymentStore, daemonSetStore,
+        statefulSetStore, replicaSetStore,
+        jobStore, cronJobStore, eventStore,
+      ])
+    ]);
 
-    const unsubscribeMap = new Map<KubeObjectStore, () => void>();
-
-    const loadStores = async () => {
-      this.isLoading = true;
-
-      for (const store of stores) {
-        if (this.isUnmounting) break;
-
-        try {
-          await store.loadAll();
-          unsubscribeMap.get(store)?.(); // unsubscribe previous watcher
-          unsubscribeMap.set(store, store.subscribe());
-        } catch (error) {
-          console.error("loading store error", error);
-        }
-      }
-      this.isLoading = false;
-    };
-
-    namespaceStore.onContextChange(loadStores, {
-      fireImmediately: true,
-    });
-
-    await when(() => this.isUnmounting && !this.isLoading);
-    unsubscribeMap.forEach(dispose => dispose());
-    unsubscribeMap.clear();
-  }
-
-  componentWillUnmount() {
-    this.isUnmounting = true;
+    // fixme: reload stores
+    // namespaceStore.onContextChange(loadStores, {
+    //   fireImmediately: true,
+    // });
   }
 
   render() {

src/renderer/components/app.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
 import { history } from "../navigation";
 import { Notifications } from "./notifications";
@@ -45,6 +45,7 @@ import { eventStore } from "./+events/event.store";
 import { computed, reaction } from "mobx";
 import { nodesStore } from "./+nodes/nodes.store";
 import { podsStore } from "./+workloads-pods/pods.store";
+import { kubeWatchApi } from "../api/kube-watch-api";
 import { sum } from "lodash";
 import { ReplicaSetScaleDialog } from "./+workloads-replicasets/replicaset-scale-dialog";
 
@@ -77,36 +78,22 @@ export class App extends React.Component {
 
   async componentDidMount() {
     const cluster = getHostedCluster();
-    const promises: Promise<void>[] = [];
 
-    if (isAllowedResource("events") && isAllowedResource("pods")) {
-      promises.push(eventStore.loadAll());
-      promises.push(podsStore.loadAll());
-    }
+    disposeOnUnmount(this, [
+      await kubeWatchApi.subscribeStores([podsStore, nodesStore, eventStore], {
+        autoLoad: true,
+        waitUntilLoaded: true,
+      }),
 
-    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);
-    });
+      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));
+  // todo: move to nodes-store.ts
+  @computed get warningsCount() {
+    let warnings = sum(nodesStore.items.map(node => node.getWarningConditions().length));
 
     warnings = warnings + eventStore.getWarnings().length;
 

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

@@ -2,7 +2,7 @@ import "./item-list-layout.scss";
 import groupBy from "lodash/groupBy";
 
 import React, { ReactNode } from "react";
-import { computed, IReactionDisposer, observable, reaction, toJS } from "mobx";
+import { computed, observable, reaction, toJS } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
 import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";
@@ -12,7 +12,6 @@ import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
 import { ItemObject, ItemStore } from "../../item.store";
 import { SearchInputUrl } from "../input";
-import { namespaceStore } from "../+namespaces/namespace.store";
 import { Filter, FilterType, pageFilters } from "./page-filters.store";
 import { PageFiltersList } from "./page-filters-list";
 import { PageFiltersSelect } from "./page-filters-select";
@@ -97,10 +96,6 @@ interface ItemListLayoutUserSettings {
 export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   static defaultProps = defaultProps as object;
 
-  private watchDisposers: IReactionDisposer[] = [];
-
-  @observable isUnmounting = false;
-
   @observable userSettings: ItemListLayoutUserSettings = {
     showAppliedFilters: false,
   };
@@ -125,50 +120,14 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       throw new Error("[ItemListLayout]: configurable list require props.tableId to be specified");
     }
 
-    this.loadStores();
-
+    // fixme: reload stores
     if (!isClusterScoped) {
-      disposeOnUnmount(this, [
-        namespaceStore.onContextChange(() => this.loadStores())
-      ]);
+      // disposeOnUnmount(this, [
+      //   namespaceStore.onContextChange(() => this.loadStores())
+      // ]);
     }
   }
 
-  async componentWillUnmount() {
-    this.isUnmounting = true;
-    this.unsubscribeStores();
-  }
-
-  @computed get stores() {
-    const { store, dependentStores } = this.props;
-
-    return new Set([store, ...dependentStores]);
-  }
-
-  async loadStores() {
-    this.unsubscribeStores(); // reset first
-
-    // load
-    for (const store of this.stores) {
-      if (this.isUnmounting) {
-        this.unsubscribeStores();
-        break;
-      }
-
-      try {
-        await store.loadAll();
-        this.watchDisposers.push(store.subscribe());
-      } catch (error) {
-        console.error("loading store error", error);
-      }
-    }
-  }
-
-  unsubscribeStores() {
-    this.watchDisposers.forEach(dispose => dispose());
-    this.watchDisposers.length = 0;
-  }
-
   private filterCallbacks: { [type: string]: ItemsFilter } = {
     [FilterType.SEARCH]: items => {
       const { searchFilters, isSearchable } = this.props;

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

@@ -1,15 +1,17 @@
 import React from "react";
 import { computed } from "mobx";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { KubeObject } from "../../api/kube-object";
 import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
 import { KubeObjectStore } from "../../kube-object.store";
 import { KubeObjectMenu } from "./kube-object-menu";
 import { kubeSelectedUrlParam, showDetails } from "./kube-object-details";
+import { kubeWatchApi } from "../../api/kube-watch-api";
 
 export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
   store: KubeObjectStore;
+  dependentStores?: KubeObjectStore[];
 }
 
 @observer
@@ -18,6 +20,15 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
     return this.props.store.getByPath(kubeSelectedUrlParam.get());
   }
 
+  async componentDidMount() {
+    const { store, dependentStores } = this.props;
+    const stores = Array.from(new Set([store, ...dependentStores]));
+
+    disposeOnUnmount(this, [
+      await kubeWatchApi.subscribeStores(stores)
+    ]);
+  }
+
   onDetails = (item: KubeObject) => {
     if (this.props.onDetails) {
       this.props.onDetails(item);