Add basic signing UI to repo tags view

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

@@ -39,9 +39,26 @@ angular.module('quay').directive('repoPanelTags', function () {
       $scope.labelCache = {};
 
       $scope.imageVulnerabilities = {};
+      $scope.repoSignatureInfo = null;
+
       $scope.defcon1 = {};
       $scope.hasDefcon1 = false;
 
+      var loadRepoSignatures = function() {
+        $scope.repoSignatureError = false;
+        $scope.repoSignatureInfo = null;
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        ApiService.getRepoSignatures(null, params).then(function(resp) {
+          $scope.repoSignatureInfo = resp;
+        }, function() {
+          $scope.repoSignatureInfo = {'error': true};
+        });
+      };
+
       var setTagState = function() {
         if (!$scope.repository || !$scope.selectedTags) { return; }
 
@@ -190,6 +207,7 @@ angular.module('quay').directive('repoPanelTags', function () {
 
         // Process each of the tags.
         setTagState();
+        loadRepoSignatures();
       });
 
       $scope.loadImageVulnerabilities = function(image_id, imageData) {
@@ -244,7 +262,7 @@ angular.module('quay').directive('repoPanelTags', function () {
 
       $scope.getImageVulnerabilities = function(image_id) {
         if (!$scope.repository) {
-          return
+          return;
         }
 
         if (!$scope.imageVulnerabilities[image_id]) {

static/js/directives/ui/tag-signing-display/tag-signing-display.component.html

@@ -0,0 +1,49 @@
+<span class="tag-signing-display-element">
+ <span ng-switch on="$ctrl.signingStatus($ctrl.tag, $ctrl.signatures)">
+  <!-- Loading -->
+  <span ng-switch-when="loading">
+    <span class="cor-loader-inline"></span>
+  </span>
+
+  <!-- Error -->
+  <span class="signing-load-error" ng-switch-when="error"
+        data-title="Could not load signing information" bs-tooltip>
+    <i class="fa fa-question-circle"></i>
+  </span>
+
+  <!-- Not Signed -->
+  <span class="signing-not-signed" ng-switch-when="not-signed"
+        data-title="This tag has not been signed" bs-tooltip>
+    <i class="fa shield-icon ci-shield-none"></i>
+  </span>
+
+  <!-- Signature Valid -->
+  <span class="signing-valid" ng-switch-when="valid-signature">
+    <span ng-switch on="$ctrl.expirationStatus($ctrl.tag, $ctrl.signatures)">
+      <!-- But expired -->
+      <span class="expired" ng-switch-when="expired"
+            data-title="This tag has a matching, but expired signature" bs-tooltip>
+        <i class="fa shield-icon ci-shield-invalid-outline"></i>
+      </span>
+
+      <!-- Expires soon -->
+      <span class="expires-soon" ng-switch-when="expires-soon"
+            data-title="This tag has a valid and matching signature, but it is expiring soon on {{ $ctrl.signatures.expiration }}" bs-tooltip>
+        <i class="fa shield-icon ci-shield-check-outline"></i>
+      </span>
+
+      <!-- Okay -->
+      <span class="okay" ng-switch-when="okay"
+            data-title="This tag has a valid and matching signature" bs-tooltip>
+        <i class="fa shield-icon ci-shield-check-outline"></i>
+      </span>
+    </span>
+  </span>
+
+  <!-- Signature Invalid -->
+  <span class="signing-invalid" ng-switch-when="invalid-signature"
+        data-title="The signed digest for this tag does not match the one pushed.<br><br>Signed: {{ this.signedDigest.substr(0, 12) }}<br>Pushed: {{ this.pushedDigest.substr(0, 12) }}" data-html="true" bs-tooltip>
+    <i class="fa shield-icon ci-shield-invalid-outline"></i>
+  </span>
+ </span>
+</span>

static/js/directives/ui/tag-signing-display/tag-signing-display.component.ts

@@ -0,0 +1,98 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+import * as moment from "moment";
+
+interface ApostilleSignatureDocument {
+  // When the signed document expires.
+  expiration: string
+
+  // Object of information for each tag.
+  tags: {string: ApostilleTagDocument}
+
+  // If true, an error occurred while trying to load this document.
+  error: boolean
+}
+
+interface ApostilleTagDocument {
+  // The length of the document.
+  length: number
+
+  // The hashes for the tag.
+  hashes: {string: string}
+}
+
+/**
+ * A component that displays the signing status of a tag in the repository view.
+ */
+@Component({
+  selector: 'tag-signing-display',
+  templateUrl: '/static/js/directives/ui/tag-signing-display/tag-signing-display.component.html',
+})
+export class TagSigningDisplayComponent {
+  @Input('<') public tag: any;
+  @Input('=') public signatures: ApostilleSignatureDocument;
+
+  private signedDigest: string;
+  private pushedDigest: string;
+
+  constructor (@Inject("$sanitize") private $sanitize: ng.sanitize.ISanitizeService) {
+
+  }
+
+  private base64ToHex(base64String: string): string {
+    // Based on: http://stackoverflow.com/questions/39460182/decode-base64-to-hexadecimal-string-with-javascript
+    var raw = atob(base64String);
+    var hexString = '';
+    for (var i = 0; i < raw.length; ++i) {
+      var char = raw.charCodeAt(i);
+      var hex = char.toString(16)
+      hexString += (hex.length == 2 ? hex : '0' + hex);
+    }
+    return hexString;
+  }
+
+  private expirationStatus(tag: any, signatures: ApostilleSignatureDocument): string {
+    if (!signatures || !signatures.expiration) {
+      return 'unknown';
+    }
+
+    var expires = moment(signatures.expiration);
+    var now = moment();
+
+    if (expires.isSameOrBefore(now)) {
+      return 'expired';
+    }
+
+    var withOneWeek = moment().add('1', 'w');
+    if (expires.isSameOrBefore(withOneWeek)) {
+      return 'expires-soon';
+    }
+
+    return 'okay';
+  }
+
+  private signingStatus(tag: any, signatures: ApostilleSignatureDocument): string {
+    if (!tag || !signatures) {
+      return 'loading';
+    }
+
+    if (signatures.error || !signatures.tags) {
+      return 'error';
+    }
+
+    var tag_info = signatures.tags[tag.name];
+    if (!tag_info || !tag.manifest_digest) {
+      return 'not-signed';
+    }
+
+    var digest_without_prefix = tag.manifest_digest.substr('sha256:'.length);
+    var hex_signature = this.base64ToHex(tag_info.hashes['sha256']);
+
+    if (hex_signature == digest_without_prefix) {
+      return 'valid-signature';
+    } else {
+      this.signedDigest = this.$sanitize(hex_signature);
+      this.pushedDigest = this.$sanitize(digest_without_prefix);
+      return 'invaid-signature';
+    }
+  }
+}

static/js/quay.module.ts

@@ -14,6 +14,7 @@ import { VisibilityIndicatorComponent } from './directives/ui/visibility-indicat
 import { CorTableComponent } from './directives/ui/cor-table/cor-table.component';
 import { CorTableColumn } from './directives/ui/cor-table/cor-table-col.component';
 import { ChannelIconComponent } from './directives/ui/channel-icon/channel-icon.component';
+import { TagSigningDisplayComponent } from './directives/ui/tag-signing-display/tag-signing-display.component';
 import { BuildServiceImpl } from './services/build/build.service.impl';
 import { AvatarServiceImpl } from './services/avatar/avatar.service.impl';
 import { DockerfileServiceImpl } from './services/dockerfile/dockerfile.service.impl';
@@ -44,6 +45,7 @@ import { QuayRequireDirective } from './directives/structural/quay-require/quay-
     CorTableColumn,
     ChannelIconComponent,
     QuayRequireDirective,
+    TagSigningDisplayComponent,
   ],
   providers: [
     ViewArrayImpl,