Add a progress bar for the renewal task

This commit is contained in:
Girish Ramakrishnan
2018-12-11 10:31:12 -08:00
parent c39711a87e
commit fccd7fa438
3 changed files with 73 additions and 41 deletions

View File

@@ -220,7 +220,7 @@
<div class="col-md-8">
<p ng-show="createBackup.busy">{{ createBackup.message }}</p>
<p ng-hide="createBackup.busy">
<div class="has-error" ng-show="createBackup.percent === 100">{{ createBackup.errorMessage }}</div>
<div class="has-error" ng-show="!createBackup.active">{{ createBackup.errorMessage }}</div>
</p>
</div>
<div class="col-md-4 text-right">

View File

@@ -198,25 +198,6 @@
</div>
</div>
<!-- Modal renew certs -->
<div class="modal fade" id="renewCertsModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Renew certs for all domains?</h4>
</div>
<div class="modal-body">
<p>This will renew certs of all apps installed. Only certs that are expiring in next 30 days will be renewed. It can take ~5 minutes to renew and install the certificates. Check the <a href="/#/activity">activity log</a> for renewal status. </p>
<br/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" ng-click="renewCerts.submit()" ng-disabled="renewCerts.busy"><i class="fa fa-circle-notch fa-spin" ng-show="renewCerts.busy"></i> Renew Certs</button>
</div>
</div>
</div>
</div>
<!-- Modal domain remove -->
<div class="modal fade" id="domainRemoveModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -303,9 +284,31 @@
<p>
Cloudron renews Let's Encrypt certificates automatically. Use this options to trigger a renewal immediately.
</p>
<button class="btn btn-primary pull-right" ng-click="renewCerts.show()" title="Renew Certs for all Domains">Renew Certs</button>
</div>
</div>
<div class="row">
<br/>
<div class="col-md-12" style="margin-bottom: 10px;">
<div ng-show="renewCerts.busy" class="progress progress-striped active animateMe">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ renewCerts.percent }}%"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p ng-show="renewCerts.busy">{{ renewCerts.message }}</p>
<p ng-hide="renewCerts.busy">
<div class="has-error" ng-show="!renewCerts.active">{{ renewCerts.errorMessage }}</div>
</p>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-outline btn-primary" ng-click="renewCerts.renew()" ng-disabled="renewCerts.busy" style="margin-right: 10px">Renew All Certs</button>
<a class="btn btn-primary pull-right" ng-href="/logs.html?taskId={{renewCerts.taskId}}" ng-enabled="renewCerts.taskId" target="_blank">Show Logs</a>
</div>
</div>
</div>
<div class="text-left" ng-show="!config.managed">

View File

@@ -354,32 +354,59 @@ angular.module('Application').controller('DomainsController', ['$scope', '$locat
$scope.renewCerts = {
busy: false,
error: null,
percent: 0,
message: '',
errorMessage: '',
taskId: '',
show: function () {
$scope.renewCerts.reset();
$('#renewCertsModal').modal('show');
},
checkStatus: function () {
Client.getLatestTaskByType('renewcerts', function (error, task) {
if (error) return console.error(error);
submit: function () {
$scope.renewCerts.busy = true;
$scope.renewCerts.error = null;
if (!task) return;
Client.renewCerts(null /* all domains */, function (error) {
if (error) {
Client.error(error);
} else {
$('#renewCertsModal').modal('hide');
$scope.renewCerts.reset();
}
$scope.renewCerts.busy = false;
$scope.renewCerts.taskId = task.id;
$scope.renewCerts.updateStatus();
});
},
reset: function () {
$scope.renewCerts.busy = false;
$scope.renewCerts.error = null;
updateStatus: function () {
Client.getTask($scope.renewCerts.taskId, function (error, data) {
if (error) return window.setTimeout($scope.renewCerts.updateStatus, 5000);
if (!data.active) {
$scope.renewCerts.busy = false;
$scope.renewCerts.message = '';
$scope.renewCerts.percent = 100; // indicates that 'result' is valid
$scope.renewCerts.errorMessage = data.errorMessage;
return;
}
$scope.renewCerts.busy = true;
$scope.renewCerts.percent = data.percent;
$scope.renewCerts.message = data.message;
window.setTimeout($scope.renewCerts.updateStatus, 500);
});
},
renew: function () {
$scope.renewCerts.busy = true;
$scope.renewCerts.percent = 0;
$scope.renewCerts.message = '';
$scope.renewCerts.errorMessage = '';
Client.renewCerts(null /* all domains */, function (error, taskId) {
if (error) {
console.error(error);
$scope.renewCerts.errorMessage = error.message;
$scope.renewCerts.busy = false;
} else {
$scope.renewCerts.taskId = taskId;
$scope.renewCerts.updateStatus();
}
});
}
};
@@ -478,6 +505,8 @@ angular.module('Application').controller('DomainsController', ['$scope', '$locat
$scope.dyndnsConfigure.refresh();
}
});
$scope.renewCerts.checkStatus();
});
document.getElementById('gcdnsKeyFileInput').onchange = readFileLocally($scope.domainConfigure.gcdnsKey, 'content', 'keyFileName');