Allow backup configuration to be changed

This commit is contained in:
Girish Ramakrishnan
2016-10-09 16:55:29 -07:00
parent f09a1c577b
commit 12ce714df4
2 changed files with 107 additions and 4 deletions

View File

@@ -111,6 +111,58 @@
</div>
</div>
<!-- modal backup config -->
<div class="modal fade" id="configureBackupModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Configure Backup</h4>
</div>
<div class="modal-body">
<form name="configureBackupForm" role="form" novalidate ng-submit="configureBackup.submit()" autocomplete="off">
<fieldset>
<p class="has-error text-center" ng-show="configureBackup.error">{{ configureBackup.error }}</p>
<!-- Route53 -->
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="backupConfigAccessKeyId">Bucket name</label>
<input type="text" class="form-control" ng-model="configureBackup.bucket" id="backupConfigBucket" name="accessKeyId" ng-disabled="configureBackup.busy" ng-minlength="16" ng-maxlength="32" autofocus>
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="backupConfigAccessKeyId">Prefix</label>
<input type="text" class="form-control" ng-model="configureBackup.prefix" id="backupConfigPrefix" name="accessKeyId" ng-disabled="configureBackup.busy" ng-minlength="16" ng-maxlength="32">
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="backupConfigAccessKeyId">Access Key Id</label>
<input type="text" class="form-control" ng-model="configureBackup.accessKeyId" id="backupConfigAccessKeyId" name="accessKeyId" ng-disabled="configureBackup.busy" ng-minlength="16" ng-maxlength="32">
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="backupConfigSecretAccessKey">Secret Access Key</label>
<input type="text" class="form-control" ng-model="configureBackup.secretAccessKey" id="backupConfigSecretAccessKey" name="secretAccessKey" ng-disabled="configureBackup.busy">
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="backupConfigPassword">Provide your password to confirm this action</label>
<input type="password" class="form-control" ng-model="configureBackup.password" id="configureBackupPassword" name="password" ng-disabled="configureBackup.busy" required>
</div>
<input class="ng-hide" type="submit" ng-disabled="configureBackupForm.$invalid"/>
</fieldset>
</form>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="submit()"
ng-disabled="configureBackupForm.$invalid || busy"><i class="fa fa-spinner fa-pulse" ng-show="configureBackup.busy"></i>
<span>Save</span>
</button>
</div>
</div>
</div>
</div>
<br/>
<div class="section-header">
@@ -259,13 +311,15 @@
<!-- If a backup is blocked (not triggered), the UI does not give feedback currently. This button is only available in dev at the moment! -->
<div class="row" ng-show="backupConfig.provider !== 'caas' || config.isDev">
<br/>
<div class="col-xs-9">
<div class="col-xs-6">
<div ng-show="createBackup.busy" class="progress progress-striped active animateMe">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ createBackup.percent }}%">Backup in progress</div>
</div>
</div>
<div class="col-xs-3 text-right">
<button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy">Backup now</button>
<div class="col-xs-6 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="configureBackup.show()" ng-disabled="createBackup.busy">Configure</button>
<button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy" style="margin-right: 10px">Backup now</button>
</div>
</div>
</div>

View File

@@ -246,7 +246,56 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
showCustomAvatarSelector: function () {
$('#avatarFileInput').click();
}
};
$scope.configureBackup = {
busy: false,
error: {},
password: '',
provider: 's3',
bucket: '',
prefix: '',
accessKeyId: '',
secretAccessKey: '',
show: function () {
$('#configureBackupModal').modal('show');
},
submit: function () {
$scope.configureBackup.error.name = null;
$scope.configureBackup.busy = true;
var backupConfig = {
provider: $scope.backupConfig.provider,
bucket: $scope.backupConfig.bucket,
prefix: $scope.backupConfig.prefix,
accessKeyId: $scope.backupConfig.accessKeyId,
secretAccessKey: $scope.backupConfig.secretAccessKey
};
Client.setBackupConfig(backupConfig, function (error) {
$scope.configureBackup.busy = false;
if (error) {
if (error.statusCode === 400) {
$scope.cloudronNameChange.error.name = 'Invalid name';
$scope.cloudronNameChange.name = '';
$('#inputCloudronName').focus();
$scope.cloudronNameChangeForm.password.$setPristine();
} else {
console.error('Unable to change name.', error);
return;
}
}
$scope.cloudronNameChange.reset();
$('#cloudronNameChangeModal').modal('hide');
Client.refreshConfig();
});
}
};
function fetchBackups() {
@@ -408,7 +457,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
});
// setup all the dialog focus handling
['planChangeModal', 'appstoreLoginModal', 'cloudronNameChangeModal'].forEach(function (id) {
['planChangeModal', 'appstoreLoginModal', 'cloudronNameChangeModal', 'configureBackupModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});