From 5dd094e0b1a2a3d5bb11ba09816e4d57e48d5761 Mon Sep 17 00:00:00 2001 From: Haris Michopoulos Date: Fri, 5 Jun 2015 17:21:52 +0200 Subject: [PATCH 1/2] dockerui-118 How to pull images / create container from repo image ? Added a modal dialog that gets user's input (registry, repo, image name and tag) and performs the pull. Some hack was needed to parse the response, since it is not valid json (actually, it seems to be concatenated json objects). --- app/app.js | 2 +- app/components/images/images.html | 3 +- app/components/pullImage/pullImage.html | 40 +++++++++++++++ .../pullImage/pullImageController.js | 49 +++++++++++++++++++ app/shared/services.js | 6 ++- 5 files changed, 97 insertions(+), 3 deletions(-) create mode 100644 app/components/pullImage/pullImage.html create mode 100644 app/components/pullImage/pullImageController.js diff --git a/app/app.js b/app/app.js index 42e61bed4..d9a48daf6 100644 --- a/app/app.js +++ b/app/app.js @@ -1,4 +1,4 @@ -angular.module('dockerui', ['dockerui.templates', 'ngRoute', 'dockerui.services', 'dockerui.filters', 'masthead', 'footer', 'dashboard', 'container', 'containers', 'containersNetwork', 'images', 'image', 'startContainer', 'sidebar', 'info', 'builder', 'containerLogs', 'containerTop', 'events']) +angular.module('dockerui', ['dockerui.templates', 'ngRoute', 'dockerui.services', 'dockerui.filters', 'masthead', 'footer', 'dashboard', 'container', 'containers', 'containersNetwork', 'images', 'image', 'pullImage', 'startContainer', 'sidebar', 'info', 'builder', 'containerLogs', 'containerTop', 'events']) .config(['$routeProvider', function ($routeProvider) { 'use strict'; $routeProvider.when('/', { diff --git a/app/components/images/images.html b/app/components/images/images.html index a2c68053e..bb3ab40c2 100644 --- a/app/components/images/images.html +++ b/app/components/images/images.html @@ -1,5 +1,5 @@ -
+

Images:

@@ -10,6 +10,7 @@
  • Remove
    • +
  • Pull
    • diff --git a/app/components/pullImage/pullImage.html b/app/components/pullImage/pullImage.html new file mode 100644 index 000000000..9599fbe0d --- /dev/null +++ b/app/components/pullImage/pullImage.html @@ -0,0 +1,40 @@ + diff --git a/app/components/pullImage/pullImageController.js b/app/components/pullImage/pullImageController.js new file mode 100644 index 000000000..04ca4d5ab --- /dev/null +++ b/app/components/pullImage/pullImageController.js @@ -0,0 +1,49 @@ +angular.module('pullImage', []) + .controller('PullImageController', ['$scope', '$log', 'Dockerfile', 'Messages', 'Image', 'ViewSpinner', + function($scope, $log, Dockerfile, Messages, Image, ViewSpinne) { + $scope.template = 'app/components/pullImage/pullImage.html'; + + $scope.config = { + registry: '', + repo: '', + fromImage: '', + tag: 'latest' + } + + 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.repo ? config.repo + '/' : '') + + (config.fromImage) + + (config.tag ? ':' + config.tag : ''); + + ViewSpinner.spin(); + 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; + $('#error-message').show(); + } else { + Messages.send("Image Added", imageName); + $('#pull-modal').modal('hide'); + } + } else { + Messages.send("Image Added", imageName); + $('#pull-modal').modal('hide'); + } + }, function(e) { + ViewSpinner.stop(); + $scope.error = "Cannot pull image " + imageName + " Reason: " + e.data; + $('#error-message').show(); + }); + } + }]); diff --git a/app/shared/services.js b/app/shared/services.js index ad5f0de52..a996e20cf 100644 --- a/app/shared/services.js +++ b/app/shared/services.js @@ -79,7 +79,11 @@ angular.module('dockerui.services', ['ngResource']) get: {method: 'GET', params: {action: 'json'}}, search: {method: 'GET', params: {action: 'search'}}, history: {method: 'GET', params: {action: 'history'}, isArray: true}, - create: {method: 'POST', params: {action: 'create'}}, + create: {method: 'POST', isArray: true, transformResponse: [function f(data) { + var str = data.replace(/\n/g, " ").replace(/\}\W*\{/g, "}, {"); + return angular.fromJson("[" + str + "]"); + }], + params: {action: 'create', fromImage: '@fromImage', repo: '@repo', tag: '@tag', registry: '@registry'}}, insert: {method: 'POST', params: {id: '@id', action: 'insert'}}, push: {method: 'POST', params: {id: '@id', action: 'push'}}, tag: {method: 'POST', params: {id: '@id', action: 'tag', force: 0, repo: '@repo'}}, From 394f2f2387c4db9b57f40e1dbc2159a99e898d71 Mon Sep 17 00:00:00 2001 From: Haris Michopoulos Date: Mon, 22 Jun 2015 23:30:16 +0200 Subject: [PATCH 2/2] dockerui-118 How to pull images / create container from repo image ? -Fixed ViewSpinner variable. -Hide the modal on submit, show Spinner and show again modal if needed (in case of error) -Clear modal values after successful pull --- .../pullImage/pullImageController.js | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/app/components/pullImage/pullImageController.js b/app/components/pullImage/pullImageController.js index 04ca4d5ab..9fc242fb5 100644 --- a/app/components/pullImage/pullImageController.js +++ b/app/components/pullImage/pullImageController.js @@ -1,15 +1,19 @@ angular.module('pullImage', []) .controller('PullImageController', ['$scope', '$log', 'Dockerfile', 'Messages', 'Image', 'ViewSpinner', - function($scope, $log, Dockerfile, Messages, Image, ViewSpinne) { + function($scope, $log, Dockerfile, Messages, Image, ViewSpinner) { $scope.template = 'app/components/pullImage/pullImage.html'; - $scope.config = { - registry: '', - repo: '', - fromImage: '', - tag: 'latest' + $scope.init = function() { + $scope.config = { + registry: '', + repo: '', + fromImage: '', + tag: 'latest' + } } + $scope.init(); + function failedRequestHandler(e, Messages) { Messages.error('Error', errorMsgFilter(e)); } @@ -23,6 +27,7 @@ angular.module('pullImage', []) (config.tag ? ':' + config.tag : ''); ViewSpinner.spin(); + $('#pull-modal').modal('hide'); Image.create(config, function(data) { ViewSpinner.stop(); if (data.constructor === Array) { @@ -31,18 +36,20 @@ angular.module('pullImage', []) 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); - $('#pull-modal').modal('hide'); + $scope.init(); } } else { Messages.send("Image Added", imageName); - $('#pull-modal').modal('hide'); + $scope.init(); } }, function(e) { ViewSpinner.stop(); $scope.error = "Cannot pull image " + imageName + " Reason: " + e.data; + $('#pull-modal').modal('show'); $('#error-message').show(); }); }