From 59820e737ece4636c716429f3a170f08e820bfe2 Mon Sep 17 00:00:00 2001 From: Anthony Lapenna Date: Wed, 6 Jul 2016 16:32:46 +1200 Subject: [PATCH] feat(ui): new pull image view (#39) --- app/app.js | 1 - .../createNetwork/createNetworkController.js | 1 - app/components/images/images.html | 162 +++++++++++------- app/components/images/imagesController.js | 37 +++- app/components/pullImage/pullImage.html | 35 ---- .../pullImage/pullImageController.js | 56 ------ 6 files changed, 131 insertions(+), 161 deletions(-) delete mode 100644 app/components/pullImage/pullImage.html delete mode 100644 app/components/pullImage/pullImageController.js diff --git a/app/app.js b/app/app.js index 50c2fc7a3..090a903fa 100644 --- a/app/app.js +++ b/app/app.js @@ -14,7 +14,6 @@ angular.module('uifordocker', [ 'docker', 'images', 'image', - 'pullImage', 'containerLogs', 'stats', 'swarm', diff --git a/app/components/createNetwork/createNetworkController.js b/app/components/createNetwork/createNetworkController.js index 0bf69748c..44a7bd858 100644 --- a/app/components/createNetwork/createNetworkController.js +++ b/app/components/createNetwork/createNetworkController.js @@ -52,7 +52,6 @@ function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) { $scope.create = function () { var config = prepareConfiguration(); - console.log(JSON.stringify(config, null, 4)); createNetwork(config); }; }]); diff --git a/app/components/images/images.html b/app/components/images/images.html index 2fda922d4..0a539ee8a 100644 --- a/app/components/images/images.html +++ b/app/components/images/images.html @@ -1,5 +1,3 @@ -
- @@ -10,68 +8,100 @@ Images -
- - - - -
-
- - -
-
-
- -
- - -
- - - - - - - - - - - - - - - - - - - -
- - Id - - - - - - Repository - - - - - - VirtualSize - - - - - - Created - - - -
{{ image.Id|truncate:20}}{{ image|repotag }}{{ image.VirtualSize|humansize }}{{ image.Created|getdate }}
-
- - +
+
+ + + + +
+ +
+ +
+ +
+
+ + +
+
+ Note: if you don't specify the tag in the image name, latest will be used. +
+
+ +
+
+ +
+
+
+ + +
+
+ +
+
+ + + + +
+ +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + +
+ + Id + + + + + + Repository + + + + + + VirtualSize + + + + + + Created + + + +
{{ image.Id|truncate:20}}{{ image|repotag }}{{ image.VirtualSize|humansize }}{{ image.Created|getdate }}
+
+ + +
diff --git a/app/components/images/imagesController.js b/app/components/images/imagesController.js index 113e7d718..20dbf294f 100644 --- a/app/components/images/imagesController.js +++ b/app/components/images/imagesController.js @@ -1,12 +1,16 @@ angular.module('images', []) -.controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages', -function ($scope, Image, ViewSpinner, Messages) { +.controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages', +function ($scope, $state, Image, ViewSpinner, Messages) { $scope.state = {}; $scope.sortType = 'Created'; $scope.sortReverse = true; $scope.state.toggle = false; $scope.state.selectedItemCount = 0; + $scope.config = { + Image: '' + }; + $scope.order = function(sortType) { $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false; $scope.sortType = sortType; @@ -31,6 +35,35 @@ function ($scope, Image, ViewSpinner, Messages) { } }; + function createImageConfig(imageName) { + var imageNameAndTag = imageName.split(':'); + var imageConfig = { + fromImage: imageNameAndTag[0], + tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest' + }; + return imageConfig; + } + + $scope.pullImage = function() { + ViewSpinner.spin(); + var image = _.toLower($scope.config.Image); + var imageConfig = createImageConfig(image); + Image.create(imageConfig, function (data) { + var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error'); + if (err) { + var detail = data[data.length - 1]; + ViewSpinner.stop(); + Messages.error('Error', detail.error); + } else { + ViewSpinner.stop(); + $state.go('images', {}, {reload: true}); + } + }, function (e) { + ViewSpinner.stop(); + Messages.error('Error', 'Unable to pull image ' + image); + }); + }; + $scope.removeAction = function () { ViewSpinner.spin(); var counter = 0; diff --git a/app/components/pullImage/pullImage.html b/app/components/pullImage/pullImage.html deleted file mode 100644 index 777a6390e..000000000 --- a/app/components/pullImage/pullImage.html +++ /dev/null @@ -1,35 +0,0 @@ - diff --git a/app/components/pullImage/pullImageController.js b/app/components/pullImage/pullImageController.js deleted file mode 100644 index a9aae1c97..000000000 --- a/app/components/pullImage/pullImageController.js +++ /dev/null @@ -1,56 +0,0 @@ -angular.module('pullImage', []) -.controller('PullImageController', ['$scope', '$state', 'Messages', 'Image', 'ViewSpinner', -function ($scope, $state, Messages, Image, ViewSpinner) { - $scope.template = 'app/components/pullImage/pullImage.html'; - - $scope.init = function () { - $scope.config = { - registry: '', - fromImage: '', - tag: 'latest' - }; - }; - - $scope.init(); - - function failedRequestHandler(e, Messages) { - Messages.error('Error', errorMsgFilter(e)); - } - - $scope.pull = function () { - $('#error-message').hide(); - var config = angular.copy($scope.config); - var imageName = (config.registry ? config.registry + '/' : '' ) + - (config.fromImage) + - (config.tag ? ':' + config.tag : ''); - - ViewSpinner.spin(); - $('#pull-modal').modal('hide'); - Image.create(config, function (data) { - ViewSpinner.stop(); - if (data.constructor === Array) { - var f = data.length > 0 && data[data.length - 1].hasOwnProperty('error'); - //check for error - if (f) { - var d = data[data.length - 1]; - $scope.error = "Cannot pull image " + imageName + " Reason: " + d.error; - $('#pull-modal').modal('show'); - $('#error-message').show(); - } else { - Messages.send("Image Added", imageName); - $scope.init(); - $state.go('images', {}, {reload: true}); - } - } else { - Messages.send("Image Added", imageName); - $scope.init(); - $state.go('images', {}, {reload: true}); - } - }, function (e) { - ViewSpinner.stop(); - $scope.error = "Cannot pull image " + imageName + " Reason: " + e.data; - $('#pull-modal').modal('show'); - $('#error-message').show(); - }); - }; -}]);