From 998a9e8e9698a7d541cac390ca844dd6f6976d71 Mon Sep 17 00:00:00 2001 From: Roman Date: Fri, 17 Feb 2023 16:21:49 +0200 Subject: [PATCH] PoC: Stale resource in details panel after update from apis/store, fix #7186 Updated currently for: Replication Controllers & Namespaces. Signed-off-by: Roman --- ...rrent-kube-object-in-details.injectable.ts | 34 +++++++++++++ .../namespaces-detail-item.injectable.ts | 13 +++-- ...ation-controller-detail-item.injectable.ts | 9 ++-- .../kube-object-details.tsx | 49 +++++++++---------- 4 files changed, 71 insertions(+), 34 deletions(-) diff --git a/packages/core/src/renderer/components/kube-object-details/current-kube-object-in-details.injectable.ts b/packages/core/src/renderer/components/kube-object-details/current-kube-object-in-details.injectable.ts index a68e1672b0..3848c57942 100644 --- a/packages/core/src/renderer/components/kube-object-details/current-kube-object-in-details.injectable.ts +++ b/packages/core/src/renderer/components/kube-object-details/current-kube-object-in-details.injectable.ts @@ -7,6 +7,8 @@ import kubeDetailsUrlParamInjectable from "../kube-detail-params/kube-details-ur import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable"; import { asyncComputed } from "@ogre-tools/injectable-react"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; +import type { IComputedValue } from "mobx"; +import { action, computed, observable, runInAction } from "mobx"; export type CurrentKubeObject = | undefined @@ -41,4 +43,36 @@ const currentKubeObjectInDetailsInjectable = getInjectable({ }, }); +export type KubeObjectDetailsItemValue = KubeObject | Error | undefined; +export type KubeObjectDetailsItemComputed = IComputedValue; + +export const currentKubeObjectInDetailsInjectable2 = getInjectable({ + id: "current-kube-object-in-details-2", + + instantiate(di): KubeObjectDetailsItemComputed { + const kubeObjectUrlParam = di.inject(kubeDetailsUrlParamInjectable); + const apiManager = di.inject(apiManagerInjectable); + const kubeObject = observable.box(); + + return computed(() => { + const kubeObjUrlPath = kubeObjectUrlParam.get(); + + if (!kubeObjUrlPath) return; // details panel is hidden + + const store = apiManager.getStore(kubeObjUrlPath); + const object = store?.getByPath(kubeObjUrlPath); + + if (!object) { + store?.loadFromPath(kubeObjUrlPath) + .then(action((obj) => kubeObject.set(obj))) + .catch(action((error) => kubeObject.set(Error(error)))); + } else { + runInAction(() => kubeObject.set(object)); + } + + return kubeObject.get() ?? object; + }); + }, +}); + export default currentKubeObjectInDetailsInjectable; diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts index 4a7b13c6d1..b9ab51ad00 100644 --- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts +++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts @@ -6,18 +6,23 @@ import { getInjectable } from "@ogre-tools/injectable"; import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token"; import { computed } from "mobx"; import { NamespaceDetails } from "../../../+namespaces"; -import { kubeObjectMatchesToKindAndApiVersion } from "../kube-object-matches-to-kind-and-api-version"; -import currentKubeObjectInDetailsInjectable from "../../current-kube-object-in-details.injectable"; +import { + kubeObjectMatchesToKindAndApiVersion, +} from "../kube-object-matches-to-kind-and-api-version"; +import { + currentKubeObjectInDetailsInjectable2, +} from "../../current-kube-object-in-details.injectable"; +import type { KubeObject } from "../../../../../common/k8s-api/kube-object"; const namespacesDetailItemInjectable = getInjectable({ id: "namespaces-detail-item", instantiate: (di) => { - const kubeObject = di.inject(currentKubeObjectInDetailsInjectable); + const kubeObject = di.inject(currentKubeObjectInDetailsInjectable2); return { Component: NamespaceDetails, - enabled: computed(() => isNamespace(kubeObject.value.get()?.object)), + enabled: computed(() => isNamespace(kubeObject.get() as KubeObject)), orderNumber: 10, }; }, diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts index df14d6cc35..71e19acff1 100644 --- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts +++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts @@ -8,18 +8,21 @@ import { computed } from "mobx"; import { kubeObjectMatchesToKindAndApiVersion, } from "../kube-object-matches-to-kind-and-api-version"; -import currentKubeObjectInDetailsInjectable from "../../current-kube-object-in-details.injectable"; +import { + currentKubeObjectInDetailsInjectable2, +} from "../../current-kube-object-in-details.injectable"; import { ReplicationControllerDetails } from "../../../+workloads-replicationcontrollers"; +import type { KubeObject } from "../../../../../common/k8s-api/kube-object"; const replicationControllerDetailItemInjectable = getInjectable({ id: "replication-controller-detail-item", instantiate(di) { - const kubeObject = di.inject(currentKubeObjectInDetailsInjectable); + const kubeObject = di.inject(currentKubeObjectInDetailsInjectable2); return { Component: ReplicationControllerDetails, - enabled: computed(() => isReplicationController(kubeObject.value.get()?.object)), + enabled: computed(() => isReplicationController(kubeObject.get() as KubeObject)), orderNumber: 10, }; }, diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-details.tsx b/packages/core/src/renderer/components/kube-object-details/kube-object-details.tsx index 26f9ab7568..02b5bf2f83 100644 --- a/packages/core/src/renderer/components/kube-object-details/kube-object-details.tsx +++ b/packages/core/src/renderer/components/kube-object-details/kube-object-details.tsx @@ -9,16 +9,20 @@ import React from "react"; import { observer } from "mobx-react"; import type { IComputedValue } from "mobx"; import { Drawer } from "../drawer"; -import type { KubeObject } from "../../../common/k8s-api/kube-object"; +import { KubeObject } from "../../../common/k8s-api/kube-object"; import { Spinner } from "../spinner"; import { KubeObjectMenu } from "../kube-object-menu"; import type { HideDetails } from "../kube-detail-params/hide-details.injectable"; -import type { IAsyncComputed } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react"; import hideDetailsInjectable from "../kube-detail-params/hide-details.injectable"; -import kubeObjectDetailItemsInjectable from "./kube-object-detail-items/kube-object-detail-items.injectable"; -import type { CurrentKubeObject } from "./current-kube-object-in-details.injectable"; -import currentKubeObjectInDetailsInjectable from "./current-kube-object-in-details.injectable"; +import kubeObjectDetailItemsInjectable + from "./kube-object-detail-items/kube-object-detail-items.injectable"; +import type { + KubeObjectDetailsItemComputed, +} from "./current-kube-object-in-details.injectable"; +import { + currentKubeObjectInDetailsInjectable2, +} from "./current-kube-object-in-details.injectable"; export interface KubeObjectDetailsProps { className?: string; @@ -27,7 +31,7 @@ export interface KubeObjectDetailsProps { interface Dependencies { detailComponents: IComputedValue; - kubeObject: IAsyncComputed; + kubeObject: KubeObjectDetailsItemComputed; hideDetails: HideDetails; } @@ -38,36 +42,27 @@ const NonInjectedKubeObjectDetails = observer((props: Dependencies) => { kubeObject, } = props; - const currentKubeObject = kubeObject.value.get(); - const isLoading = kubeObject.pending.get(); + const object = kubeObject.get(); return ( } + open={!!object} + title={ + object instanceof KubeObject ? `${object.kind}: ${object.getName()}` : "" + } + toolbar={object && } onClose={hideDetails} > - {isLoading && } - {currentKubeObject?.error && ( + {!object && } + {object instanceof Error && (
Resource loading has failed: - {currentKubeObject.error} + {object}
)} - {currentKubeObject?.object && ( - <> - { - detailComponents.get() - .map((Component, index) => ) - } - - )} + {object && detailComponents.get() + .map((Component, index) => )} ); }); @@ -77,6 +72,6 @@ export const KubeObjectDetails = withInjectables(NonInjectedKubeOb ...props, hideDetails: di.inject(hideDetailsInjectable), detailComponents: di.inject(kubeObjectDetailItemsInjectable), - kubeObject: di.inject(currentKubeObjectInDetailsInjectable), + kubeObject: di.inject(currentKubeObjectInDetailsInjectable2), }), });