From 5eb41e8a6c83ab9b7bae3d864d49e53c38a6b58f Mon Sep 17 00:00:00 2001 From: Sami Tiilikainen <97873007+samitiilikainen@users.noreply.github.com> Date: Thu, 20 Apr 2023 16:01:50 +0300 Subject: [PATCH] List layout column injection token package (#7544) Signed-off-by: Jari Kolehmainen Signed-off-by: Sami Tiilikainen <97873007+samitiilikainen@users.noreply.github.com> Co-authored-by: Jari Kolehmainen --- package-lock.json | 19 + packages/core/package.json | 1 + packages/core/src/common/item.store.ts | 5 +- .../k8s-api/endpoints/helm-releases.api.ts | 2 +- .../core/src/common/k8s-api/kube-object.ts | 2 +- .../__snapshots__/pods.test.tsx.snap | 2600 +++++++++++++++++ .../features/cluster/workloads/pods.test.tsx | 132 + .../components/+cluster/cluster-issues.tsx | 2 +- .../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 +- .../components/item-object-list/content.tsx | 2 +- .../components/item-object-list/header.tsx | 2 +- .../item-object-list/list-layout.tsx | 2 +- .../kube-object-list-layout.test.tsx.snap | 228 +- .../kube-object-list-layout.test.tsx | 2 + .../kube-object-list-layout.tsx | 30 + .../src/renderer/components/table/table.tsx | 2 +- .../port-forward/port-forward-item.ts | 2 +- packages/list-layout/.eslintrc.js | 6 + packages/list-layout/.prettierrc | 1 + packages/list-layout/index.ts | 1 + packages/list-layout/jest.config.js | 1 + ...ect-list-layout-column-injection-token.tsx | 97 + packages/list-layout/package.json | 43 + packages/list-layout/tsconfig.json | 4 + packages/list-layout/webpack.config.js | 1 + 35 files changed, 3589 insertions(+), 196 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/list-layout/.eslintrc.js create mode 100644 packages/list-layout/.prettierrc create mode 100644 packages/list-layout/index.ts create mode 100644 packages/list-layout/jest.config.js create mode 100644 packages/list-layout/kube-object-list-layout-column-injection-token.tsx create mode 100644 packages/list-layout/package.json create mode 100644 packages/list-layout/tsconfig.json create mode 100644 packages/list-layout/webpack.config.js diff --git a/package-lock.json b/package-lock.json index 9904624d1d..ac8130ea40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3935,6 +3935,10 @@ "resolved": "packages/technical-features/application/legacy-extensions", "link": true }, + "node_modules/@k8slens/list-layout": { + "resolved": "packages/list-layout", + "link": true + }, "node_modules/@k8slens/messaging": { "resolved": "packages/technical-features/messaging/agnostic", "link": true @@ -35719,6 +35723,7 @@ "@astronautlabs/jsonpath": "^1.1.0", "@hapi/call": "^9.0.1", "@hapi/subtext": "^7.1.0", + "@k8slens/list-layout": "^1.0.0-alpha.0", "@k8slens/metrics": "^6.5.0-alpha.3", "@k8slens/node-fetch": "^6.5.0-alpha.3", "@k8slens/react-application": "^1.0.0-alpha.2", @@ -36657,6 +36662,20 @@ } } }, + "packages/list-layout": { + "name": "@k8slens/list-layout", + "version": "1.0.0-alpha.0", + "license": "MIT", + "devDependencies": { + "@k8slens/eslint-config": "^6.5.0-alpha.2", + "@k8slens/jest": "^6.5.0-alpha.2", + "@k8slens/typescript": "^6.5.0-alpha.2" + }, + "peerDependencies": { + "@ogre-tools/injectable": "^15.1.2", + "react": "^17.0.2" + } + }, "packages/metrics": { "name": "@k8slens/metrics", "version": "6.5.0-alpha.3", diff --git a/packages/core/package.json b/packages/core/package.json index 4c62e9c601..ed8002974c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -115,6 +115,7 @@ "@k8slens/metrics": "^6.5.0-alpha.3", "@k8slens/node-fetch": "^6.5.0-alpha.3", "@k8slens/react-application": "^1.0.0-alpha.2", + "@k8slens/list-layout": "^1.0.0-alpha.0", "@kubernetes/client-node": "^0.18.1", "@material-ui/styles": "^4.11.5", "@sentry/electron": "^3.0.8", diff --git a/packages/core/src/common/item.store.ts b/packages/core/src/common/item.store.ts index 4d7c3343ef..cb9b27ed2e 100644 --- a/packages/core/src/common/item.store.ts +++ b/packages/core/src/common/item.store.ts @@ -3,14 +3,11 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ +import type { ItemObject } from "@k8slens/list-layout"; import autoBind from "auto-bind"; import orderBy from "lodash/orderBy"; import { action, computed, observable, when, makeObservable } from "mobx"; -export interface ItemObject { - getId(): string; - getName(): string; -} export abstract class ItemStore { protected defaultSorting = (item: Item) => item.getName(); diff --git a/packages/core/src/common/k8s-api/endpoints/helm-releases.api.ts b/packages/core/src/common/k8s-api/endpoints/helm-releases.api.ts index 3460378e59..a5807edb68 100644 --- a/packages/core/src/common/k8s-api/endpoints/helm-releases.api.ts +++ b/packages/core/src/common/k8s-api/endpoints/helm-releases.api.ts @@ -3,7 +3,7 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ -import type { ItemObject } from "../../item.store"; +import type { ItemObject } from "@k8slens/list-layout"; import type { HelmReleaseDetails } from "./helm-releases.api/request-details.injectable"; export interface HelmReleaseUpdateDetails { diff --git a/packages/core/src/common/k8s-api/kube-object.ts b/packages/core/src/common/k8s-api/kube-object.ts index a45d5c415f..e43633aed6 100644 --- a/packages/core/src/common/k8s-api/kube-object.ts +++ b/packages/core/src/common/k8s-api/kube-object.ts @@ -22,7 +22,7 @@ import { isTypedArray, isRecord, } from "@k8slens/utilities"; -import type { ItemObject } from "../item.store"; +import type { ItemObject } from "@k8slens/list-layout"; import type { Patch } from "rfc6902"; import assert from "assert"; import type { JsonObject } from "type-fest"; 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/+cluster/cluster-issues.tsx b/packages/core/src/renderer/components/+cluster/cluster-issues.tsx index d338f23f73..1b7fe9c2b6 100644 --- a/packages/core/src/renderer/components/+cluster/cluster-issues.tsx +++ b/packages/core/src/renderer/components/+cluster/cluster-issues.tsx @@ -13,7 +13,7 @@ import { Icon } from "../icon"; import { SubHeader } from "../layout/sub-header"; import { Table, TableCell, TableHead, TableRow } from "../table"; import { cssNames, prevDefault } from "@k8slens/utilities"; -import type { ItemObject } from "../../../common/item.store"; +import type { ItemObject } from "@k8slens/list-layout"; import { Spinner } from "../spinner"; import type { ApiManager } from "../../../common/k8s-api/api-manager"; import { KubeObjectAge } from "../kube-object/age"; 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..b7673a58dd --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; +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..a23f91fb6a --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; +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..f70ec20405 --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; +import { Tooltip } from "@k8slens/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..d895fe6501 --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; + +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..741bd55e3c --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; +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..4c31d44ebf --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; + +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..a3729dba26 --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; + +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..abf4d00df8 --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; + +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..88c9c5d01e --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; + +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..b0fc995941 --- /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 "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; +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/item-object-list/content.tsx b/packages/core/src/renderer/components/item-object-list/content.tsx index 2b11a97570..279f3f6d4b 100644 --- a/packages/core/src/renderer/components/item-object-list/content.tsx +++ b/packages/core/src/renderer/components/item-object-list/content.tsx @@ -19,7 +19,7 @@ import type { AddRemoveButtonsProps } from "../add-remove-buttons"; import { AddRemoveButtons } from "../add-remove-buttons"; import { NoItems } from "../no-items"; import { Spinner } from "../spinner"; -import type { ItemObject } from "../../../common/item.store"; +import type { ItemObject } from "@k8slens/list-layout"; import type { Filter, PageFiltersStore } from "./page-filters/store"; import type { LensTheme } from "../../themes/lens-theme"; import { MenuActions } from "../menu/menu-actions"; diff --git a/packages/core/src/renderer/components/item-object-list/header.tsx b/packages/core/src/renderer/components/item-object-list/header.tsx index 6da69312f5..b7b9502b7f 100644 --- a/packages/core/src/renderer/components/item-object-list/header.tsx +++ b/packages/core/src/renderer/components/item-object-list/header.tsx @@ -10,7 +10,7 @@ import React from "react"; import { observer } from "mobx-react"; import type { IClassName } from "@k8slens/utilities"; import { cssNames, isDefined } from "@k8slens/utilities"; -import type { ItemObject } from "../../../common/item.store"; +import type { ItemObject } from "@k8slens/list-layout"; import type { Filter } from "./page-filters/store"; import type { HeaderCustomizer, HeaderPlaceholders, ItemListStore, SearchFilter } from "./list-layout"; import { SearchInputUrl } from "../input"; diff --git a/packages/core/src/renderer/components/item-object-list/list-layout.tsx b/packages/core/src/renderer/components/item-object-list/list-layout.tsx index 525558f533..da6ac127e0 100644 --- a/packages/core/src/renderer/components/item-object-list/list-layout.tsx +++ b/packages/core/src/renderer/components/item-object-list/list-layout.tsx @@ -14,7 +14,7 @@ import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } fr import type { IClassName, SingleOrMany } from "@k8slens/utilities"; import { cssNames, noop } from "@k8slens/utilities"; import type { AddRemoveButtonsProps } from "../add-remove-buttons"; -import type { ItemObject } from "../../../common/item.store"; +import type { ItemObject } from "@k8slens/list-layout"; import type { SearchInputUrlProps } from "../input"; import type { PageFiltersStore } from "./page-filters/store"; import { FilterType } from "./page-filters/store"; 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 + + +
+
+
{ 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..a3806467f2 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,9 @@ 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, ItemObject } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; +import { sortBy } from "lodash"; export interface KubeObjectListLayoutProps< K extends KubeObject, @@ -53,6 +56,7 @@ interface Dependencies { subscribeToStores: SubscribeStores; kubeSelectedUrlParam: PageParam; toggleKubeDetailsPane: ToggleKubeDetailsPane; + columns: KubeObjectListLayoutColumn[]; } const getLoadErrorMessage = (error: unknown): string => { @@ -140,9 +144,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 +195,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 +220,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/components/table/table.tsx b/packages/core/src/renderer/components/table/table.tsx index 6930ed4bd3..66eb21d524 100644 --- a/packages/core/src/renderer/components/table/table.tsx +++ b/packages/core/src/renderer/components/table/table.tsx @@ -20,7 +20,7 @@ import { getSorted } from "./sorting"; import type { TableModel } from "./table-model/table-model"; import { withInjectables } from "@ogre-tools/injectable-react"; import tableModelInjectable from "./table-model/table-model.injectable"; -import type { ItemObject } from "../../../common/item.store"; +import type { ItemObject } from "@k8slens/list-layout"; import assert from "assert"; import orderByUrlParamInjectable from "./order-by-url-param.injectable"; import sortByUrlParamInjectable from "./sort-by-url-param.injectable"; diff --git a/packages/core/src/renderer/port-forward/port-forward-item.ts b/packages/core/src/renderer/port-forward/port-forward-item.ts index 0ea56bc4cd..05f8a2f8a2 100644 --- a/packages/core/src/renderer/port-forward/port-forward-item.ts +++ b/packages/core/src/renderer/port-forward/port-forward-item.ts @@ -5,7 +5,7 @@ import autoBind from "auto-bind"; -import type { ItemObject } from "../../common/item.store"; +import type { ItemObject } from "@k8slens/list-layout"; export type ForwardedPortStatus = "Active" | "Disabled"; export interface ForwardedPort { diff --git a/packages/list-layout/.eslintrc.js b/packages/list-layout/.eslintrc.js new file mode 100644 index 0000000000..19a14e85a4 --- /dev/null +++ b/packages/list-layout/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: "@k8slens/eslint-config/eslint", + parserOptions: { + project: "./tsconfig.json", + }, +}; \ No newline at end of file diff --git a/packages/list-layout/.prettierrc b/packages/list-layout/.prettierrc new file mode 100644 index 0000000000..edd47b479e --- /dev/null +++ b/packages/list-layout/.prettierrc @@ -0,0 +1 @@ +"@k8slens/eslint-config/prettier" diff --git a/packages/list-layout/index.ts b/packages/list-layout/index.ts new file mode 100644 index 0000000000..564641a4a2 --- /dev/null +++ b/packages/list-layout/index.ts @@ -0,0 +1 @@ +export * from "./kube-object-list-layout-column-injection-token"; diff --git a/packages/list-layout/jest.config.js b/packages/list-layout/jest.config.js new file mode 100644 index 0000000000..38d54ab7b6 --- /dev/null +++ b/packages/list-layout/jest.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact; diff --git a/packages/list-layout/kube-object-list-layout-column-injection-token.tsx b/packages/list-layout/kube-object-list-layout-column-injection-token.tsx new file mode 100644 index 0000000000..a1827ff502 --- /dev/null +++ b/packages/list-layout/kube-object-list-layout-column-injection-token.tsx @@ -0,0 +1,97 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import type { ReactNode } from "react"; +import type { SingleOrMany } from "@k8slens/utilities"; +import { getInjectionToken } from "@ogre-tools/injectable"; + +export interface ItemObject { + getId(): string; + getName(): string; +} + +export type TableSortBy = string; +export type TableOrderBy = "asc" | "desc"; +export interface TableSortParams { + sortBy: TableSortBy; + orderBy: TableOrderBy; +} + +export type TableSortCallback = (data: Item) => undefined | string | number | (string | number)[]; +export type TableSortCallbacks = Record>; + +export type SearchFilter = (item: I) => SingleOrMany; + +export interface TableCellProps extends React.DOMAttributes { + /** + * used for configuration visibility of columns + */ + id?: string; + + /** + * Any css class names for this table cell. Only used if `title` is a "simple" react node + */ + className?: string; + + /** + * The actual value of the cell + */ + title?: ReactNode; + + /** + * content inside could be scrolled + */ + scrollable?: boolean; + + /** + * render cell with a checkbox + */ + checkbox?: boolean; + + /** + * mark checkbox as checked or not + */ + isChecked?: boolean; + + /** + * column name, must be same as key in sortable object + */ + sortBy?: TableSortBy; + + /** + * id of the column which follow same visibility rules + */ + showWithColumn?: string; + + /** + * @internal + */ + _sorting?: Partial; + + /** + * @internal + */ + _sort?(sortBy: TableSortBy): void; + + /** + * @internal + * indicator, might come from parent , don't use this prop outside (!) + */ + _nowrap?: boolean; +} + +export interface KubeObjectListLayoutColumn { + 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/list-layout/package.json b/packages/list-layout/package.json new file mode 100644 index 0000000000..55ee707184 --- /dev/null +++ b/packages/list-layout/package.json @@ -0,0 +1,43 @@ +{ + "name": "@k8slens/list-layout", + "private": false, + "version": "1.0.0-alpha.0", + "description": "Injection tokens for list layout", + "type": "commonjs", + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + }, + "files": [ + "dist" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/lensapp/lens.git" + }, + "main": "dist/index.js", + "types": "dist/index.d.ts", + "author": { + "name": "OpenLens Authors", + "email": "info@k8slens.dev" + }, + "license": "MIT", + "homepage": "https://github.com/lensapp/lens", + "scripts": { + "build": "webpack", + "clean": "rimraf dist/", + "dev": "webpack --mode=development --watch", + "test": "jest --coverage --runInBand", + "lint": "lens-lint", + "lint:fix": "lens-lint --fix" + }, + "peerDependencies": { + "@ogre-tools/injectable": "^15.1.2", + "react": "^17.0.2" + }, + "devDependencies": { + "@k8slens/eslint-config": "^6.5.0-alpha.2", + "@k8slens/jest": "^6.5.0-alpha.2", + "@k8slens/typescript": "^6.5.0-alpha.2" + } +} \ No newline at end of file diff --git a/packages/list-layout/tsconfig.json b/packages/list-layout/tsconfig.json new file mode 100644 index 0000000000..1819203dc1 --- /dev/null +++ b/packages/list-layout/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@k8slens/typescript/config/base.json", + "include": ["**/*.ts"] +} diff --git a/packages/list-layout/webpack.config.js b/packages/list-layout/webpack.config.js new file mode 100644 index 0000000000..b54738d0a7 --- /dev/null +++ b/packages/list-layout/webpack.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/webpack").configForReact; \ No newline at end of file