Abstract out an expiration status view into its own component

static/css/directives/ui/expiration-status-view.css

@@ -0,0 +1,23 @@
+.expiration-status-view-element .expired, .expiration-status-view-element .expired a {
+    color: #D64456;
+}
+
+.expiration-status-view-element .critical, .expiration-status-view-element .critical a {
+    color: #F77454;
+}
+
+.expiration-status-view-element .warning, .expiration-status-view-element .warning a {
+    color: #FCA657;
+}
+
+.expiration-status-view-element .info, .expiration-status-view-element .info a {
+    color: #2FC98E;
+}
+
+.expiration-status-view-element .no-expiration, .expiration-status-view-element .no-expiration a {
+    color: #aaa;
+}
+
+.expiration-status-view-element .fa {
+    margin-right: 6px;
+}

static/css/directives/ui/service-keys-manager.css

@@ -20,30 +20,10 @@
     color: #777;
 }
 
-.service-keys-manager-element .expired a {
-    color: #D64456;
-}
-
-.service-keys-manager-element .critical a {
-    color: #F77454;
-}
-
-.service-keys-manager-element .warning a {
-    color: #FCA657;
-}
-
-.service-keys-manager-element .info a {
-    color: #2FC98E;
-}
-
 .service-keys-manager-element .rotation {
   color: #777;
 }
 
-.service-keys-manager-element .no-expiration {
-    color: #128E72;
-}
-
 .service-keys-manager-element .approval-automatic {
     font-size: 12px;
     color: #777;

static/directives/service-keys-manager.html

@@ -113,21 +113,15 @@
             <span am-time-ago="key.created_date"></span>
           </td>
           <td>
-            <span class="rotation" bo-if="key.expiration_date && getExpirationInfo(key).willRotate">
+            <span class="rotation" bo-if="key.expiration_date && willRotate(key)">
                 <i class="fa" ng-class="getExpirationInfo(key).icon"></i>
                 Automatically rotated <span am-time-ago="getRotationDate(key)"></span>
             </span>
-            <span bo-if="key.expiration_date && !getExpirationInfo(key).willRotate">
+            <span bo-if="!willRotate(key)">
-              <span ng-class="getExpirationInfo(key).className">
               <a ng-click="showChangeExpiration(key)">
-                  <i class="fa" ng-class="getExpirationInfo(key).icon"></i>
+                <expiration-status-view expiration-date="key.expiration_date"></expiration-status-view>
-                  Expire<span bo-if="getExpirationInfo(key).className != 'expired'">s</span><span bo-if="getExpirationInfo(key).className == 'expired'">d</span> <span am-time-ago="key.expiration_date"></span>
               </a>
             </span>
-            </span>
-            <span class="no-expiration" bo-if="!key.expiration_date">
-              <i class="fa fa-check"></i> Does not expire
-            </span>
           </td>
           <td>
             <span class="approval-automatic" bo-if="key.approval && key.approval.approval_type == 'ServiceKeyApprovalType.AUTOMATIC'">

static/js/directives/ui/expiration-status-view/expiration-status-view.component.html

@@ -0,0 +1,10 @@
+<span class="expiration-status-view-element">
+  <span ng-if="::$ctrl.expirationDate" ng-class="::$ctrl.getExpirationInfo($ctrl.expirationDate).className" data-title="{{ $ctrl.expirationDate | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
+      <i class="fa" ng-class="::$ctrl.getExpirationInfo($ctrl.expirationDate).icon"></i>
+      <span am-time-ago="$ctrl.expirationDate"></span>
+    </a>
+  </span>
+  <span class="no-expiration" ng-if="::!$ctrl.expirationDate">
+    Never
+  </span>
+</span>

static/js/directives/ui/expiration-status-view/expiration-status-view.component.ts

@@ -0,0 +1,34 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+import * as moment from "moment";
+
+/**
+ * A component that displays expiration status.
+ */
+@Component({
+  selector: 'expiration-status-view',
+  templateUrl: '/static/js/directives/ui/expiration-status-view/expiration-status-view.component.html',
+})
+export class ExpirationStatusViewComponent {
+  @Input('<') public expirationDate: Date;
+
+  private getExpirationInfo(expirationDate): any {
+    if (!expirationDate) {
+      return '';
+    }
+
+    var expiration_date = moment(expirationDate);
+    if (moment().isAfter(expiration_date)) {
+      return {'className': 'expired', 'icon': 'fa-warning'};
+    }
+
+    if (moment().add(1, 'week').isAfter(expiration_date)) {
+      return {'className': 'critical', 'icon': 'fa-warning'};
+    }
+
+    if (moment().add(1, 'month').isAfter(expiration_date)) {
+      return {'className': 'warning', 'icon': 'fa-warning'};
+    }
+
+    return {'className': 'info', 'icon': 'fa-clock-o'};
+  }
+}

static/js/directives/ui/service-keys-manager.js

@@ -80,32 +80,19 @@ angular.module('quay').directive('serviceKeysManager', function () {
         return moment(key.created_date).add(key.rotation_duration, 's').format('LLL');
       };
 
-      $scope.getExpirationInfo = function(key) {
+      $scope.willRotate = function(key) {
         if (!key.expiration_date) {
-          return '';
+          return false;
         }
 
         if (key.rotation_duration) {
           var rotate_date = moment(key.created_date).add(key.rotation_duration, 's')
           if (moment().isBefore(rotate_date)) {
-            return {'className': 'rotation', 'icon': 'fa-refresh', 'willRotate': true};
+            return true;
           }
         }
 
-        expiration_date = moment(key.expiration_date);
+        return false;
-        if (moment().isAfter(expiration_date)) {
-          return {'className': 'expired', 'icon': 'fa-warning'};
-        }
-
-        if (moment().add(1, 'week').isAfter(expiration_date)) {
-          return {'className': 'critical', 'icon': 'fa-warning'};
-        }
-
-        if (moment().add(1, 'month').isAfter(expiration_date)) {
-          return {'className': 'warning', 'icon': 'fa-warning'};
-        }
-
-        return {'className': 'info', 'icon': 'fa-check'};
       };
 
       $scope.showChangeName = function(key) {

static/js/quay.module.ts

@@ -31,6 +31,7 @@ import { MarkdownToolbarComponent } from './directives/ui/markdown/markdown-tool
 import { MarkdownEditorComponent } from './directives/ui/markdown/markdown-editor.component';
 import { DockerfileCommandComponent } from './directives/ui/dockerfile-command/dockerfile-command.component';
 import { ImageCommandComponent } from './directives/ui/image-command/image-command.component';
+import { ExpirationStatusViewComponent } from './directives/ui/expiration-status-view/expiration-status-view.component';
 import { BrowserPlatform, browserPlatform } from './constants/platform.constant';
 import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-trigger.component';
 import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard-copy.directive';
@@ -74,6 +75,7 @@ import * as Clipboard from 'clipboard';
     ImageCommandComponent,
     TypeaheadDirective,
     ManageTriggerComponent,
+    ExpirationStatusViewComponent,
     ClipboardCopyDirective,
     TriggerDescriptionComponent,
   ],