Switch from an image view UI to a manifest view UI

We no longer allow viewing individual images, but instead only manifests. This will help with the transition to Clair V3 (which is manifest based) and, eventually, the the new data model (which will also be manifest based)

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

@@ -262,6 +262,10 @@ angular.module('quay').directive('repoPanelTags', function () {
       };
 
       $scope.getTagVulnerabilities = function(tag) {
+        if (!tag.manifest_digest) {
+          return 'nodigest';
+        }
+
         return $scope.getImageVulnerabilities(tag.image_id);
       };
 

static/js/directives/ui/manifest-feature-view.js

@@ -1,16 +1,16 @@
 /**
- * An element which displays the features of an image.
+ * An element which displays the features of a manifest.
  */
-angular.module('quay').directive('imageFeatureView', function () {
+angular.module('quay').directive('manifestFeatureView', function () {
   var directiveDefinitionObject = {
     priority: 0,
-    templateUrl: '/static/directives/image-feature-view.html',
+    templateUrl: '/static/directives/manifest-feature-view.html',
     replace: false,
     transclude: true,
     restrict: 'C',
     scope: {
       'repository': '=repository',
-      'image': '=image',
+      'manifest': '=manifest',
       'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, Config, ApiService, VulnerabilityService, ViewArray, TableService) {
@@ -64,15 +64,15 @@ angular.module('quay').directive('imageFeatureView', function () {
         });
       };
 
-      var loadImageVulnerabilities = function() {
+      var loadManifestVulnerabilities = function() {
         if ($scope.loading) {
           return;
         }
 
         $scope.loading = true;
-        VulnerabilityService.loadImageVulnerabilities($scope.repository, $scope.image.id, function(resp) {
+        VulnerabilityService.loadManifestVulnerabilities($scope.repository, $scope.manifest.digest, function(resp) {
           $scope.securityStatus = resp.status;
-          $scope.featuresInfo = VulnerabilityService.buildFeaturesInfo($scope.image, resp);
+          $scope.featuresInfo = VulnerabilityService.buildFeaturesInfo($scope.manifest.image, resp);
 
           buildOrderedFeatures();
           buildChart();
@@ -87,20 +87,20 @@ angular.module('quay').directive('imageFeatureView', function () {
       $scope.$watch('options.filter', buildOrderedFeatures);
 
       $scope.$watch('repository', function(repository) {
-        if ($scope.isEnabled && $scope.repository && $scope.image) {
-          loadImageVulnerabilities();
+        if ($scope.isEnabled && $scope.repository && $scope.manifest) {
+          loadManifestVulnerabilities();
         }
       });
 
-      $scope.$watch('image', function(image) {
-        if ($scope.isEnabled && $scope.repository && $scope.image) {
-          loadImageVulnerabilities();
+      $scope.$watch('manifest', function(manifest) {
+        if ($scope.isEnabled && $scope.repository && $scope.manifest) {
+          loadManifestVulnerabilities();
         }
       });
 
       $scope.$watch('isEnabled', function(isEnabled) {
-        if ($scope.isEnabled && $scope.repository && $scope.image) {
-          loadImageVulnerabilities();
+        if ($scope.isEnabled && $scope.repository && $scope.manifest) {
+          loadManifestVulnerabilities();
         }
       });
     }

static/js/directives/ui/manifest-link/manifest-link.component.html

@@ -1,22 +1,22 @@
 <span class="manifest-link">
-    <span class="id-label" ng-if="!$ctrl.hasSHA256($ctrl.manifestDigest)"
+    <span class="id-label" ng-if="::!$ctrl.hasSHA256($ctrl.manifestDigest)"
             data-title="The Docker V1 ID for this image. This ID is not content addressable nor is it stable across pulls."
             data-container="body"
             ng-click="$ctrl.showCopyBox()"
             bs-tooltip>V1ID</span>
 
-    <span class="id-label cas" ng-if="$ctrl.hasSHA256($ctrl.manifestDigest)"
+    <span class="id-label cas" ng-if="::$ctrl.hasSHA256($ctrl.manifestDigest)"
             data-title="The content-addressable SHA256 hash of this tag."
             data-container="body"
             ng-click="$ctrl.showCopyBox()"
             bs-tooltip>SHA256</span>
 
-    <a bo-href-i="/repository/{{ $ctrl.repository.namespace }}/{{ $ctrl.repository.name }}/image/{{ $ctrl.imageId }}"
-        class="image-link-element" bindonce>
-        <span ng-if="!$ctrl.hasSHA256($ctrl.manifestDigest)">{{ $ctrl.imageId.substr(0, 12) }}</span>
-        <span ng-if="$ctrl.hasSHA256($ctrl.manifestDigest)">{{ $ctrl.getShortDigest($ctrl.manifestDigest) }}</span>
+    <a ng-href="/repository/{{ ::$ctrl.repository.namespace }}/{{ ::$ctrl.repository.name }}/manifest/{{ ::$ctrl.manifestDigest }}">
+      {{ $ctrl.getShortDigest($ctrl.manifestDigest) }}
     </a>
 
+    <span ng-if="::!$ctrl.hasSHA256($ctrl.manifestDigest)">{{ ::$ctrl.imageId.substr(0, 12) }}</span>
+
     <div class="modal fade co-dialog" ng-if="$ctrl.showingCopyBox">
         <div class="modal-dialog">
         <div class="modal-content">

static/js/directives/ui/manifest-link/manifest-link.component.ts

@@ -25,6 +25,7 @@ export class ManifestLinkComponent {
   }
 
   private getShortDigest(digest: string) {
+    if (!digest) { return ''; }
     return digest.substr('sha256:'.length).substr(0, 12);
   }
 

static/js/directives/ui/manifest-vulnerability-view.js

@@ -1,16 +1,16 @@
 /**
- * An element which displays the vulnerabilities in an image.
+ * An element which displays the vulnerabilities in a manifest.
  */
-angular.module('quay').directive('imageVulnerabilityView', function () {
+angular.module('quay').directive('manifestVulnerabilityView', function () {
   var directiveDefinitionObject = {
     priority: 0,
-    templateUrl: '/static/directives/image-vulnerability-view.html',
+    templateUrl: '/static/directives/manifest-vulnerability-view.html',
     replace: false,
     transclude: true,
     restrict: 'C',
     scope: {
       'repository': '=repository',
-      'image': '=image',
+      'manifest': '=manifest',
       'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, $routeParams, Config, ApiService, VulnerabilityService, ViewArray, TableService) {
@@ -100,15 +100,15 @@ angular.module('quay').directive('imageVulnerabilityView', function () {
         });
       };
 
-      var loadImageVulnerabilities = function() {
+      var loadManifestVulnerabilities = function() {
         if ($scope.loading) {
           return;
         }
 
         $scope.loading = true;
-        VulnerabilityService.loadImageVulnerabilities($scope.repository, $scope.image.id, function(resp) {
+        VulnerabilityService.loadManifestVulnerabilities($scope.repository, $scope.manifest.digest, function(resp) {
           $scope.securityStatus = resp.status;
-          $scope.vulnerabilitiesInfo = VulnerabilityService.buildVulnerabilitiesInfo($scope.image, resp);
+          $scope.vulnerabilitiesInfo = VulnerabilityService.buildVulnerabilitiesInfo($scope.manifest.image, resp);
 
           buildOrderedVulnerabilities();
           buildChart();
@@ -124,20 +124,20 @@ angular.module('quay').directive('imageVulnerabilityView', function () {
       $scope.$watch('options.fixableVulns', buildOrderedVulnerabilities);
 
       $scope.$watch('repository', function(repository) {
-        if ($scope.isEnabled && $scope.repository && $scope.image) {
-          loadImageVulnerabilities();
+        if ($scope.isEnabled && $scope.repository && $scope.manifest) {
+          loadManifestVulnerabilities();
         }
       });
 
-      $scope.$watch('image', function(image) {
-        if ($scope.isEnabled && $scope.repository && $scope.image) {
-          loadImageVulnerabilities();
+      $scope.$watch('manifest', function(manifest) {
+        if ($scope.isEnabled && $scope.repository && $scope.manifest) {
+          loadManifestVulnerabilities();
         }
       });
 
       $scope.$watch('isEnabled', function(isEnabled) {
-        if ($scope.isEnabled && $scope.repository && $scope.image) {
-          loadImageVulnerabilities();
+        if ($scope.isEnabled && $scope.repository && $scope.manifest) {
+          loadManifestVulnerabilities();
         }
       });
     }

static/js/pages/image-view.js

@@ -1,69 +0,0 @@
-(function() {
-  /**
-   * Page to view the details of a single image.
-   */
-  angular.module('quayPages').config(['pages', function(pages) {
-    pages.create('image-view', 'image-view.html', ImageViewCtrl, {
-      'newLayout': true,
-      'title': '{{ image.id }}',
-      'description': 'Image {{ image.id }}'
-    })
-  }]);
-
-  function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService, Features, CookieService) {
-    var namespace = $routeParams.namespace;
-    var name = $routeParams.name;
-    var imageid = $routeParams.image;
-
-    $scope.imageSecurityCounter = 0;
-    $scope.imagePackageCounter = 0;
-
-    $scope.options = {
-      'vulnFilter': ''
-    };
-
-    var loadImage = function() {
-      var params = {
-        'repository': namespace + '/' + name,
-        'image_id': imageid
-      };
-
-      $scope.imageResource = ApiService.getImageAsResource(params).get(function(image) {
-        $scope.image = image;
-        $scope.reversedHistory = image.history.reverse();
-      });
-    };
-
-    var loadRepository = function() {
-      var params = {
-        'repository': namespace + '/' + name
-      };
-
-      $scope.repositoryResource = ApiService.getRepoAsResource(params).get(function(repo) {
-        $scope.repository = repo;
-      });
-    };
-
-    loadImage();
-    loadRepository();
-
-    $scope.loadImageSecurity = function() {
-      if (!Features.SECURITY_SCANNER) { return; }
-      $scope.imageSecurityCounter++;
-    };
-
-    $scope.loadImagePackages = function() {
-      if (!Features.SECURITY_SCANNER) { return; }
-      $scope.imagePackageCounter++;
-    };
-
-    $scope.initializeTree = function() {
-      if ($scope.tree || !$scope.combinedChanges.length) { return; }
-
-      $scope.tree = new ImageFileChangeTree($scope.image, $scope.combinedChanges);
-      $timeout(function() {
-        $scope.tree.draw('changes-tree-container');
-      }, 100);
-    };
-  }
-})();

static/js/pages/manifest-view.js

@@ -0,0 +1,60 @@
+(function() {
+  /**
+   * Page to view the details of a single manifest.
+   */
+  angular.module('quayPages').config(['pages', function(pages) {
+    pages.create('manifest-view', 'manifest-view.html', ManifestViewCtrl, {
+      'newLayout': true,
+      'title': '{{ manifest_digest }}',
+      'description': 'Manifest {{ manifest_digest }}'
+    })
+  }]);
+
+  function ManifestViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService, Features, CookieService) {
+    var namespace = $routeParams.namespace;
+    var name = $routeParams.name;
+    var manifest_digest = $routeParams.manifest_digest;
+
+    $scope.manifestSecurityCounter = 0;
+    $scope.manifestPackageCounter = 0;
+
+    $scope.options = {
+      'vulnFilter': ''
+    };
+
+    var loadManifest = function() {
+      var params = {
+        'repository': namespace + '/' + name,
+        'manifestref': manifest_digest
+      };
+
+      $scope.manifestResource = ApiService.getRepoManifestAsResource(params).get(function(manifest) {
+        $scope.manifest = manifest;
+        $scope.reversedHistory = manifest.image.history.reverse();
+      });
+    };
+
+    var loadRepository = function() {
+      var params = {
+        'repository': namespace + '/' + name
+      };
+
+      $scope.repositoryResource = ApiService.getRepoAsResource(params).get(function(repo) {
+        $scope.repository = repo;
+      });
+    };
+
+    loadManifest();
+    loadRepository();
+
+    $scope.loadManifestSecurity = function() {
+      if (!Features.SECURITY_SCANNER) { return; }
+      $scope.manifestSecurityCounter++;
+    };
+
+    $scope.loadManifestPackages = function() {
+      if (!Features.SECURITY_SCANNER) { return; }
+      $scope.manifestPackageCounter++;
+    };
+  }
+})();

static/js/quay-routes.module.ts

@@ -68,7 +68,7 @@ function provideRoutes($routeProvider: ng.route.IRouteProvider,
     .route('/repository/:namespace/:name/tag/:tag', 'repo-view')
 
     // Image View
-    .route('/repository/:namespace/:name/image/:image', 'image-view')
+    .route('/repository/:namespace/:name/manifest/:manifest_digest', 'manifest-view')
 
     // Repo Build View
     .route('/repository/:namespace/:name/build/:buildid', 'build-view')

static/js/services/vulnerability-service.js

@@ -286,16 +286,6 @@ angular.module('quay').factory('VulnerabilityService', ['Config', 'ApiService',
     }
   };
 
-  vulnService.loadImageVulnerabilitiesAsResource = function(repo, image_id, result) {
-    var params = {
-      'repository': repo.namespace + '/' + repo.name,
-      'imageid': image_id,
-      'vulnerabilities': true,
-    };
-
-    return ApiService.getRepoImageSecurityAsResource(params).get(result);
-  };
-
   vulnService.loadImageVulnerabilities = function(repo, image_id, result, reject) {
     var params = {
       'imageid': image_id,
@@ -306,6 +296,16 @@ angular.module('quay').factory('VulnerabilityService', ['Config', 'ApiService',
     ApiService.getRepoImageSecurity(null, params).then(result, reject);
   };
 
+  vulnService.loadManifestVulnerabilities = function(repo, digest, result, reject) {
+    var params = {
+      'manifestref': digest,
+      'repository': repo.namespace + '/' + repo.name,
+      'vulnerabilities': true,
+    };
+
+    ApiService.getRepoManifestSecurity(null, params).then(result, reject);
+  };
+
   vulnService.hasFeatures = function(resp) {
     return resp.data && resp.data.Layer && resp.data.Layer.Features && resp.data.Layer.Features.length;
   };