1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

store subscribing refactoring -- part 1

Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2021-01-21 18:48:17 +02:00
parent 139ea14a31
commit 3e005fc611
15 changed files with 148 additions and 201 deletions

View File

@ -2,7 +2,7 @@ import type { KubeObjectStore } from "../kube-object.store";
import { action, observable } from "mobx"; import { action, observable } from "mobx";
import { autobind } from "../utils"; import { autobind } from "../utils";
import { KubeApi } from "./kube-api"; import { KubeApi, parseKubeApi } from "./kube-api";
@autobind() @autobind()
export class ApiManager { export class ApiManager {
@ -11,7 +11,7 @@ export class ApiManager {
getApi(pathOrCallback: string | ((api: KubeApi) => boolean)) { getApi(pathOrCallback: string | ((api: KubeApi) => boolean)) {
if (typeof pathOrCallback === "string") { if (typeof pathOrCallback === "string") {
return this.apis.get(pathOrCallback) || this.apis.get(KubeApi.parseApi(pathOrCallback).apiBase); return this.apis.get(pathOrCallback) || this.apis.get(parseKubeApi(pathOrCallback).apiBase);
} }
return Array.from(this.apis.values()).find(pathOrCallback ?? (() => true)); return Array.from(this.apis.values()).find(pathOrCallback ?? (() => true));

View File

@ -92,14 +92,6 @@ export function ensureObjectSelfLink(api: KubeApi, object: KubeJsonApiData) {
} }
export class KubeApi<T extends KubeObject = any> { export class KubeApi<T extends KubeObject = any> {
static parseApi = parseKubeApi;
static watchAll(...apis: KubeApi[]) {
const disposers = apis.map(api => api.watch());
return () => disposers.forEach(unwatch => unwatch());
}
readonly kind: string; readonly kind: string;
readonly apiBase: string; readonly apiBase: string;
readonly apiPrefix: string; readonly apiPrefix: string;
@ -124,7 +116,7 @@ export class KubeApi<T extends KubeObject = any> {
if (!options.apiBase) { if (!options.apiBase) {
options.apiBase = objectConstructor.apiBase; options.apiBase = objectConstructor.apiBase;
} }
const { apiBase, apiPrefix, apiGroup, apiVersion, resource } = KubeApi.parseApi(options.apiBase); const { apiBase, apiPrefix, apiGroup, apiVersion, resource } = parseKubeApi(options.apiBase);
this.kind = kind; this.kind = kind;
this.isNamespaced = isNamespaced; this.isNamespaced = isNamespaced;
@ -157,7 +149,7 @@ export class KubeApi<T extends KubeObject = any> {
for (const apiUrl of apiBases) { for (const apiUrl of apiBases) {
// Split e.g. "/apis/extensions/v1beta1/ingresses" to parts // Split e.g. "/apis/extensions/v1beta1/ingresses" to parts
const { apiPrefix, apiGroup, apiVersionWithGroup, resource } = KubeApi.parseApi(apiUrl); const { apiPrefix, apiGroup, apiVersionWithGroup, resource } = parseKubeApi(apiUrl);
// Request available resources // Request available resources
try { try {
@ -366,7 +358,7 @@ export class KubeApi<T extends KubeObject = any> {
} }
watch(): () => void { watch(): () => void {
return kubeWatchApi.subscribe(this); return kubeWatchApi.subscribeApi(this);
} }
} }

View File

@ -2,13 +2,13 @@
import type { Cluster } from "../../main/cluster"; import type { Cluster } from "../../main/cluster";
import type { IKubeWatchEvent, IKubeWatchEventStreamEnd, IWatchRoutePayload } from "../../main/routes/watch-route"; import type { IKubeWatchEvent, IKubeWatchEventStreamEnd, IWatchRoutePayload } from "../../main/routes/watch-route";
import type { KubeObject } from "./kube-object"; import type { KubeObject } from "./kube-object";
import type { KubeObjectStore } from "../kube-object.store";
import { computed, observable, reaction } from "mobx"; import { computed, observable, reaction } from "mobx";
import { autobind, EventEmitter } from "../utils"; import { autobind, EventEmitter } from "../utils";
import { ensureObjectSelfLink, KubeApi } from "./kube-api"; import { ensureObjectSelfLink, KubeApi, parseKubeApi } from "./kube-api";
import { KubeJsonApiData, KubeJsonApiError } from "./kube-json-api"; import { KubeJsonApiData, KubeJsonApiError } from "./kube-json-api";
import { KubeObjectStore } from "../kube-object.store";
import { apiPrefix, isProduction } from "../../common/vars"; import { apiPrefix, isProduction } from "../../common/vars";
import { apiManager } from "./api-manager"; import { apiManager } from "./api-manager";
@ -21,6 +21,11 @@ export interface IKubeWatchMessage<T extends KubeObject = any> {
store?: KubeObjectStore<T>; store?: KubeObjectStore<T>;
} }
export interface IKubeWatchSubscribeStoreOptions {
autoLoad?: boolean;
waitUntilLoaded?: boolean;
}
export interface IKubeWatchLog { export interface IKubeWatchLog {
message: string | Error; message: string | Error;
meta?: object | any; meta?: object | any;
@ -57,17 +62,49 @@ export class KubeWatchApi {
return this.subscribers.get(api) || 0; return this.subscribers.get(api) || 0;
} }
subscribe(...apis: KubeApi[]) { subscribeApi(api: KubeApi | KubeApi[]) {
const apis: KubeApi[] = [api].flat();
apis.forEach(api => { apis.forEach(api => {
this.subscribers.set(api, this.getSubscribersCount(api) + 1); this.subscribers.set(api, this.getSubscribersCount(api) + 1);
}); });
return () => apis.forEach(api => { return () => {
apis.forEach(api => {
const count = this.getSubscribersCount(api) - 1; const count = this.getSubscribersCount(api) - 1;
if (count <= 0) this.subscribers.delete(api); if (count <= 0) this.subscribers.delete(api);
else this.subscribers.set(api, count); else this.subscribers.set(api, count);
}); });
};
}
async subscribeStores(stores: KubeObjectStore[], options: IKubeWatchSubscribeStoreOptions = {}): Promise<() => void> {
this.log({
message: "Subscribing to stores",
meta: { stores, options },
});
const { autoLoad = true, waitUntilLoaded = true } = options;
const loading: Promise<any>[] = [];
if (autoLoad) {
loading.push(...stores.map(store => store.loadAll()));
}
if (waitUntilLoaded) {
try {
await Promise.all(loading);
} catch (error) {
this.log({
message: new Error("Loading stores has failed"),
meta: { stores, error, options },
})
}
}
const disposers = await Promise.all(stores.map(store => store.subscribe()));
return () => disposers.forEach(dispose => dispose()); // unsubscribe
} }
protected async resolveCluster(): Promise<Cluster> { protected async resolveCluster(): Promise<Cluster> {
@ -107,7 +144,7 @@ export class KubeWatchApi {
} }
this.log({ this.log({
message: "connecting", message: "Connecting",
meta: payload, meta: payload,
}); });
@ -204,7 +241,7 @@ export class KubeWatchApi {
} }
protected async onServerStreamEnd(event: IKubeWatchEventStreamEnd) { protected async onServerStreamEnd(event: IKubeWatchEventStreamEnd) {
const { apiBase, namespace } = KubeApi.parseApi(event.url); const { apiBase, namespace } = parseKubeApi(event.url);
const api = apiManager.getApi(apiBase); const api = apiManager.getApi(apiBase);
if (api) { if (api) {
@ -213,7 +250,7 @@ export class KubeWatchApi {
this.connect(); this.connect();
} catch (error) { } catch (error) {
this.log({ this.log({
message: new Error("failed to reconnect on stream end"), message: new Error("Failed to reconnect on stream end"),
meta: { error, event }, meta: { error, event },
}); });
@ -227,7 +264,9 @@ export class KubeWatchApi {
} }
protected log({ message, meta }: IKubeWatchLog) { protected log({ message, meta }: IKubeWatchLog) {
if (isProduction) return; if (isProduction) {
return;
}
const logMessage = `%c[KUBE-WATCH-API]: ${String(message).toUpperCase()}`; const logMessage = `%c[KUBE-WATCH-API]: ${String(message).toUpperCase()}`;
const isError = message instanceof Error; const isError = message instanceof Error;

View File

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

View File

@ -2,9 +2,9 @@ import "./namespace-select.scss";
import React from "react"; import React from "react";
import { computed } from "mobx"; import { computed } from "mobx";
import { observer } from "mobx-react"; import { disposeOnUnmount, observer } from "mobx-react";
import { Select, SelectOption, SelectProps } from "../select"; import { Select, SelectOption, SelectProps } from "../select";
import { cssNames, noop } from "../../utils"; import { cssNames } from "../../utils";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { namespaceStore } from "./namespace.store"; import { namespaceStore } from "./namespace.store";
import { FilterIcon } from "../item-object-list/filter-icon"; import { FilterIcon } from "../item-object-list/filter-icon";
@ -28,17 +28,14 @@ const defaultProps: Partial<Props> = {
@observer @observer
export class NamespaceSelect extends React.Component<Props> { export class NamespaceSelect extends React.Component<Props> {
static defaultProps = defaultProps as object; static defaultProps = defaultProps as object;
private unsubscribe = noop;
async componentDidMount() { async componentDidMount() {
if (!namespaceStore.isLoaded) { if (!namespaceStore.isLoaded) {
await namespaceStore.loadAll(); await namespaceStore.loadAll();
} }
this.unsubscribe = namespaceStore.subscribe(); disposeOnUnmount(this, [
} await namespaceStore.subscribe(),
]);
componentWillUnmount() {
this.unsubscribe();
} }
@computed get options(): SelectOption[] { @computed get options(): SelectOption[] {

View File

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

View File

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

View File

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

View File

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

View File

@ -1,8 +1,8 @@
import "./overview.scss"; import "./overview.scss";
import React from "react"; import React from "react";
import { observable, when } from "mobx"; import { observable } from "mobx";
import { observer } from "mobx-react"; import { disposeOnUnmount, observer } from "mobx-react";
import { OverviewStatuses } from "./overview-statuses"; import { OverviewStatuses } from "./overview-statuses";
import { RouteComponentProps } from "react-router"; import { RouteComponentProps } from "react-router";
import { IWorkloadsOverviewRouteParams } from "../+workloads"; import { IWorkloadsOverviewRouteParams } from "../+workloads";
@ -15,9 +15,8 @@ import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
import { jobStore } from "../+workloads-jobs/job.store"; import { jobStore } from "../+workloads-jobs/job.store";
import { cronJobStore } from "../+workloads-cronjobs/cronjob.store"; import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
import { Events } from "../+events"; import { Events } from "../+events";
import { KubeObjectStore } from "../../kube-object.store";
import { isAllowedResource } from "../../../common/rbac"; import { isAllowedResource } from "../../../common/rbac";
import { namespaceStore } from "../+namespaces/namespace.store"; import { kubeWatchApi } from "../../api/kube-watch-api";
interface Props extends RouteComponentProps<IWorkloadsOverviewRouteParams> { interface Props extends RouteComponentProps<IWorkloadsOverviewRouteParams> {
} }
@ -28,47 +27,18 @@ export class WorkloadsOverview extends React.Component<Props> {
@observable isUnmounting = false; @observable isUnmounting = false;
async componentDidMount() { async componentDidMount() {
const stores: KubeObjectStore[] = [ disposeOnUnmount(this, [
isAllowedResource("pods") && podsStore, await kubeWatchApi.subscribeStores([
isAllowedResource("deployments") && deploymentStore, podsStore, deploymentStore, daemonSetStore,
isAllowedResource("daemonsets") && daemonSetStore, statefulSetStore, replicaSetStore,
isAllowedResource("statefulsets") && statefulSetStore, jobStore, cronJobStore, eventStore,
isAllowedResource("replicasets") && replicaSetStore, ])
isAllowedResource("jobs") && jobStore, ]);
isAllowedResource("cronjobs") && cronJobStore,
isAllowedResource("events") && eventStore,
].filter(Boolean);
const unsubscribeMap = new Map<KubeObjectStore, () => void>(); // fixme: reload stores
// namespaceStore.onContextChange(loadStores, {
const loadStores = async () => { // fireImmediately: true,
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;
} }
render() { render() {

View File

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

View File

@ -2,7 +2,7 @@ import "./item-list-layout.scss";
import groupBy from "lodash/groupBy"; import groupBy from "lodash/groupBy";
import React, { ReactNode } from "react"; 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 { disposeOnUnmount, observer } from "mobx-react";
import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table"; 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 { Spinner } from "../spinner";
import { ItemObject, ItemStore } from "../../item.store"; import { ItemObject, ItemStore } from "../../item.store";
import { SearchInputUrl } from "../input"; import { SearchInputUrl } from "../input";
import { namespaceStore } from "../+namespaces/namespace.store";
import { Filter, FilterType, pageFilters } from "./page-filters.store"; import { Filter, FilterType, pageFilters } from "./page-filters.store";
import { PageFiltersList } from "./page-filters-list"; import { PageFiltersList } from "./page-filters-list";
import { PageFiltersSelect } from "./page-filters-select"; import { PageFiltersSelect } from "./page-filters-select";
@ -97,10 +96,6 @@ interface ItemListLayoutUserSettings {
export class ItemListLayout extends React.Component<ItemListLayoutProps> { export class ItemListLayout extends React.Component<ItemListLayoutProps> {
static defaultProps = defaultProps as object; static defaultProps = defaultProps as object;
private watchDisposers: IReactionDisposer[] = [];
@observable isUnmounting = false;
@observable userSettings: ItemListLayoutUserSettings = { @observable userSettings: ItemListLayoutUserSettings = {
showAppliedFilters: false, 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"); throw new Error("[ItemListLayout]: configurable list require props.tableId to be specified");
} }
this.loadStores(); // fixme: reload stores
if (!isClusterScoped) { if (!isClusterScoped) {
disposeOnUnmount(this, [ // disposeOnUnmount(this, [
namespaceStore.onContextChange(() => this.loadStores()) // 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 } = { private filterCallbacks: { [type: string]: ItemsFilter } = {
[FilterType.SEARCH]: items => { [FilterType.SEARCH]: items => {
const { searchFilters, isSearchable } = this.props; const { searchFilters, isSearchable } = this.props;

View File

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

View File

@ -167,7 +167,7 @@ export abstract class ItemStore<T extends ItemObject = ItemObject> {
async removeSelectedItems?(): Promise<any>; async removeSelectedItems?(): Promise<any>;
// eslint-disable-next-line unused-imports/no-unused-vars-ts // eslint-disable-next-line unused-imports/no-unused-vars-ts
subscribe(...args: any[]) { async subscribe(...args: any[]): Promise<() => void> {
return noop; return noop;
} }

View File

@ -5,7 +5,7 @@ import { KubeObject } from "./api/kube-object";
import { IKubeWatchEvent, IKubeWatchMessage, kubeWatchApi } from "./api/kube-watch-api"; import { IKubeWatchEvent, IKubeWatchMessage, kubeWatchApi } from "./api/kube-watch-api";
import { ItemStore } from "./item.store"; import { ItemStore } from "./item.store";
import { apiManager } from "./api/api-manager"; import { apiManager } from "./api/api-manager";
import { IKubeApiQueryParams, KubeApi } from "./api/kube-api"; import { IKubeApiQueryParams, KubeApi, parseKubeApi } from "./api/kube-api";
import { KubeJsonApiData } from "./api/kube-json-api"; import { KubeJsonApiData } from "./api/kube-json-api";
export interface KubeObjectStoreLoadingParams { export interface KubeObjectStoreLoadingParams {
@ -152,7 +152,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
@action @action
async loadFromPath(resourcePath: string) { async loadFromPath(resourcePath: string) {
const { namespace, name } = KubeApi.parseApi(resourcePath); const { namespace, name } = parseKubeApi(resourcePath);
return this.load({ name, namespace }); return this.load({ name, namespace });
} }
@ -203,8 +203,15 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
}); });
} }
subscribe(apis = [this.api]) { getSubscribeApis(): KubeApi[] {
return KubeApi.watchAll(...apis); return [this.api];
}
async subscribe(apis = this.getSubscribeApis()) {
const cluster = await this.resolveCluster();
const allowedApis = apis.filter(api => cluster.isAllowedResource(api.kind));
return kubeWatchApi.subscribeApi(allowedApis);
} }
@action @action