diff --git a/src/renderer/api/kube-object.ts b/src/renderer/api/kube-object.ts index 2548cac3aa..97b6442a02 100644 --- a/src/renderer/api/kube-object.ts +++ b/src/renderer/api/kube-object.ts @@ -86,6 +86,16 @@ export class KubeStatus { } } +export interface KubeObjectStatus { + conditions?: { + lastTransitionTime: string; + message: string; + reason: string; + status: string; + type?: string; + }[]; +} + export type KubeMetaField = keyof KubeObjectMetadata; export class KubeObject implements ItemObject { diff --git a/src/renderer/components/+custom-resources/crd-resource-details.tsx b/src/renderer/components/+custom-resources/crd-resource-details.tsx index dc6181c63c..6f2b13938f 100644 --- a/src/renderer/components/+custom-resources/crd-resource-details.tsx +++ b/src/renderer/components/+custom-resources/crd-resource-details.tsx @@ -24,18 +24,18 @@ import "./crd-resource-details.scss"; import React from "react"; import jsonPath from "jsonpath"; import { observer } from "mobx-react"; -import { computed, makeObservable } from "mobx"; import { cssNames } from "../../utils"; import { Badge } from "../badge"; import { DrawerItem } from "../drawer"; import type { KubeObjectDetailsProps } from "../kube-object"; -import { crdStore } from "./crd.store"; import { KubeObjectMeta } from "../kube-object/kube-object-meta"; import { Input } from "../input"; import type { AdditionalPrinterColumnsV1, CustomResourceDefinition } from "../../api/endpoints/crd.api"; import { parseJsonPath } from "../../utils/jsonPath"; +import type { KubeObject, KubeObjectMetadata, KubeObjectStatus } from "../../api/kube-object"; -interface Props extends KubeObjectDetailsProps { +interface Props extends KubeObjectDetailsProps { + crd: CustomResourceDefinition; } function convertSpecValue(value: any): any { @@ -60,31 +60,22 @@ function convertSpecValue(value: any): any { @observer export class CrdResourceDetails extends React.Component { - constructor(props: Props) { - super(props); - makeObservable(this); - } - - @computed get crd() { - return crdStore.getByObject(this.props.object); - } - - renderAdditionalColumns(crd: CustomResourceDefinition, columns: AdditionalPrinterColumnsV1[]) { + renderAdditionalColumns(resource: KubeObject, columns: AdditionalPrinterColumnsV1[]) { return columns.map(({ name, jsonPath: jp }) => ( - {convertSpecValue(jsonPath.value(crd, parseJsonPath(jp.slice(1))))} + {convertSpecValue(jsonPath.value(resource, parseJsonPath(jp.slice(1))))} )); } - renderStatus(crd: CustomResourceDefinition, columns: AdditionalPrinterColumnsV1[]) { - const showStatus = !columns.find(column => column.name == "Status") && crd.status?.conditions; + renderStatus(customResource: KubeObject, columns: AdditionalPrinterColumnsV1[]) { + const showStatus = !columns.find(column => column.name == "Status") && Array.isArray(customResource.status?.conditions); if (!showStatus) { return null; } - const conditions = crd.status.conditions + const conditions = customResource.status.conditions .filter(({ type, reason }) => type || reason) .map(({ type, reason, message, status }) => ({ kind: type || reason, message, status })) .map(({ kind, message, status }, index) => ( @@ -104,17 +95,16 @@ export class CrdResourceDetails extends React.Component { } render() { - const { props: { object }, crd } = this; + const { props: { object, crd } } = this; if (!object || !crd) { return null; } - const className = cssNames("CrdResourceDetails", crd.getResourceKind()); const extraColumns = crd.getPrinterColumns(); return ( -
+
{this.renderAdditionalColumns(object, extraColumns)} {this.renderStatus(object, extraColumns)} diff --git a/src/renderer/components/kube-object/kube-object-details.tsx b/src/renderer/components/kube-object/kube-object-details.tsx index b7a178c3ab..82c748ecdd 100644 --- a/src/renderer/components/kube-object/kube-object-details.tsx +++ b/src/renderer/components/kube-object/kube-object-details.tsx @@ -33,6 +33,8 @@ import { crdStore } from "../+custom-resources/crd.store"; import { KubeObjectMenu } from "./kube-object-menu"; import { KubeObjectDetailRegistry } from "../../api/kube-object-detail-registry"; import logger from "../../../main/logger"; +import { CrdResourceDetails } from "../+custom-resources"; +import { KubeObjectMeta } from "./kube-object-meta"; /** * Used to store `object.selfLink` to show more info about resource in the details panel. @@ -111,10 +113,6 @@ export class KubeObjectDetails extends React.Component { } } - @computed get isCrdInstance() { - return !!crdStore.getByObject(this.object); - } - @disposeOnUnmount loader = reaction(() => [ this.path, @@ -169,6 +167,23 @@ export class KubeObjectDetails extends React.Component { )); + if (details.length === 0) { + const crd = crdStore.getByObject(object); + + /** + * This is a fallback so that if a custom resource object doesn't have + * any defined details we should try and display at least some details + */ + if (crd) { + details.push(); + } + } + + if (details.length === 0) { + // if we still don't have any details to show, just show the standard object metadata + details.push(); + } + return (