From fe1737eebdbf5ade6a8e4838f6557b77ed44f469 Mon Sep 17 00:00:00 2001
From: Philippe MARTIN <contact@elol.fr>
Date: Wed, 29 May 2019 17:02:35 +0200
Subject: [PATCH] Show tooltip timestamp on time hover across pages (#3767)

* Show tooltip timestamp on time hover across pages

* Style on date with tooltip

* fix newline

* fix gts

* Allow [disable]=false on kd-date

* fix format
---
 .../chrome/notifications/template.html        |  3 +-
 .../common/components/condition/template.html | 12 ++---
 .../common/components/creator/template.html   | 11 +++--
 .../common/components/date/component.ts       | 49 +++++++++++++++++++
 .../common/components/date/style.scss         | 17 +++++++
 .../common/components/date/template.html      | 24 +++++++++
 src/app/frontend/common/components/module.ts  |  3 ++
 .../components/objectmeta/template.html       | 12 +++--
 .../common/components/quotas/template.html    |  6 +--
 .../resourcelist/clusterrole/template.html    |  3 +-
 .../resourcelist/configmap/template.html      |  3 +-
 .../resourcelist/cronjob/template.html        |  9 ++--
 .../resourcelist/daemonset/template.html      |  5 +-
 .../resourcelist/deployment/template.html     |  5 +-
 .../resourcelist/ingress/template.html        |  3 +-
 .../components/resourcelist/job/template.html |  5 +-
 .../resourcelist/namespace/template.html      |  3 +-
 .../resourcelist/node/template.html           |  5 +-
 .../persistentvolume/template.html            |  3 +-
 .../persistentvolumeclaim/template.html       |  3 +-
 .../components/resourcelist/pod/template.html |  3 +-
 .../resourcelist/replicaset/template.html     |  5 +-
 .../replicationcontroller/template.html       |  5 +-
 .../resourcelist/secret/template.html         |  3 +-
 .../resourcelist/service/template.html        |  3 +-
 .../resourcelist/statefulset/template.html    |  5 +-
 .../resourcelist/storageclass/template.html   |  3 +-
 src/app/frontend/logs/template.html           |  4 +-
 .../workloads/deployment/detail/template.html | 11 +++--
 29 files changed, 184 insertions(+), 42 deletions(-)
 create mode 100644 src/app/frontend/common/components/date/component.ts
 create mode 100644 src/app/frontend/common/components/date/style.scss
 create mode 100644 src/app/frontend/common/components/date/template.html

diff --git a/src/app/frontend/chrome/notifications/template.html b/src/app/frontend/chrome/notifications/template.html
index e0d2b17552fc..a99491f5566c 100644
--- a/src/app/frontend/chrome/notifications/template.html
+++ b/src/app/frontend/chrome/notifications/template.html
@@ -42,7 +42,8 @@
             <span class="kd-notification">{{notification.message}}</span>
             <span class="kd-notification-timestamp kd-muted"
                   i18n>
-              {{notification.timestamp | kdRelativeTime}} ago
+              <kd-date [date]="notification.timestamp"
+                       relative></kd-date> ago
             </span>
           </div>
           <button (click)="remove(index)"
diff --git a/src/app/frontend/common/components/condition/template.html b/src/app/frontend/common/components/condition/template.html
index bfcd8d8071f8..1ff73cf6df5f 100644
--- a/src/app/frontend/common/components/condition/template.html
+++ b/src/app/frontend/common/components/condition/template.html
@@ -51,20 +51,16 @@
         <mat-header-cell *matHeaderCellDef
                          i18n>Last probe time</mat-header-cell>
         <mat-cell *matCellDef="let condition">
-          <ng-container *ngIf="condition.lastProbeTime">
-            {{condition.lastProbeTime| kdRelativeTime}}
-          </ng-container>
-          <ng-container *ngIf="!condition.lastProbeTime">-</ng-container>
+          <kd-date [date]="condition.lastProbeTime"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
       <ng-container [matColumnDef]="getConditionsColumns()[3]">
         <mat-header-cell *matHeaderCellDef
                          i18n>Last transition time</mat-header-cell>
         <mat-cell *matCellDef="let condition">
-          <ng-container *ngIf="condition.lastTransitionTime">
-            {{condition.lastTransitionTime| kdRelativeTime}}
-          </ng-container>
-          <ng-container *ngIf="!condition.lastTransitionTime">-</ng-container>
+          <kd-date [date]="condition.lastTransitionTime"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
       <ng-container [matColumnDef]="getConditionsColumns()[4]">
diff --git a/src/app/frontend/common/components/creator/template.html b/src/app/frontend/common/components/creator/template.html
index 351d563b5239..fe6c410c7ff1 100644
--- a/src/app/frontend/common/components/creator/template.html
+++ b/src/app/frontend/common/components/creator/template.html
@@ -34,7 +34,8 @@
          *ngIf="creator?.objectMeta.creationTimestamp">
       <span class="kd-muted-light"
             i18n>Age:&nbsp;</span>
-      <span>{{creator?.objectMeta.creationTimestamp | kdRelativeTime}}</span>
+      <kd-date [date]="creator?.objectMeta.creationTimestamp"
+               relative></kd-date>
     </div>
   </div>
   <div title
@@ -65,8 +66,12 @@
 
     <kd-property>
       <div key
-           i18n>Age</div>
-      <div value>{{creator?.objectMeta.creationTimestamp | kdRelativeTime}}</div>
+           i18n>Age
+      </div>
+      <div value>
+        <kd-date [date]="creator?.objectMeta.creationTimestamp"
+                 relative></kd-date>
+      </div>
     </kd-property>
 
     <kd-property *ngIf="creator?.objectMeta?.labels"
diff --git a/src/app/frontend/common/components/date/component.ts b/src/app/frontend/common/components/date/component.ts
new file mode 100644
index 000000000000..7b759cb2b0da
--- /dev/null
+++ b/src/app/frontend/common/components/date/component.ts
@@ -0,0 +1,49 @@
+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input } from '@angular/core';
+
+/**
+ * Display a date
+ *
+ * Examples:
+ *
+ * Display the date:
+ * <kd-date [date]="object.timestamp"></kd-date>
+ *
+ * Display the age of the date, and the date in a tooltip:
+ * <kd-date [date]="object.timestamp" relative></kd-date>
+ *
+ * Display the date in the shprt format:
+ * <kd-date [date]="object.timestamp" format="short"></kd-date>
+ *
+ * Display the age of the date, and the date in the short format in a tooltip:
+ * <kd-date [date]="object.timestamp" relative format="short"></kd-date>
+ *
+ */
+@Component({
+  selector: 'kd-date',
+  templateUrl: './template.html',
+  styleUrls: ['./style.scss'],
+})
+export class DateComponent {
+  @Input() date: string;
+  @Input() format = 'medium';
+
+  _relative: boolean;
+  @Input('relative')
+  set relative(v: boolean) {
+    this._relative = v !== undefined && v !== false;
+  }
+}
diff --git a/src/app/frontend/common/components/date/style.scss b/src/app/frontend/common/components/date/style.scss
new file mode 100644
index 000000000000..70178ca701c0
--- /dev/null
+++ b/src/app/frontend/common/components/date/style.scss
@@ -0,0 +1,17 @@
+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.kd-date {
+  text-decoration: underline dotted;
+}
diff --git a/src/app/frontend/common/components/date/template.html b/src/app/frontend/common/components/date/template.html
new file mode 100644
index 000000000000..d482ae7cbeaa
--- /dev/null
+++ b/src/app/frontend/common/components/date/template.html
@@ -0,0 +1,24 @@
+<!--
+Copyright 2017 The Kubernetes Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<span *ngIf="_relative"
+      class="kd-date"
+      [matTooltip]="date | date:format">
+  {{date | kdRelativeTime}}
+</span>
+<span *ngIf="!_relative">
+  {{date | date:format}}
+</span>
diff --git a/src/app/frontend/common/components/module.ts b/src/app/frontend/common/components/module.ts
index 515b3bae789d..4d0c7e287a06 100644
--- a/src/app/frontend/common/components/module.ts
+++ b/src/app/frontend/common/components/module.ts
@@ -81,6 +81,7 @@ import { SparklineComponent } from './sparkline/component';
 import { TextInputComponent } from './textinput/component';
 import { UploadFileComponent } from './uploadfile/component';
 import { ZeroStateComponent } from './zerostate/component';
+import { DateComponent } from './date/component';
 
 @NgModule({
   imports: [SharedModule],
@@ -150,6 +151,7 @@ import { ZeroStateComponent } from './zerostate/component';
     SparklineComponent,
     ActionbarDetailTriggerComponent,
     TriggerDefaultActionbar,
+    DateComponent,
   ],
   exports: [
     AllocationChartComponent,
@@ -211,6 +213,7 @@ import { ZeroStateComponent } from './zerostate/component';
     LogsExecDefaultActionbar,
     SparklineComponent,
     ActionbarDetailTriggerComponent,
+    DateComponent,
   ],
   entryComponents: [
     ChipDialog,
diff --git a/src/app/frontend/common/components/objectmeta/template.html b/src/app/frontend/common/components/objectmeta/template.html
index c8397a4a0c71..fdf41a09cf19 100644
--- a/src/app/frontend/common/components/objectmeta/template.html
+++ b/src/app/frontend/common/components/objectmeta/template.html
@@ -33,7 +33,8 @@
          *ngIf="objectMeta?.creationTimestamp">
       <span class="kd-muted-light"
             i18n>Age:&nbsp;</span>
-      <span>{{objectMeta?.creationTimestamp | kdRelativeTime}}</span>
+      <kd-date [date]="objectMeta?.creationTimestamp"
+               relative></kd-date>
     </div>
   </div>
   <div content>
@@ -52,12 +53,17 @@
       <kd-property [ngClass]="'object-meta-creation'">
         <div key
              i18n>Creation time</div>
-        <div value>{{objectMeta?.creationTimestamp | date : "MMM d, y H:mm:ss" : "UTC"}}</div>
+        <div value>
+          <kd-date [date]="objectMeta?.creationTimestamp"></kd-date>
+        </div>
       </kd-property>
       <kd-property [ngClass]="'object-meta-age'">
         <div key
              i18n>Age</div>
-        <div value>{{objectMeta?.creationTimestamp | kdRelativeTime}}</div>
+        <div value>
+          <kd-date [date]="objectMeta?.creationTimestamp"
+                   relative></kd-date>
+        </div>
       </kd-property>
       <kd-property *ngIf="objectMeta?.uid"
                    [ngClass]="'object-meta-uid'">
diff --git a/src/app/frontend/common/components/quotas/template.html b/src/app/frontend/common/components/quotas/template.html
index f71fb4f17a76..ec861802f582 100644
--- a/src/app/frontend/common/components/quotas/template.html
+++ b/src/app/frontend/common/components/quotas/template.html
@@ -41,9 +41,9 @@
         <mat-header-cell *matHeaderCellDef
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let quota">
-          <ng-container *ngIf="quota.objectMeta.creationTimestamp">
-            {{quota.objectMeta.creationTimestamp | kdRelativeTime}}
-          </ng-container>
+          <kd-date *ngIf="quota.objectMeta.creationTimestamp"
+                   [date]="quota.objectMeta.creationTimestamp"
+                   relative></kd-date>
           <ng-container *ngIf="!quota.objectMeta.creationTimestamp">-</ng-container>
         </mat-cell>
       </ng-container>
diff --git a/src/app/frontend/common/components/resourcelist/clusterrole/template.html b/src/app/frontend/common/components/resourcelist/clusterrole/template.html
index 6006b1a92154..0630f95b03df 100644
--- a/src/app/frontend/common/components/resourcelist/clusterrole/template.html
+++ b/src/app/frontend/common/components/resourcelist/clusterrole/template.html
@@ -52,7 +52,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let role">
-          {{role.objectMeta.creationTimestamp |kdRelativeTime}}
+          <kd-date [date]="role.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/configmap/template.html b/src/app/frontend/common/components/resourcelist/configmap/template.html
index 3fc79be69e74..a8b9ef93473b 100644
--- a/src/app/frontend/common/components/resourcelist/configmap/template.html
+++ b/src/app/frontend/common/components/resourcelist/configmap/template.html
@@ -68,7 +68,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let cm">
-          {{cm.objectMeta.creationTimestamp | kdRelativeTime}}
+          <kd-date [date]="cm.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/cronjob/template.html b/src/app/frontend/common/components/resourcelist/cronjob/template.html
index 829b8b1e849d..8195e95a4513 100644
--- a/src/app/frontend/common/components/resourcelist/cronjob/template.html
+++ b/src/app/frontend/common/components/resourcelist/cronjob/template.html
@@ -98,8 +98,8 @@
         <mat-header-cell *matHeaderCellDef
                          i18n>Last Schedule</mat-header-cell>
         <mat-cell *matCellDef="let cronJob">
-          <span>{{cronJob.lastSchedule | kdRelativeTime}}</span>
-          <span *ngIf="!cronJob.lastSchedule">-</span>
+          <kd-date [date]="cronJob.lastSchedule"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
@@ -115,7 +115,10 @@
       <ng-container matColumnDef="age">
         <mat-header-cell *matHeaderCellDef
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let cronJob">{{cronJob.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let cronJob">
+          <kd-date [date]="cronJob.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="getColumns()"></mat-header-row>
diff --git a/src/app/frontend/common/components/resourcelist/daemonset/template.html b/src/app/frontend/common/components/resourcelist/daemonset/template.html
index aa508eb52b77..c03963249ce8 100644
--- a/src/app/frontend/common/components/resourcelist/daemonset/template.html
+++ b/src/app/frontend/common/components/resourcelist/daemonset/template.html
@@ -91,7 +91,10 @@
                          mat-sort-header
                          disableClear="true"
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let daemonSet">{{daemonSet.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let daemonSet">
+          <kd-date [date]="daemonSet.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="images">
diff --git a/src/app/frontend/common/components/resourcelist/deployment/template.html b/src/app/frontend/common/components/resourcelist/deployment/template.html
index 5bcf4c75f874..f021f1dca86c 100644
--- a/src/app/frontend/common/components/resourcelist/deployment/template.html
+++ b/src/app/frontend/common/components/resourcelist/deployment/template.html
@@ -91,7 +91,10 @@
                          mat-sort-header
                          disableClear="true"
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let deployment">{{deployment.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let deployment">
+          <kd-date [date]="deployment.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="images">
diff --git a/src/app/frontend/common/components/resourcelist/ingress/template.html b/src/app/frontend/common/components/resourcelist/ingress/template.html
index 906e54bd7ddb..bab4eddae100 100644
--- a/src/app/frontend/common/components/resourcelist/ingress/template.html
+++ b/src/app/frontend/common/components/resourcelist/ingress/template.html
@@ -76,7 +76,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let ingress">
-          {{ingress.objectMeta.creationTimestamp | kdRelativeTime}}
+          <kd-date [date]="ingress.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/job/template.html b/src/app/frontend/common/components/resourcelist/job/template.html
index 6a36d316b536..ef5527aa55f9 100644
--- a/src/app/frontend/common/components/resourcelist/job/template.html
+++ b/src/app/frontend/common/components/resourcelist/job/template.html
@@ -94,7 +94,10 @@
                          mat-sort-header
                          disableClear="true"
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let job">{{job.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let job">
+          <kd-date [date]="job.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="images">
diff --git a/src/app/frontend/common/components/resourcelist/namespace/template.html b/src/app/frontend/common/components/resourcelist/namespace/template.html
index f0b05fc46f17..7bd6b70030ef 100644
--- a/src/app/frontend/common/components/resourcelist/namespace/template.html
+++ b/src/app/frontend/common/components/resourcelist/namespace/template.html
@@ -76,7 +76,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let namespace">
-          {{namespace.objectMeta.creationTimestamp |kdRelativeTime}}
+          <kd-date [date]="namespace.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/node/template.html b/src/app/frontend/common/components/resourcelist/node/template.html
index 2cae1ee625cd..4424d2950e46 100644
--- a/src/app/frontend/common/components/resourcelist/node/template.html
+++ b/src/app/frontend/common/components/resourcelist/node/template.html
@@ -107,7 +107,10 @@
                          mat-sort-header
                          disableClear="true"
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let node">{{node.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let node">
+          <kd-date [date]="node.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <ng-container *ngFor="let col of getActionColumns()"
diff --git a/src/app/frontend/common/components/resourcelist/persistentvolume/template.html b/src/app/frontend/common/components/resourcelist/persistentvolume/template.html
index f71b6c1d94eb..cfd511189039 100644
--- a/src/app/frontend/common/components/resourcelist/persistentvolume/template.html
+++ b/src/app/frontend/common/components/resourcelist/persistentvolume/template.html
@@ -117,7 +117,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let pv">
-          {{pv.objectMeta.creationTimestamp |kdRelativeTime}}
+          <kd-date [date]="pv.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html b/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html
index ff3de5c0e6dd..fbb4caec3676 100644
--- a/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html
+++ b/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html
@@ -120,7 +120,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let pvc">
-          {{pvc.objectMeta.creationTimestamp | kdRelativeTime}}
+          <kd-date [date]="pvc.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/pod/template.html b/src/app/frontend/common/components/resourcelist/pod/template.html
index fbefa9cbf2e3..1ce4a5aecca0 100644
--- a/src/app/frontend/common/components/resourcelist/pod/template.html
+++ b/src/app/frontend/common/components/resourcelist/pod/template.html
@@ -127,7 +127,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let pod">
-          {{pod.objectMeta.creationTimestamp | kdRelativeTime}}
+          <kd-date [date]="pod.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/replicaset/template.html b/src/app/frontend/common/components/resourcelist/replicaset/template.html
index fc5c38b837f2..0d292b1e3c13 100644
--- a/src/app/frontend/common/components/resourcelist/replicaset/template.html
+++ b/src/app/frontend/common/components/resourcelist/replicaset/template.html
@@ -94,7 +94,10 @@
                          mat-sort-header
                          disableClear="true"
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let replicaSet">{{replicaSet.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let replicaSet">
+          <kd-date [date]="replicaSet.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="images">
diff --git a/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html b/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html
index 9532fea00fb1..519aadcc4e61 100644
--- a/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html
+++ b/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html
@@ -91,7 +91,10 @@
                          mat-sort-header
                          disableClear="true"
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let rc">{{rc.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let rc">
+          <kd-date [date]="rc.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="images">
diff --git a/src/app/frontend/common/components/resourcelist/secret/template.html b/src/app/frontend/common/components/resourcelist/secret/template.html
index e72acf37e954..cf7a12bb033d 100644
--- a/src/app/frontend/common/components/resourcelist/secret/template.html
+++ b/src/app/frontend/common/components/resourcelist/secret/template.html
@@ -74,7 +74,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let secret">
-          {{secret.objectMeta.creationTimestamp | kdRelativeTime}}
+          <kd-date [date]="secret.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/service/template.html b/src/app/frontend/common/components/resourcelist/service/template.html
index 621d4182fb0c..4c7d727b9ffb 100644
--- a/src/app/frontend/common/components/resourcelist/service/template.html
+++ b/src/app/frontend/common/components/resourcelist/service/template.html
@@ -99,7 +99,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let service">
-          {{service.objectMeta.creationTimestamp | kdRelativeTime}}
+          <kd-date [date]="service.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/common/components/resourcelist/statefulset/template.html b/src/app/frontend/common/components/resourcelist/statefulset/template.html
index b1551dca3dd6..f9338e0c0fa8 100644
--- a/src/app/frontend/common/components/resourcelist/statefulset/template.html
+++ b/src/app/frontend/common/components/resourcelist/statefulset/template.html
@@ -91,7 +91,10 @@
                          mat-sort-header
                          disableClear="true"
                          i18n>Age</mat-header-cell>
-        <mat-cell *matCellDef="let ss">{{ss.objectMeta.creationTimestamp | kdRelativeTime}}</mat-cell>
+        <mat-cell *matCellDef="let ss">
+          <kd-date [date]="ss.objectMeta.creationTimestamp"
+                   relative></kd-date>
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="images">
diff --git a/src/app/frontend/common/components/resourcelist/storageclass/template.html b/src/app/frontend/common/components/resourcelist/storageclass/template.html
index ef072d60477e..748cd3675a19 100644
--- a/src/app/frontend/common/components/resourcelist/storageclass/template.html
+++ b/src/app/frontend/common/components/resourcelist/storageclass/template.html
@@ -66,7 +66,8 @@
                          disableClear="true"
                          i18n>Age</mat-header-cell>
         <mat-cell *matCellDef="let sc">
-          {{sc.objectMeta.creationTimestamp | kdRelativeTime}}
+          <kd-date [date]="sc.objectMeta.creationTimestamp"
+                   relative></kd-date>
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/frontend/logs/template.html b/src/app/frontend/logs/template.html
index ee000d4fec4c..99001700135c 100644
--- a/src/app/frontend/logs/template.html
+++ b/src/app/frontend/logs/template.html
@@ -136,7 +136,9 @@
         <span class="kd-logs-info"
               *ngIf="logsSet?.length > 1"
               i18n>
-          Logs from {{podLogs?.info.fromDate | date : "short"}} to {{podLogs?.info.toDate | date : "short"}} UTC
+          Logs from <kd-date [date]="podLogs?.info.fromDate"
+                   format="short"></kd-date> to <kd-date [date]="podLogs?.info.toDate"
+                   format="short"></kd-date> UTC
         </span>
         <span fxFlex></span>
         <div class="kd-list-pagination-buttons">
diff --git a/src/app/frontend/resource/workloads/deployment/detail/template.html b/src/app/frontend/resource/workloads/deployment/detail/template.html
index 3a2b313ac60d..82a14de57d9c 100644
--- a/src/app/frontend/resource/workloads/deployment/detail/template.html
+++ b/src/app/frontend/resource/workloads/deployment/detail/template.html
@@ -203,7 +203,8 @@
          *ngIf="deployment?.newReplicaSet?.objectMeta.creationTimestamp">
       <span class="kd-muted-light"
             i18n>Age:&nbsp;</span>
-      <span>{{deployment.newReplicaSet.objectMeta.creationTimestamp | kdRelativeTime}}</span>
+      <kd-date [date]="deployment.newReplicaSet.objectMeta.creationTimestamp"
+               relative></kd-date>
     </div>
 
     <div class="kd-inline-property"
@@ -232,8 +233,12 @@
 
     <kd-property *ngIf="deployment?.newReplicaSet?.objectMeta.creationTimestamp">
       <div key
-           i18n>Age</div>
-      <div value>{{deployment.newReplicaSet.objectMeta.creationTimestamp | kdRelativeTime}}</div>
+           i18n>Age
+      </div>
+      <div value>
+        <kd-date [date]="deployment.newReplicaSet.objectMeta.creationTimestamp"
+                 relative></kd-date>
+      </div>
     </kd-property>
 
     <kd-property *ngIf="deployment?.newReplicaSet?.pods">