Fix: proper sorting resources by age column (#2182)

* - fix: proper sorting for resource age column
- use Date.now() instead of new Date().getTime() (#2141 follow-up)

Signed-off-by: Roman <ixrock@gmail.com>

* fix: proper bar-chart tooltip callback

Signed-off-by: Roman <ixrock@gmail.com>

* fix: sorting in cronjobs, more Date.now() replacements

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+config-limit-ranges/limit-ranges.tsx

@@ -30,7 +30,7 @@ export class LimitRanges extends React.Component<Props> {
         sortingCallbacks={{
           [columnId.name]: (item: LimitRange) => item.getName(),
           [columnId.namespace]: (item: LimitRange) => item.getNs(),
-          [columnId.age]: (item: LimitRange) => item.metadata.creationTimestamp,
+          [columnId.age]: (item: LimitRange) => item.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (item: LimitRange) => item.getName(),

src/renderer/components/+config-maps/config-maps.tsx

@@ -31,7 +31,7 @@ export class ConfigMaps extends React.Component<Props> {
           [columnId.name]: (item: ConfigMap) => item.getName(),
           [columnId.namespace]: (item: ConfigMap) => item.getNs(),
           [columnId.keys]: (item: ConfigMap) => item.getKeys(),
-          [columnId.age]: (item: ConfigMap) => item.metadata.creationTimestamp,
+          [columnId.age]: (item: ConfigMap) => item.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (item: ConfigMap) => item.getSearchFields(),

src/renderer/components/+config-resource-quotas/resource-quotas.tsx

@@ -31,7 +31,7 @@ export class ResourceQuotas extends React.Component<Props> {
           sortingCallbacks={{
             [columnId.name]: (item: ResourceQuota) => item.getName(),
             [columnId.namespace]: (item: ResourceQuota) => item.getNs(),
-            [columnId.age]: (item: ResourceQuota) => item.metadata.creationTimestamp,
+            [columnId.age]: (item: ResourceQuota) => item.getTimeDiffFromNow(),
           }}
           searchFilters={[
             (item: ResourceQuota) => item.getSearchFields(),

src/renderer/components/+config-secrets/secrets.tsx

@@ -38,7 +38,7 @@ export class Secrets extends React.Component<Props> {
             [columnId.labels]: (item: Secret) => item.getLabels(),
             [columnId.keys]: (item: Secret) => item.getKeys(),
             [columnId.type]: (item: Secret) => item.type,
-            [columnId.age]: (item: Secret) => item.metadata.creationTimestamp,
+            [columnId.age]: (item: Secret) => item.getTimeDiffFromNow(),
           }}
           searchFilters={[
             (item: Secret) => item.getSearchFields(),

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

@@ -57,7 +57,7 @@ export class CrdResources extends React.Component<Props> {
     const sortingCallbacks: { [sortBy: string]: TableSortCallback } = {
       [columnId.name]: (item: KubeObject) => item.getName(),
       [columnId.namespace]: (item: KubeObject) => item.getNs(),
-      [columnId.age]: (item: KubeObject) => item.metadata.creationTimestamp,
+      [columnId.age]: (item: KubeObject) => item.getTimeDiffFromNow(),
     };
 
     extraColumns.forEach(column => {

src/renderer/components/+namespaces/namespaces.tsx

@@ -33,7 +33,7 @@ export class Namespaces extends React.Component<Props> {
           sortingCallbacks={{
             [columnId.name]: (ns: Namespace) => ns.getName(),
             [columnId.labels]: (ns: Namespace) => ns.getLabels(),
-            [columnId.age]: (ns: Namespace) => ns.metadata.creationTimestamp,
+            [columnId.age]: (ns: Namespace) => ns.getTimeDiffFromNow(),
             [columnId.status]: (ns: Namespace) => ns.getStatus(),
           }}
           searchFilters={[

src/renderer/components/+network-endpoints/endpoints.tsx

@@ -30,7 +30,7 @@ export class Endpoints extends React.Component<Props> {
         sortingCallbacks={{
           [columnId.name]: (endpoint: Endpoint) => endpoint.getName(),
           [columnId.namespace]: (endpoint: Endpoint) => endpoint.getNs(),
-          [columnId.age]: (endpoint: Endpoint) => endpoint.metadata.creationTimestamp,
+          [columnId.age]: (endpoint: Endpoint) => endpoint.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (endpoint: Endpoint) => endpoint.getSearchFields()

src/renderer/components/+network-ingresses/ingresses.tsx

@@ -31,7 +31,7 @@ export class Ingresses extends React.Component<Props> {
         sortingCallbacks={{
           [columnId.name]: (ingress: Ingress) => ingress.getName(),
           [columnId.namespace]: (ingress: Ingress) => ingress.getNs(),
-          [columnId.age]: (ingress: Ingress) => ingress.metadata.creationTimestamp,
+          [columnId.age]: (ingress: Ingress) => ingress.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (ingress: Ingress) => ingress.getSearchFields(),

src/renderer/components/+network-policies/network-policies.tsx

@@ -30,7 +30,7 @@ export class NetworkPolicies extends React.Component<Props> {
         sortingCallbacks={{
           [columnId.name]: (item: NetworkPolicy) => item.getName(),
           [columnId.namespace]: (item: NetworkPolicy) => item.getNs(),
-          [columnId.age]: (item: NetworkPolicy) => item.metadata.creationTimestamp,
+          [columnId.age]: (item: NetworkPolicy) => item.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (item: NetworkPolicy) => item.getSearchFields(),

src/renderer/components/+network-services/services.tsx

@@ -40,7 +40,7 @@ export class Services extends React.Component<Props> {
           [columnId.ports]: (service: Service) => (service.spec.ports || []).map(({ port }) => port)[0],
           [columnId.clusterIp]: (service: Service) => service.getClusterIp(),
           [columnId.type]: (service: Service) => service.getType(),
-          [columnId.age]: (service: Service) => service.metadata.creationTimestamp,
+          [columnId.age]: (service: Service) => service.getTimeDiffFromNow(),
           [columnId.status]: (service: Service) => service.getStatus(),
         }}
         searchFilters={[

src/renderer/components/+nodes/nodes.tsx

@@ -150,7 +150,7 @@ export class Nodes extends React.Component<Props> {
             [columnId.conditions]: (node: Node) => node.getNodeConditionText(),
             [columnId.taints]: (node: Node) => node.getTaints().length,
             [columnId.roles]: (node: Node) => node.getRoleLabels(),
-            [columnId.age]: (node: Node) => node.metadata.creationTimestamp,
+            [columnId.age]: (node: Node) => node.getTimeDiffFromNow(),
             [columnId.version]: (node: Node) => node.getKubeletVersion(),
           }}
           searchFilters={[

src/renderer/components/+pod-security-policies/pod-security-policies.tsx

@@ -28,7 +28,7 @@ export class PodSecurityPolicies extends React.Component {
           [columnId.name]: (item: PodSecurityPolicy) => item.getName(),
           [columnId.volumes]: (item: PodSecurityPolicy) => item.getVolumes(),
           [columnId.privileged]: (item: PodSecurityPolicy) => +item.isPrivileged(),
-          [columnId.age]: (item: PodSecurityPolicy) => item.metadata.creationTimestamp,
+          [columnId.age]: (item: PodSecurityPolicy) => item.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (item: PodSecurityPolicy) => item.getSearchFields(),

src/renderer/components/+storage-classes/storage-classes.tsx

@@ -31,7 +31,7 @@ export class StorageClasses extends React.Component<Props> {
         store={storageClassStore} isClusterScoped
         sortingCallbacks={{
           [columnId.name]: (item: StorageClass) => item.getName(),
-          [columnId.age]: (item: StorageClass) => item.metadata.creationTimestamp,
+          [columnId.age]: (item: StorageClass) => item.getTimeDiffFromNow(),
           [columnId.provisioner]: (item: StorageClass) => item.provisioner,
           [columnId.reclaimPolicy]: (item: StorageClass) => item.reclaimPolicy,
         }}

src/renderer/components/+storage-volume-claims/volume-claims.tsx

@@ -43,7 +43,7 @@ export class PersistentVolumeClaims extends React.Component<Props> {
           [columnId.status]: (pvc: PersistentVolumeClaim) => pvc.getStatus(),
           [columnId.size]: (pvc: PersistentVolumeClaim) => unitsToBytes(pvc.getStorage()),
           [columnId.storageClass]: (pvc: PersistentVolumeClaim) => pvc.spec.storageClassName,
-          [columnId.age]: (pvc: PersistentVolumeClaim) => pvc.metadata.creationTimestamp,
+          [columnId.age]: (pvc: PersistentVolumeClaim) => pvc.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (item: PersistentVolumeClaim) => item.getSearchFields(),

src/renderer/components/+storage-volumes/volumes.tsx

@@ -34,10 +34,10 @@ export class PersistentVolumes extends React.Component<Props> {
         store={volumesStore} isClusterScoped
         sortingCallbacks={{
           [columnId.name]: (item: PersistentVolume) => item.getName(),
-          [columnId.storageClass]: (item: PersistentVolume) => item.spec.storageClassName,
+          [columnId.storageClass]: (item: PersistentVolume) => item.getStorageClass(),
           [columnId.capacity]: (item: PersistentVolume) => item.getCapacity(true),
           [columnId.status]: (item: PersistentVolume) => item.getStatus(),
-          [columnId.age]: (item: PersistentVolume) => item.metadata.creationTimestamp,
+          [columnId.age]: (item: PersistentVolume) => item.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (item: PersistentVolume) => item.getSearchFields(),

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

@@ -33,7 +33,7 @@ export class RoleBindings extends React.Component<Props> {
           [columnId.name]: (binding: RoleBinding) => binding.getName(),
           [columnId.namespace]: (binding: RoleBinding) => binding.getNs(),
           [columnId.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
-          [columnId.age]: (binding: RoleBinding) => binding.metadata.creationTimestamp,
+          [columnId.age]: (binding: RoleBinding) => binding.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (binding: RoleBinding) => binding.getSearchFields(),

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

@@ -32,7 +32,7 @@ export class Roles extends React.Component<Props> {
           sortingCallbacks={{
             [columnId.name]: (role: Role) => role.getName(),
             [columnId.namespace]: (role: Role) => role.getNs(),
-            [columnId.age]: (role: Role) => role.metadata.creationTimestamp,
+            [columnId.age]: (role: Role) => role.getTimeDiffFromNow(),
           }}
           searchFilters={[
             (role: Role) => role.getSearchFields(),

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

@@ -36,7 +36,7 @@ export class ServiceAccounts extends React.Component<Props> {
           sortingCallbacks={{
             [columnId.name]: (account: ServiceAccount) => account.getName(),
             [columnId.namespace]: (account: ServiceAccount) => account.getNs(),
-            [columnId.age]: (account: ServiceAccount) => account.metadata.creationTimestamp,
+            [columnId.age]: (account: ServiceAccount) => account.getTimeDiffFromNow(),
           }}
           searchFilters={[
             (account: ServiceAccount) => account.getSearchFields(),

src/renderer/components/+workloads-cronjobs/cronjobs.tsx

@@ -46,7 +46,7 @@ export class CronJobs extends React.Component<Props> {
           [columnId.suspend]: (cronJob: CronJob) => cronJob.getSuspendFlag(),
           [columnId.active]: (cronJob: CronJob) => cronJobStore.getActiveJobsNum(cronJob),
           [columnId.lastSchedule]: (cronJob: CronJob) => cronJob.getLastScheduleTime(),
-          [columnId.age]: (cronJob: CronJob) => cronJob.metadata.creationTimestamp,
+          [columnId.age]: (cronJob: CronJob) => cronJob.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (cronJob: CronJob) => cronJob.getSearchFields(),

src/renderer/components/+workloads-daemonsets/daemonsets.tsx

@@ -47,7 +47,7 @@ export class DaemonSets extends React.Component<Props> {
           [columnId.name]: (daemonSet: DaemonSet) => daemonSet.getName(),
           [columnId.namespace]: (daemonSet: DaemonSet) => daemonSet.getNs(),
           [columnId.pods]: (daemonSet: DaemonSet) => this.getPodsLength(daemonSet),
-          [columnId.age]: (daemonSet: DaemonSet) => daemonSet.metadata.creationTimestamp,
+          [columnId.age]: (daemonSet: DaemonSet) => daemonSet.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (daemonSet: DaemonSet) => daemonSet.getSearchFields(),

src/renderer/components/+workloads-deployments/deployments.tsx

@@ -64,7 +64,7 @@ export class Deployments extends React.Component<Props> {
           [columnId.name]: (deployment: Deployment) => deployment.getName(),
           [columnId.namespace]: (deployment: Deployment) => deployment.getNs(),
           [columnId.replicas]: (deployment: Deployment) => deployment.getReplicas(),
-          [columnId.age]: (deployment: Deployment) => deployment.metadata.creationTimestamp,
+          [columnId.age]: (deployment: Deployment) => deployment.getTimeDiffFromNow(),
           [columnId.condition]: (deployment: Deployment) => deployment.getConditionsText(),
         }}
         searchFilters={[

src/renderer/components/+workloads-jobs/jobs.tsx

@@ -36,7 +36,7 @@ export class Jobs extends React.Component<Props> {
           [columnId.name]: (job: Job) => job.getName(),
           [columnId.namespace]: (job: Job) => job.getNs(),
           [columnId.conditions]: (job: Job) => job.getCondition() != null ? job.getCondition().type : "",
-          [columnId.age]: (job: Job) => job.metadata.creationTimestamp,
+          [columnId.age]: (job: Job) => job.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (job: Job) => job.getSearchFields(),

src/renderer/components/+workloads-pods/pods.tsx

@@ -83,7 +83,7 @@ export class Pods extends React.Component<Props> {
           [columnId.owners]: (pod: Pod) => pod.getOwnerRefs().map(ref => ref.kind),
           [columnId.qos]: (pod: Pod) => pod.getQosClass(),
           [columnId.node]: (pod: Pod) => pod.getNodeName(),
-          [columnId.age]: (pod: Pod) => pod.metadata.creationTimestamp,
+          [columnId.age]: (pod: Pod) => pod.getTimeDiffFromNow(),
           [columnId.status]: (pod: Pod) => pod.getStatusMessage(),
         }}
         searchFilters={[

src/renderer/components/+workloads-replicasets/replicasets.tsx

@@ -40,7 +40,7 @@ export class ReplicaSets extends React.Component<Props> {
           [columnId.desired]: (replicaSet: ReplicaSet) => replicaSet.getDesired(),
           [columnId.current]: (replicaSet: ReplicaSet) => replicaSet.getCurrent(),
           [columnId.ready]: (replicaSet: ReplicaSet) => replicaSet.getReady(),
-          [columnId.age]: (replicaSet: ReplicaSet) => replicaSet.metadata.creationTimestamp,
+          [columnId.age]: (replicaSet: ReplicaSet) => replicaSet.getTimeDiffFromNow(),
         }}
         searchFilters={[
           (replicaSet: ReplicaSet) => replicaSet.getSearchFields(),

src/renderer/components/+workloads-statefulsets/statefulsets.tsx

@@ -46,7 +46,7 @@ export class StatefulSets extends React.Component<Props> {
         sortingCallbacks={{
           [columnId.name]: (statefulSet: StatefulSet) => statefulSet.getName(),
           [columnId.namespace]: (statefulSet: StatefulSet) => statefulSet.getNs(),
-          [columnId.age]: (statefulSet: StatefulSet) => statefulSet.metadata.creationTimestamp,
+          [columnId.age]: (statefulSet: StatefulSet) => statefulSet.getTimeDiffFromNow(),
           [columnId.replicas]: (statefulSet: StatefulSet) => statefulSet.getReplicas(),
         }}
         searchFilters={[

src/renderer/components/chart/bar-chart.tsx

@@ -3,7 +3,7 @@ import merge from "lodash/merge";
 import moment from "moment";
 import Color from "color";
 import { observer } from "mobx-react";
-import { ChartData, ChartOptions, ChartPoint, Scriptable } from "chart.js";
+import { ChartData, ChartOptions, ChartPoint, ChartTooltipItem, Scriptable } from "chart.js";
 import { Chart, ChartKind, ChartProps } from "./chart";
 import { bytesToUnits, cssNames } from "../../utils";
 import { ZebraStripes } from "./zebra-stripes.plugin";
@@ -115,12 +115,13 @@ export class BarChart extends React.Component<Props> {
         mode: "index",
         position: "cursor",
         callbacks: {
-          title: tooltipItems => {
-            const now = new Date().getTime();
+          title([tooltip]: ChartTooltipItem[]) {
+            const xLabel = tooltip?.xLabel;
+            const skipLabel = xLabel == null || new Date(xLabel).getTime() > Date.now();
 
-            if (new Date(tooltipItems[0].xLabel).getTime() > now) return "";
+            if (skipLabel) return "";
 
-            return `${tooltipItems[0].xLabel}`;
+            return String(xLabel);
           },
           labelColor: ({ datasetIndex }) => {
             return {

src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx

@@ -48,7 +48,7 @@ export class KubeObjectStatusIcon extends React.Component<Props> {
 
   getAge(timestamp: string) {
     if (!timestamp) return "";
-    const diff = new Date().getTime() - new Date(timestamp).getTime();
+    const diff = Date.now() - new Date(timestamp).getTime();
 
     return formatDuration(diff, true);
   }