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
kubernetes · May 29, 2019 · fe1737e · fe1737e
1 parent f5282e9
commit fe1737e
Show file tree

Hide file tree

Showing 29 changed files with 184 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>