feat(ui): add the ability to create a container from an image in a custom registry (#49)

app/components/createContainer/createContainerController.js

@@ -8,7 +8,8 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
 
   $scope.formValues = {
     Console: 'none',
-    Volumes: []
+    Volumes: [],
+    Registry: ''
   };
 
   $scope.config = {
@@ -103,10 +104,14 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
     });
   }
 
-  function createImageConfig(imageName) {
+  function createImageConfig(imageName, registry) {
     var imageNameAndTag = imageName.split(':');
+    var image = imageNameAndTag[0];
+    if (registry) {
+      image = registry + '/' + imageNameAndTag[0];
+    }
     var imageConfig = {
-      fromImage: imageNameAndTag[0],
+      fromImage: image,
       tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
     };
     return imageConfig;
@@ -116,7 +121,9 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, e
     $('#createContainerSpinner').show();
 
     var image = _.toLower(config.Image);
-    var imageConfig = createImageConfig(image);
+    var registry = _.toLower($scope.formValues.Registry);
+    var imageConfig = createImageConfig(image, registry);
+    config.Image = imageConfig.fromImage + ':' + imageConfig.tag;
 
     Image.create(imageConfig, function (data) {
         var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');

app/components/createContainer/createcontainer.html

@@ -18,11 +18,15 @@
             </div>
           </div>
           <!-- !name-input -->
-          <!-- image input -->
+          <!-- image-and-registry-inputs -->
           <div class="form-group">
-            <label for="container_image" class="col-sm-1 control-label text-left">Image</label>
+            <label for="container_image" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
+            <div class="col-sm-7">
-              <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="ubuntu:trusty">
+              <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="e.g. ubuntu:trusty">
+            </div>
+            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
+            <div class="col-sm-3">
+              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
             </div>
             <div class="col-sm-offset-1 col-sm-11">
               <div class="checkbox">
@@ -32,7 +36,7 @@
               </div>
             </div>
           </div>
-          <!-- !image-input -->
+          <!-- !image-and-registry-inputs -->
           <!-- restart-policy -->
           <div class="form-group">
             <label class="col-sm-1 control-label text-left">Restart policy</label>