Merge pull request #3341 from quay/lazy-load-manifests

Switch loading of the manifest contents to be lazy

endpoints/api/tag.py

@@ -39,11 +39,6 @@ def _tag_dict(tag):
     tag_info['manifest_digest'] = tag.manifest_digest
 
     if tag.manifest:
-      try:
-        tag_info['manifest'] = json.loads(tag.manifest.internal_manifest_bytes.as_unicode())
-      except (TypeError, ValueError):
-        pass
-
       tag_info['is_manifest_list'] = tag.manifest.is_manifest_list
 
       if 'size' not in tag_info:

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

@@ -261,8 +261,14 @@
     </tr>
 
     <!-- Manifest List Expanded View -->
+    <tr class="manifest-list-view" ng-if="expandedView && tag.is_manifest_list && !tag.manifest_list">
+      <td colspan="{{5 + (repository.trust_enabled ? 1 : 0) + (Features.SECURITY_SCANNER ? 1 : 0) }}">
+        <div class="cor-loader"></div>
+      </td>
+    </tr>
+
     <tr class="manifest-list-view" ng-repeat="manifest in manifestsOf(tag)"
-        ng-if="expandedView && tag.is_manifest_list">
+        ng-if="expandedView && tag.is_manifest_list && tag.manifest_list">
       <td class="checkbox-col"></td>
       <td colspan="2">
         <i class="manifest-list-manifest-icon fa fa-{{ manifest.os }}"></i>

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

@@ -436,14 +436,37 @@ angular.module('quay').directive('repoPanelTags', function () {
         delete $scope.labelCache[manifest_digest];
       };
 
+      $scope.loadManifestList = function(tag) {
+        if (tag.manifest_list_loading) {
+          return;
+        }
+
+        tag.manifest_list_loading = true;
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'manifestref': tag.manifest_digest
+        };
+
+        ApiService.getRepoManifest(null, params).then(function(resp) {
+          tag.manifest_list = JSON.parse(resp['manifest_data']);
+          tag.manifest_list_loading = false;
+        }, ApiService.errorDisplay('Could not load manifest list contents'))
+      };
+
       $scope.manifestsOf = function(tag) {
-        if (!tag.is_manifest_list || !tag.manifest) {
+        if (!tag.is_manifest_list) {
+          return [];
+        }
+
+        if (!tag.manifest_list) {
+          $scope.loadManifestList(tag);
           return [];
         }
 
         if (!tag._mapped_manifests) {
           // Calculate once and cache to avoid angular digest cycles.
-          tag._mapped_manifests = tag.manifest.manifests.map(function(manifest) {
+          tag._mapped_manifests = tag.manifest_list.manifests.map(function(manifest) {
             return {
               'raw': manifest,
               'os': manifest.platform.os,