Provide a dropdown for disk mounting

src/js/client.js

@@ -1973,6 +1973,15 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.getBlockDevices = function (callback) {
+        get('/api/v1/cloudron/block_devices', null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data.devices);
+        });
+    };
+
     Client.prototype.disks = function (callback) {
         get('/api/v1/cloudron/disks', null, function (error, data, status) {
             if (error) return callback(error);

src/views/volumes.html

@@ -35,8 +35,9 @@
             </div>
 
             <div class="form-group" ng-show="volumeAdd.mountType === 'ext4' || volumeAdd.mountType === 'xfs'">
-              <label class="control-label" for="volumeAddHost">{{ 'volumes.addVolumeDialog.diskPath' | tr }}</label>
+              <label class="control-label">{{ 'volumes.addVolumeDialog.diskPath' | tr }}</label>
-              <input type="text" class="form-control" ng-model="volumeAdd.diskPath" id="volumeAddDiskPath" name="diskPath" ng-disabled="volumeAdd.busy" placeholder="/dev/disk/by-uuid/uuid">
+              <select class="form-control" ng-model="volumeAdd.diskPath" ng-options="item.path as item.label for item in blockDevices track by item.path"></select>
+              <input type="text" class="form-control" style="margin-top: 5px;" ng-show="volumeAdd.diskPath === 'custom'" ng-model="volumeAdd.customDiskPath" ng-disabled="volumeAdd.busy" placeholder="/dev/disk/by-uuid/uuid" ng-required="volumeAdd.diskPath === 'custom'">
             </div>
 
             <div class="form-group" ng-show="volumeAdd.mountType === 'cifs' || volumeAdd.mountType === 'nfs' || volumeAdd.mountType === 'sshfs'">

src/views/volumes.js

@@ -11,6 +11,7 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
 
     $scope.config = Client.getConfig();
     $scope.volumes = [];
+    $scope.devices = [];
     $scope.ready = false;
 
     $scope.mountTypes = [
@@ -104,6 +105,7 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
             $scope.volumeAdd.username = '';
             $scope.volumeAdd.password = '';
             $scope.volumeAdd.diskPath = '';
+            $scope.volumeAdd.customDiskPath = '';
             $scope.volumeAdd.user = '';
             $scope.volumeAdd.seal = false;
             $scope.volumeAdd.port = 22;
@@ -116,7 +118,25 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
         show: function () {
             $scope.volumeAdd.reset();
 
+            $scope.blockDevices = [];
+
+            Client.getBlockDevices(function (error, result) {
+                if (error) console.error('Failed to list blockdevices:', error);
+
+                // only offer unmounted disks
+                result = result.filter(function (d) { return !d.mountpoint; });
+
+                // amend label for UI
+                result.forEach(function (d) { d.label = d.path; });
+
+                // add custom fake option
+                result.push({ path: 'custom', label: 'Custom' });
+
+                $scope.blockDevices = result;
+                $scope.volumeAdd.diskPath = $scope.blockDevices[0].path;
+
                 $('#volumeAddModal').modal('show');
+            });
         },
 
         submit: function () {
@@ -148,7 +168,7 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
                 };
             } else if ($scope.volumeAdd.mountType === 'ext4' || $scope.volumeAdd.mountType === 'xfs') {
                 mountOptions = {
-                    diskPath: $scope.volumeAdd.diskPath
+                    diskPath: $scope.volumeAdd.diskPath === 'custom' ? $scope.volumeAdd.customDiskPath : $scope.volumeAdd.diskPath
                 };
             }