Fix manifest UI page to properly show the layers of manifests and show manifest lists

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

@@ -1,27 +1,26 @@
 /**
- * An element which displays a single layer representing an image in the image view.
+ * An element which displays a single layer in the manifest view.
  */
-angular.module('quay').directive('imageViewLayer', function () {
+angular.module('quay').directive('manifestViewLayer', function () {
   var directiveDefinitionObject = {
     priority: 0,
-    templateUrl: '/static/directives/image-view-layer.html',
+    templateUrl: '/static/directives/manifest-view-layer.html',
     replace: false,
     transclude: true,
     restrict: 'C',
     scope: {
       'repository': '=repository',
-      'image': '=image',
-      'images': '=images'
+      'manifest': '=manifest',
+      'layer': '=layer'
     },
     controller: function($scope, $element) {
       $scope.getClass = function() {
-        var index = $.inArray($scope.image, $scope.images);
-        if (index  < 0) {
-          return 'first';
+        if ($scope.layer.index == 0) {
+          return 'last';
         }
 
-        if (index == $scope.images.length - 1) {
-          return 'last';
+        if ($scope.layer.index == $scope.manifest.layers.length - 1) {
+          return 'first';
         }
 
         return '';

static/js/pages/manifest-view.js

@@ -30,7 +30,7 @@
 
       $scope.manifestResource = ApiService.getRepoManifestAsResource(params).get(function(manifest) {
         $scope.manifest = manifest;
-        $scope.reversedHistory = manifest.image.history.reverse();
+        $scope.reversedLayers = manifest.layers ? manifest.layers.reverse() : null;
       });
     };
 
@@ -57,5 +57,30 @@
       if (!Features.SECURITY_SCANNER) { return; }
       $scope.manifestPackageCounter++;
     };
+
+    $scope.manifestsOf = function(manifest) {
+      if (!manifest || !manifest.is_manifest_list) {
+        return [];
+      }
+
+      if (!manifest._mapped_manifests) {
+        // Calculate once and cache to avoid angular digest cycles.
+        var parsed_manifest = JSON.parse(manifest.manifest_data);
+
+        manifest._mapped_manifests = parsed_manifest.manifests.map(function(manifest) {
+          return {
+            'repository': $scope.repository,
+            'raw': manifest,
+            'os': manifest.platform.os,
+            'architecture': manifest.platform.architecture,
+            'size': manifest.size,
+            'digest': manifest.digest,
+            'description': `${manifest.platform.os} on ${manifest.platform.architecture}`,
+          };
+        });
+      }
+
+      return manifest._mapped_manifests;
+    };
   }
 })();