feat(volume-creation): retrieve available drivers from the engine (#751)

app/components/createVolume/createVolumeController.js

@@ -1,15 +1,13 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'ResourceControlService', 'Authentication', 'Messages',
-function ($scope, $state, Volume, ResourceControlService, Authentication, Messages) {
+.controller('CreateVolumeController', ['$scope', '$state', 'VolumeService', 'InfoService', 'ResourceControlService', 'Authentication', 'Messages',
+function ($scope, $state, VolumeService, InfoService, ResourceControlService, Authentication, Messages) {
 
   $scope.formValues = {
     Ownership: $scope.applicationState.application.authentication ? 'private' : '',
+    Driver: 'local',
     DriverOptions: []
   };
-
-  $scope.config = {
-    Driver: 'local'
-  };
+  $scope.availableVolumeDrivers = [];
 
   $scope.addDriverOption = function() {
     $scope.formValues.DriverOptions.push({ name: '', value: '' });
@@ -19,52 +17,51 @@ function ($scope, $state, Volume, ResourceControlService, Authentication, Messag
     $scope.formValues.DriverOptions.splice(index, 1);
   };
 
-  function createVolume(config) {
+  $scope.create = function () {
     $('#createVolumeSpinner').show();
-    Volume.create(config, function (d) {
-      if (d.message) {
-        $('#createVolumeSpinner').hide();
-        Messages.error('Unable to create volume', {}, d.message);
-      } else {
+
+    var name = $scope.formValues.Name;
+    var driver = $scope.formValues.Driver;
+    var driverOptions = $scope.formValues.DriverOptions;
+    var volumeConfiguration = VolumeService.createVolumeConfiguration(name, driver, driverOptions);
+
+    VolumeService.createVolume(volumeConfiguration)
+    .then(function success(data) {
       if ($scope.formValues.Ownership === 'private') {
-          ResourceControlService.setVolumeResourceControl(Authentication.getUserDetails().ID, d.Name)
+        ResourceControlService.setVolumeResourceControl(Authentication.getUserDetails().ID, data.Name)
         .then(function success() {
-            Messages.send("Volume created", d.Name);
-            $('#createVolumeSpinner').hide();
+          Messages.send("Volume created", data.Name);
           $state.go('volumes', {}, {reload: true});
         })
         .catch(function error(err) {
-            $('#createVolumeSpinner').hide();
           Messages.error("Failure", err, 'Unable to apply resource control on volume');
         });
       } else {
-          Messages.send("Volume created", d.Name);
-          $('#createVolumeSpinner').hide();
+        Messages.send("Volume created", data.Name);
         $state.go('volumes', {}, {reload: true});
       }
-      }
-    }, function (e) {
+    })
+    .catch(function error(err) {
+      Messages.error('Failure', err, 'Unable to create volume');
+    })
+    .finally(function final() {
       $('#createVolumeSpinner').hide();
-      Messages.error("Failure", e, 'Unable to create volume');
     });
-  }
+  };
 
-  function prepareDriverOptions(config) {
-    var options = {};
-    $scope.formValues.DriverOptions.forEach(function (option) {
-      options[option.name] = option.value;
+  function initView() {
+    $('#loadingViewSpinner').show();
+    InfoService.getVolumePlugins()
+    .then(function success(data) {
+      $scope.availableVolumeDrivers = data;
+    })
+    .catch(function error(err) {
+      Messages.error("Failure", err, 'Unable to retrieve volume plugin information');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
     });
-    config.DriverOpts = options;
-  }
-
-  function prepareConfiguration() {
-    var config = angular.copy($scope.config);
-    prepareDriverOptions(config);
-    return config;
   }
 
-  $scope.create = function () {
-    var config = prepareConfiguration();
-    createVolume(config);
-  };
+  initView();
 }]);

app/components/createVolume/createvolume.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Create volume"></rd-header-title>
+  <rd-header-title title="Create volume">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     <a ui-sref="volumes">Volumes</a> > Add volume
   </rd-header-content>
@@ -14,7 +16,7 @@
           <div class="form-group">
             <label for="volume_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="volume_name" placeholder="e.g. myVolume">
+              <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume">
             </div>
           </div>
           <!-- !name-input -->
@@ -25,7 +27,10 @@
           <div class="form-group">
             <label for="volume_driver" class="col-sm-1 control-label text-left">Driver</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="config.Driver" id="volume_driver" placeholder="e.g. driverName">
+              <select class="form-control" ng-options="driver for driver in availableVolumeDrivers" ng-model="formValues.Driver" ng-if="availableVolumeDrivers.length > 0">
+                <option disabled hidden value="">Select a driver</option>
+              </select>
+              <input type="text" class="form-control" ng-model="formValues.Driver" id="volume_driver" placeholder="e.g. driverName" ng-if="availableVolumeDrivers.length === 0">
             </div>
           </div>
           <!-- !driver-input -->

app/helpers/volumeHelper.js

@@ -0,0 +1,15 @@
+angular.module('portainer.helpers')
+.factory('VolumeHelper', [function VolumeHelperFactory() {
+  'use strict';
+  var helper = {};
+
+  helper.createDriverOptions = function(optionArray) {
+    var options = {};
+    optionArray.forEach(function (option) {
+      options[option.name] = option.value;
+    });
+    return options;
+  };
+
+  return helper;
+}]);

app/services/infoService.js

@@ -0,0 +1,20 @@
+angular.module('portainer.services')
+.factory('InfoService', ['$q', 'Info', function InfoServiceFactory($q, Info) {
+  'use strict';
+  var service = {};
+
+  service.getVolumePlugins = function() {
+    var deferred = $q.defer();
+    Info.get({}).$promise
+    .then(function success(data) {
+      var plugins = data.Plugins.Volume;
+      deferred.resolve(plugins);
+    })
+    .catch(function error(err) {
+      deferred.reject({msg: 'Unable to retrieve volume plugin information', err: err});
+    });
+    return deferred.promise;
+  };
+
+  return service;
+}]);

app/services/volumeService.js

@@ -1,5 +1,5 @@
 angular.module('portainer.services')
-.factory('VolumeService', ['$q', 'Volume', function VolumeServiceFactory($q, Volume) {
+.factory('VolumeService', ['$q', 'Volume', 'VolumeHelper', function VolumeServiceFactory($q, Volume, VolumeHelper) {
   'use strict';
   var service = {};
 
@@ -7,27 +7,14 @@ angular.module('portainer.services')
     return Volume.query({}).$promise;
   };
 
-  function prepareVolumeQueries(template, containerConfig) {
-    var volumeQueries = [];
-    if (template.volumes) {
-      template.volumes.forEach(function (vol) {
-        volumeQueries.push(
-          Volume.create({}, function (d) {
-            if (d.message) {
-              Messages.error("Unable to create volume", {}, d.message);
-            } else {
-              Messages.send("Volume created", d.Name);
-              containerConfig.Volumes[vol] = {};
-              containerConfig.HostConfig.Binds.push(d.Name + ':' + vol);
-            }
-          }, function (e) {
-            Messages.error("Failure", e, "Unable to create volume");
-          }).$promise
-        );
-      });
-    }
-    return volumeQueries;
-  }
+  service.createVolumeConfiguration = function(name, driver, driverOptions) {
+    var volumeConfiguration = {
+      Name: name,
+      Driver: driver,
+      DriverOpts: VolumeHelper.createDriverOptions(driverOptions)
+    };
+    return volumeConfiguration;
+  };
 
   service.createVolume = function(volumeConfiguration) {
     var deferred = $q.defer();
@@ -45,9 +32,9 @@ angular.module('portainer.services')
     return deferred.promise;
   };
 
-  service.createVolumes = function(volumes) {
-    var createVolumeQueries = volumes.map(function(volume) {
-      return service.createVolume(volume);
+  service.createVolumes = function(volumeConfigurations) {
+    var createVolumeQueries = volumeConfigurations.map(function(volumeConfiguration) {
+      return service.createVolume(volumeConfiguration);
     });
     return $q.all(createVolumeQueries);
   };