Get full actions working in the repo changes tab

static/js/directives/ui/image-changes-view.js

@@ -0,0 +1,34 @@
+/**
+ * An element which loads and displays UI representing the changes made in an image.
+ */
+angular.module('quay').directive('imageChangesView', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/image-changes-view.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'image': '=image',
+      'hasChanges': '=hasChanges'
+    },
+    controller: function($scope, $element, ApiService) {
+      $scope.$watch('image', function() {
+        if (!$scope.image || !$scope.repository) { return; }
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'image_id': $scope.image
+        };
+
+        $scope.hasChanges = true;
+        $scope.imageChangesResource = ApiService.getImageChangesAsResource(params).get(function(resp) {
+          $scope.changeData = resp;
+          $scope.hasChanges = resp.added.length || resp.removed.length || resp.changed.length;
+        });
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/image-info-sidebar.js

@@ -0,0 +1,32 @@
+/**
+ * An element which displays sidebar information for a image. Primarily used in the repo view.
+ */
+angular.module('quay').directive('imageInfoSidebar', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/image-info-sidebar.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'tracker': '=tracker',
+      'image': '=image',
+
+      'tagSelected': '&tagSelected',
+      'addTagRequested': '&addTagRequested'
+    },
+    controller: function($scope, $element, ImageMetadataService) {
+      $scope.$watch('image', function(image) {
+        if (!image || !$scope.tracker) { return; }
+        $scope.imageData = $scope.tracker.lookupImage(image);
+      });
+
+      $scope.parseDate = function(dateString) {
+        return Date.parse(dateString);
+      };
+
+      $scope.getFormattedCommand = ImageMetadataService.getFormattedCommand;
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/resource-view.js

@@ -21,6 +21,10 @@ angular.module('quay').directive('resourceView', function () {
         }
 
         var resources = $scope.resources || [$scope.resource];
+        if (!resources.length) {
+          return 'loading';
+        }
+
         for (var i = 0; i < resources.length; ++i) {
           var current = resources[i];
           if (current.loading) {

static/js/directives/ui/tag-info-sidebar.js

@@ -0,0 +1,28 @@
+/**
+ * An element which displays sidebar information for a tag. Primarily used in the repo view.
+ */
+angular.module('quay').directive('tagInfoSidebar', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/tag-info-sidebar.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'tracker': '=tracker',
+      'tag': '=tag',
+
+      'imageSelected': '&imageSelected',
+      'deleteTagRequested': '&deleteTagRequested'
+    },
+    controller: function($scope, $element) {
+      $scope.$watch('tag', function(tag) {
+        if (!tag || !$scope.tracker) { return; }
+
+        $scope.tagImage = $scope.tracker.getImageForTag(tag);
+        $scope.tagData = $scope.tracker.lookupTag(tag);
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/tag-operations-dialog.js

@@ -0,0 +1,142 @@
+/**
+ * An element which adds a series of dialogs for performing operations for tags (adding, moving
+ * deleting).
+ */
+angular.module('quay').directive('tagOperationsDialog', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/tag-operations-dialog.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'images': '=images',
+      'actionHandler': '=actionHandler',
+
+      'tagChanged': '&tagChanged'
+    },
+    controller: function($scope, $element, $timeout, ApiService) {
+      $scope.addingTag = false;
+
+      var markChanged = function(added, removed) {
+        // Reload the repository and the images.
+        $scope.repository.get().then(function(resp) {
+          $scope.repository = resp;
+
+          var params = {
+            'repository': resp.namespace + '/' + resp.name
+          };
+
+          ApiService.listRepositoryImages(null, params).then(function(resp) {
+            $scope.images = resp.images;
+            $scope.tagChanged({
+              'data': { 'added': added, 'removed': removed }
+            });
+          })
+        });
+      };
+
+      $scope.isAnotherImageTag = function(image, tag) {
+        if (!$scope.repository || !$scope.images) { return; }
+
+        var found = $scope.repository.tags[tag];
+        if (found == null) { return false; }
+        return found.image_id != image;
+      };
+
+      $scope.isOwnedTag = function(image, tag) {
+        if (!$scope.repository || !$scope.images) { return; }
+
+        var found = $scope.repository.tags[tag];
+        if (found == null) { return false; }
+        return found.image_id == image;
+      };
+
+      $scope.createOrMoveTag = function(image, tag) {
+        $scope.addingTag = true;
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'tag': tag
+        };
+
+        var data = {
+          'image': image
+        };
+
+        var errorHandler = ApiService.errorDisplay('Cannot create or move tag', function(resp) {
+          $element.find('#createOrMoveTagModal').modal('hide');
+        });
+
+        ApiService.changeTagImage(data, params).then(function(resp) {
+          $element.find('#createOrMoveTagModal').modal('hide');
+          $scope.addingTag = false;
+
+          markChanged([tag], []);
+        }, errorHandler);
+      };
+
+      $scope.deleteMultipleTags = function(tags, callback) {
+        var count = tags.length;
+        var perform = function(index) {
+          if (index >= count) {
+            callback(true);
+            markChanged([], tags);
+            return;
+          }
+
+          var tag_info = tags[index];
+          $scope.deleteTag(tag_info.name, function(result) {
+            if (!result) {
+              callback(false);
+              return;
+            }
+
+            perform(index + 1);
+          }, true);
+        };
+
+        perform(0);
+      };
+
+      $scope.deleteTag = function(tag, callback, opt_skipmarking) {
+        if (!$scope.repository.can_admin) { return; }
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'tag': tag
+        };
+
+        var errorHandler = ApiService.errorDisplay('Cannot delete tag', callback);
+        ApiService.deleteFullTag(null, params).then(function() {
+          callback(true);
+          !opt_skipmarking && markChanged([], [tag]);
+        }, errorHandler);
+      };
+
+      $scope.actionHandler = {
+        'askDeleteTag': function(tag) {
+          $scope.deleteTagInfo = {
+            'tag': tag
+          };
+        },
+
+        'askDeleteMultipleTags': function(tags) {
+          $scope.deleteMultipleTagsInfo = {
+            'tags': tags
+          };
+        },
+
+        'askAddTag': function(image) {
+          $scope.tagToCreate = '';
+          $scope.toTagImage = image;
+          $scope.addingTag = false;
+          $scope.addTagForm.$setPristine();
+          $element.find('#createOrMoveTagModal').modal('show');
+        }
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});