Add a <time-ago> component to abstract out common handling of showing how long ago an event occurred

static/js/directives/ui/time-ago/time-ago.component.html

@@ -0,0 +1,6 @@
+<span>
+  <span ng-if="::$ctrl.datetime" data-title="{{ ::$ctrl.datetime | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
+    <span am-time-ago="::$ctrl.datetime"></span>
+  </span>
+  <span ng-if="::!$ctrl.datetime">Unknown</span>
+</span>

static/js/directives/ui/time-ago/time-ago.component.ts

@@ -0,0 +1,13 @@
+import { Input, Component } from 'ng-metadata/core';
+
+/**
+ * A component that displays how long ago an event occurred, with associated
+ * tooltip showing the actual time.
+ */
+@Component({
+  selector: 'timeAgo',
+  templateUrl: '/static/js/directives/ui/time-ago/time-ago.component.html'
+})
+export class TimeAgoComponent {
+  @Input('<') public datetime: any;
+}

static/js/quay.module.ts

@@ -37,6 +37,7 @@ import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-tr
 import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard-copy.directive';
 import { CorTabsModule } from './directives/ui/cor-tabs/cor-tabs.module';
 import { TriggerDescriptionComponent } from './directives/ui/trigger-description/trigger-description.component';
+import { TimeAgoComponent } from './directives/ui/time-ago/time-ago.component';
 import { MarkdownModule } from './directives/ui/markdown/markdown.module';
 import * as Clipboard from 'clipboard';
 
@@ -79,6 +80,7 @@ import * as Clipboard from 'clipboard';
     ExpirationStatusViewComponent,
     ClipboardCopyDirective,
     TriggerDescriptionComponent,
+    TimeAgoComponent,
   ],
   providers: [
     ViewArrayImpl,