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

@@ -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('/', {

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>

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>

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();
+                });
+            }
+        }]);

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'}},