Add UI for viewing and changing the expiration of tags

static/directives/repo-view/repo-panel-tags.html

@@ -57,6 +57,12 @@
             <i class="fa fa-times"></i><span class="text">Delete Tags</span>
           </a>
         </li>
+        <li ng-if="repository.can_write">
+          <a ng-click="askChangeTagsExpiration(checkedTags.checked)"
+             ng-class="repository.tag_operations_disabled ? 'disabled-option' : ''">
+            <i class="fa fa-clock-o"></i><span class="text">Change Tags Expiration</span>
+          </a>
+        </li>
       </ul>
     </div>
    </span>
@@ -105,6 +111,11 @@
         style="width: 80px;">
       <a ng-click="orderBy('size')" data-title="The compressed size of the tag's image" data-container="body" bs-tooltip>Size</a>
     </td>
+    <td class="hidden-sm hidden-xs"
+        ng-class="tablePredicateClass('expiration_date', options.predicate, options.reverse)"
+        style="width: 140px;">
+      <a ng-click="orderBy('expiration_date')" data-title="When the tag expires" data-container="body" bs-tooltip>Expires</a>
+    </td>
     <td class="hidden-xs hidden-sm"
         ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
         style="width: 140px;">
@@ -133,12 +144,16 @@
           ng-if="repository.trust_enabled">
         <tag-signing-display tag="tag" delegations="repoDelegationsInfo" compact="true"></tag-signing-display>
       </td>
+
+      <!-- Last Modified -->
       <td class="hidden-xs">
         <span bo-if="tag.last_modified" data-title="{{ tag.last_modified | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
           <span am-time-ago="tag.last_modified"></span>
         </span>
         <span bo-if="!tag.last_modified">Unknown</span>
       </td>
+
+      <!-- Security scanning -->
       <td quay-require="['SECURITY_SCANNER']" class="security-scan-col hidden-xs">
         <span class="cor-loader-inline" ng-if="getTagVulnerabilities(tag).loading"></span>
         <span class="vuln-load-error" ng-if="getTagVulnerabilities(tag).hasError"
@@ -212,7 +227,20 @@
           </span>
         </span>
       </td>
+
+      <!-- Size -->
       <td class="hidden-sm hidden-xs" bo-text="tag.size | bytes"></td>
+
+      <!-- Expiration -->
+      <td class="hidden-xs hidden-sm">
+        <a ng-click="askChangeTagsExpiration([tag])"
+           ng-if="!repository.tag_operations_disabled && repository.can_write">
+          <expiration-status-view expiration-date="tag.expiration_date"></expiration-status-view>
+        </a>
+        <expiration-status-view expiration-date="tag.expiration_date" ng-if="repository.tag_operations_disabled || !repository.can_write"></expiration-status-view>
+      </td>
+
+      <!-- Image link -->
       <td class="hidden-xs hidden-sm image-id-col">
         <span class="image-link" repository="repository" image-id="tag.image_id" manifest-digest="tag.manifest_digest"></span>
       </td>
@@ -254,6 +282,10 @@
                   ng-class="repository.tag_operations_disabled ? 'disabled-option' : ''">
               <i class="fa fa-times"></i> Delete Tag
             </span>
+            <span class="cor-option" option-click="askChangeTagsExpiration([tag])"
+                  ng-class="repository.tag_operations_disabled ? 'disabled-option' : ''">
+              <i class="fa fa-clock-o"></i> Change Expiration
+            </span>
           </span>
         </span>
       </td>
@@ -261,7 +293,7 @@
     </tr>
     <tr ng-if="expandedView">
       <td class="checkbox-col"></td>
-      <td class="labels-col" colspan="{{5 + (Features.SECURITY_SCANNER ? 1 : 0) + (repository.trust_enabled ? 1 : 0) }}">
+      <td class="labels-col" colspan="{{6 + (Features.SECURITY_SCANNER ? 1 : 0) + (repository.trust_enabled ? 1 : 0) }}">
         <!-- Labels -->
         <div class="manifest-label-list" repository="repository"
              manifest-digest="tag.manifest_digest" cache="labelCache"></div>

static/directives/tag-operations-dialog.html

@@ -111,6 +111,28 @@
     </div>
   </div>
 
+  <!-- Change Tags Expiration -->
+  <div class="cor-confirm-dialog"
+       dialog-context="changeTagsExpirationInfo"
+       dialog-action="changeTagsExpiration(info.tags, info.expiration_date, callback)"
+       dialog-title="Change Tags Expiration"
+       dialog-action-title="Change Expiration">
+    <form class="expiration-form">
+      <label>Tags that will be updated:</label>
+      <ul class="delete-tag-list">
+        <li ng-repeat="tag_info in changeTagsExpirationInfo.tags">
+          <span class="label label-default tag">{{ tag_info.name }}</span>
+        </li>
+      </ul>
+
+      <label style="margin-top: 20px;">Expiration Date:</label>
+      <span class="datetime-picker" datetime="changeTagsExpirationInfo.expiration_date"></span>
+      <span class="co-help-text">
+        If specified, the date and time that the key expires. If set to none, the tag(s) will not expire.
+      </span>
+    </form>
+  </div>
+
   <!-- Delete Tag Confirm -->
   <div class="cor-confirm-dialog"
        dialog-context="deleteTagInfo"