diff options
| author | Jongmok Hong <jongmok@google.com> | 2018-09-13 16:49:55 +0900 |
|---|---|---|
| committer | Jongmok Hong <jongmok@google.com> | 2018-09-14 11:46:11 +0900 |
| commit | 55f048d55cda750281acb49c449f6ab03db5a761 (patch) | |
| tree | dadbab10c29cde27627986652d3633633d2c3a0e | |
| parent | f618d5fffaaf99ea2e4aaf6cca6e45a806ef2543 (diff) | |
| download | test_serving-55f048d55cda750281acb49c449f6ab03db5a761.tar.gz | |
Display relative time.
Frontend has datetime as YYYY-MM-DDThh:mm:ss string format, so it
needs to be translated to human-friendly format. Another time
format would be good, for example, 2018-09-20 12:34:56, however
the most practices users want to see relative time. The heartbeats
for devices and jobs are good examples. Show details button is
going to be introduced soon and in that UI users still can see
the raw time value.
Test: go/vtslab-schedule-dev
Bug: 74575555
Change-Id: I996ac5ea23912a8e5ee3b842ec147fa3df319a47
| -rw-r--r-- | gae/frontend/src/app/menu/job/job.component.html | 4 | ||||
| -rw-r--r-- | gae/frontend/src/app/menu/menu_base.ts | 8 | ||||
| -rw-r--r-- | gae/frontend/src/app/menu/schedule/schedule.component.html | 2 |
3 files changed, 11 insertions, 3 deletions
diff --git a/gae/frontend/src/app/menu/job/job.component.html b/gae/frontend/src/app/menu/job/job.component.html index 6b7550a..7ba1c89 100644 --- a/gae/frontend/src/app/menu/job/job.component.html +++ b/gae/frontend/src/app/menu/job/job.component.html @@ -154,13 +154,13 @@ <!-- Timestamp Column --> <ng-container matColumnDef="timestamp"> <mat-header-cell *matHeaderCellDef>Timestamp</mat-header-cell> - <mat-cell *matCellDef="let job"> {{job.timestamp}} </mat-cell> + <mat-cell *matCellDef="let job"> {{getRelativeTime(job.timestamp)}} </mat-cell> </ng-container> <!-- Heartbeat stamp Column --> <ng-container matColumnDef="heartbeat_stamp"> <mat-header-cell *matHeaderCellDef>Heartbeat</mat-header-cell> - <mat-cell *matCellDef="let job"> {{job.heartbeat_stamp}} </mat-cell> + <mat-cell *matCellDef="let job"> {{getRelativeTime(job.heartbeat_stamp)}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="columnTitles"></mat-header-row> diff --git a/gae/frontend/src/app/menu/menu_base.ts b/gae/frontend/src/app/menu/menu_base.ts index f34bad2..ab120ee 100644 --- a/gae/frontend/src/app/menu/menu_base.ts +++ b/gae/frontend/src/app/menu/menu_base.ts @@ -17,6 +17,9 @@ /** This class defines and/or implements the common properties and methods * used among menus. */ +import moment from 'moment-timezone'; + + export abstract class MenuBaseClass { count = -1; @@ -42,4 +45,9 @@ export abstract class MenuBaseClass { error: (error) => console.log(`[${error.status}] ${error.name}`) }; } + + getRelativeTime(timeString) { + return (moment.tz(timeString, 'YYYY-MM-DDThh:mm:ss', 'UTC').isValid() ? + moment.tz(timeString, 'YYYY-MM-DDThh:mm:ss', 'UTC').fromNow() : timeString); + } } diff --git a/gae/frontend/src/app/menu/schedule/schedule.component.html b/gae/frontend/src/app/menu/schedule/schedule.component.html index f453b23..a061b79 100644 --- a/gae/frontend/src/app/menu/schedule/schedule.component.html +++ b/gae/frontend/src/app/menu/schedule/schedule.component.html @@ -77,7 +77,7 @@ <!-- Timestamp Column --> <ng-container matColumnDef="timestamp"> <mat-header-cell *matHeaderCellDef>Timestamp</mat-header-cell> - <mat-cell *matCellDef="let schedule"> {{schedule.timestamp}}</mat-cell> + <mat-cell *matCellDef="let schedule"> {{getRelativeTime(schedule.timestamp)}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="columnTitles"></mat-header-row> |