volumes: remove the edit ui

This commit is contained in:
Girish Ramakrishnan
2021-06-21 16:23:34 -07:00
parent b27b4a38eb
commit ccc45a41e6
2 changed files with 88 additions and 137 deletions
+42 -50
View File
@@ -1,89 +1,82 @@
<!-- modal volume add -->
<div class="modal fade" id="volumeConfigureModal" tabindex="-1" role="dialog">
<div class="modal fade" id="volumeAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" ng-show="volumeConfigure.adding">{{ 'volumes.addVolumeDialog.title' | tr }}</h4>
<h4 class="modal-title" ng-hide="volumeConfigure.adding">{{ 'volumes.updateVolumeDialog.title' | tr:{ volume: volumeConfigure.volume.name } }}</h4>
<h4 class="modal-title">{{ 'volumes.addVolumeDialog.title' | tr }}</h4>
</div>
<div class="modal-body">
<form name="volumeConfigureForm" role="form" novalidate ng-submit="volumeConfigure.submit()" autocomplete="off">
<form name="volumeAddForm" role="form" novalidate ng-submit="volumeAdd.submit()" autocomplete="off">
<fieldset>
<p class="has-error text-center" ng-show="volumeConfigure.error">{{ volumeConfigure.error }}</p>
<p class="has-error text-center" ng-show="volumeAdd.error">{{ volumeAdd.error }}</p>
<div class="form-group" ng-show="volumeConfigure.adding">
<div class="form-group">
<label class="control-label">{{ 'volumes.name' | tr }}</label>
<p class="small text-info" ng-bind-html="'volumes.addVolumeDialog.nameWarning' | tr"></p>
<input type="text" class="form-control" ng-model="volumeConfigure.name" name="name" ng-disabled="volumeConfigure.busy" autofocus>
</div>
<div class="form-group" ng-hide="volumeConfigure.adding">
<label class="control-label">{{ 'volumes.mountStatus' | tr }}</label>
<p ng-class="volumeConfigure.volume.status.state === 'active' ? 'text-success' : 'text-danger'">{{ volumeConfigure.volume.status.message }} ({{ volumeConfigure.volume.status.state }})</p>
<input type="text" class="form-control" ng-model="volumeAdd.name" name="name" 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="volumeConfigure.mountType" ng-options="a.value as a.name for a in mountTypes"></select>
<p class="small text-info" ng-show="volumeConfigure.mountType === 'noop'" ng-bind-html="'volumes.addVolumeDialog.noopWarning' | tr"></p>
<p class="small text-info" ng-hide="volumeConfigure.mountType === 'noop'" ng-bind-html="'volumes.addVolumeDialog.mountTypeInfo' | tr"></p>
<select class="form-control" id="mountType" ng-model="volumeAdd.mountType" ng-options="a.value as a.name for a in mountTypes"></select>
<p class="small text-info" ng-show="volumeAdd.mountType === 'noop'" ng-bind-html="'volumes.addVolumeDialog.noopWarning' | tr"></p>
<p class="small text-info" ng-hide="volumeAdd.mountType === 'noop'" ng-bind-html="'volumes.addVolumeDialog.mountTypeInfo' | tr"></p>
</div>
<div class="form-group" ng-show="volumeConfigure.mountType === 'noop'">
<div class="form-group" ng-show="volumeAdd.mountType === 'noop'">
<label class="control-label">{{ 'volumes.hostPath' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeConfigure.hostPath" name="hostPath" ng-show="volumeConfigure.adding" ng-disabled="volumeConfigure.busy" placeholder="/mnt/data" autofocus>
<p ng-hide="volumeConfigure.adding">{{ volumeConfigure.volume.hostPath }}</p>
<input type="text" class="form-control" ng-model="volumeAdd.hostPath" name="hostPath" ng-disabled="volumeAdd.busy" placeholder="/mnt/data" autofocus>
</div>
<div uib-collapse="volumeConfigure.mountType === 'noop'">
<div class="form-group" ng-show="volumeConfigure.mountType === 'ext4'">
<label class="control-label" for="volumeConfigureHost">{{ 'volumes.addVolumeDialog.diskPath' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeConfigure.diskPath" id="volumeConfigureDiskPath" name="diskPath" ng-disabled="volumeConfigure.busy" placeholder="/dev/disk/by-uuid/uuid">
<div uib-collapse="volumeAdd.mountType === 'noop'">
<div class="form-group" ng-show="volumeAdd.mountType === 'ext4'">
<label class="control-label" for="volumeAddHost">{{ '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">
</div>
<div class="form-group" ng-show="volumeConfigure.mountType === 'cifs' || volumeConfigure.mountType === 'nfs' || volumeConfigure.mountType === 'sshfs'">
<label class="control-label" for="volumeConfigureHost">{{ 'volumes.addVolumeDialog.server' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeConfigure.host" id="volumeConfigureHost" name="host" ng-disabled="volumeConfigure.busy" placeholder="Server IP or hostname">
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs' || volumeAdd.mountType === 'nfs' || volumeAdd.mountType === 'sshfs'">
<label class="control-label" for="volumeAddHost">{{ 'volumes.addVolumeDialog.server' | 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="volumeConfigure.mountType === 'cifs' || volumeConfigure.mountType === 'nfs' || volumeConfigure.mountType === 'sshfs'">
<label class="control-label" for="volumeConfigureRemoteDir">{{ 'volumes.addVolumeDialog.remoteDirectory' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeConfigure.remoteDir" id="volumeConfigureRemoteDir" name="remoteDir" ng-disabled="volumeConfigure.busy" placeholder="/share">
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs' || volumeAdd.mountType === 'nfs' || volumeAdd.mountType === 'sshfs'">
<label class="control-label" for="volumeAddRemoteDir">{{ 'volumes.addVolumeDialog.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="volumeConfigure.mountType === 'cifs'">
<label class="control-label" for="volumeConfigureUsername">{{ 'volumes.addVolumeDialog.username' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeConfigure.username" id="volumeConfigureUsername" name="username" ng-disabled="volumeConfigure.busy">
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs'">
<label class="control-label" for="volumeAddUsername">{{ 'volumes.addVolumeDialog.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="volumeConfigure.mountType === 'cifs'">
<label class="control-label" for="volumeConfigurePassword">{{ 'volumes.addVolumeDialog.password' | tr }}</label>
<input type="password" class="form-control" ng-model="volumeConfigure.password" id="volumeConfigurePassword" name="password" ng-disabled="volumeConfigure.busy">
<div class="form-group" ng-show="volumeAdd.mountType === 'cifs'">
<label class="control-label" for="volumeAddPassword">{{ 'volumes.addVolumeDialog.password' | tr }}</label>
<input type="password" class="form-control" ng-model="volumeAdd.password" id="volumeAddPassword" name="password" ng-disabled="volumeAdd.busy">
</div>
<div class="form-group" ng-show="volumeConfigure.mountType === 'sshfs'">
<label class="control-label" for="volumeConfigurePort">{{ 'volumes.addVolumeDialog.port' | tr }}</label>
<input type="number" class="form-control" ng-model="volumeConfigure.port" id="volumeConfigurePort" name="port" ng-disabled="volumeConfigure.busy">
<div class="form-group" ng-show="volumeAdd.mountType === 'sshfs'">
<label class="control-label" for="volumeAddPort">{{ 'volumes.addVolumeDialog.port' | tr }}</label>
<input type="number" class="form-control" ng-model="volumeAdd.port" id="volumeAddPort" name="port" ng-disabled="volumeAdd.busy">
</div>
<div class="form-group" ng-show="volumeConfigure.mountType === 'sshfs'">
<label class="control-label" for="volumeConfigureUser">{{ 'volumes.addVolumeDialog.user' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeConfigure.user" id="volumeConfigureUser" name="user" ng-disabled="volumeConfigure.busy">
<div class="form-group" ng-show="volumeAdd.mountType === 'sshfs'">
<label class="control-label" for="volumeAddUser">{{ 'volumes.addVolumeDialog.user' | tr }}</label>
<input type="text" class="form-control" ng-model="volumeAdd.user" id="volumeAddUser" name="user" ng-disabled="volumeAdd.busy">
</div>
<div class="form-group" ng-show="volumeConfigure.mountType === 'sshfs'">
<label class="control-label" for="volumeConfigurePrivateKey">{{ 'volumes.addVolumeDialog.privateKey' | tr }}</label>
<textarea class="form-control" ng-model="volumeConfigure.privateKey" id="volumeConfigurePrivateKey" name="privateKey" ng-disabled="volumeConfigure.busy"></textarea>
<div class="form-group" ng-show="volumeAdd.mountType === 'sshfs'">
<label class="control-label" for="volumeAddPrivateKey">{{ 'volumes.addVolumeDialog.privateKey' | tr }}</label>
<textarea class="form-control" ng-model="volumeAdd.privateKey" id="volumeAddPrivateKey" name="privateKey" ng-disabled="volumeAdd.busy"></textarea>
</div>
</div>
<input class="ng-hide" type="submit" ng-disabled="volumeConfigureForm.$invalid || volumeConfigure.busy"/>
<input class="ng-hide" type="submit" ng-disabled="volumeAddForm.$invalid || volumeAdd.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="volumeConfigure.submit()" ng-disabled="volumeConfigureForm.$invalid || volumeConfigure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="volumeConfigure.busy"></i> {{ 'main.dialog.save' | tr }}</button>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="volumeAdd.submit()" ng-disabled="volumeAddForm.$invalid || volumeAdd.busy"><i class="fa fa-circle-notch fa-spin" ng-show="volumeAdd.busy"></i> {{ 'main.dialog.save' | tr }}</button>
</div>
</div>
</div>
@@ -110,7 +103,7 @@
<div class="content">
<div class="text-left">
<h1>{{ 'volumes.title' | tr }} <button class="btn btn-primary btn-outline pull-right" ng-click="volumeConfigure.show()"><i class="fa fa-plus"></i> {{ 'volumes.addVolumeAction' | tr }}</button></h1>
<h1>{{ 'volumes.title' | tr }} <button class="btn btn-primary btn-outline pull-right" ng-click="volumeAdd.show()"><i class="fa fa-plus"></i> {{ 'volumes.addVolumeAction' | tr }}</button></h1>
</div>
<div class="card card-large">
@@ -140,18 +133,17 @@
<i class="fa fa-circle" ng-style="{ color: volume.status.state === 'active' ? '#27CE65' : '#d9534f' }" ng-show="volume.status" uib-tooltip="{{ volume.status.message }}"></i>
<i class="fa fa-circle-notch fa-spin" ng-hide="volume.status"></i>
</td>
<td class="elide-table-cell hand" ng-click="volumeConfigure.show(volume)">
<td class="elide-table-cell">
{{ volume.name }}
</td>
<td class="elide-table-cell hand" ng-click="volumeConfigure.show(volume)">
<td class="elide-table-cell">
{{ volume.mountType }}
</td>
<td class="text-left elide-table-cell hidden-xs hidden-sm hand" ng-click="volumeConfigure.show(volume)">
<td class="text-left elide-table-cell hidden-xs hidden-sm">
<span ng-show="volume.mountType !== 'noop'">{{ volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath }}{{ volume.mountOptions.remoteDir }}</span>
<span ng-show="volume.mountType === 'noop'">{{ volume.hostPath }}</span>
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-default" ng-click="volumeConfigure.show(volume)" title="{{ 'volumes.tooltipEdit' | tr }}"><i class="fa fa-pencil-alt"></i></button>
<a class="btn btn-xs btn-default" ng-href="{{ '/filemanager.html?volumeId=' + 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>
+46 -87
View File
@@ -54,13 +54,10 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
});
}
$scope.volumeConfigure = {
$scope.volumeAdd = {
error: null,
busy: false,
adding: false,
volume: null,
name: '',
hostPath: '',
@@ -75,116 +72,78 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
privateKey: '',
reset: function () {
$scope.volumeConfigure.error = null;
$scope.volumeConfigure.busy = false;
$scope.volumeConfigure.adding = false;
$scope.volumeConfigure.volume = null;
$scope.volumeConfigure.name = '';
$scope.volumeConfigure.hostPath = '';
$scope.volumeConfigure.mountType = 'noop';
$scope.volumeConfigure.host = '';
$scope.volumeConfigure.remoteDir = '';
$scope.volumeConfigure.username = '';
$scope.volumeConfigure.password = '';
$scope.volumeConfigure.diskPath = '';
$scope.volumeConfigure.user = '';
$scope.volumeConfigure.port = 22;
$scope.volumeConfigure.privateKey = '';
$scope.volumeAdd.error = null;
$scope.volumeAdd.busy = false;
$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.volumeAdd.user = '';
$scope.volumeAdd.port = 22;
$scope.volumeAdd.privateKey = '';
$scope.volumeConfigureForm.$setPristine();
$scope.volumeConfigureForm.$setUntouched();
$scope.volumeAddForm.$setPristine();
$scope.volumeAddForm.$setUntouched();
},
show: function (volume) {
$scope.volumeConfigure.reset();
show: function () {
$scope.volumeAdd.reset();
$scope.volumeConfigure.volume = volume || null;
if (volume) {
$scope.volumeConfigure.adding = false;
$scope.volumeConfigure.name = volume.name;
$scope.volumeConfigure.hostPath = volume.hostPath;
$scope.volumeConfigure.mountType = volume.mountType;
if (volume.mountType === 'cifs') {
$scope.volumeConfigure.host = volume.mountOptions.host;
$scope.volumeConfigure.remoteDir = volume.mountOptions.remoteDir;
$scope.volumeConfigure.username = volume.mountOptions.username;
$scope.volumeConfigure.password = volume.mountOptions.password;
} else if (volume.mountType === 'nfs') {
$scope.volumeConfigure.host = volume.mountOptions.host;
$scope.volumeConfigure.remoteDir = volume.mountOptions.remoteDir;
} else if (volume.mountType === 'sshfs') {
$scope.volumeConfigure.host = volume.mountOptions.host;
$scope.volumeConfigure.port = volume.mountOptions.port;
$scope.volumeConfigure.remoteDir = volume.mountOptions.remoteDir;
$scope.volumeConfigure.user = volume.mountOptions.user;
$scope.volumeConfigure.privateKey = volume.mountOptions.privateKey;
} else if (volume.mountType === 'ext4') {
$scope.volumeConfigure.diskPath = volume.mountOptions.diskPath;
}
} else {
$scope.volumeConfigure.adding = true;
}
$('#volumeConfigureModal').modal('show');
$('#volumeAddModal').modal('show');
},
submit: function () {
$scope.volumeConfigure.busy = true;
$scope.volumeConfigure.error = null;
$scope.volumeAdd.busy = true;
$scope.volumeAdd.error = null;
var mountOptions = null;
if ($scope.volumeConfigure.mountType === 'cifs') {
if ($scope.volumeAdd.mountType === 'cifs') {
mountOptions = {
host: $scope.volumeConfigure.host,
remoteDir: $scope.volumeConfigure.remoteDir,
username: $scope.volumeConfigure.username,
password: $scope.volumeConfigure.password
host: $scope.volumeAdd.host,
remoteDir: $scope.volumeAdd.remoteDir,
username: $scope.volumeAdd.username,
password: $scope.volumeAdd.password
};
} else if ($scope.volumeConfigure.mountType === 'nfs') {
} else if ($scope.volumeAdd.mountType === 'nfs') {
mountOptions = {
host: $scope.volumeConfigure.host,
remoteDir: $scope.volumeConfigure.remoteDir,
host: $scope.volumeAdd.host,
remoteDir: $scope.volumeAdd.remoteDir,
};
} else if ($scope.volumeConfigure.mountType === 'sshfs') {
} else if ($scope.volumeAdd.mountType === 'sshfs') {
mountOptions = {
host: $scope.volumeConfigure.host,
port: $scope.volumeConfigure.port,
remoteDir: $scope.volumeConfigure.remoteDir,
user: $scope.volumeConfigure.user,
privateKey: $scope.volumeConfigure.privateKey,
host: $scope.volumeAdd.host,
port: $scope.volumeAdd.port,
remoteDir: $scope.volumeAdd.remoteDir,
user: $scope.volumeAdd.user,
privateKey: $scope.volumeAdd.privateKey,
};
} else if ($scope.volumeConfigure.mountType === 'ext4') {
} else if ($scope.volumeAdd.mountType === 'ext4') {
mountOptions = {
diskPath: $scope.volumeConfigure.diskPath
diskPath: $scope.volumeAdd.diskPath
};
}
var hostPath;
if ($scope.volumeConfigure.mountType === 'noop') {
hostPath = $scope.volumeConfigure.hostPath; // settable by user
if ($scope.volumeAdd.mountType === 'noop') {
hostPath = $scope.volumeAdd.hostPath; // settable by user
} else {
hostPath = '/mnt/volumes/' + $scope.volumeConfigure.name; // hardcoded in UI for ease of use
hostPath = '/mnt/volumes/' + $scope.volumeAdd.name; // hardcoded in UI for ease of use
}
var func;
if ($scope.volumeConfigure.adding) {
func = Client.addVolume.bind(Client, $scope.volumeConfigure.name, hostPath, $scope.volumeConfigure.mountType, mountOptions);
} else {
func = Client.updateVolume.bind(Client, $scope.volumeConfigure.volume.id, $scope.volumeConfigure.mountType, mountOptions);
}
func(function (error) {
$scope.volumeConfigure.busy = false;
Client.addVolume($scope.volumeAdd.name, hostPath, $scope.volumeAdd.mountType, mountOptions, function (error) {
$scope.volumeAdd.busy = false;
if (error) {
$scope.volumeConfigure.error = error.message;
$scope.volumeAdd.error = error.message;
return;
}
$('#volumeConfigureModal').modal('hide');
$scope.volumeConfigure.reset();
$('#volumeAddModal').modal('hide');
$scope.volumeAdd.reset();
refreshVolumes();
});
@@ -240,7 +199,7 @@ angular.module('Application').controller('VolumesController', ['$scope', '$locat
});
// setup all the dialog focus handling
['volumeConfigureModal', 'volumeRemoveModal'].forEach(function (id) {
['volumeAddModal', 'volumeRemoveModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find('[autofocus]:first').focus();
});