From afff3f5c71602ec7764884219b291020d83b9880 Mon Sep 17 00:00:00 2001 From: Jari Kolehmainen Date: Fri, 31 Mar 2023 08:30:27 +0300 Subject: [PATCH] introduce kube-object-list-layout-column-injection-token Signed-off-by: Jari Kolehmainen --- .../__snapshots__/pods.test.tsx.snap | 2600 +++++++++++++++++ .../features/cluster/workloads/pods.test.tsx | 132 + .../columns/pods-age-column.injectable.tsx | 30 + .../pods-containers-column.injectable.tsx | 86 + .../columns/pods-name-column.injectable.tsx | 42 + .../pods-namespace-column.injectable.tsx | 31 + .../columns/pods-node-column.injectable.tsx | 51 + .../columns/pods-owners-column.injectable.tsx | 53 + .../columns/pods-qos-column.injectable.tsx | 29 + .../pods-restarts-column.injectable.tsx | 29 + .../columns/pods-status-column.injectable.tsx | 30 + .../pods-status-icon-column.injectable.tsx | 31 + .../components/+workloads-pods/pods.tsx | 186 +- .../kube-object-list-layout.test.tsx.snap | 228 +- ...ect-list-layout-column-injection-token.tsx | 24 + .../kube-object-list-layout.test.tsx | 2 + .../kube-object-list-layout.tsx | 31 + packages/core/src/renderer/library.ts | 1 + 18 files changed, 3432 insertions(+), 184 deletions(-) create mode 100644 packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap create mode 100644 packages/core/src/features/cluster/workloads/pods.test.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx create mode 100644 packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout-column-injection-token.tsx diff --git a/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap b/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap new file mode 100644 index 0000000000..63c7621cba --- /dev/null +++ b/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap @@ -0,0 +1,2600 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`workloads / pods when navigating to workloads / pods view given a namespace has pods renders 1`] = ` + +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + list + + + + Config + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + storage + + + + Storage + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + security + + + + Access Control + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ Pods +
+
+ 1 item +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Containers +
+ + + arrow_drop_down + + +
+
+
+ Restarts +
+ + + arrow_drop_down + + +
+
+
+ Controlled By +
+ + + arrow_drop_down + + +
+
+
+ Node +
+ + + arrow_drop_down + + +
+
+
+ QoS +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ Status +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+
+
+
+
+ +
+
+ + test-pod-1 + +
+
+
+
+ default +
+
+ Set global namespace filter to: + + default + +
+
+
+
+ 0 +
+
+
+ +
+
+ +
+
+ <unknown> +
+
+ Waiting +
+
+
+ + + more_vert + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+ +`; + +exports[`workloads / pods when navigating to workloads / pods view given no pods renders 1`] = ` + +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + list + + + + Config + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + storage + + + + Storage + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + security + + + + Access Control + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ Pods +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Containers +
+ + + arrow_drop_down + + +
+
+
+ Restarts +
+ + + arrow_drop_down + + +
+
+
+ Controlled By +
+ + + arrow_drop_down + + +
+
+
+ Node +
+ + + arrow_drop_down + + +
+
+
+ QoS +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ Status +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+ Item list is empty +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+ +`; + +exports[`workloads / pods when navigating to workloads / pods view given pods are loading renders 1`] = ` + +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + list + + + + Config + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + storage + + + + Storage + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + security + + + + Access Control + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ Pods +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Containers +
+ + + arrow_drop_down + + +
+
+
+ Restarts +
+ + + arrow_drop_down + + +
+
+
+ Controlled By +
+ + + arrow_drop_down + + +
+
+
+ Node +
+ + + arrow_drop_down + + +
+
+
+ QoS +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ Status +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+ +`; diff --git a/packages/core/src/features/cluster/workloads/pods.test.tsx b/packages/core/src/features/cluster/workloads/pods.test.tsx new file mode 100644 index 0000000000..0bdfe24d9e --- /dev/null +++ b/packages/core/src/features/cluster/workloads/pods.test.tsx @@ -0,0 +1,132 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import type { RenderResult } from "@testing-library/react"; +import navigateToPodsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/navigate-to-pods.injectable"; +import { type ApplicationBuilder, getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder"; +import podStoreInjectable from "../../../renderer/components/+workloads-pods/store.injectable"; +import type { PodMetrics } from "../../../common/k8s-api/endpoints"; +import { Pod } from "../../../common/k8s-api/endpoints"; +import podMetricsApiInjectable from "../../../common/k8s-api/endpoints/pod-metrics.api.injectable"; +import requestMetricsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-metrics.injectable"; +import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable"; + +describe("workloads / pods", () => { + let rendered: RenderResult; + let applicationBuilder: ApplicationBuilder; + const podMetrics: PodMetrics[] = []; + + beforeEach(async () => { + applicationBuilder = getApplicationBuilder().setEnvironmentToClusterFrame(); + applicationBuilder.namespaces.add("default"); + applicationBuilder.beforeWindowStart(({ windowDi }) => { + applicationBuilder.allowKubeResource({ + apiName: "pods", + group: "", + }); + + windowDi.override(podMetricsApiInjectable, () => ({ + list: async () => podMetrics, + } as any)); + + const apiManager = windowDi.inject(apiManagerInjectable); + const podStore = windowDi.inject(podStoreInjectable); + + apiManager.registerStore(podStore); + }); + }); + + describe("when navigating to workloads / pods view", () => { + describe("given pods are loading", () => { + beforeEach(async () => { + applicationBuilder.afterWindowStart(({ windowDi }) => { + const podStore = windowDi.inject(podStoreInjectable); + + podStore.items.clear(); + podStore.isLoaded = false; + podStore.isLoading = true; + }); + + rendered = await applicationBuilder.render(); + applicationBuilder.navigateWith(navigateToPodsInjectable); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("shows loading spinner", async () => { + expect(await rendered.findByTestId("kube-object-list-layout-spinner")).toBeInTheDocument(); + }); + }); + + describe("given no pods", () => { + beforeEach(async () => { + applicationBuilder.afterWindowStart(({ windowDi }) => { + const podStore = windowDi.inject(podStoreInjectable); + + podStore.items.clear(); + podStore.isLoaded = true; + }); + + rendered = await applicationBuilder.render(); + applicationBuilder.navigateWith(navigateToPodsInjectable); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("shows item list is empty", async () => { + expect(rendered.getByText("Item list is empty")).toBeInTheDocument(); + }); + }); + + describe("given a namespace has pods", () => { + beforeEach(async () => { + applicationBuilder.afterWindowStart(({ windowDi }) => { + windowDi.override(requestMetricsInjectable, () => () => ({} as any)); + + const podStore = windowDi.inject(podStoreInjectable); + + podStore.items.push(new Pod({ + apiVersion: "v1", + kind: "Pod", + metadata: { + name: "test-pod-1", + namespace: "default", + resourceVersion: "irrelevant", + selfLink: "/api/v1/namespaces/default/pods/test-pod-1", + uid: "uuid-1", + }, + spec: { + containers: [ + { + name: "container-1", + }, + { + name: "container-2", + }, + ], + }, + status: {} as any, + })); + podStore.isLoaded = true; + }); + + rendered = await applicationBuilder.render(); + applicationBuilder.navigateWith(navigateToPodsInjectable); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("renders the pod list", async () => { + expect(await rendered.findByTestId(`list-pod-name-uuid-1`)).toBeInTheDocument(); + }); + }); + }); +}); diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx new file mode 100644 index 0000000000..a2c71d3b82 --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx @@ -0,0 +1,30 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import React from "react"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { KubeObjectAge } from "../../kube-object/age"; + +export const podsAgeColumnInjectable = getInjectable({ + id: "pods-age-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "age"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 30, + content: (pod: Pod) => { + return ; + }, + header: { title: "Age", className: "age", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => -pod.getCreationTimestamp(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx new file mode 100644 index 0000000000..c8c32ff562 --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx @@ -0,0 +1,86 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { cssNames } from "@k8slens/utilities"; +import { getInjectable } from "@ogre-tools/injectable"; +import startCase from "lodash/startCase"; +import React from "react"; +import type { ContainerStateValues, Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { StatusBrick } from "../../status-brick"; + +function renderState(name: string, ready: boolean, key: string, data?: ContainerStateValues) { + if (!data) { + return; + } + + return ( + <> +
+ {name} + {" "} + + {key} + {ready ? ", ready" : ""} + +
+ {Object.entries(data).map(([name, value]) => ( + +
{startCase(name)}
+
{value}
+ + ))} + + ); +} + +function renderContainersStatus(pod: Pod) { + return pod.getContainerStatuses().map(({ name, state, ready }) => { + return ( + + {renderState(name, ready, "running", state?.running)} + {renderState(name, ready, "waiting", state?.waiting)} + {renderState(name, ready, "terminated", state?.terminated)} + + ), + }} + /> + ); + }); +} + +export const podsContainersColumnInjectable = getInjectable({ + id: "pods-containers-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "containers"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 80, + content: (pod: Pod) => { + return renderContainersStatus(pod); + }, + header: { + title: "Containers", + className: "containers", + sortBy: columnId, + id: columnId, + }, + sortingCallBack: (pod: Pod) => pod.getContainerStatuses().length, + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx new file mode 100644 index 0000000000..4459ad5458 --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx @@ -0,0 +1,42 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getConvertedParts } from "@k8slens/utilities"; +import { getInjectable } from "@ogre-tools/injectable"; +import React from "react"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { Tooltip } from "../../tooltip"; + +export const podsNameColumnInjectable = getInjectable({ + id: "pods-name-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "name"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 100, + content: (pod: Pod) => { + return ( + <> + + {pod.getName()} + + + {pod.getName()} + + + ); + }, + header: { title: "Name", className: "name", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => getConvertedParts(pod.getName()), + searchFilter: (pod: Pod) => pod.getSearchFields(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); + diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx new file mode 100644 index 0000000000..8c39eb3e61 --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx @@ -0,0 +1,31 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import React from "react"; +import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; + +export const podsNamespaceColumnInjectable = getInjectable({ + id: "pods-namespace-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "namespace"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 90, + content: (pod: Pod) => { + return (); + }, + header: { title: "Namespace", className: "namespace", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => pod.getNs(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); + diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx new file mode 100644 index 0000000000..6fa78dc427 --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx @@ -0,0 +1,51 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import React from "react"; +import { Link } from "react-router-dom"; +import nodeApiInjectable from "../../../../common/k8s-api/endpoints/node.api.injectable"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import { Badge } from "../../badge"; +import getDetailsUrlInjectable from "../../kube-detail-params/get-details-url.injectable"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { stopPropagation } from "@k8slens/utilities"; + +export const podsNodeColumnInjectable = getInjectable({ + id: "pods-node-column", + instantiate: (di): KubeObjectListLayoutColumn => { + const getDetailsUrl = di.inject(getDetailsUrlInjectable); + const nodeApi = di.inject(nodeApiInjectable); + const columnId = "node"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 50, + content: (pod: Pod) => { + return pod.getNodeName() ? ( + + + {pod.getNodeName()} + + + ) + : ""; + }, + header: { title: "Node", className: "node", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => pod.getNodeName(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx new file mode 100644 index 0000000000..dd7514f6fd --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx @@ -0,0 +1,53 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { stopPropagation } from "@k8slens/utilities"; +import { getInjectable } from "@ogre-tools/injectable"; +import React from "react"; +import { Link } from "react-router-dom"; +import apiManagerInjectable from "../../../../common/k8s-api/api-manager/manager.injectable"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import { Badge } from "../../badge"; +import getDetailsUrlInjectable from "../../kube-detail-params/get-details-url.injectable"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; + +export const podsOwnersColumnInjectable = getInjectable({ + id: "pods-owners-column", + instantiate: (di): KubeObjectListLayoutColumn => { + const getDetailsUrl = di.inject(getDetailsUrlInjectable); + const apiManager = di.inject(apiManagerInjectable); + const columnId = "owners"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 60, + content: (pod: Pod) => { + return pod.getOwnerRefs().map(ref => { + const { kind, name } = ref; + const detailsLink = getDetailsUrl(apiManager.lookupApiLink(ref, pod)); + + return ( + + + {kind} + + + ); + }); + }, + header: { title: "Controlled By", className: "owners", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => pod.getOwnerRefs().map(ref => ref.kind), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); + diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx new file mode 100644 index 0000000000..39199512a6 --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx @@ -0,0 +1,29 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; + +export const podsQosColumnInjectable = getInjectable({ + id: "pods-qos-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "qos"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 40, + content: (pod: Pod) => { + return pod.getQosClass(); + }, + header: { title: "QoS", className: "qos", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => pod.getQosClass(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); + diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx new file mode 100644 index 0000000000..c69449d0af --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx @@ -0,0 +1,29 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; + +export const podsRestartsColumnInjectable = getInjectable({ + id: "pods-restarts-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "restarts"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 70, + content: (pod: Pod) => { + return pod.getRestartsCount(); + }, + header: { title: "Restarts", className: "restarts", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => pod.getRestartsCount(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); + diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx new file mode 100644 index 0000000000..49ceda7d1f --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx @@ -0,0 +1,30 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import { kebabCase } from "lodash"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; + +export const podsStatusColumnInjectable = getInjectable({ + id: "pods-status-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "status"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 0, + content: (pod: Pod) => { + return { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) }; + }, + header: { title: "Status", className: "status", sortBy: columnId, id: columnId }, + sortingCallBack: (pod: Pod) => pod.getStatusMessage(), + searchFilter: (pod: Pod) => pod.getStatusMessage(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx new file mode 100644 index 0000000000..92fded0be8 --- /dev/null +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx @@ -0,0 +1,31 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable } from "@ogre-tools/injectable"; +import React from "react"; +import type { Pod } from "../../../../common/k8s-api/endpoints"; +import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import { KubeObjectStatusIcon } from "../../kube-object-status-icon"; + +export const podsQosColumnInjectable = getInjectable({ + id: "pods-status-icon-column", + instantiate: (): KubeObjectListLayoutColumn => { + const columnId = "qos"; + + return { + id: columnId, + kind: "Pod", + apiVersion: "v1", + priority: 99, + content: (pod: Pod) => { + return ; + }, + header: { className: "warning", showWithColumn: "name" }, + sortingCallBack: (pod: Pod) => pod.getQosClass(), + }; + }, + injectionToken: kubeObjectListLayoutColumnInjectionToken, +}); + diff --git a/packages/core/src/renderer/components/+workloads-pods/pods.tsx b/packages/core/src/renderer/components/+workloads-pods/pods.tsx index ad932a99a7..27d88391f7 100644 --- a/packages/core/src/renderer/components/+workloads-pods/pods.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/pods.tsx @@ -7,103 +7,23 @@ import "./pods.scss"; import React from "react"; import { observer } from "mobx-react"; -import { Link } from "react-router-dom"; import { KubeObjectListLayout } from "../kube-object-list-layout"; -import type { ContainerStateValues, NodeApi, Pod } from "../../../common/k8s-api/endpoints"; -import { StatusBrick } from "../status-brick"; -import { cssNames, getConvertedParts, object, stopPropagation } from "@k8slens/utilities"; -import startCase from "lodash/startCase"; -import kebabCase from "lodash/kebabCase"; -import type { ApiManager } from "../../../common/k8s-api/api-manager"; -import { KubeObjectStatusIcon } from "../kube-object-status-icon"; -import { Badge } from "../badge"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; -import { KubeObjectAge } from "../kube-object/age"; import { withInjectables } from "@ogre-tools/injectable-react"; -import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable"; -import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable"; -import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable"; import type { EventStore } from "../+events/store"; import type { PodStore } from "./store"; -import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.injectable"; import eventStoreInjectable from "../+events/store.injectable"; import podStoreInjectable from "./store.injectable"; -import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; -import { Tooltip } from "@k8slens/tooltip"; - -enum columnId { - name = "name", - namespace = "namespace", - containers = "containers", - restarts = "restarts", - age = "age", - qos = "qos", - node = "node", - owners = "owners", - status = "status", -} interface Dependencies { - getDetailsUrl: GetDetailsUrl; - apiManager: ApiManager; eventStore: EventStore; podStore: PodStore; - nodeApi: NodeApi; } @observer class NonInjectedPods extends React.Component { - renderState(name: string, ready: boolean, key: string, data?: ContainerStateValues) { - if (!data) { - return; - } - - return ( - <> -
- {name} - {" "} - - {key} - {ready ? ", ready" : ""} - -
- {object.entries(data).map(([name, value]) => ( - -
{startCase(name)}
-
{value}
- - ))} - - ); - } - - renderContainersStatus(pod: Pod) { - return pod.getContainerStatuses().map(({ name, state, ready }) => { - return ( - - {this.renderState(name, ready, "running", state?.running)} - {this.renderState(name, ready, "waiting", state?.waiting)} - {this.renderState(name, ready, "terminated", state?.terminated)} - - ), - }} - /> - ); - }); - } - render() { - const { apiManager, getDetailsUrl, podStore, eventStore, nodeApi } = this.props; + const { podStore, eventStore } = this.props; return ( @@ -113,109 +33,12 @@ class NonInjectedPods extends React.Component { dependentStores={[eventStore]} // status icon component uses event store tableId="workloads_pods" isConfigurable - sortingCallbacks={{ - [columnId.name]: pod => getConvertedParts(pod.getName()), - [columnId.namespace]: pod => pod.getNs(), - [columnId.containers]: pod => pod.getContainerStatuses().length, - [columnId.restarts]: pod => pod.getRestartsCount(), - [columnId.owners]: pod => pod.getOwnerRefs().map(ref => ref.kind), - [columnId.qos]: pod => pod.getQosClass(), - [columnId.node]: pod => pod.getNodeName(), - [columnId.age]: pod => -pod.getCreationTimestamp(), - [columnId.status]: pod => pod.getStatusMessage(), - }} searchFilters={[ - pod => pod.getSearchFields(), - pod => pod.getStatusMessage(), pod => pod.status?.podIP, - pod => pod.getNodeName(), ]} renderHeaderTitle="Pods" - renderTableHeader={[ - { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, - { className: "warning", showWithColumn: columnId.name }, - { - title: "Namespace", - className: "namespace", - sortBy: columnId.namespace, - id: columnId.namespace, - }, - { - title: "Containers", - className: "containers", - sortBy: columnId.containers, - id: columnId.containers, - }, - { - title: "Restarts", - className: "restarts", - sortBy: columnId.restarts, - id: columnId.restarts, - }, - { - title: "Controlled By", - className: "owners", - sortBy: columnId.owners, - id: columnId.owners, - }, - { title: "Node", className: "node", sortBy: columnId.node, id: columnId.node }, - { title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos }, - { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, - { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status }, - ]} - renderTableContents={pod => [ - <> - - {pod.getName()} - - - {pod.getName()} - - , - , - , - this.renderContainersStatus(pod), - pod.getRestartsCount(), - pod.getOwnerRefs().map(ref => { - const { kind, name } = ref; - const detailsLink = getDetailsUrl(apiManager.lookupApiLink(ref, pod)); - - return ( - - - {kind} - - - ); - }), - pod.getNodeName() ? ( - - - {pod.getNodeName()} - - - ) - : "", - pod.getQosClass(), - , - { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) }, - ]} + renderTableHeader={[]} + renderTableContents={() => []} /> ); @@ -225,9 +48,6 @@ class NonInjectedPods extends React.Component { export const Pods = withInjectables(NonInjectedPods, { getProps: (di, props) => ({ ...props, - apiManager: di.inject(apiManagerInjectable), - getDetailsUrl: di.inject(getDetailsUrlInjectable), - nodeApi: di.inject(nodeApiInjectable), eventStore: di.inject(eventStoreInjectable), podStore: di.inject(podStoreInjectable), }), diff --git a/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap b/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap index b450030c9c..21c6b0c90f 100644 --- a/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap +++ b/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap @@ -104,10 +104,236 @@ exports[`kube-object-list-layout given pod store renders 1`] = ` class="items box grow flex column" >
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Containers +
+ + + arrow_drop_down + + +
+
+
+ Restarts +
+ + + arrow_drop_down + + +
+
+
+ Controlled By +
+ + + arrow_drop_down + + +
+
+
+ Node +
+ + + arrow_drop_down + + +
+
+
+ QoS +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ Status +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
{ + id: string; + kind: string; + apiVersion: string; + priority: number; + sortingCallBack?: TableSortCallback; + searchFilter?: SearchFilter; + header: (TableCellProps | undefined | null); + content: (item: Item) => (ReactNode | TableCellProps); +} + +export const kubeObjectListLayoutColumnInjectionToken = getInjectionToken>({ + id: "kube-object-list-layout-column", +}); diff --git a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.test.tsx b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.test.tsx index 691000c887..39dd267681 100644 --- a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.test.tsx +++ b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.test.tsx @@ -21,6 +21,7 @@ import directoryForKubeConfigsInjectable from "../../../common/app-paths/directo import hostedClusterInjectable from "../../cluster-frame-context/hosted-cluster.injectable"; import type { PodStore } from "../+workloads-pods/store"; import { Cluster } from "../../../common/cluster/cluster"; +import isTableColumnHiddenInjectable from "../../../features/user-preferences/common/is-table-column-hidden.injectable"; describe("kube-object-list-layout", () => { let di: DiContainer; @@ -33,6 +34,7 @@ describe("kube-object-list-layout", () => { di.override(directoryForUserDataInjectable, () => "/some-user-store-path"); di.override(directoryForKubeConfigsInjectable, () => "/some-kube-configs"); di.override(storesAndApisCanBeCreatedInjectable, () => true); + di.override(isTableColumnHiddenInjectable, () => () => false); di.override(hostedClusterInjectable, () => new Cluster({ contextName: "some-context-name", diff --git a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx index 77d0e19df1..1efddc3afa 100644 --- a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx +++ b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx @@ -29,6 +29,10 @@ import type { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details import kubeSelectedUrlParamInjectable from "../kube-detail-params/kube-selected-url.injectable"; import toggleKubeDetailsPaneInjectable from "../kube-detail-params/toggle-details.injectable"; import type { ClusterContext } from "../../cluster-frame-context/cluster-frame-context"; +import type { KubeObjectListLayoutColumn } from "./kube-object-list-layout-column-injection-token"; +import type { ItemObject } from "../../../common/item.store"; +import { kubeObjectListLayoutColumnInjectionToken } from "./kube-object-list-layout-column-injection-token"; +import { sortBy } from "lodash"; export interface KubeObjectListLayoutProps< K extends KubeObject, @@ -53,6 +57,7 @@ interface Dependencies { subscribeToStores: SubscribeStores; kubeSelectedUrlParam: PageParam; toggleKubeDetailsPane: ToggleKubeDetailsPane; + columns: KubeObjectListLayoutColumn[]; } const getLoadErrorMessage = (error: unknown): string => { @@ -140,9 +145,25 @@ class NonInjectedKubeObjectListLayout< dependentStores, toggleKubeDetailsPane: toggleDetails, onDetails, + renderTableContents, + renderTableHeader, + columns, + sortingCallbacks = {}, ...layoutProps } = this.props; const resourceName = this.props.resourceName || ResourceNames[ResourceKindMap[store.api.kind]] || store.api.kind; + const targetColumns = columns.filter((col) => col.kind === store.api.kind && col.apiVersion === store.api.apiVersionWithGroup); + + targetColumns.forEach((col) => { + if (col.sortingCallBack) { + sortingCallbacks[col.id] = col.sortingCallBack; + } + }); + + const headers = sortBy([ + ...(renderTableHeader || []).map((header, index) => ({ priority: (20 - index), header })), + ...targetColumns, + ], (v) => -v.priority).map((col) => col.header); return ( @@ -175,6 +196,15 @@ class NonInjectedKubeObjectListLayout< ]} renderItemMenu={item => } onDetails={onDetails ?? ((item) => toggleDetails(item.selfLink))} + sortingCallbacks={sortingCallbacks} + renderTableHeader={headers} + renderTableContents={(item) => { + return sortBy([ + ...(renderTableContents(item).map((content, index) => ({ priority: (20 - index), content }))), + ...targetColumns.map((col) => ({ priority: col.priority, content: col.content(item) })), + ], (item) => -item.priority).map((value) => value.content); + }} + spinnerTestId="kube-object-list-layout-spinner" {...layoutProps} /> ); @@ -191,6 +221,7 @@ export const KubeObjectListLayout = withInjectables< subscribeToStores: di.inject(subscribeStoresInjectable), kubeSelectedUrlParam: di.inject(kubeSelectedUrlParamInjectable), toggleKubeDetailsPane: di.inject(toggleKubeDetailsPaneInjectable), + columns: di.injectMany(kubeObjectListLayoutColumnInjectionToken), }), }) as < K extends KubeObject, diff --git a/packages/core/src/renderer/library.ts b/packages/core/src/renderer/library.ts index 1af4714943..2b69cfe05e 100644 --- a/packages/core/src/renderer/library.ts +++ b/packages/core/src/renderer/library.ts @@ -10,6 +10,7 @@ import setStatusBarStatusInjectable from "./components/status-bar/set-status-bar // @experimental export type { Environments } from "../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api"; export { nodeEnvInjectionToken } from "../common/vars/node-env-injection-token"; +export * from "./components/kube-object-list-layout/kube-object-list-layout-column-injection-token"; export { registerLensCore } from "./register-lens-core"; export { React,