From 632e77b263be0181e4dc9ab73b5edfe274f48f28 Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 25 Jan 2021 13:30:31 +0200 Subject: [PATCH] store subscribing refactoring -- part 4 Signed-off-by: Roman --- src/renderer/api/kube-watch-api.ts | 4 ++- .../components/+cluster/cluster-overview.tsx | 1 + .../+workloads-overview/overview.tsx | 13 +-------- .../item-object-list/item-list-layout.tsx | 27 ++++++++++++++----- .../kube-object/kube-object-list-layout.tsx | 1 + 5 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/renderer/api/kube-watch-api.ts b/src/renderer/api/kube-watch-api.ts index cae6e5431b..fee40d4872 100644 --- a/src/renderer/api/kube-watch-api.ts +++ b/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); diff --git a/src/renderer/components/+cluster/cluster-overview.tsx b/src/renderer/components/+cluster/cluster-overview.tsx index a2ef7077f1..1f7a7f6b78 100644 --- a/src/renderer/components/+cluster/cluster-overview.tsx +++ b/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) diff --git a/src/renderer/components/+workloads-overview/overview.tsx b/src/renderer/components/+workloads-overview/overview.tsx index 093882ea48..3a6626277a 100644 --- a/src/renderer/components/+workloads-overview/overview.tsx +++ b/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 { @observer export class WorkloadsOverview extends React.Component { - @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() { diff --git a/src/renderer/components/item-object-list/item-list-layout.tsx b/src/renderer/components/item-object-list/item-list-layout.tsx index 89f76c70a4..4ddfba68ed 100644 --- a/src/renderer/components/item-object-list/item-list-layout.tsx +++ b/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 { className: IClassName; store: ItemStore; dependentStores?: ItemStore[]; + preloadStores?: boolean; isClusterScoped?: boolean; hideFilters?: boolean; searchFilters?: SearchFilter[]; @@ -81,6 +83,7 @@ const defaultProps: Partial = { isSelectable: true, isConfigurable: false, copyClassNameFromHeadCells: true, + preloadStores: true, dependentStores: [], filterItems: [], hasDetailsView: true, @@ -114,20 +117,30 @@ export class ItemListLayout extends React.Component { } 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 (!isClusterScoped) { - // disposeOnUnmount(this, [ - // namespaceStore.onContextChange(() => this.loadStores()) - // ]); + if (preloadStores) { + 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; diff --git a/src/renderer/components/kube-object/kube-object-list-layout.tsx b/src/renderer/components/kube-object/kube-object-list-layout.tsx index dab6137ca0..226023fc8d 100644 --- a/src/renderer/components/kube-object/kube-object-list-layout.tsx +++ b/src/renderer/components/kube-object/kube-object-list-layout.tsx @@ -46,6 +46,7 @@ export class KubeObjectListLayout extends React.Component {