feat(storidge): add new fields on profile create/edit

app/extensions/storidge/models/profile.js

@@ -8,6 +8,16 @@ function StoridgeProfileDefaultModel() {
   this.MaxIOPS = 2000;
   this.MinBandwidth = 1;
   this.MaxBandwidth = 100;
+  this.Filesystem = 'btrfs';
+  this.SnapshotEnabled = false;
+  this.SnapshotInterval = 60;
+  this.SnapshotMax = 1;
+  this.EncryptionEnabled = false;
+  this.InterfaceType = 'nfs';
+  this.InterfaceDriver = '';
+  this.InterfaceNetwork = '';
+  this.InterfaceConf = '';
+  this.Labels = [];
 }
 
 function StoridgeProfileListModel(data) {
@@ -32,6 +42,37 @@ function StoridgeProfileModel(name, data) {
     this.MinBandwidth = data.bandwidth.min;
     this.MaxBandwidth = data.bandwidth.max;
   }
+
+  this.Filesystem = data.filesystem;
+
+  var service = data.service;
+
+  if (service.snapshot) {
+    this.SnapshotEnabled = service.snapshot.enabled;
+    this.SnapshotInterval = service.snapshot.interval;
+    this.SnapshotMax = service.snapshot.max;
+  } else {
+    this.SnapshotEnabled = false;
+  }
+
+  if (service.encryption) {
+    this.EncryptionEnabled = service.encryption.enabled;
+  } else {
+    this.EncryptionEnabled = false;
+  }
+
+  if (data.interface) {
+    this.InterfaceType = data.interface.type;
+    this.InterfaceDriver = data.interface.driver;
+    this.InterfaceNetwork = data.interface.network;
+    this.InterfaceConf = data.interface.conf;
+  }
+
+  if (data.label) {
+    this.Labels = data.label;
+  } else {
+    this.Labels = [];
+  }
 }
 
 function StoridgeCreateProfileRequest(model) {
@@ -54,4 +95,31 @@ function StoridgeCreateProfileRequest(model) {
       max: model.MaxBandwidth
     };
   }
+
+  this.filesystem = model.Filesystem;
+
+  var service = {};
+
+  service.snapshot = {
+    enabled: model.SnapshotEnabled
+  };
+  if (model.SnapshotEnabled) {
+    service.snapshot.interval = model.SnapshotInterval;
+    service.snapshot.max = model.SnapshotMax;
+  }
+
+  service.encryption = {
+    enabled: model.EncryptionEnabled
+  };
+
+  this.service = service;
+
+  this.interface = {
+    type: model.InterfaceType,
+    driver: model.InterfaceDriver,
+    network: model.InterfaceNetwork,
+    conf: model.InterfaceConf
+  };
+
+  this.label = model.Labels;
 }

app/extensions/storidge/views/profiles/create/createProfileController.js

@@ -2,6 +2,10 @@ angular.module('extension.storidge')
 .controller('StoridgeCreateProfileController', ['$scope', '$state', '$transition$', 'Notifications', 'StoridgeProfileService',
 function ($scope, $state, $transition$, Notifications, StoridgeProfileService) {
 
+  $scope.formValues = {
+    Labels: []
+  };
+
   $scope.state = {
     NoLimit: true,
     LimitIOPS: false,
@@ -15,6 +19,24 @@ function ($scope, $state, $transition$, Notifications, StoridgeProfileService) {
     { value: 3, label: '3-copy' }
   ];
 
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
+  function prepareLabels(profile) {
+    var labels = {};
+    $scope.formValues.Labels.forEach(function (label) {
+      if (label.name && label.value) {
+        labels[label.name] = label.value;
+      }
+    });
+    profile.Labels = labels;
+  }
+
   $scope.create = function () {
     var profile = $scope.model;
 
@@ -28,6 +50,8 @@ function ($scope, $state, $transition$, Notifications, StoridgeProfileService) {
       delete profile.MaxBandwidth;
     }
 
+    prepareLabels(profile);
+
     $scope.state.actionInProgress = true;
     StoridgeProfileService.create(profile)
     .then(function success() {

app/extensions/storidge/views/profiles/create/createprofile.html

@@ -91,6 +91,140 @@
             </div>
           </div>
           <!-- !type -->
+          <!-- Filesystem -->
+          <div class="form-group">
+            <label for="profile_filesystem" class="col-sm-2 col-lg-1 control-label text-left">Filesystem</label>
+            <div class="col-sm-10 col-lg-11">
+              <select name="profile_filesystem" ng-model="model.Filesystem" class="form-control">
+                <option value="btrfs">btrfs</option>
+                <option value="ext4">ext4</option>
+                <option value="xfs">xfs</option>
+              </select>
+            </div>
+          </div>
+          <!-- !Filesystem -->
+          <!-- snapshotEnabled -->
+          <div class="form-group">
+              <div class="col-sm-12">
+                <label for="profile_snapshotEnabled" class="control-label text-left">
+                  Enable snapshots
+                </label>
+                <label class="switch" style="margin-left: 20px;">
+                  <input name="profile_snapshotEnabled" type="checkbox" ng-model="model.SnapshotEnabled"><i></i>
+                </label>
+              </div>
+            </div>
+          <!-- !snapshotEnabled -->
+          <!-- snapshotInterval -->
+          <div class="form-group" ng-if="model.SnapshotEnabled">
+            <label for="profile_snapshotInterval" class="col-sm-2 col-lg-1 control-label text-left" style="margin-top: 20px;">
+              Snapshot interval
+            </label>
+            <div class="col-sm-4">
+              <slider model="model.SnapshotInterval" floor="1" ceil="45000" step="1"></slider>
+            </div>
+            <div class="col-sm-2">
+              <input type="number" min="1" class="form-control" ng-model="model.SnapshotInterval" id="profile_snapshotInterval">
+            </div>
+            <div class="col-sm-4">
+              <p class="small text-muted" style="margin-top: 7px;">
+                Snapshot interval (<b>s</b>)
+              </p>
+            </div>
+          </div>
+          <!-- !snapshotInterval -->
+          <!-- snapshotMax -->
+          <div class="form-group" ng-if="model.SnapshotEnabled">
+              <label for="profile_snapshotMax" class="col-sm-2 col-lg-1 control-label text-left" style="margin-top: 20px;">
+                Snapshot max
+              </label>
+              <div class="col-sm-4">
+                <slider model="model.SnapshotMax" floor="1" ceil="100" step="1"></slider>
+              </div>
+              <div class="col-sm-2">
+                <input type="number" min="1" class="form-control" ng-model="model.SnapshotMax" id="profile_snapshotMax">
+              </div>
+              <div class="col-sm-4">
+                <p class="small text-muted" style="margin-top: 7px;">
+                  Snapshot max (<b>count</b>)
+                </p>
+              </div>
+            </div>
+          <!-- snapshotMax -->
+          <!-- encryptionEnabled -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label for="profile_encryptionEnabled" class="control-label text-left">
+                Enable encryption
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input name="profile_encryptionEnabled" type="checkbox" ng-model="model.EncryptionEnabled"><i></i>
+              </label>
+            </div>
+          </div>
+          <!-- !encryptionEnabled -->
+          <!-- interfaceType -->
+          <div class="form-group">
+            <label for="profile_interfaceType" class="col-sm-2 col-lg-1 control-label text-left">Interface type</label>
+            <div class="col-sm-10 col-lg-11">
+              <input type="text" class="form-control" ng-model="model.InterfaceType" name="profile_interfaceType" disabled>
+            </div>
+          </div>
+          <!-- !interfaceType -->
+          <!-- interfaceDriver -->
+          <div class="form-group">
+            <label for="profile_interfaceDriver" class="col-sm-2 col-lg-1 control-label text-left">Interface driver</label>
+            <div class="col-sm-10 col-lg-11">
+              <select name="profile_interfaceDriver" ng-model="model.InterfaceDriver" class="form-control">
+                <option value="ssd">macvlan</option>
+                <option value="hdd">overlay</option>
+              </select>
+            </div>
+          </div>
+          <!-- !interfaceDriver -->
+          <!-- interfaceNetwork -->
+          <div class="form-group">
+            <label for="profile_interfaceNetwork" class="col-sm-2 col-lg-1 control-label text-left">Interface network</label>
+            <div class="col-sm-10 col-lg-11">
+              <input type="text" class="form-control" ng-model="model.InterfaceNetwork" name="profile_interfaceNetwork" pattern="[a-zA-Z0-9]+">
+            </div>
+          </div>
+          <!-- !interfaceNetwork -->
+          <!-- interfaceConf -->
+          <div class="form-group">
+            <label for="profile_interfaceConf" class="col-sm-2 col-lg-1 control-label text-left">Interface conf</label>
+            <div class="col-sm-10 col-lg-11">
+              <input type="text" class="form-control" ng-model="model.InterfaceConf" name="profile_interfaceConf">
+            </div>
+          </div>
+          <!-- !interfaceConf -->
+          <!-- labels -->
+          <div class="form-group">
+            <div class="col-sm-12" style="margin-top: 5px;">
+              <label class="control-label text-left">Labels</label>
+              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+              </span>
+            </div>
+            <!-- labels-input-list -->
+            <div class="col-sm-12 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">
+                </div>
+                <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
+                  <i class="fa fa-trash" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+            <!-- !labels-input-list -->
+          </div>
+          <!-- !labels -->
           <!-- iops -->
           <div ng-if="!state.LimitBandwidth || state.NoLimit">
             <div class="col-sm-12 form-section-title">

app/extensions/storidge/views/profiles/edit/profile.html

@@ -84,6 +84,140 @@
             </div>
           </div>
           <!-- !type -->
+          <!-- Filesystem -->
+          <div class="form-group">
+              <label for="profile_filesystem" class="col-sm-2 col-lg-1 control-label text-left">Filesystem</label>
+              <div class="col-sm-10 col-lg-11">
+                <select name="profile_filesystem" ng-model="profile.Filesystem" class="form-control">
+                  <option value="btrfs">btrfs</option>
+                  <option value="ext4">ext4</option>
+                  <option value="xfs">xfs</option>
+                </select>
+              </div>
+            </div>
+            <!-- !Filesystem -->
+            <!-- snapshotEnabled -->
+            <div class="form-group">
+                <div class="col-sm-12">
+                  <label for="profile_snapshotEnabled" class="control-label text-left">
+                    Enable snapshots
+                  </label>
+                  <label class="switch" style="margin-left: 20px;">
+                    <input name="profile_snapshotEnabled" type="checkbox" ng-model="profile.SnapshotEnabled"><i></i>
+                  </label>
+                </div>
+              </div>
+            <!-- !snapshotEnabled -->
+            <!-- snapshotInterval -->
+            <div class="form-group" ng-if="profile.SnapshotEnabled">
+              <label for="profile_snapshotInterval" class="col-sm-2 col-lg-1 control-label text-left" style="margin-top: 20px;">
+                Snapshot interval
+              </label>
+              <div class="col-sm-4">
+                <slider model="profile.SnapshotInterval" floor="1" ceil="45000" step="1"></slider>
+              </div>
+              <div class="col-sm-2">
+                <input type="number" min="1" class="form-control" ng-model="profile.SnapshotInterval" id="profile_snapshotInterval">
+              </div>
+              <div class="col-sm-4">
+                <p class="small text-muted" style="margin-top: 7px;">
+                  Snapshot interval (<b>s</b>)
+                </p>
+              </div>
+            </div>
+            <!-- !snapshotInterval -->
+            <!-- snapshotMax -->
+            <div class="form-group" ng-if="profile.SnapshotEnabled">
+                <label for="profile_snapshotMax" class="col-sm-2 col-lg-1 control-label text-left" style="margin-top: 20px;">
+                  Snapshot max
+                </label>
+                <div class="col-sm-4">
+                  <slider model="profile.SnapshotMax" floor="1" ceil="100" step="1"></slider>
+                </div>
+                <div class="col-sm-2">
+                  <input type="number" min="1" class="form-control" ng-model="profile.SnapshotMax" id="profile_snapshotMax">
+                </div>
+                <div class="col-sm-4">
+                  <p class="small text-muted" style="margin-top: 7px;">
+                    Snapshot max (<b>count</b>)
+                  </p>
+                </div>
+              </div>
+            <!-- snapshotMax -->
+            <!-- encryptionEnabled -->
+            <div class="form-group">
+              <div class="col-sm-12">
+                <label for="profile_encryptionEnabled" class="control-label text-left">
+                  Enable encryption
+                </label>
+                <label class="switch" style="margin-left: 20px;">
+                  <input name="profile_encryptionEnabled" type="checkbox" ng-model="profile.EncryptionEnabled"><i></i>
+                </label>
+              </div>
+            </div>
+            <!-- !encryptionEnabled -->
+            <!-- interfaceType -->
+            <div class="form-group">
+              <label for="profile_interfaceType" class="col-sm-2 col-lg-1 control-label text-left">Interface type</label>
+              <div class="col-sm-10 col-lg-11">
+                <input type="text" class="form-control" ng-model="profile.InterfaceType" name="profile_interfaceType" disabled>
+              </div>
+            </div>
+            <!-- !interfaceType -->
+            <!-- interfaceDriver -->
+            <div class="form-group">
+              <label for="profile_interfaceDriver" class="col-sm-2 col-lg-1 control-label text-left">Interface driver</label>
+              <div class="col-sm-10 col-lg-11">
+                <select name="profile_interfaceDriver" ng-model="profile.InterfaceDriver" class="form-control">
+                  <option value="ssd">macvlan</option>
+                  <option value="hdd">overlay</option>
+                </select>
+              </div>
+            </div>
+            <!-- !interfaceDriver -->
+            <!-- interfaceNetwork -->
+            <div class="form-group">
+              <label for="profile_interfaceNetwork" class="col-sm-2 col-lg-1 control-label text-left">Interface network</label>
+              <div class="col-sm-10 col-lg-11">
+                <input type="text" class="form-control" ng-model="profile.InterfaceNetwork" name="profile_interfaceNetwork" pattern="[a-zA-Z0-9]+">
+              </div>
+            </div>
+            <!-- !interfaceNetwork -->
+            <!-- interfaceConf -->
+            <div class="form-group">
+              <label for="profile_interfaceConf" class="col-sm-2 col-lg-1 control-label text-left">Interface conf</label>
+              <div class="col-sm-10 col-lg-11">
+                <input type="text" class="form-control" ng-model="profile.InterfaceConf" name="profile_interfaceConf">
+              </div>
+            </div>
+            <!-- !interfaceConf -->
+            <!-- labels -->
+            <div class="form-group">
+              <div class="col-sm-12" style="margin-top: 5px;">
+                <label class="control-label text-left">Labels</label>
+                <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
+                  <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+                </span>
+              </div>
+              <!-- labels-input-list -->
+              <div class="col-sm-12 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">
+                  </div>
+                  <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
+                    <i class="fa fa-trash" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+              <!-- !labels-input-list -->
+            </div>
+            <!-- !labels -->
           <!-- iops -->
           <div ng-if="!state.LimitBandwidth || state.NoLimit">
             <div class="col-sm-12 form-section-title">

app/extensions/storidge/views/profiles/edit/profileController.js

@@ -2,6 +2,10 @@ angular.module('extension.storidge')
 .controller('StoridgeProfileController', ['$scope', '$state', '$transition$', 'Notifications', 'StoridgeProfileService', 'ModalService',
 function ($scope, $state, $transition$, Notifications, StoridgeProfileService, ModalService) {
 
+  $scope.formValues = {
+    Labels: []
+  };
+
   $scope.state = {
     NoLimit: false,
     LimitIOPS: false,
@@ -10,6 +14,30 @@ function ($scope, $state, $transition$, Notifications, StoridgeProfileService, M
     deleteInProgress: false
   };
 
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
+  function prepareLabels(profile) {
+    var labels = {};
+    $scope.formValues.Labels.forEach(function (label) {
+      if (label.name && label.value) {
+        labels[label.name] = label.value;
+      }
+    });
+    profile.Labels = labels;
+  }
+
+  function initLabels(labels) {
+    $scope.formValues.Labels = Object.keys(labels).map(function(key) {
+      return { name:key, value:labels[key] };
+    });
+  }
+
   $scope.RedundancyOptions = [
     { value: 2, label: '2-copy' },
     { value: 3, label: '3-copy' }
@@ -29,6 +57,8 @@ function ($scope, $state, $transition$, Notifications, StoridgeProfileService, M
       delete profile.MaxBandwidth;
     }
 
+    prepareLabels(profile);
+
     $scope.state.updateInProgress = true;
     StoridgeProfileService.update(profile)
     .then(function success() {
@@ -81,6 +111,7 @@ function ($scope, $state, $transition$, Notifications, StoridgeProfileService, M
       } else {
         $scope.state.NoLimit = true;
       }
+      initLabels(profile.Labels);
       $scope.profile = profile;
     })
     .catch(function error(err) {

app/portainer/components/slider/sliderController.js

@@ -10,7 +10,7 @@ angular.module('portainer.app')
     showSelectionBar: true,
     enforceStep: false,
     translate: function(value, sliderId, label) {
-      if (label === 'floor' || value === 0) {
+      if ((label === 'floor' && ctrl.floor === 0) || value === 0) {
         return 'unlimited';
       }
       return value;