Show volume edit options for network mounts

dashboard/src/js/client.js

@@ -3336,15 +3336,16 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
-    Client.prototype.updateVolume = function (volumeId, mountType, mountOptions, callback) {
+    Client.prototype.updateVolume = function (volumeId, mountOptions, callback) {
         var data = {
-            mountType: mountType,
             mountOptions: mountOptions
         };
 
+        console.log('---update', data)
+
         post('/api/v1/volumes/' + volumeId, data, null, function (error, data, status) {
             if (error) return callback(error);
-            if (status !== 200) return callback(new ClientError(status, data));
+            if (status !== 204) return callback(new ClientError(status, data));
 
             callback();
         });

dashboard/src/views/volumes.html

@@ -97,6 +97,74 @@
   </div>
 </div>
 
+<!-- modal volume edit -->
+<div class="modal fade" id="volumeEditModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">{{ 'volumes.editVolumeDialog.title' | tr }}</h4>
+      </div>
+      <div class="modal-body">
+        <form name="volumeEditForm" role="form" novalidate ng-submit="volumeEdit.submit()" autocomplete="off">
+          <fieldset>
+            <p class="has-error text-center" ng-show="volumeEdit.error">{{ volumeEdit.error }}</p>
+
+            <div><b>{{ 'volumes.mountType' | tr }}:</b> {{ volumeEdit.mountType }}</div>
+            <br/>
+
+            <div class="form-group" ng-show="volumeEdit.mountType === 'cifs' || volumeEdit.mountType === 'nfs' || volumeEdit.mountType === 'sshfs'">
+              <label class="control-label" for="volumeAddHost">{{ 'volumes.addVolumeDialog.server' | tr }}</label>
+              <input type="text" class="form-control" ng-model="volumeEdit.host" id="volumeEditHost" name="host" ng-disabled="volumeEdit.busy" placeholder="Server IP or hostname" ng-required="volumeEdit.mountType === 'cifs' || volumeEdit.mountType === 'nfs' || volumeEdit.mountType === 'sshfs'">
+            </div>
+
+            <div class="checkbox" ng-show="volumeEdit.mountType === 'cifs'">
+              <label>
+                <input type="checkbox" ng-model="volumeEdit.seal">{{ 'backups.configureBackupStorage.cifsSealSupport' | tr }}</input>
+              </label>
+            </div>
+
+            <div class="form-group" ng-show="volumeEdit.mountType === 'sshfs'">
+              <label class="control-label" for="volumeEditPort">{{ 'volumes.addVolumeDialog.port' | tr }}</label>
+              <input type="number" class="form-control" ng-model="volumeEdit.port" id="volumeEditPort" name="port" ng-disabled="volumeEdit.busy" ng-required="volumeEdit.mountType === 'sshfs'">
+            </div>
+
+            <div class="form-group" ng-show="volumeEdit.mountType === 'cifs' || volumeEdit.mountType === 'nfs' || volumeEdit.mountType === 'sshfs'">
+              <label class="control-label" for="volumeEditRemoteDir">{{ 'volumes.addVolumeDialog.remoteDirectory' | tr }}</label>
+              <input type="text" class="form-control" ng-model="volumeEdit.remoteDir" id="volumeAddRemoteDir" name="remoteDir" ng-disabled="volumeEdit.busy" placeholder="/share" ng-required="volumeEdit.mountType === 'cifs' || volumeAdd.mountType === 'nfs' || volumeAdd.mountType === 'sshfs'">
+            </div>
+
+            <div class="form-group" ng-show="volumeEdit.mountType === 'cifs'">
+              <label class="control-label" for="volumeEditUsername">{{ 'volumes.addVolumeDialog.username' | tr }}</label>
+              <input type="text" class="form-control" ng-model="volumeEdit.username" id="volumeEditUsername" name="cifsUsername" ng-disabled="volumeEdit.busy" ng-required="volumeEdit.mountType === 'cifs'">
+            </div>
+
+            <div class="form-group" ng-show="volumeEdit.mountType === 'cifs'">
+              <label class="control-label" for="volumeEditPassword">{{ 'volumes.addVolumeDialog.password' | tr }}</label>
+              <input type="password" class="form-control" ng-model="volumeEdit.password" id="volumeEditPassword" name="cifsPassword" ng-disabled="volumeEdit.busy" password-reveal ng-required="volumeEdit.mountType === 'cifs'">
+            </div>
+
+            <div class="form-group" ng-show="volumeEdit.mountType === 'sshfs'">
+              <label class="control-label" for="volumeEditUser">{{ 'volumes.addVolumeDialog.user' | tr }}</label>
+              <input type="text" class="form-control" ng-model="volumeEdit.user" id="volumeEditAddUser" name="user" ng-disabled="volumeEdit.busy" ng-required="volumeEdit.mountType === 'sshfs'">
+            </div>
+
+            <div class="form-group" ng-show="volumeEdit.mountType === 'sshfs'">
+              <label class="control-label" for="volumeEditPrivateKey">{{ 'volumes.addVolumeDialog.privateKey' | tr }}</label>
+              <textarea class="form-control" ng-model="volumeEdit.privateKey" id="volumeEditPrivateKey" name="privateKey" ng-disabled="volumeEdit.busy" ng-required="volumeEdit.mountType === 'sshfs'"></textarea>
+            </div>
+
+            <input class="ng-hide" type="submit" ng-disabled="volumeEditForm.$invalid || volumeEdit.busy"/>
+          </fieldset>
+        </form>
+      </div>
+      <div class="modal-footer ">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
+        <button type="submit" class="btn btn-outline btn-success pull-right" ng-click="volumeEdit.submit()" ng-disabled="volumeEditForm.$invalid || volumeEdit.busy"><i class="fa fa-circle-notch fa-spin" ng-show="volumeEdit.busy"></i> {{ 'main.dialog.save' | tr }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Modal volume remove -->
 <div class="modal fade" id="volumeRemoveModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
@@ -138,7 +206,7 @@
               <th style="width: 20%" class="text-left">{{ 'volumes.name' | tr }}</th>
               <th style="width: 15%" class="text-left">{{ 'volumes.type' | tr }}</th>
               <th style="width: 45%" class="text-left">{{ 'volumes.hostPath' | tr }}</th>
-              <th style="width: 15%" class="text-right">{{ 'main.actions' | tr }}</th>
+              <th style="width: 122px" class="text-right">{{ 'main.actions' | tr }}</th>
             </tr>
           </thead>
           <tbody>
@@ -157,6 +225,7 @@
               <td class="text-left wrap-table-cell hidden-xs hidden-sm" ng-show="volume.mountType === 'mountpoint' || volume.mountType === 'filesystem'">{{ volume.hostPath }}</td>
               <td class="text-right no-wrap" style="vertical-align: bottom">
                 <button class="btn btn-xs btn-default" ng-click="remount(volume)" ng-show="isMountProvider(volume.mountType)" ng-disabled="volume.remounting" uib-tooltip="{{ 'volumes.remountActionTooltip' | tr }}"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': volume.remounting }"></i></button>
+                <button class="btn btn-xs btn-default" ng-click="volumeEdit.show(volume)" ng-show="isNetworkProvider(volume.mountType)" ng-disabled="volume.remounting" uib-tooltip="{{ 'volumes.editActionTooltip' | tr }}"><i class="fa fa-pencil-alt"></i></button>
                 <a class="btn btn-xs btn-default" ng-href="{{ '/frontend/filemanager.html#/home/volume/' + volume.id }}" target="_blank" uib-tooltip="{{ 'volumes.openFileManagerActionTooltip' | tr }}"><i class="fas fa-folder"></i></a>
                 <button class="btn btn-xs btn-danger" ng-click="volumeRemove.show(volume)" uib-tooltip="{{ 'volumes.removeVolumeActionTooltip' | tr }}"><i class="far fa-trash-alt"></i></button>
               </td>

dashboard/src/views/volumes.js

@@ -62,6 +62,10 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
         return provider === 'sshfs' || provider === 'cifs' || provider === 'nfs' || provider === 'ext4' || provider === 'xfs';
     };
 
+    $scope.isNetworkProvider = function (provider) {
+        return provider === 'sshfs' || provider === 'cifs' || provider === 'nfs';
+    };
+
     $scope.remount = function (volume) {
         volume.remounting = true;
 
@@ -194,6 +198,116 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
         }
     };
 
+    $scope.volumeEdit = {
+        error: null,
+        busy: false,
+
+        // cannot be changed
+        volume: '',
+        name: '',
+        mountType: 'mountpoint',
+
+        // can be changed
+        host: '',
+        remoteDir: '',
+        username: '',
+        password: '',
+        user: '',
+        seal: false,
+        port: 22,
+        privateKey: '',
+
+        reset: function () {
+            $scope.volumeEdit.error = null;
+            $scope.volumeEdit.busy = false;
+            $scope.volumeEdit.volume = null;
+            $scope.volumeEdit.name = '';
+            $scope.volumeEdit.mountType = '';
+            $scope.volumeEdit.host = '';
+            $scope.volumeEdit.seal = '';
+            $scope.volumeEdit.port = '';
+            $scope.volumeEdit.remoteDir = '';
+            $scope.volumeEdit.username = '';
+            $scope.volumeEdit.password = '';
+            $scope.volumeEdit.user = '';
+            $scope.volumeEdit.privateKey = '';
+
+            $scope.volumeEditForm.$setPristine();
+            $scope.volumeEditForm.$setUntouched();
+        },
+
+        show: function (volume) {
+            $scope.volumeEdit.reset();
+
+            Client.getVolume(volume.id, function (error, result) {
+                if (error) console.error('Failed to get volume:', error);
+
+                $scope.volumeEdit.volume = volume;
+                $scope.volumeEdit.mountType = result.mountType;
+                $scope.volumeEdit.host = result.mountOptions.host;
+                $scope.volumeEdit.seal = result.mountOptions.seal;
+                $scope.volumeEdit.port = result.mountOptions.port;
+                $scope.volumeEdit.remoteDir = result.mountOptions.remoteDir;
+                $scope.volumeEdit.username = result.mountOptions.username;
+                $scope.volumeEdit.password = result.mountOptions.password;
+                $scope.volumeEdit.user = result.mountOptions.user;
+                $scope.volumeEdit.privateKey = result.mountOptions.privateKey;
+
+                $('#volumeEditModal').modal('show');
+            });
+        },
+
+        submit: function () {
+            $scope.volumeEdit.busy = true;
+            $scope.volumeEdit.error = null;
+
+            var mountOptions = null;
+
+            if ($scope.volumeEdit.mountType === 'cifs') {
+                mountOptions = {
+                    host: $scope.volumeEdit.host,
+                    remoteDir: $scope.volumeEdit.remoteDir,
+                    username: $scope.volumeEdit.username,
+                    password: $scope.volumeEdit.password,
+                    seal: $scope.volumeEdit.seal
+                };
+            } else if ($scope.volumeEdit.mountType === 'nfs') {
+                mountOptions = {
+                    host: $scope.volumeEdit.host,
+                    remoteDir: $scope.volumeEdit.remoteDir,
+                };
+            } else if ($scope.volumeEdit.mountType === 'sshfs') {
+                mountOptions = {
+                    host: $scope.volumeEdit.host,
+                    port: $scope.volumeEdit.port,
+                    remoteDir: $scope.volumeEdit.remoteDir,
+                    user: $scope.volumeEdit.user,
+                    privateKey: $scope.volumeEdit.privateKey,
+                };
+            } else {
+                console.error('Should not come here. Only network volumes can be edited');
+
+                $('#volumeEditModal').modal('hide');
+                $scope.volumeEdit.reset();
+
+                return;
+            }
+
+            Client.updateVolume($scope.volumeEdit.volume.id, mountOptions, function (error) {
+                $scope.volumeEdit.busy = false;
+                if (error) {
+                    $scope.volumeEdit.error = error.message;
+                    return;
+                }
+
+                $('#volumeEditModal').modal('hide');
+                $scope.volumeEdit.reset();
+
+                refreshVolumes();
+            });
+        }
+    };
+
     $scope.volumeRemove = {
         busy: false,
         error: null,