volumes: add mount UI

This commit is contained in:
Girish Ramakrishnan
2021-05-12 21:40:30 -07:00
parent c56c43c464
commit fd3fb23955
3 changed files with 88 additions and 3 deletions
+32
View File
@@ -21,6 +21,38 @@
<input type="text" class="form-control" ng-model="volumeAdd.hostPath" name="hostPath" ng-disabled="volumeAdd.busy" autofocus>
</div>
<div class="form-group">
<label class="control-label" for="mountType">{{ 'volumes.mountType' | tr }}</label>
<select class="form-control" id="mountType" ng-model="volumeAdd.mountType" ng-options="a.value as a.name for a in mountTypes"></select>
</div>
<div uib-collapse="volumeAdd.mountType === 'noop'">
<div class="form-group" ng-show="volumeAdd.mountType === 'ext4'">
<label class="control-label" for="volumeAddHost">{{ 'volumes.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">
</div>
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs' || volumeAdd.mountType === 'nfs'">
<label class="control-label" for="volumeAddHost">{{ 'volumes.host' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeAdd.host" id="volumeAddHost" name="host" ng-disabled="volumeAdd.busy" placeholder="Server IP or hostname">
</div>
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs' || volumeAdd.mountType === 'nfs'">
<label class="control-label" for="volumeAddRemoteDir">{{ 'volumes.remoteDirectory' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeAdd.remoteDir" id="volumeAddRemoteDir" name="remoteDir" ng-disabled="volumeAdd.busy" placeholder="/share">
</div>
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs'">
<label class="control-label" for="volumeAddUsername">{{ 'volumes.username' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeAdd.username" id="volumeAddUsername" name="username" ng-disabled="volumeAdd.busy">
</div>
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs'">
<label class="control-label" for="volumeAddPassword">{{ 'volumes.password' | tr }}</label>
<input type="password" class="form-control" ng-model="volumeAdd.password" id="volumeAddPassword" name="password" ng-disabled="volumeAdd.busy">
</div>
</div>
<input class="ng-hide" type="submit" ng-disabled="volumeAddForm.$invalid || volumeAdd.busy"/>
</fieldset>
</form>
+41 -1
View File
@@ -10,6 +10,14 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
$scope.volumes = [];
$scope.ready = false;
$scope.mountTypes = [
{ name: 'CIFS', value: 'cifs' },
{ name: 'EXT4', value: 'ext4' },
{ name: 'NFS', value: 'nfs' },
{ name: 'SSHFS', value: 'sshfs' },
{ name: 'No-op', value: 'noop' }
];
function refreshVolumes(callback) {
Client.getVolumes(function (error, results) {
if (error) return console.error(error);
@@ -26,12 +34,24 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
name: '',
hostPath: '',
mountType: 'noop',
host: '',
remoteDir: '',
username: '',
password: '',
diskPath: '',
reset: function () {
$scope.volumeAdd.busy = false;
$scope.volumeAdd.error = null;
$scope.volumeAdd.name = '';
$scope.volumeAdd.hostPath = '';
$scope.volumeAdd.mountType = 'noop';
$scope.volumeAdd.host = '';
$scope.volumeAdd.remoteDir = '';
$scope.volumeAdd.username = '';
$scope.volumeAdd.password = '';
$scope.volumeAdd.diskPath = '';
$scope.volumeAddForm.$setPristine();
$scope.volumeAddForm.$setUntouched();
@@ -47,7 +67,27 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
$scope.volumeAdd.busy = true;
$scope.volumeAdd.error = null;
Client.addVolume($scope.volumeAdd.name, $scope.volumeAdd.hostPath, function (error) {
var mountOptions = null;
if ($scope.volumeAdd.mountType === 'cifs') {
mountOptions = {
host: $scope.volumeAdd.host,
remoteDir: $scope.volumeAdd.remoteDir,
username: $scope.volumeAdd.username,
password: $scope.volumeAdd.password
};
} else if ($scope.volumeAdd.mountType === 'nfs') {
mountOptions = {
host: $scope.volumeAdd.host,
remoteDir: $scope.volumeAdd.remoteDir,
};
} else {
mountOptions = {
diskPath: $scope.volumeAdd.diskPath
};
}
Client.addVolume($scope.volumeAdd.name, $scope.volumeAdd.hostPath, $scope.volumeAdd.mountType, mountOptions, function (error) {
$scope.volumeAdd.busy = false;
if (error) {
$scope.volumeAdd.error = error.message;