Fix all Age, LastSeen, and FirstSeen displays (#4990)

src/renderer/components/+custom-resources/crd-list.tsx

@@ -12,11 +12,10 @@ import { Link } from "react-router-dom";
 import { stopPropagation } from "../../utils";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { crdStore } from "./crd.store";
-import type { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
 import { Select, SelectOption } from "../select";
 import { createPageParam } from "../../navigation";
 import { Icon } from "../icon";
-import type { TableSortCallbacks } from "../table";
+import { KubeObjectAge } from "../kube-object/age";
 
 export const crdGroupsUrlParam = createPageParam<string[]>({
   name: "groups",
@@ -63,12 +62,6 @@ export class CustomResourceDefinitions extends React.Component {
 
   render() {
     const { items, selectedGroups } = this;
-    const sortingCallbacks: TableSortCallbacks<CustomResourceDefinition> = {
-      [columnId.kind]: crd => crd.getResourceKind(),
-      [columnId.group]: crd => crd.getGroup(),
-      [columnId.version]: crd => crd.getVersion(),
-      [columnId.scope]: crd => crd.getScope(),
-    };
 
     return (
       <KubeObjectListLayout
@@ -79,8 +72,20 @@ export class CustomResourceDefinitions extends React.Component {
         // Don't subscribe the `crdStore` because <Sidebar> already has and is always mounted
         subscribeStores={false}
         items={items}
-        sortingCallbacks={sortingCallbacks}
-        searchFilters={Object.values(sortingCallbacks)}
+        sortingCallbacks={{
+          [columnId.kind]: crd => crd.getResourceKind(),
+          [columnId.group]: crd => crd.getGroup(),
+          [columnId.version]: crd => crd.getVersion(),
+          [columnId.scope]: crd => crd.getScope(),
+          [columnId.age]: crd => -crd.getCreationTimestamp(),
+        }}
+        searchFilters={[
+          crd => crd.getResourceKind(),
+          crd => crd.getGroup(),
+          crd => crd.getVersion(),
+          crd => crd.getScope(),
+          crd => -crd.getCreationTimestamp(),
+        ]}
         renderHeaderTitle="Custom Resources"
         customizeHeader={({ filters, ...headerPlaceholders }) => {
           let placeholder = <>All groups</>;
@@ -131,7 +136,7 @@ export class CustomResourceDefinitions extends React.Component {
           crd.getGroup(),
           crd.getVersion(),
           crd.getScope(),
-          crd.getAge(),
+          <KubeObjectAge key="age" object={crd} />,
         ]}
       />
     );

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -6,17 +6,16 @@
 import "./crd-resources.scss";
 
 import React from "react";
-import jsonPath from "jsonpath";
+import { value } from "jsonpath";
 import { observer } from "mobx-react";
 import type { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { computed, makeObservable } from "mobx";
 import { crdStore } from "./crd.store";
-import type { TableSortCallbacks } from "../table";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import { parseJsonPath } from "../../utils/jsonPath";
 import type { CRDRouteParams } from "../../../common/routes";
+import { KubeObjectAge } from "../kube-object/age";
 
 export interface CustomResourceDefinitionResourcesProps extends RouteComponentProps<CRDRouteParams> {
 }
@@ -47,29 +46,13 @@ export class CustomResourceDefinitionResources extends React.Component<CustomRes
   render() {
     const { crd, store } = this;
 
-    if (!crd) return null;
+    if (!crd) {
+      return null;
+    }
+
     const isNamespaced = crd.isNamespaced();
     const extraColumns = crd.getPrinterColumns(false);  // Cols with priority bigger than 0 are shown in details
-    const sortingCallbacks: TableSortCallbacks<KubeObject> = {
-      [columnId.name]: item => item.getName(),
-      [columnId.namespace]: item => item.getNs(),
-      [columnId.age]: item => item.getTimeDiffFromNow(),
-    };
-
-    extraColumns.forEach(column => {
-      sortingCallbacks[column.name] = item => jsonPath.value(item, parseJsonPath(column.jsonPath.slice(1)));
-    });
-
     const version = crd.getPreferedVersion();
-    const loadFailedPrefix = <p>Failed to load {crd.getPluralName()}</p>;
-    const failedToLoadMessage = version.served
-      ? loadFailedPrefix
-      : (
-        <>
-          {loadFailedPrefix}
-          <p>Prefered version ({crd.getGroup()}/{version.name}) is not served</p>
-        </>
-      );
 
     return (
       <KubeObjectListLayout
@@ -78,9 +61,17 @@ export class CustomResourceDefinitionResources extends React.Component<CustomRes
         tableId="crd_resources"
         className="CrdResources"
         store={store}
-        sortingCallbacks={sortingCallbacks}
+        sortingCallbacks={{
+          [columnId.name]: customResource => customResource.getName(),
+          [columnId.namespace]: customResource => customResource.getNs(),
+          [columnId.age]: customResource => -customResource.getCreationTimestamp(),
+          ...Object.fromEntries(extraColumns.map(({ name, jsonPath }) => [
+            name,
+            customResource => value(customResource, parseJsonPath(jsonPath.slice(1))),
+          ])),
+        }}
         searchFilters={[
-          item => item.getSearchFields(),
+          customResource => customResource.getSearchFields(),
         ]}
         renderHeaderTitle={crd.getResourceKind()}
         customizeHeader={({ searchProps, ...headerPlaceholders }) => ({
@@ -93,36 +84,39 @@ export class CustomResourceDefinitionResources extends React.Component<CustomRes
         renderTableHeader={[
           { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
           isNamespaced && { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
-          ...extraColumns.map(column => {
-            const { name } = column;
-
-            return {
-              title: name,
-              className: name.toLowerCase(),
-              sortBy: name,
-              id: name,
-            };
-          }),
+          ...extraColumns.map(({ name }) => ({
+            title: name,
+            className: name.toLowerCase(),
+            sortBy: name,
+            id: name,
+          })),
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={crdInstance => [
           crdInstance.getName(),
           isNamespaced && crdInstance.getNs(),
           ...extraColumns.map((column) => {
-            let value = jsonPath.value(crdInstance, parseJsonPath(column.jsonPath.slice(1)));
+            let rawValue = value(crdInstance, parseJsonPath(column.jsonPath.slice(1)));
 
-            if (Array.isArray(value) || typeof value === "object") {
-              value = JSON.stringify(value);
+            if (Array.isArray(rawValue) || typeof rawValue === "object") {
+              rawValue = JSON.stringify(rawValue);
             }
 
             return {
               renderBoolean: true,
-              children: value,
+              children: rawValue,
             };
           }),
-          crdInstance.getAge(),
+          <KubeObjectAge key="age" object={crdInstance} />,
         ]}
-        failedToLoadMessage={failedToLoadMessage}
+        failedToLoadMessage={(
+          <>
+            <p>Failed to load {crd.getPluralName()}</p>
+            {!version.served && (
+              <p>Prefered version ({crd.getGroup()}/{version.name}) is not served</p>
+            )}
+          </>
+        )}
       />
     );
   }