chore: Use new typings for pod columns

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx

@@ -28,7 +28,7 @@ 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 type { GeneralKubeObjectListLayoutColumn, SpecificKubeListLayoutColumn } from "@k8slens/list-layout";
 import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
 import { sortBy } from "lodash";
 
@@ -54,6 +54,7 @@ export interface KubeObjectListLayoutProps<
    * If not provided, ResourceNames is used instead with a fallback to resource kind.
    */
   resourceName?: string;
+  columns?: SpecificKubeListLayoutColumn<K>[];
 }
 
 interface Dependencies {
@@ -61,9 +62,18 @@ interface Dependencies {
   subscribeToStores: SubscribeStores;
   kubeSelectedUrlParam: PageParam<string>;
   toggleKubeDetailsPane: ToggleKubeDetailsPane;
-  columns: KubeObjectListLayoutColumn<ItemObject>[];
+  generalColumns: GeneralKubeObjectListLayoutColumn[];
 }
 
+const matchesApiFor = (api: SubscribableStore["api"]) => (column: GeneralKubeObjectListLayoutColumn) => (
+  column.kind === api.kind
+  && (
+    isString(api.apiVersionWithGroup)
+      ? [column.apiVersion].flat().includes(api.apiVersionWithGroup)
+      : true
+  )
+);
+
 const getLoadErrorMessage = (error: unknown): string => {
   if (error instanceof Error) {
     if (error.cause) {
@@ -77,7 +87,7 @@ const getLoadErrorMessage = (error: unknown): string => {
     return error.message;
   }
 
-  return `${error}`;
+  return `${String(error)}`;
 };
 
 @observer
@@ -152,11 +162,18 @@ class NonInjectedKubeObjectListLayout<
       renderTableContents,
       renderTableHeader,
       columns,
+      generalColumns,
       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);
+    const targetColumns = [
+      ...(columns ?? []),
+      ...generalColumns.filter(matchesApiFor(store.api)),
+    ];
+
+    void items;
+    void dependentStores;
 
     targetColumns.forEach((col) => {
       if (col.sortingCallBack) {
@@ -202,12 +219,16 @@ class NonInjectedKubeObjectListLayout<
         onDetails={onDetails ?? ((item) => toggleDetails(item.selfLink))}
         sortingCallbacks={sortingCallbacks}
         renderTableHeader={headers}
-        renderTableContents={(item) => {
+        renderTableContents={(item) => (
-          return sortBy([
+          sortBy(
-            ...(renderTableContents(item).map((content, index) => ({ priority: (20 - index), content }))),
+            [
-            ...targetColumns.map((col) => ({ priority: col.priority, content: col.content(item) })),
+              ...(renderTableContents(item).map((content, index) => ({ priority: (20 - index), content }))),
-          ], (item) => -item.priority).map((value) => value.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}
       />
@@ -225,7 +246,7 @@ export const KubeObjectListLayout = withInjectables<
     subscribeToStores: di.inject(subscribeStoresInjectable),
     kubeSelectedUrlParam: di.inject(kubeSelectedUrlParamInjectable),
     toggleKubeDetailsPane: di.inject(toggleKubeDetailsPaneInjectable),
-    columns: di.injectMany(kubeObjectListLayoutColumnInjectionToken),
+    generalColumns: di.injectMany(kubeObjectListLayoutColumnInjectionToken),
   }),
 }) as <
   K extends KubeObject,

packages/core/src/renderer/components/workloads-pods/columns/pods-age-column.injectable.tsx

@@ -4,27 +4,21 @@
  */
 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";
+import { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+
+const columnId = "age";
 
 export const podsAgeColumnInjectable = getInjectable({
   id: "pods-age-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "age";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
-      id: columnId,
+    priority: 30,
-      kind: "Pod",
+    content: (pod) => <KubeObjectAge key="age" object={pod} />,
-      apiVersion: "v1",
+    header: { title: "Age", className: "age", sortBy: columnId, id: columnId },
-      priority: 30,
+    sortingCallBack: (pod) => -pod.getCreationTimestamp(),
-      content: (pod: Pod) => {
+  }),
-        return <KubeObjectAge key="age" object={pod} />;
+  injectionToken: podListLayoutColumnInjectionToken,
-      },
-      header: { title: "Age", className: "age", sortBy: columnId, id: columnId },
-      sortingCallBack: (pod: Pod) => -pod.getCreationTimestamp(),
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });

packages/core/src/renderer/components/workloads-pods/columns/pods-containers-column.injectable.tsx

@@ -6,17 +6,12 @@ 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 { ContainerStateValues, Pod } from "@k8slens/kube-object";
-import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout";
+import { podListLayoutColumnInjectionToken } 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) {
+const renderState = (name: string, ready: boolean, key: string, data?: ContainerStateValues) => (
-  if (!data) {
+  data && (
-    return;
-  }
-
-  return (
     <>
       <div className="title">
         {name}
@@ -33,54 +28,53 @@ function renderState(name: string, ready: boolean, key: string, data?: Container
         </React.Fragment>
       ))}
     </>
-  );
+  )
-}
+);
 
-function renderContainersStatus(pod: Pod) {
+const renderContainersStatus = (pod: Pod) => (
-  return pod.getContainerStatuses().map(({ name, state, ready }) => {
+  <>
-    return (
+    {
-      <StatusBrick
+      pod.getContainerStatuses()
-        key={name}
+        .map(({ name, state, ready }) => (
-        className={cssNames(state, { ready })}
+          <StatusBrick
-        tooltip={{
+            key={name}
-          formatters: {
+            className={cssNames(state, { ready })}
-            tableView: true,
+            tooltip={{
-            nowrap: true,
+              formatters: {
-          },
+                tableView: true,
-          children: (
+                nowrap: true,
-            <>
+              },
-              {renderState(name, ready, "running", state?.running)}
+              children: (
-              {renderState(name, ready, "waiting", state?.waiting)}
+                <>
-              {renderState(name, ready, "terminated", state?.terminated)}
+                  {renderState(name, ready, "running", state?.running)}
-            </>
+                  {renderState(name, ready, "waiting", state?.waiting)}
-          ),
+                  {renderState(name, ready, "terminated", state?.terminated)}
-        }}
+                </>
-      />
+              ),
-    );
+            }}
-  });
+          />
-}
+        ))
+    }
+  </>
+);
+
+const columnId = "containers";
 
 export const podsContainersColumnInjectable = getInjectable({
   id: "pods-containers-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "containers";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
+    priority: 80,
+    content: renderContainersStatus,
+    header: {
+      title: "Containers",
+      className: "containers",
+      sortBy: columnId,
       id: columnId,
-      kind: "Pod",
+    },
-      apiVersion: "v1",
+    sortingCallBack: (pod) => pod.getContainerStatuses().length,
-      priority: 80,
+  }),
-      content: (pod: Pod) => {
+  injectionToken: podListLayoutColumnInjectionToken,
-        return renderContainersStatus(pod);
-      },
-      header: {
-        title: "Containers",
-        className: "containers",
-        sortBy: columnId,
-        id: columnId,
-      },
-      sortingCallBack: (pod: Pod) => pod.getContainerStatuses().length,
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });

packages/core/src/renderer/components/workloads-pods/columns/pods-name-column.injectable.tsx

@@ -5,38 +5,33 @@
 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 { Pod } from "@k8slens/kube-object";
-import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout";
-import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
 import { Tooltip } from "@k8slens/tooltip";
+import { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+
+const columnId = "name";
 
 export const podsNameColumnInjectable = getInjectable({
   id: "pods-name-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "name";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
-      id: columnId,
+    priority: 100,
-      kind: "Pod",
+    content: (pod: Pod) => (
-      apiVersion: "v1",
+      <>
-      priority: 100,
+        <span id={`list-pod-name-${pod.getId()}`} data-testid={`list-pod-name-${pod.getId()}`}>
-      content: (pod: Pod) => {
+          {pod.getName()}
-        return (
+        </span>
-          <>
+        <Tooltip targetId={`list-pod-name-${pod.getId()}`}>
-            <span id={`list-pod-name-${pod.getId()}`} data-testid={`list-pod-name-${pod.getId()}`}>
+          {pod.getName()}
-              {pod.getName()}
+        </Tooltip>
-            </span>
+      </>
-            <Tooltip targetId={`list-pod-name-${pod.getId()}`}>
+    ),
-              {pod.getName()}
+    header: { title: "Name", className: "name", sortBy: columnId, id: columnId },
-            </Tooltip>
+    sortingCallBack: (pod) => getConvertedParts(pod.getName()),
-          </>
+    searchFilter: (pod) => pod.getSearchFields(),
-        );
+  }),
-      },
+  injectionToken: podListLayoutColumnInjectionToken,
-      header: { title: "Name", className: "name", sortBy: columnId, id: columnId },
-      sortingCallBack: (pod: Pod) => getConvertedParts(pod.getName()),
-      searchFilter: (pod: Pod) => pod.getSearchFields(),
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });
 

packages/core/src/renderer/components/workloads-pods/columns/pods-namespace-column.injectable.tsx

@@ -5,27 +5,21 @@
 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 { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
-import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout";
+
-import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+const columnId = "namespace";
 
 export const podsNamespaceColumnInjectable = getInjectable({
   id: "pods-namespace-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "namespace";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
-      id: columnId,
+    priority: 90,
-      kind: "Pod",
+    content: (pod) => <NamespaceSelectBadge key="namespace" namespace={pod.getNs()} />,
-      apiVersion: "v1",
+    header: { title: "Namespace", className: "namespace", sortBy: columnId, id: columnId },
-      priority: 90,
+    sortingCallBack: (pod) => pod.getNs(),
-      content: (pod: Pod) => {
+  }),
-        return (<NamespaceSelectBadge key="namespace" namespace={pod.getNs()} />);
+  injectionToken: podListLayoutColumnInjectionToken,
-      },
-      header: { title: "Namespace", className: "namespace", sortBy: columnId, id: columnId },
-      sortingCallBack: (pod: Pod) => pod.getNs(),
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });
 

packages/core/src/renderer/components/workloads-pods/columns/pods-node-column.injectable.tsx

@@ -6,16 +6,14 @@ 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";
+import { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
 
 export const podsNodeColumnInjectable = getInjectable({
   id: "pods-node-column",
-  instantiate: (di): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: (di) => {
     const getDetailsUrl = di.inject(getDetailsUrlInjectable);
     const nodeApi = di.inject(nodeApiInjectable);
     const columnId = "node";
@@ -25,27 +23,28 @@ export const podsNodeColumnInjectable = getInjectable({
       kind: "Pod",
       apiVersion: "v1",
       priority: 50,
-      content: (pod: Pod) => {
+      content: (pod) => (
-        return pod.getNodeName() ? (
+        pod.getNodeName()
-          <Badge
+          ? (
-            flat
+            <Badge
-            key="node"
+              flat
-            className="node"
+              key="node"
-            tooltip={pod.getNodeName()}
+              className="node"
-            expandable={false}
+              tooltip={pod.getNodeName()}
-          >
+              expandable={false}
-            <Link
+            >
-              to={getDetailsUrl(nodeApi.getUrl({ name: pod.getNodeName() }))}
+              <Link
-              onClick={stopPropagation}>
+                to={getDetailsUrl(nodeApi.formatUrlForNotListing({ name: pod.getNodeName() }))}
-              {pod.getNodeName()}
+                onClick={stopPropagation}>
-            </Link>
+                {pod.getNodeName()}
-          </Badge>
+              </Link>
-        )
+            </Badge>
-          : "";
+          )
-      },
+          : ""
+      ),
       header: { title: "Node", className: "node", sortBy: columnId, id: columnId },
-      sortingCallBack: (pod: Pod) => pod.getNodeName(),
+      sortingCallBack: (pod) => pod.getNodeName(),
     };
   },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
+  injectionToken: podListLayoutColumnInjectionToken,
 });

packages/core/src/renderer/components/workloads-pods/columns/pods-owners-column.injectable.tsx

@@ -7,15 +7,13 @@ 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 { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
-import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
 
 export const podsOwnersColumnInjectable = getInjectable({
   id: "pods-owners-column",
-  instantiate: (di): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: (di) => {
     const getDetailsUrl = di.inject(getDetailsUrlInjectable);
     const apiManager = di.inject(apiManagerInjectable);
     const columnId = "owners";
@@ -25,8 +23,8 @@ export const podsOwnersColumnInjectable = getInjectable({
       kind: "Pod",
       apiVersion: "v1",
       priority: 60,
-      content: (pod: Pod) => {
+      content: (pod) => (
-        return pod.getOwnerRefs().map(ref => {
+        pod.getOwnerRefs().map(ref => {
           const { kind, name } = ref;
           const detailsLink = getDetailsUrl(apiManager.lookupApiLink(ref, pod));
 
@@ -42,12 +40,12 @@ export const podsOwnersColumnInjectable = getInjectable({
               </Link>
             </Badge>
           );
-        });
+        })
-      },
+      ),
       header: { title: "Controlled By", className: "owners", sortBy: columnId, id: columnId },
-      sortingCallBack: (pod: Pod) => pod.getOwnerRefs().map(ref => ref.kind),
+      sortingCallBack: (pod) => pod.getOwnerRefs().map(ref => ref.kind),
     };
   },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
+  injectionToken: podListLayoutColumnInjectionToken,
 });
 

packages/core/src/renderer/components/workloads-pods/columns/pods-qos-column.injectable.tsx

@@ -3,27 +3,21 @@
  * 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 { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
-import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout";
+
-import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+const columnId = "qos";
 
 export const podsQosColumnInjectable = getInjectable({
   id: "pods-qos-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "qos";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
-      id: columnId,
+    priority: 40,
-      kind: "Pod",
+    content: (pod) => pod.getQosClass(),
-      apiVersion: "v1",
+    header: { title: "QoS", className: "qos", sortBy: columnId, id: columnId },
-      priority: 40,
+    sortingCallBack: (pod) => pod.getQosClass(),
-      content: (pod: Pod) => {
+  }),
-        return pod.getQosClass();
+  injectionToken: podListLayoutColumnInjectionToken,
-      },
-      header: { title: "QoS", className: "qos", sortBy: columnId, id: columnId },
-      sortingCallBack: (pod: Pod) => pod.getQosClass(),
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });
 

packages/core/src/renderer/components/workloads-pods/columns/pods-restarts-column.injectable.tsx

@@ -3,27 +3,21 @@
  * 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 { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
-import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout";
+
-import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+const columnId = "restarts";
 
 export const podsRestartsColumnInjectable = getInjectable({
   id: "pods-restarts-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "restarts";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
-      id: columnId,
+    priority: 70,
-      kind: "Pod",
+    content: (pod) => pod.getRestartsCount(),
-      apiVersion: "v1",
+    header: { title: "Restarts", className: "restarts", sortBy: columnId, id: columnId },
-      priority: 70,
+    sortingCallBack: (pod) => pod.getRestartsCount(),
-      content: (pod: Pod) => {
+  }),
-        return pod.getRestartsCount();
+  injectionToken: podListLayoutColumnInjectionToken,
-      },
-      header: { title: "Restarts", className: "restarts", sortBy: columnId, id: columnId },
-      sortingCallBack: (pod: Pod) => pod.getRestartsCount(),
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });
 

packages/core/src/renderer/components/workloads-pods/columns/pods-status-column.injectable.tsx

@@ -4,27 +4,24 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { kebabCase } from "lodash";
-import type { Pod } from "../../../../common/k8s-api/endpoints";
+import { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
-import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout";
+
-import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+const columnId = "status";
 
 export const podsStatusColumnInjectable = getInjectable({
   id: "pods-status-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "status";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
-      id: columnId,
+    priority: 0,
-      kind: "Pod",
+    content: (pod) => ({
-      apiVersion: "v1",
+      title: pod.getStatusMessage(),
-      priority: 0,
+      className: kebabCase(pod.getStatusMessage()),
-      content: (pod: Pod) => {
+    }),
-        return { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) };
+    header: { title: "Status", className: "status", sortBy: columnId, id: columnId },
-      },
+    sortingCallBack: (pod) => pod.getStatusMessage(),
-      header: { title: "Status", className: "status", sortBy: columnId, id: columnId },
+    searchFilter: (pod) => pod.getStatusMessage(),
-      sortingCallBack: (pod: Pod) => pod.getStatusMessage(),
+  }),
-      searchFilter: (pod: Pod) => pod.getStatusMessage(),
+  injectionToken: podListLayoutColumnInjectionToken,
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });

packages/core/src/renderer/components/workloads-pods/columns/pods-status-icon-column.injectable.tsx

@@ -4,28 +4,22 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import React from "react";
-import type { Pod } from "../../../../common/k8s-api/endpoints";
+import { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
-import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout";
-import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 
+const columnId = "qos";
+
 export const podsQosColumnInjectable = getInjectable({
   id: "pods-status-icon-column",
-  instantiate: (): KubeObjectListLayoutColumn<Pod> => {
+  instantiate: () => ({
-    const columnId = "qos";
+    id: columnId,
-
+    kind: "Pod",
-    return {
+    apiVersion: "v1",
-      id: columnId,
+    priority: 99,
-      kind: "Pod",
+    content: (pod) => <KubeObjectStatusIcon key="icon" object={pod} />,
-      apiVersion: "v1",
+    header: { className: "warning", showWithColumn: "name" },
-      priority: 99,
+    sortingCallBack: (pod) => pod.getQosClass(),
-      content: (pod: Pod) => {
+  }),
-        return <KubeObjectStatusIcon key="icon" object={pod} />;
+  injectionToken: podListLayoutColumnInjectionToken,
-      },
-      header: { className: "warning", showWithColumn: "name" },
-      sortingCallBack: (pod: Pod) => pod.getQosClass(),
-    };
-  },
-  injectionToken: kubeObjectListLayoutColumnInjectionToken,
 });
 

packages/core/src/renderer/components/workloads-pods/pods.tsx

@@ -14,41 +14,48 @@ import type { EventStore } from "../events/store";
 import type { PodStore } from "./store";
 import eventStoreInjectable from "../events/store.injectable";
 import podStoreInjectable from "./store.injectable";
+import type { SpecificKubeListLayoutColumn } from "@k8slens/list-layout";
+import { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+import type { Pod } from "@k8slens/kube-object";
 
 interface Dependencies {
   eventStore: EventStore;
   podStore: PodStore;
+  columns: SpecificKubeListLayoutColumn<Pod>[];
 }
 
-@observer
+const NonInjectedPods = observer((props: Dependencies) => {
-class NonInjectedPods extends React.Component<Dependencies> {
+  const {
-  render() {
+    columns,
-    const { podStore, eventStore } = this.props;
+    eventStore,
+    podStore,
+  } = props;
 
-    return (
+  return (
-      <SiblingsInTabLayout>
+    <SiblingsInTabLayout>
-        <KubeObjectListLayout
+      <KubeObjectListLayout
-          className="Pods"
+        className="Pods"
-          store={podStore}
+        store={podStore}
-          dependentStores={[eventStore]} // status icon component uses event store
+        dependentStores={[eventStore]} // status icon component uses event store
-          tableId="workloads_pods"
+        tableId="workloads_pods"
-          isConfigurable
+        isConfigurable
-          searchFilters={[
+        searchFilters={[
-            pod => pod.status?.podIP,
+          pod => pod.status?.podIP,
-          ]}
+        ]}
-          renderHeaderTitle="Pods"
+        renderHeaderTitle="Pods"
-          renderTableHeader={[]}
+        renderTableHeader={[]}
-          renderTableContents={() => []}
+        renderTableContents={() => []}
-        />
+        columns={columns}
-      </SiblingsInTabLayout>
+      />
-    );
+    </SiblingsInTabLayout>
-  }
+  );
-}
+});
 
 export const Pods = withInjectables<Dependencies>(NonInjectedPods, {
   getProps: (di, props) => ({
     ...props,
     eventStore: di.inject(eventStoreInjectable),
     podStore: di.inject(podStoreInjectable),
+    columns: di.injectMany(podListLayoutColumnInjectionToken),
   }),
 });