feat(network-creation): add labels on network create (#408)

app/components/createNetwork/createNetworkController.js

@@ -4,7 +4,8 @@ function ($scope, $state, Messages, Network) {
   $scope.formValues = {
     DriverOptions: [],
     Subnet: '',
-    Gateway: ''
+    Gateway: '',
+    Labels: []
   };
 
   $scope.config = {
@@ -16,7 +17,8 @@ function ($scope, $state, Messages, Network) {
     IPAM: {
       Driver: 'default',
       Config: []
-    }
+    },
+    Labels: {}
   };
 
   $scope.addDriverOption = function() {
@@ -27,6 +29,14 @@ function ($scope, $state, Messages, Network) {
     $scope.formValues.DriverOptions.splice(index, 1);
   };
 
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
   function createNetwork(config) {
     $('#createNetworkSpinner').show();
     Network.create(config, function (d) {
@@ -63,10 +73,21 @@ function ($scope, $state, Messages, Network) {
     config.Options = options;
   }
 
+  function prepareLabelsConfig(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);
     prepareIPAMConfiguration(config);
     prepareDriverOptions(config);
+    prepareLabelsConfig(config);
     return config;
   }
 

app/components/createNetwork/createnetwork.html

@@ -78,6 +78,35 @@
             </div>
           </div>
           <!-- !internal -->
+          <!-- labels -->
+          <div class="form-group">
+            <label for="service_env" 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>
       </rd-widget-body>
     </rd-widget>