feat(network-creation): network dropdown for drivers (#1016) (#1062)

app/components/createNetwork/createNetworkController.js

@@ -1,6 +1,7 @@
 angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$scope', '$state', 'Notifications', 'Network', 'LabelHelper',
+.controller('CreateNetworkController', ['$q', '$scope', '$state', 'PluginService', 'Notifications', 'Network', 'LabelHelper',
-function ($scope, $state, Notifications, Network, LabelHelper) {
+function ($q, $scope, $state, PluginService, Notifications, Network, LabelHelper) {
+
   $scope.formValues = {
     DriverOptions: [],
     Subnet: '',
@@ -8,6 +9,8 @@ function ($scope, $state, Notifications, Network, LabelHelper) {
     Labels: []
   };
 
+  $scope.availableNetworkDrivers = [];
+
   $scope.config = {
     Driver: 'bridge',
     CheckDuplicate: true,
@@ -89,4 +92,24 @@ function ($scope, $state, Notifications, Network, LabelHelper) {
     var config = prepareConfiguration();
     createNetwork(config);
   };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    var endpointProvider = $scope.applicationState.endpoint.mode.provider;
+    var apiVersion = $scope.applicationState.endpoint.apiVersion;
+    if(endpointProvider !== 'DOCKER_SWARM') {
+      PluginService.networkPlugins(apiVersion < 1.25)
+      .then(function success(data){
+          $scope.availableNetworkDrivers = data;
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to retrieve network drivers');
+      })
+      .finally(function final() {
+        $('#loadingViewSpinner').hide();
+      });
+    }
+  }
+
+  initView();
 }]);

app/components/createNetwork/createnetwork.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Create network"></rd-header-title>
+  <rd-header-title title="Create network">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     <a ui-sref="networks">Networks</a> &gt; Add network
   </rd-header-content>
@@ -39,8 +41,11 @@
           <!-- driver-input -->
           <div class="form-group">
             <label for="network_driver" class="col-sm-2 col-lg-1 control-label text-left">Driver</label>
-            <div class="col-sm-10">
+            <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName">
+              <select class="form-control" ng-options="driver for driver in availableNetworkDrivers" ng-model="config.Driver" ng-if="availableNetworkDrivers.length > 0">
+                <option disabled hidden value="">Select a driver</option>
+              </select>
+              <input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName" ng-if="availableNetworkDrivers.length === 0">
             </div>
           </div>
           <!-- !driver-input -->

app/services/docker/pluginService.js

@@ -52,5 +52,37 @@ angular.module('portainer.services')
     return deferred.promise;
   };
 
+  service.networkPlugins = function(systemOnly) {
+    var deferred = $q.defer();
+
+    $q.all({
+      system: SystemService.plugins(),
+      plugins: systemOnly ? [] : service.plugins()
+    })
+    .then(function success(data) {
+      var networkPlugins = [];
+      var systemPlugins = data.system;
+      var plugins = data.plugins;
+
+      if (systemPlugins.Network) {
+        networkPlugins = networkPlugins.concat(systemPlugins.Network);
+      }
+
+      for (var i = 0; i < plugins.length; i++) {
+        var plugin = plugins[i];
+        if (plugin.Enabled && _.includes(plugin.Config.Interface.Types, 'docker.networkdriver/1.0')) {
+          networkPlugins.push(plugin.Name);
+        }
+      }
+
+      deferred.resolve(networkPlugins);
+    })
+    .catch(function error(err) {
+      deferred.reject({ msg: err.msg, err: err });
+    });
+
+    return deferred.promise;
+  };
+
   return service;
 }]);