fix(pipelines): refresh relative start time on interval (#4129)

app/scripts/modules/core/src/delivery/status/executionStatus.component.ts

@@ -1,7 +1,9 @@
-import { IController, IComponentOptions, module } from 'angular';
+import { IController, IComponentOptions, module, IFilterService } from 'angular';
 
 import { EXECUTION_FILTER_MODEL, ExecutionFilterModel } from 'core/delivery';
 import { IExecution } from 'core/domain';
+import { IScheduler, SchedulerFactory, SCHEDULER_FACTORY } from 'core/scheduler/scheduler.factory';
+import { TIME_FORMATTERS } from 'core/utils/timeFormatters';
 import { EXECUTION_USER_FILTER } from './executionUser.filter';
 
 import './executionStatus.less';
@@ -15,8 +17,14 @@ export class ExecutionStatusController implements IController {
   public filter: any;
   public sortFilter: any;
   public parameters: { key: string, value: any }[];
+  public timestamp: string;
+  public timestampScheduler: IScheduler;
 
-  constructor(private executionFilterModel: ExecutionFilterModel) { 'ngInject'; }
+  constructor(private $filter: IFilterService,
+              private executionFilterModel: ExecutionFilterModel,
+              private schedulerFactory: SchedulerFactory) {
+    'ngInject';
+  }
 
   public $onInit(): void {
     // these are internal parameters that are not useful to end users
@@ -37,6 +45,18 @@ export class ExecutionStatusController implements IController {
           return { key: paramKey, value: this.execution.trigger.parameters[paramKey] };
         });
     }
+
+    this.timestampScheduler = this.schedulerFactory.createScheduler();
+    this.updateTimestamp();
+    this.timestampScheduler.subscribe(() => this.updateTimestamp());
+  }
+
+  public $onDestroy(): void {
+    this.timestampScheduler.unsubscribe();
+  }
+
+  private updateTimestamp(): void {
+    this.timestamp = this.$filter<Function>('relativeTime')(this.execution.startTime);
   }
 }
 
@@ -54,6 +74,8 @@ export class ExecutionStatusComponent implements IComponentOptions {
 export const EXECUTION_STATUS_COMPONENT = 'spinnaker.core.delivery.executionStatus.component';
 module(EXECUTION_STATUS_COMPONENT, [
   EXECUTION_FILTER_MODEL,
-  EXECUTION_USER_FILTER
+  EXECUTION_USER_FILTER,
+  SCHEDULER_FACTORY,
+  TIME_FORMATTERS,
 ])
 .component('executionStatus', new ExecutionStatusComponent());

app/scripts/modules/core/src/delivery/status/executionStatus.html

@@ -41,7 +41,7 @@ <h5 ng-switch-default class="execution-type">
         {{ ::$ctrl.execution | executionUser }}
       </li>
       <li title="{{ ::$ctrl.execution.startTime | timestamp }}">
-        {{ ::$ctrl.execution.startTime | relativeTime }}
+        {{ $ctrl.timestamp }}
       </li>
     </span>
     <li class="break-word" ng-repeat="parameter in ::$ctrl.parameters">