From 5dd094e0b1a2a3d5bb11ba09816e4d57e48d5761 Mon Sep 17 00:00:00 2001
From: Haris Michopoulos <hmichopoulos@gmail.com>
Date: Fri, 5 Jun 2015 17:21:52 +0200
Subject: [PATCH] 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 @@
-
 <div ng-include="template" ng-controller="BuilderController"></div>
+<div ng-include="template" ng-controller="PullImageController"></div>
 
 <h2>Images:</h2>
 
@@ -10,6 +10,7 @@
             <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
         </ul>
     </li>
+    <li><a data-toggle="modal" data-target="#pull-modal" href="">Pull</a></li>
 </ul>
 <table class="table table-striped">
     <thead>
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 @@
+<div id="pull-modal" class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h3>Pull Image</h3>
+            </div>
+            <div class="modal-body">
+                <form novalidate role="form" name="pullForm">
+                    <!--<div class="input-group">
+                        <span class="input-group-addon" id="basic-addon1">Image name</span>
+                        <input type="text" class="form-control" placeholder="imageName" aria-describedby="basic-addon1">
+                    </div>-->
+                    <div class="form-group">
+                        <label>Registry:</label>
+                        <input type="text" ng-model="config.registry" class="form-control" placeholder="Registry. Leave empty to user docker hub"/>
+                    </div>
+                    <div class="form-group">
+                        <label>Repo:</label>
+                        <input type="text" ng-model="config.repo" class="form-control" placeholder="Repository - usually your username."/>
+                    </div>
+                    <div class="form-group">
+                        <label>Image Name:</label>
+                        <input type="text" ng-model="config.fromImage" class="form-control" placeholder="Image name" required/>
+                    </div>
+                    <div class="form-group">
+                        <label>Tag Name:</label>
+                        <input type="text" ng-model="config.tag" class="form-control" placeholder="Tag name. If empty it will download ALL tags."/>
+                    </div>
+                </form>
+            </div>
+            <div class="alert alert-error" id="error-message" style="display:none">
+                {{ error }}
+            </div>
+            <div class="modal-footer">
+                <a href="" class="btn btn-primary" ng-click="pull()">Pull</a>
+            </div>
+        </div>
+    </div>
+</div>
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'}},