Make images loaded lazily on the repo tags page, as they will not be needed in the read-only (common) case.

2015-05-07 15:51:49 -04:00 · 2015-05-07 15:51:49 -04:00 · 23fafa6b4a
commit 23fafa6b4a
parent 8eb9c376cd
7 changed files with 107 additions and 38 deletions
--- a/static/css/directives/ui/tag-operations-dialog.css
+++ b/static/css/directives/ui/tag-operations-dialog.css
@ -2,3 +2,11 @@
  font-family: Consolas, "Lucida Console", Monaco, monospace;
  font-size: 12px;
 }
+
+.tag-operations-dialog .loader-container {
+  height: 10px;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 10px;
+  position: relative;
+}
--- a/static/directives/repo-view/repo-panel-tags.html
+++ b/static/directives/repo-view/repo-panel-tags.html
@ -1,5 +1,5 @@
 <div class="repo-panel-tags-element">
-  <div class="tab-header-controls" ng-show="images">
+  <div class="tab-header-controls">
    <div class="btn-group btn-group-sm" ng-show="repository.can_write">
      <button class="btn" ng-class="!showingHistory ? 'btn-primary active' : 'btn-default'" ng-click="showHistory(false)">
        <i class="fa fa-tags"></i>Current Tags
@ -17,8 +17,7 @@
      is-enabled="showingHistory" ng-show="showingHistory"></div>

 <!-- Normal View -->
- <div class="resource-view" resource="imagesResource" error-message="'Could not load images'"
-      ng-show="!showingHistory">
+ <div ng-show="!showingHistory">
   <div class="co-check-bar">
     <span class="cor-checkable-menu" controller="checkedTags">
       <div class="cor-checkable-menu-item" item-filter="allTagFilter">
@ -156,7 +155,8 @@
  </div>
 </div>

-<div class="tag-operations-dialog" repository="repository" images="images"
+<div class="tag-operations-dialog" repository="repository"
+     get-images="getImages({'callback': callback})"
     action-handler="tagActionHandler"></div>

 <div class="fetch-tag-dialog" repository="repository" action-handler="fetchTagActionHandler"></div>
--- a/static/directives/tag-operations-dialog.html
+++ b/static/directives/tag-operations-dialog.html
@ -1,4 +1,24 @@
 <div class="tag-operations-dialog-element">
+  <!-- Loading Images Dialog -->
+  <div class="modal fade" id="loadingImagesModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Loading Repository Images</h4>
+        </div>
+        <div class="modal-body">
+          <div class="loader-container">
+            <div class="cor-loader"></div>
+          </div>
+          <div style="text-align: center;">
+            Please wait while we load the repository's full image list
+          </div>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+
+
  <!-- Add Tag Dialog -->
  <div class="modal fade" id="createOrMoveTagModal">
    <div class="modal-dialog">
@ -30,7 +50,7 @@
              <div class="tag-specific-images-view"
                   tag="tagToCreate"
                   repository="repo"
-                   images="images"
+                   images="imagesInternal"
                   image-cutoff="toTagImage"
                   style="margin: 10px; margin-top: 20px; margin-bottom: -10px;"
                   ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
@ -80,7 +100,7 @@
    <span class="label label-default tag">{{ deleteTagInfo.tag }}</span>?

    <div class="tag-specific-images-view" tag="deleteTagInfo.tag" repository="repository"
-         images="images" style="margin-top: 20px">
+         images="imagesInternal" style="margin-top: 20px">
      The following images and any other images not referenced by a tag will be deleted:
    </div>
  </div>
--- a/static/js/directives/repo-view/repo-panel-tags.js
+++ b/static/js/directives/repo-view/repo-panel-tags.js
@ -13,6 +13,8 @@ angular.module('quay').directive('repoPanelTags', function () {
      'selectedTags': '=selectedTags',
      'imagesResource': '=imagesResource',
      'images': '=images',
+
+      'getImages': '&getImages'
    },
    controller: function($scope, $element, $filter, $location, ApiService, UIService) {
      var orderBy = $filter('orderBy');
--- a/static/js/directives/ui/tag-operations-dialog.js
+++ b/static/js/directives/ui/tag-operations-dialog.js
@ -14,10 +14,17 @@ angular.module('quay').directive('tagOperationsDialog', function () {
      'images': '=images',
      'actionHandler': '=actionHandler',

+      'getImages': '&getImages',
      'tagChanged': '&tagChanged'
    },
    controller: function($scope, $element, $timeout, ApiService) {
      $scope.addingTag = false;
+      $scope.imagesInternal = [];
+
+      $scope.$watch('images', function(images) {
+        if (!images) { return; }
+        $scope.imagesInternal = images;
+      });

      var markChanged = function(added, removed) {
        // Reload the repository and the images.
@ -142,39 +149,70 @@ angular.module('quay').directive('tagOperationsDialog', function () {
        }, errorHandler);
      };

+      var lazyLoadImages = function(callback) {
+        if ($scope.imagesInternal.length) {
+          callback();
+          return;
+        }
+
+        var isLoading = true;
+        $timeout(function() {
+          if (isLoading) {
+            $('#loadingImagesModal').modal({});
+          }
+        }, 500);
+
+        var cb = function(images) {
+          isLoading = false;
+          $('#loadingImagesModal').modal('hide');
+          $scope.imagesInternal = images;
+          callback();
+        };
+
+        $scope.getImages({'callback': cb});
+      };
+
      $scope.actionHandler = {
        'askDeleteTag': function(tag) {
-          $scope.deleteTagInfo = {
-            'tag': tag
-          };
+          lazyLoadImages(function() {
+            $scope.deleteTagInfo = {
+              'tag': tag
+            };
+          });
        },

        'askDeleteMultipleTags': function(tags) {
-          $scope.deleteMultipleTagsInfo = {
-            'tags': tags
-          };
+          lazyLoadImages(function() {
+            $scope.deleteMultipleTagsInfo = {
+              'tags': tags
+            };
+          });
        },

        'askAddTag': function(image) {
-          $scope.tagToCreate = '';
-          $scope.toTagImage = image;
-          $scope.addingTag = false;
-          $scope.addTagForm.$setPristine();
-          $element.find('#createOrMoveTagModal').modal('show');
+          lazyLoadImages(function() {
+            $scope.tagToCreate = '';
+            $scope.toTagImage = image;
+            $scope.addingTag = false;
+            $scope.addTagForm.$setPristine();
+            $element.find('#createOrMoveTagModal').modal('show');
+          });
        },

        'askRevertTag': function(tag, image_id) {
-          if (tag.image_id == image_id) {
-            bootbox.alert('This is the current image for the tag');
-            return;
-          }
+          lazyLoadImages(function() {
+            if (tag.image_id == image_id) {
+              bootbox.alert('This is the current image for the tag');
+              return;
+            }

-          $scope.revertTagInfo = {
-            'tag': tag,
-            'image_id': image_id
-          };
+            $scope.revertTagInfo = {
+              'tag': tag,
+              'image_id': image_id
+            };

-          $element.find('#revertTagModal').modal('show');
+            $element.find('#revertTagModal').modal('show');
+          });
        }
      };
    }
--- a/static/js/pages/repo-view.js
+++ b/static/js/pages/repo-view.js
@ -64,6 +64,9 @@
    };

    var loadRepository = function() {
+      // Mark the images to be reloaded.
+      $scope.viewScope.images = null;
+
      var params = {
        'repository': $scope.namespace + '/' + $scope.name
      };
@ -77,11 +80,6 @@
        $timeout(function() {
          $scope.setTags($routeParams.tag);

-          // Load the images.
-          if ($scope.imagesRequired) {
-            loadImages();
-          }
-
          // Track builds.
          if (!$scope.repository.is_building) {
            $scope.viewScope.builds = [];
@ -93,13 +91,14 @@
      });
    };

-    var loadImages = function() {
+    var loadImages = function(opt_callback) {
      var params = {
        'repository': $scope.namespace + '/' + $scope.name
      };

      $scope.viewScope.imagesResource = ApiService.listRepositoryImagesAsResource(params).get(function(resp) {
        $scope.viewScope.images = resp.images;
+        opt_callback && opt_callback(resp.images);
      });
    };

@ -166,16 +165,18 @@
    $scope.requireImages = function() {
      // Lazily load the repo's images if this is the first call to a tab
      // that needs the images.
-      if (!$scope.imagesRequired) {
+      if ($scope.viewScope.images == null) {
        loadImages();
      }
-
-      $scope.imagesRequired = true;
    };

    $scope.handleChangesState = function(value) {
      $scope.viewScope.changesVisible = value;
    };
+
+    $scope.getImages = function(callback) {
+      loadImages(callback);
+    };
  }

  function OldRepoViewCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiService, $routeParams, $rootScope, $location, $timeout, Config, UtilService) {
--- a/static/partials/repo-view.html
+++ b/static/partials/repo-view.html
@ -21,8 +21,7 @@
          <i class="fa fa-info-circle"></i>
        </span>

-        <span class="cor-tab" tab-title="Tags" tab-target="#tags"
-              tab-init="requireImages()">
+        <span class="cor-tab" tab-title="Tags" tab-target="#tags">
          <i class="fa fa-tags"></i>
        </span>

@ -66,7 +65,8 @@
               repository="viewScope.repository"
               images="viewScope.images"
               images-resource="viewScope.imagesResource"
-               selected-tags="viewScope.selectedTags"></div>
+               selected-tags="viewScope.selectedTags"
+               get-images="getImages(callback)"></div>
        </div>

        <!-- Builds -->