feat(container-creation): add ability to specify labels in the container creation view (#412)

app/components/createContainer/createContainerController.js

@@ -7,7 +7,8 @@ function ($scope, $state, $stateParams, $filter, Config, Info, Container, Contai
     Console: 'none',
     Volumes: [],
     Registry: '',
-    NetworkContainer: ''
+    NetworkContainer: '',
+    Labels: []
   };
 
   $scope.imageConfig = {};
@@ -24,7 +25,8 @@ function ($scope, $state, $stateParams, $filter, Config, Info, Container, Contai
       Binds: [],
       NetworkMode: 'bridge',
       Privileged: false
-    }
+    },
+    Labels: {}
   };
 
   $scope.addVolume = function() {
@@ -51,6 +53,14 @@ function ($scope, $state, $stateParams, $filter, Config, Info, Container, Contai
     $scope.config.HostConfig.PortBindings.splice(index, 1);
   };
 
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
   Config.$promise.then(function (c) {
     $scope.swarm = c.swarm;
     var containersToHideLabels = c.hiddenLabels;
@@ -222,6 +232,16 @@ function ($scope, $state, $stateParams, $filter, Config, Info, Container, Contai
     config.HostConfig.NetworkMode = networkMode;
   }
 
+  function prepareLabels(config) {
+    var labels = {};
+    $scope.formValues.Labels.forEach(function (label) {
+      if (label.name && label.value) {
+        labels[label.name] = label.value;
+      }
+    });
+    config.Labels = labels;
+  }
+
   function prepareConfiguration() {
     var config = angular.copy($scope.config);
     prepareNetworkConfig(config);
@@ -230,6 +250,7 @@ function ($scope, $state, $stateParams, $filter, Config, Info, Container, Contai
     prepareConsole(config);
     prepareEnvironmentVariables(config);
     prepareVolumes(config);
+    prepareLabels(config);
     return config;
   }
 

app/components/createContainer/createcontainer.html

@@ -95,6 +95,16 @@
             <!-- !port-mapping-input-list -->
           </div>
           <!-- !port-mapping -->
+          <!-- labels -->
+          <div class="form-group">
+            <label for="container_labels" class="col-sm-1 control-label text-left">Labels</label>
+            <div class="col-sm-11">
+              <span class="label label-default interactive" ng-click="addLabel()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+              </span>
+            </div>
+          </div>
+          <!-- !labels-->
         </form>
       </rd-widget-body>
     </rd-widget>
@@ -109,6 +119,7 @@
           <li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
           <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
           <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
           <li class="interactive"><a data-target="#security" data-toggle="tab">Security/Host</a></li>
         </ul>
         <!-- tab-content -->
@@ -306,6 +317,41 @@
             </form>
           </div>
           <!-- !tab-network -->
+          <!-- tab-labels -->
+          <div class="tab-pane" id="labels">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- labels -->
+              <div class="form-group">
+                <label for="container_labels" class="col-sm-1 control-label text-left">Labels</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addLabel()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+                  </span>
+                </div>
+                <!-- labels-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">name</span>
+                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeLabel($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !labels-input-list -->
+              </div>
+              <!-- !labels-->
+            </form>
+          </div>
+          <!-- !tab-labels -->
           <!-- tab-security -->
           <div class="tab-pane" id="security">
             <form class="form-horizontal" style="margin-top: 15px;">