Merge pull request #210 from cloud-inovasi/feat195-quick-network-creation-form

feat(networks): add a quick network creation form

app/components/networks/networks.html

@@ -7,7 +7,48 @@
   <rd-header-content>Networks</rd-header-content>
 </rd-header>
 
-<div class="col-lg-12">
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-plus" title="Add a network">
+      </rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="network_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- tag-note -->
+          <div class="form-group" ng-if="swarm">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: The network will be created using the overlay driver and will allow containers to communicate across the hosts of your cluster.</span>
+            </div>
+          </div>
+          <div class="form-group" ng-if="!swarm">
+            <div class="col-sm-12">
+              <span class="small text-muted">Note: The network will be created using the bridge driver.</span>
+            </div>
+          </div>
+          <!-- !tag-note -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Name" ng-click="createNetwork()">Create</button>
+              <button type="button" class="btn btn-default btn-sm" ui-sref="actions.create.network">Advanced settings...</button>
+              <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-sitemap" title="Networks">
         <div class="pull-right">
@@ -17,7 +58,6 @@
       <rd-widget-taskbar classes="col-lg-12">
         <div class="pull-left">
           <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
-        <a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a>
         </div>
         <div class="pull-right">
           <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
@@ -96,4 +136,5 @@
         </div>
       </rd-widget-body>
     <rd-widget>
+  </div>
 </div>

app/components/networks/networksController.js

@@ -7,16 +7,34 @@ function ($scope, $state, Network, Config, Messages) {
   $scope.sortType = 'Name';
   $scope.sortReverse = false;
 
-  $scope.formValues = {
-    Subnet: '',
-    Gateway: ''
-  };
-
   $scope.config = {
     Name: '',
-    IPAM: {
+  };
-      Config: []
+
+  function prepareNetworkConfiguration() {
+    var config = angular.copy($scope.config);
+    if ($scope.swarm) {
+      config.Driver = 'overlay';
     }
+    return config;
+  }
+
+  $scope.createNetwork = function() {
+    $('#createNetworkSpinner').show();
+    var config = prepareNetworkConfiguration();
+    Network.create(config, function (d) {
+      if (d.message) {
+        $('#createNetworkSpinner').hide();
+        Messages.error('Unable to create network', {}, d.message);
+      } else {
+        Messages.send("Network created", d.Id);
+        $('#createNetworkSpinner').hide();
+        $state.go('networks', {}, {reload: true});
+      }
+    }, function (e) {
+      $('#createNetworkSpinner').hide();
+      Messages.error("Failure", e, 'Unable to create network');
+    });
   };
 
   $scope.order = function(sortType) {
@@ -72,5 +90,8 @@ function ($scope, $state, Network, Config, Messages) {
     });
   }
 
+  Config.$promise.then(function (c) {
+    $scope.swarm = c.swarm;
     fetchNetworks();
+  });
 }]);