[WIP] display image signature information

images.js

@@ -167,7 +167,8 @@ angular.module('registryUI.images', [
 .directive('registryImageBody', [
     'imageLayers',
     'imageDockerConfig',
-    function(imageLayers, imageDockerConfig) {
+    'imageSignatures',
+    function(imageLayers, imageDockerConfig, imageSignatures) {
         return {
             restrict: 'E',
             scope: {
@@ -180,6 +181,7 @@ angular.module('registryUI.images', [
                     scope.layers = imageLayers(image);
                     scope.config = imageDockerConfig(image);
                     scope.labels = scope.config.Labels;
+                    scope.signatures = imageSignatures(image);
                     if (angular.equals({ }, scope.labels))
                         scope.labels = null;
                 });
@@ -234,6 +236,37 @@ angular.module('registryUI.images', [
     }
 ])
 
+.directive('registryImageSignatures', [
+    'imageSignatures',
+    function(imageSignatures) {
+        return {
+            restrict: 'E',
+            scope: {
+                image: '=',
+            },
+            templateUrl: 'registry-image-widgets/views/image-signatures.html',
+            link: function(scope, element, attrs) {
+                scope.signatureDetails = function signatureDetails(signature) {
+                    var result = "";
+                    if (signature.conditions) {
+                        var condition = signature.conditions.find(function (condition) {
+                            return condition.type === "Trusted";
+                        });
+                        if (condition !== undefined) {
+                            result = condition.reason + " / " + condition.message;
+                        }
+                    }
+                    return result;
+                };
+
+                scope.$watch("image", function(image) {
+                    scope.signatures = imageSignatures(image);
+                });
+            }
+        };
+    }
+])
+
 .directive('registryImageMeta', [
     'imageDockerConfig',
     function(imageDockerConfig) {
@@ -312,18 +345,85 @@ angular.module('registryUI.images', [
     }
 ])
 
+.factory('imageSignatures', [
+    'WeakMap',
+    function(WeakMap) {
+        var weak = new WeakMap();
+
+        return function(image) {
+            if (!image)
+                return [];
+            var signatures = weak.get(image);
+
+
+            var signatureStatus = function(signature) {
+                var trusted = "Unverified";
+                if (signature.conditions) {
+                    var condition = signature.conditions.find(function (condition) {
+                        return condition.type === "Trusted";
+                    });
+                    if (condition !== undefined) {
+                        trusted = "Verified";
+                    } else {
+                        // Failed info not available
+                        // https://github.com/openshift/origin/issues/16301
+                        trusted = "Failed verification";
+                    }
+                }
+                return trusted;
+            };
+
+            if (!signatures && image.signatures) {
+                signatures = [];
+                image.signatures.forEach(function(signature) {
+                    signature.verified = signatureStatus(signature);
+                    signatures.push(signature);
+                });
+                weak.set(image, signatures);
+            }
+
+            return signatures || [];
+        };
+    }
+])
+
 .factory('registryImageListingFunc', [
     'imagestreamTags',
     'imagestreamTagFromName',
+    'imageSignatures',
     '$location',
-    function(imagestreamTags, imagestreamTagFromName, $location) {
+    function(imagestreamTags, imagestreamTagFromName, imageSignatures, $location) {
         return function(scope, element, attrs) {
             scope.imagestreamTags = imagestreamTags;
             scope.imagestreamPath = scope.imagestreamFunc();
             scope.imageByTag = scope.imageByTagFunc();
             scope.imageTagNames = scope.imageTagNamesFunc();
             scope.sharedImages = scope.sharedImagesFunc();
             scope.imagestreamTagFromName = imagestreamTagFromName;
+            scope.imageSignatures = imageSignatures;
+
+            scope.overallVerification = function overallVerification(tag) {
+                var image, signature, signatures;
+                var overall = "Unverified";
+
+                image = scope.imageByTag(tag.status);
+                signatures = scope.imageSignatures(image);
+
+                if (signatures.length === 0) {
+                    return "Unsigned";
+                } else {
+                    signatures.forEach(function(signature) {
+                        var status = signature.verified;
+                        if (status === "Failed verification" || overall === "Failed verification" || overall === undefined) {
+                            overall = status;
+                        } else if (status !== "Failed verification") {
+                            overall = status;
+                        }
+                    });
+                }
+
+                return overall;
+            };
 
             /* Called when someone clicks on a row */
             scope.imagestreamActivate = function imagestreamActivate(imagestream, tag, ev) {
@@ -410,7 +510,8 @@ angular.module('registryUI.images', [
 .directive('registryImagePanel', [
     'imageDockerConfig',
     'imageLayers',
-    function(imageDockerConfig, imageLayers) {
+    'imageSignatures',
+    function(imageDockerConfig, imageLayers, imageSignatures) {
         return {
             restrict: 'E',
             transclude: true,
@@ -435,6 +536,7 @@ angular.module('registryUI.images', [
                         scope.layers = imageLayers(scope.image);
                         scope.config = imageDockerConfig(scope.image);
                         scope.labels = scope.config.Labels;
+                        scope.signatures = imageSignatures(scope.image);
                         if (scope.imageTagNames)
                             scope.names = scope.imageTagNames(scope.image);
                     }

images.less

@@ -113,6 +113,10 @@ registry-image-listing table.listing-ct {
         }
     }
 
+    td.image-signature {
+        margin-right: 5px;
+    }
+
     tbody.open .listing-ct-panel .listing-ct-body {
         border-right: 1px solid #ccc;
     }

views/image-body.html

@@ -24,7 +24,6 @@
     <dt ng-if-start="config.Image" translate>Identifier</dt>
     <dd class="indentifier" ng-if-end><tt>{{ config.Image }}</tt></dd>
 </dl>
-
 <dl class="registry-image-tags" ng-if="names">
     <dt translate>Tags</dt>
     <dd><span class="registry-image-tag" ng-repeat="name in names">{{name}}</span>&nbsp;</dd>

views/image-listing.html

@@ -5,6 +5,7 @@
             <th translate="yes" width="20%">Tag</th>
             <th translate="yes">From</th>
             <th translate="yes">Identifier</th>
+            <th translate="yes">Signatures</th>
             <th translate="yes">Last Updated</th>
         </tr>
     </thead>
@@ -54,6 +55,17 @@
                     </div>
                 </div>
             </td>
+            <td class="image-signature">
+              <div>
+                <span class="pficon pficon-ok"
+                      ng-if="overallVerification(tag) == 'Verified'"></span>
+                <span class="pficon pficon-error-circle-o"
+                      ng-if="overallVerification(tag) == 'Failed verification'"></span>
+                <span class="pficon pficon-warning-triangle-o"
+                      ng-if="overallVerification(tag) === 'Unverified'"></span>
+                <span translate="yes">{{ overallVerification(tag) }}</span>
+              </div>
+            </td>
             <td>
                 <div title="{{ tag.items[0].created }}">
                     <span ng-if="tag.status.items.length &amp;&amp; tag.status.items[0].image" title="{{ tag.items[0].created }}">
@@ -63,15 +75,15 @@
             </td>
         </tr>
         <tr class="listing-ct-panel" ng-if="imagestreamExpanded(imagestream, tag)" ng-repeat-end="">
-            <td colspan="5">
+            <td colspan="6">
                 <registry-image-panel ng-init="tag = tag.status"></registry-image-panel>
             </td>
         </tr>
     </tbody>
     <thead class="listing-ct-empty" ng-if="!quiet">
         <tr>
-            <td colspan="5" ng-if="!failure && !imagestreamTags(imagestream).length" translate="yes">No tags are present.</td>
-            <td colspan="5" ng-if="failure">{{failure}}</td>
+            <td colspan="6" ng-if="!failure && !imagestreamTags(imagestream).length" translate="yes">No tags are present.</td>
+            <td colspan="6" ng-if="failure">{{failure}}</td>
         </tr>
     </thead>
 </table>

views/image-panel.html

@@ -14,6 +14,9 @@
             <li ng-class="{active: tab('meta')}">
                 <a ng-click="tab('meta', $event)" translate>Metadata</a>
             </li>
+            <li ng-class="{active: tab('signatures')}">
+                <a ng-click="tab('signatures', $event)" translate>Signatures</a>
+            </li>
         </ul>
     </div>
 
@@ -35,4 +38,9 @@
         <registry-image-layers image="image" layers="layers">
         </registry-image-layers>
     </div>
+
+    <div class="listing-ct-body" ng-show="tab('signatures')">
+        <registry-image-signatures image="image">
+        </registry-image-signatures>
+    </div>
 </div>

views/image-signatures.html

@@ -0,0 +1,21 @@
+<div class="row" ng-repeat="signature in signatures">
+  <dt translate><b>Signature</b></dt>
+  <dd>{{ signature.metadata.name }}</dd>
+  <dt translate>Verified</dt>
+  <dd>
+    <span class="pficon pficon-ok" style="margin-right: 5px;"
+          ng-if="signature.verified == 'Verified'"></span>
+    <span class="pficon pficon-error-circle-o" style="margin-right: 5px;"
+          ng-if="signature.verified == 'Failed verification'"></span>
+    <span class="pficon pficon-warning-triangle-o" style="margin-right: 5px;"
+          ng-if="signature.verified === 'Unverified'"></span>
+    <span translate="yes">{{ signature.verified }}</span>
+  </dd>
+  <span ng-if="signature.verified == 'Verified'">
+    <dt translate>Details</dt>
+    <dd>{{signatureDetails(signature)}}</dd>
+  </span>
+</div>
+<div class="row" ng-if="signatures.length == 0">
+  <span translate>No signatures</span>
+</div>

views/imagestream-listing.html

@@ -33,15 +33,15 @@
             </td>
         </tr>
         <tr class="listing-ct-panel" ng-if="imagestreamExpanded(imagestream)">
-            <td colspan="4">
+            <td colspan="5">
                 <registry-imagestream-panel></registry-imagestream-panel>
             </td>
         </tr>
     </tbody>
     <thead class="listing-ct-empty" ng-if="!quiet">
         <tr>
-            <td colspan="4" ng-if="!failure && (!imagestreams || !imagestreams.length)" translate="yes">No image streams are present.</td>
-            <td colspan="4" ng-if="failure">{{failure}}</td>
+            <td colspan="5" ng-if="!failure && (!imagestreams || !imagestreams.length)" translate="yes">No image streams are present.</td>
+            <td colspan="5" ng-if="failure">{{failure}}</td>
         </tr>
     </thead>
 </table>

webpack.config.js

@@ -24,6 +24,7 @@ module.exports = {
             srcdir + "views/image-config.html",
             srcdir + "views/image-meta.html",
             srcdir + "views/image-layers.html",
+            srcdir + "views/image-signatures.html",
             srcdir + "views/image-panel.html",
             srcdir + "views/image-pull.html",
             srcdir + "views/image-listing.html",