store subscribing refactoring -- part 4

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

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

@@ -120,6 +120,7 @@ export class KubeWatchApi {
     async function subscribe() {
       if (isDisposed) return;
       const unsubscribeList = await Promise.all(stores.map(store => store.subscribe()));
+
       disposers.push(...unsubscribeList);
       if (isDisposed) unsubscribe();
     }
@@ -176,6 +177,7 @@ export class KubeWatchApi {
       // request above is stale since new request-id has been issued
       if (this.requestId !== requestId) {
         abortController.abort();
+
         return;
       }
 
@@ -206,7 +208,7 @@ export class KubeWatchApi {
 
   // process received stream events, returns unprocessed buffer chunk if any
   protected processBuffer(events: string[]): string {
-    for (let json of events) {
+    for (const json of events) {
       try {
         const kubeEvent: IKubeWatchEvent = JSON.parse(json);
         const message = this.getMessage(kubeEvent);

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

@@ -31,6 +31,7 @@ export class ClusterOverview extends React.Component {
       kubeWatchApi.subscribeStores([nodesStore, podsStore, eventStore], {
         preload: true,
       }),
+
       reaction(
         () => clusterOverviewStore.metricNodeRole, // Toggle Master/Worker node switcher
         () => this.metricPoller.restart(true)

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

@@ -1,7 +1,6 @@
 import "./overview.scss";
 
 import React from "react";
-import { observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { OverviewStatuses } from "./overview-statuses";
 import { RouteComponentProps } from "react-router";
@@ -23,23 +22,13 @@ interface Props extends RouteComponentProps<IWorkloadsOverviewRouteParams> {
 
 @observer
 export class WorkloadsOverview extends React.Component<Props> {
-  @observable isLoading = false;
-  @observable isUnmounting = false;
-
   componentDidMount() {
     disposeOnUnmount(this, [
       kubeWatchApi.subscribeStores([
         podsStore, deploymentStore, daemonSetStore, statefulSetStore, replicaSetStore,
         jobStore, cronJobStore, eventStore,
-      ], {
+      ]),
-        preload: true,
-      }),
     ]);
-
-    // fixme: reload stores
-    // namespaceStore.onContextChange(loadStores, {
-    //   fireImmediately: true,
-    // });
   }
 
   render() {

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";
@@ -21,6 +21,7 @@ import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Checkbox } from "../checkbox";
 import { userStore } from "../../../common/user-store";
+import { namespaceStore } from "../+namespaces/namespace.store";
 
 // todo: refactor, split to small re-usable components
 
@@ -39,6 +40,7 @@ export interface ItemListLayoutProps<T extends ItemObject = ItemObject> {
   className: IClassName;
   store: ItemStore<T>;
   dependentStores?: ItemStore[];
+  preloadStores?: boolean;
   isClusterScoped?: boolean;
   hideFilters?: boolean;
   searchFilters?: SearchFilter<T>[];
@@ -81,6 +83,7 @@ const defaultProps: Partial<ItemListLayoutProps> = {
   isSelectable: true,
   isConfigurable: false,
   copyClassNameFromHeadCells: true,
+  preloadStores: true,
   dependentStores: [],
   filterItems: [],
   hasDetailsView: true,
@@ -114,20 +117,30 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   }
 
   async componentDidMount() {
-    const { isClusterScoped, isConfigurable, tableId } = this.props;
+    const { isClusterScoped, isConfigurable, tableId, preloadStores } = this.props;
 
     if (isConfigurable && !tableId) {
       throw new Error("[ItemListLayout]: configurable list require props.tableId to be specified");
     }
 
-    // fixme: reload stores
+    if (preloadStores) {
-    if (!isClusterScoped) {
+      this.loadStores();
-      // disposeOnUnmount(this, [
+
-      //   namespaceStore.onContextChange(() => this.loadStores())
+      if (!isClusterScoped) {
-      // ]);
+        disposeOnUnmount(this, [
+          namespaceStore.onContextChange(() => this.loadStores())
+        ]);
+      }
     }
   }
 
+  private loadStores() {
+    const { store, dependentStores } = this.props;
+    const stores = Array.from(new Set([store, ...dependentStores]));
+
+    stores.forEach(store => store.loadAll());
+  }
+
   private filterCallbacks: { [type: string]: ItemsFilter } = {
     [FilterType.SEARCH]: items => {
       const { searchFilters, isSearchable } = this.props;

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

@@ -46,6 +46,7 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
       <ItemListLayout
         {...layoutProps}
         className={cssNames("KubeObjectListLayout", className)}
+        preloadStores={false} // loading handled in kubeWatchApi.subscribeStores()
         detailsItem={this.selectedItem}
         onDetails={this.onDetails}
         renderItemMenu={(item) => {