feat(volume-creation) : NFS volume creation (#2083) (#2108)

* feat(volume-creation): NFS support for volume creation - layout

* feat(volume-creation): NFS support for volume creation

* fix(volume-creation): NFS style, display and check on submit

* refactor(volume-creation): remove useless controller + refactor var naming

* refactor(volume-creation): NFS wording, help and style

app/docker/components/volumesNFSForm/volumes-nfs-form.js

@@ -0,0 +1,6 @@
+angular.module('portainer.docker').component('volumesNfsForm', {
+  templateUrl: 'app/docker/components/volumesNFSForm/volumesnfsForm.html',
+  bindings: {
+    data: '='
+  }
+});

app/docker/components/volumesNFSForm/volumesNFSFormModel.js

@@ -0,0 +1,8 @@
+function VolumesNFSFormData() {
+  this.useNFS = false;
+  this.serverAddress = '';
+  this.mountPoint = '';
+  this.version = 'NFS4';
+  this.options = 'rw,noatime,rsize=8192,wsize=8192,tcp,timeo=14';
+  this.versions = ['NFS4', 'NFS'];
+}

app/docker/components/volumesNFSForm/volumesnfsForm.html

@@ -0,0 +1,90 @@
+<div>
+  <div class="form-group col-md-12">
+    <label for="useNFS" class="control-label text-left">
+      Use NFS volume
+    </label>
+    <label class="switch" style="margin-left: 20px;">
+      <input type="checkbox" name="useNFS" ng-model="$ctrl.data.useNFS">
+      <i></i>
+    </label>
+  </div>
+  <!-- NFS-settings -->
+  <div ng-show="$ctrl.data.useNFS">
+    <ng-form class="form-horizontal" name="nfsInformationForm">
+      <div class="col-sm-12 form-section-title">
+        NFS Settings
+      </div>
+      <!-- address-input -->
+      <div class="form-group col-md-12">
+        <label for="nfs_address" class="col-sm-2 col-md-1 control-label text-left">Address</label>
+        <div class="col-sm-10 col-md-11">
+          <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx"
+            required>
+        </div>
+      </div>
+      <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_address.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="nfsInformationForm.nfs_address.$error">
+            <p ng-message="required">
+              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          </div>
+        </div>
+      </div>
+      <!-- !address-input -->
+      <!-- version-input -->
+      <div class="form-group col-md-12">
+        <label for="nfs_version" class="col-sm-2 col-md-1 control-label text-left">NFS Version</label>
+        <div class="col-sm-10 col-md-11">
+          <select class="form-control" ng-model="$ctrl.data.version" name="nfs_version" ng-options="version for version in $ctrl.data.versions"
+            required></select>
+        </div>
+      </div>
+      <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_version.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="nfsInformationForm.nfs_version.$error">
+            <p ng-message="required">
+              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          </div>
+        </div>
+      </div>
+      <!-- !version-input -->
+      <!-- mount-point-input -->
+      <div class="form-group col-md-12">
+        <label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label text-left">Mount point</label>
+        <div class="col-sm-10 col-md-11">
+          <input type="text" class="form-control" ng-model="$ctrl.data.mountPoint" name="nfs_mountpoint" placeholder="e.g. /export/share or :/export/share"
+            required>
+        </div>
+      </div>
+      <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_mountpoint.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="nfsInformationForm.nfs_mountpoint.$error">
+            <p ng-message="required">
+              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          </div>
+        </div>
+      </div>
+      <!-- !mount-point-input -->
+      <!-- options-input -->
+      <div class="form-group col-md-12">
+        <label for="nfs_options" class="col-sm-2 col-md-1 control-label text-left">Options
+          <portainer-tooltip position="bottom" message="Comma separated list of options"></portainer-tooltip>
+        </label>
+        <div class="col-sm-10 col-md-11">
+          <input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..."
+            required>
+        </div>
+      </div>
+      <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_options.$invalid">
+        <div class="small text-warning">
+          <div ng-messages="nfsInformationForm.nfs_options.$error">
+            <p ng-message="required">
+              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          </div>
+        </div>
+      </div>
+      <!-- !options-input -->
+    </ng-form>
+  </div>
+  <!-- !NFS-settings -->
+</div>

app/docker/views/volumes/create/createVolumeController.js

@@ -6,7 +6,8 @@ function ($q, $scope, $state, VolumeService, PluginService, ResourceControlServi
     Driver: 'local',
     DriverOptions: [],
     AccessControlData: new AccessControlFormData(),
-    NodeName: null
+    NodeName: null,
+    NFSData: new VolumesNFSFormData()
   };
 
   $scope.state = {
@@ -36,8 +37,19 @@ function ($q, $scope, $state, VolumeService, PluginService, ResourceControlServi
     return true;
   }
 
-  $scope.create = function () {
+  function prepareNFSConfiguration(driverOptions) {
+    var data = $scope.formValues.NFSData;
 
+    driverOptions.push({ name: 'type', value: data.version.toLowerCase() });
+
+    var options = 'addr=' + data.serverAddress + ',' + data.options;
+    driverOptions.push({ name: 'o', value: options });
+
+    var mountPoint = data.mountPoint[0] === ':' ? data.mountPoint : ':' + data.mountPoint;
+    driverOptions.push({ name: 'device', value: mountPoint });
+  }
+
+  $scope.create = function () {
     var name = $scope.formValues.Name;
     var driver = $scope.formValues.Driver;
     var driverOptions = $scope.formValues.DriverOptions;
@@ -47,6 +59,10 @@ function ($q, $scope, $state, VolumeService, PluginService, ResourceControlServi
       driverOptions.push({ name: 'profile', value: storidgeProfile.Name });
     }
 
+    if ($scope.formValues.NFSData.useNFS) {
+      prepareNFSConfiguration(driverOptions);
+    }
+
     var volumeConfiguration = VolumeService.createVolumeConfiguration(name, driver, driverOptions);
     var accessControlData = $scope.formValues.AccessControlData;
     var userDetails = Authentication.getUserDetails();

app/docker/views/volumes/create/createvolume.html

@@ -9,11 +9,11 @@
   <div class="col-sm-12">
     <rd-widget>
       <rd-widget-body>
-        <form class="form-horizontal">
+        <form class="form-horizontal" name="volumeCreationForm">
           <!-- name-input -->
           <div class="form-group">
-            <label for="volume_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
+            <label for="volume_name" class="col-sm-2 col-md-1 control-label text-left">Name</label>
+            <div class="col-sm-10 col-md-11">
               <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume">
             </div>
           </div>
@@ -23,8 +23,8 @@
           </div>
           <!-- driver-input -->
           <div class="form-group">
-            <label for="volume_driver" class="col-sm-1 control-label text-left">Driver</label>
-            <div class="col-sm-11">
+            <label for="volume_driver" class="col-sm-2 col-md-1 control-label text-left">Driver</label>
+            <div class="col-sm-10 col-md-11">
               <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>
@@ -62,6 +62,9 @@
             <!-- !driver-options-input-list -->
           </div>
           <!-- !driver-options -->
+          <!-- nfs-management -->
+          <volumes-nfs-form data="formValues.NFSData" ng-show="formValues.Driver === 'local'"></volumes-nfs-form>
+          <!-- !nfs-management -->
           <!-- storidge -->
           <div ng-if="formValues.Driver === 'cio:latest'">
             <div class="col-sm-12 form-section-title">
@@ -89,7 +92,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-click="create()" ng-disabled="state.actionInProgress" button-spinner="state.actionInProgress">
+              <button type="button" class="btn btn-primary btn-sm" ng-click="create()" ng-disabled="state.actionInProgress || (formValues.NFSData.useNFS && !volumeCreationForm.$valid)" button-spinner="state.actionInProgress">
                 <span ng-hide="state.actionInProgress">Create the volume</span>
                 <span ng-show="state.actionInProgress">Creating volume...</span>
               </button>