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

src/renderer/components/+user-management/+cluster-role-bindings/view.tsx

@@ -15,6 +15,7 @@ import { clusterRoleBindingsStore } from "./store";
 import { clusterRolesStore } from "../+cluster-roles/store";
 import { serviceAccountsStore } from "../+service-accounts/store";
 import type { ClusterRoleBindingsRouteParams } from "../../../../common/routes";
+import { KubeObjectAge } from "../../kube-object/age";
 
 enum columnId {
   name = "name",
@@ -40,7 +41,7 @@ export class ClusterRoleBindings extends React.Component<ClusterRoleBindingsProp
           sortingCallbacks={{
             [columnId.name]: binding => binding.getName(),
             [columnId.bindings]: binding => binding.getSubjectNames(),
-            [columnId.age]: binding => binding.getTimeDiffFromNow(),
+            [columnId.age]: binding => -binding.getCreationTimestamp(),
           }}
           searchFilters={[
             binding => binding.getSearchFields(),
@@ -57,7 +58,7 @@ export class ClusterRoleBindings extends React.Component<ClusterRoleBindingsProp
             binding.getName(),
             <KubeObjectStatusIcon key="icon" object={binding} />,
             binding.getSubjectNames(),
-            binding.getAge(),
+            <KubeObjectAge key="age" object={binding} />,
           ]}
           addRemoveButtons={{
             onAdd: () => ClusterRoleBindingDialog.open(),

src/renderer/components/+user-management/+cluster-roles/view.tsx

@@ -13,6 +13,7 @@ import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { AddClusterRoleDialog } from "./add-dialog";
 import { clusterRolesStore } from "./store";
 import type { ClusterRolesRouteParams } from "../../../../common/routes";
+import { KubeObjectAge } from "../../kube-object/age";
 
 enum columnId {
   name = "name",
@@ -35,7 +36,7 @@ export class ClusterRoles extends React.Component<ClusterRolesProps> {
           store={clusterRolesStore}
           sortingCallbacks={{
             [columnId.name]: clusterRole => clusterRole.getName(),
-            [columnId.age]: clusterRole => clusterRole.getTimeDiffFromNow(),
+            [columnId.age]: clusterRole => -clusterRole.getCreationTimestamp(),
           }}
           searchFilters={[
             clusterRole => clusterRole.getSearchFields(),
@@ -49,7 +50,7 @@ export class ClusterRoles extends React.Component<ClusterRolesProps> {
           renderTableContents={clusterRole => [
             clusterRole.getName(),
             <KubeObjectStatusIcon key="icon" object={clusterRole} />,
-            clusterRole.getAge(),
+            <KubeObjectAge key="age" object={clusterRole} />,
           ]}
           addRemoveButtons={{
             onAdd: () => AddClusterRoleDialog.open(),

src/renderer/components/+user-management/+role-bindings/view.tsx

@@ -15,6 +15,7 @@ import { rolesStore } from "../+roles/store";
 import { clusterRolesStore } from "../+cluster-roles/store";
 import { serviceAccountsStore } from "../+service-accounts/store";
 import type { RoleBindingsRouteParams } from "../../../../common/routes";
+import { KubeObjectAge } from "../../kube-object/age";
 
 enum columnId {
   name = "name",
@@ -41,7 +42,7 @@ export class RoleBindings extends React.Component<RoleBindingsProps> {
             [columnId.name]: binding => binding.getName(),
             [columnId.namespace]: binding => binding.getNs(),
             [columnId.bindings]: binding => binding.getSubjectNames(),
-            [columnId.age]: binding => binding.getTimeDiffFromNow(),
+            [columnId.age]: binding => -binding.getCreationTimestamp(),
           }}
           searchFilters={[
             binding => binding.getSearchFields(),
@@ -60,7 +61,7 @@ export class RoleBindings extends React.Component<RoleBindingsProps> {
             <KubeObjectStatusIcon key="icon" object={binding} />,
             binding.getNs(),
             binding.getSubjectNames(),
-            binding.getAge(),
+            <KubeObjectAge key="age" object={binding} />,
           ]}
           addRemoveButtons={{
             onAdd: () => RoleBindingDialog.open(),

src/renderer/components/+user-management/+roles/view.tsx

@@ -13,6 +13,7 @@ import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { AddRoleDialog } from "./add-dialog";
 import { rolesStore } from "./store";
 import type { RolesRouteParams } from "../../../../common/routes";
+import { KubeObjectAge } from "../../kube-object/age";
 
 enum columnId {
   name = "name",
@@ -36,7 +37,7 @@ export class Roles extends React.Component<RolesProps> {
           sortingCallbacks={{
             [columnId.name]: role => role.getName(),
             [columnId.namespace]: role => role.getNs(),
-            [columnId.age]: role => role.getTimeDiffFromNow(),
+            [columnId.age]: role => -role.getCreationTimestamp(),
           }}
           searchFilters={[
             role => role.getSearchFields(),
@@ -52,7 +53,7 @@ export class Roles extends React.Component<RolesProps> {
             role.getName(),
             <KubeObjectStatusIcon key="icon" object={role} />,
             role.getNs(),
-            role.getAge(),
+            <KubeObjectAge key="age" object={role} />,
           ]}
           addRemoveButtons={{
             onAdd: () => AddRoleDialog.open(),

src/renderer/components/+user-management/+service-accounts/view.tsx

@@ -13,6 +13,7 @@ import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { CreateServiceAccountDialog } from "./create-dialog";
 import { serviceAccountsStore } from "./store";
 import type { ServiceAccountsRouteParams } from "../../../../common/routes";
+import { KubeObjectAge } from "../../kube-object/age";
 
 enum columnId {
   name = "name",
@@ -35,7 +36,7 @@ export class ServiceAccounts extends React.Component<ServiceAccountsProps> {
           sortingCallbacks={{
             [columnId.name]: account => account.getName(),
             [columnId.namespace]: account => account.getNs(),
-            [columnId.age]: account => account.getTimeDiffFromNow(),
+            [columnId.age]: account => -account.getCreationTimestamp(),
           }}
           searchFilters={[
             account => account.getSearchFields(),
@@ -51,7 +52,7 @@ export class ServiceAccounts extends React.Component<ServiceAccountsProps> {
             account.getName(),
             <KubeObjectStatusIcon key="icon" object={account} />,
             account.getNs(),
-            account.getAge(),
+            <KubeObjectAge key="age" object={account} />,
           ]}
           addRemoveButtons={{
             onAdd: () => CreateServiceAccountDialog.open(),