Merge pull request 'feat(ui): auto-continue + action buttons on the backup-progress modal' (#285) from feat/progress-modal-controls into dev
This commit was merged in pull request #285.
This commit is contained in:
@@ -1,6 +1,9 @@
|
||||
# Changelog
|
||||
## [Unreleased]
|
||||
|
||||
### Added
|
||||
- Backup- and restore-progress modals (backups view) now have the same controls as the full-screen runbackup screen: an "automatically return to the list when finished" checkbox, a Cancel button (double-confirmed) while running, and terminal action buttons. Backup: View backup record / Back to backups on success, Retry / Back on failure. Restore matches, with a stronger cancel warning (a restore cannot be rolled back mid-flight) and no record link.
|
||||
|
||||
### Fixed
|
||||
- Database view "One Problem" on MokoSuiteBackup: reconciled the `#__mokosuitebackup_profiles` schema-checker output with the update-file history. Corrected the stale `TINYINT` definition in `01.01.01.sql` to the final `VARCHAR(20)` type, fixed the `MODIFY COLUMN` parser trip-up in `01.39.00.sql`, and rewrote the retired `sftp_*` `ADD COLUMN` statements in `01.35.00.sql`/`01.36.00.sql` as bare `ADD` so Joomla's checker no longer demands columns that `02.52.25` and the postflight purge deliberately remove. Joomla's schema checker now reports no problems.
|
||||
|
||||
|
||||
@@ -78,6 +78,40 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Auto-continue opt-out, matching the runbackup screen's checkbox. */
|
||||
.msb-progress-modal .msb-pm-autocontinue {
|
||||
margin-top: 1.5rem;
|
||||
color: rgba(255, 255, 255, .85);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.msb-progress-modal .msb-pm-autocontinue label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.msb-progress-modal .msb-pm-autocontinue input {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
|
||||
/* Terminal-state action buttons and the running-state cancel button. */
|
||||
.msb-progress-modal .msb-pm-actions,
|
||||
.msb-progress-modal .msb-pm-cancel {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
gap: .75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.msb-progress-modal .msb-pm-actions .btn,
|
||||
.msb-progress-modal .msb-pm-cancel .btn {
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.msb-progress-modal .msb-pm-warn {
|
||||
color: #ffd23f;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -29,6 +29,8 @@ $canDownload = $user->authorise('mokosuitebackup.backup.download', 'com_mokosuit
|
||||
|
||||
$ajaxToken = Session::getFormToken();
|
||||
$ajaxUrl = Route::_('index.php?option=com_mokosuitebackup&format=json', false);
|
||||
// Template for the "View backup record" button on the progress modal (__MSBID__ swapped in JS).
|
||||
$recordUrlTpl = Route::_('index.php?option=com_mokosuitebackup&view=backup&id=__MSBID__', false);
|
||||
|
||||
$listOrder = $this->escape($this->state->get('list.ordering'));
|
||||
$listDirn = $this->escape($this->state->get('list.direction'));
|
||||
@@ -146,8 +148,8 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" id="mb-modal-title">
|
||||
<span class="icon-archive" aria-hidden="true"></span>
|
||||
Backup in Progress
|
||||
<span class="icon-archive" aria-hidden="true" id="mb-modal-icon"></span>
|
||||
<span id="mb-modal-titletext">Backup in Progress</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -160,6 +162,23 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
</div>
|
||||
<p id="mb-status" class="msb-pm-status">Initializing...</p>
|
||||
<p id="mb-phase" class="msb-pm-phase">Phase: init</p>
|
||||
|
||||
<div class="msb-pm-autocontinue" id="mb-autocontinue-wrap">
|
||||
<label>
|
||||
<input type="checkbox" id="mb-autocontinue" checked>
|
||||
Automatically return to the backups list when the backup finishes
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="msb-pm-actions d-none" id="mb-actions">
|
||||
<button type="button" id="mb-retry" class="btn btn-primary d-none">Retry backup</button>
|
||||
<a href="#" id="mb-record" class="btn btn-primary d-none" target="_blank" rel="noopener">View backup record</a>
|
||||
<button type="button" id="mb-done" class="btn btn-secondary d-none">Back to backups</button>
|
||||
</div>
|
||||
|
||||
<div class="msb-pm-cancel" id="mb-cancel-wrap">
|
||||
<button type="button" id="mb-cancel" class="btn btn-outline-danger">Cancel backup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,25 +250,111 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// --- Progress-modal controls (auto-continue, cancel, terminal buttons) ---
|
||||
var RECORD_URL = <?php echo json_encode($recordUrlTpl); ?>;
|
||||
var mbRecordId = 0;
|
||||
var mbCancelled = false;
|
||||
|
||||
function mbEl(id) { return document.getElementById(id); }
|
||||
function mbShow(n) { if (n) { n.classList.remove('d-none'); } }
|
||||
function mbHide(n) { if (n) { n.classList.add('d-none'); } }
|
||||
|
||||
// Update the modal title's icon + text without innerHTML (values are static).
|
||||
function setBackupTitle(iconClass, text) {
|
||||
var ic = mbEl('mb-modal-icon');
|
||||
if (ic) { ic.className = iconClass; }
|
||||
var tx = mbEl('mb-modal-titletext');
|
||||
if (tx) { tx.textContent = text; }
|
||||
}
|
||||
|
||||
// Reset to the "running" control state (cancel + auto-continue visible, no actions).
|
||||
function mbRunningControls() {
|
||||
mbHide(mbEl('mb-actions'));
|
||||
mbHide(mbEl('mb-retry'));
|
||||
mbHide(mbEl('mb-record'));
|
||||
mbHide(mbEl('mb-done'));
|
||||
mbShow(mbEl('mb-cancel-wrap'));
|
||||
mbShow(mbEl('mb-autocontinue-wrap'));
|
||||
if (mbEl('mb-cancel')) { mbEl('mb-cancel').disabled = false; }
|
||||
}
|
||||
|
||||
// Switch out of the "running" control state (hide cancel + auto-continue).
|
||||
function mbTerminalControls() {
|
||||
backupRunning = false;
|
||||
mbHide(mbEl('mb-cancel-wrap'));
|
||||
mbHide(mbEl('mb-autocontinue-wrap'));
|
||||
}
|
||||
|
||||
function leaveToList() { hideModal(); location.reload(); }
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var doneBtn = mbEl('mb-done');
|
||||
if (doneBtn) { doneBtn.addEventListener('click', leaveToList); }
|
||||
|
||||
// Cancel: double confirmation, then stop the loop and cancel the record.
|
||||
var cancelBtn = mbEl('mb-cancel');
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', function() {
|
||||
if (!backupRunning || mbCancelled) { return; }
|
||||
if (!confirm('Cancel the backup that is in progress?')) { return; }
|
||||
if (!confirm('Are you sure? The backup will be stopped.')) { return; }
|
||||
mbCancelled = true;
|
||||
backupRunning = false;
|
||||
cancelBtn.disabled = true;
|
||||
document.getElementById('mb-status').textContent = 'Cancelling…';
|
||||
if (mbRecordId > 0) {
|
||||
postAjax({ task: 'ajax.cancelBackup', id: mbRecordId }).then(leaveToList, leaveToList);
|
||||
} else {
|
||||
leaveToList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function backupComplete() {
|
||||
updateProgress(100, 'Backup complete.', 'complete');
|
||||
setBackupTitle('icon-check', 'Backup Complete');
|
||||
mbTerminalControls();
|
||||
// Auto-continue: return to the list automatically unless the user opted out.
|
||||
if (mbEl('mb-autocontinue') && mbEl('mb-autocontinue').checked) {
|
||||
setTimeout(leaveToList, 1500);
|
||||
return;
|
||||
}
|
||||
mbShow(mbEl('mb-actions'));
|
||||
mbShow(mbEl('mb-done'));
|
||||
if (mbRecordId > 0 && RECORD_URL) {
|
||||
var rec = mbEl('mb-record');
|
||||
rec.setAttribute('href', RECORD_URL.replace('__MSBID__', String(mbRecordId)));
|
||||
mbShow(rec);
|
||||
}
|
||||
}
|
||||
|
||||
function backupFailed(message) {
|
||||
updateProgress(0, 'ERROR: ' + (message || 'Backup failed'), 'failed');
|
||||
setBackupTitle('icon-cancel', 'Backup Failed');
|
||||
mbTerminalControls();
|
||||
mbShow(mbEl('mb-actions'));
|
||||
mbShow(mbEl('mb-done'));
|
||||
var retry = mbEl('mb-retry');
|
||||
mbShow(retry);
|
||||
retry.onclick = function() { startSteppedBackup(); };
|
||||
}
|
||||
|
||||
async function startSteppedBackup() {
|
||||
const profileSelect = document.getElementById('mb-profile-select');
|
||||
const profileId = profileSelect ? profileSelect.value : '1';
|
||||
|
||||
mbRecordId = 0;
|
||||
mbCancelled = false;
|
||||
mbRunningControls();
|
||||
setBackupTitle('icon-archive', 'Backup in Progress');
|
||||
showModal();
|
||||
updateProgress(0, 'Initializing backup...', 'init');
|
||||
|
||||
try {
|
||||
// Init
|
||||
const initResult = await postAjax({
|
||||
task: 'ajax.init',
|
||||
profile_id: profileId
|
||||
});
|
||||
const initResult = await postAjax({ task: 'ajax.init', profile_id: profileId });
|
||||
|
||||
if (initResult.error) {
|
||||
updateProgress(0, 'ERROR: ' + initResult.message, 'failed');
|
||||
setTimeout(hideModal, 5000);
|
||||
return;
|
||||
}
|
||||
if (initResult.error) { backupFailed(initResult.message); return; }
|
||||
|
||||
// Show preflight warnings if any
|
||||
if (initResult.warnings && initResult.warnings.length > 0) {
|
||||
@@ -259,36 +364,25 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
}
|
||||
|
||||
const sessionId = initResult.session_id;
|
||||
if (initResult.record_id) { mbRecordId = initResult.record_id; }
|
||||
updateProgress(initResult.progress, initResult.message, initResult.phase);
|
||||
|
||||
// Run steps until done
|
||||
// Run steps until done (or cancelled)
|
||||
let done = false;
|
||||
while (!done) {
|
||||
const stepResult = await postAjax({
|
||||
task: 'ajax.step',
|
||||
session_id: sessionId
|
||||
});
|
||||
|
||||
if (stepResult.error) {
|
||||
updateProgress(0, 'ERROR: ' + stepResult.message, 'failed');
|
||||
setTimeout(hideModal, 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
while (!done && !mbCancelled) {
|
||||
const stepResult = await postAjax({ task: 'ajax.step', session_id: sessionId });
|
||||
if (stepResult.error) { backupFailed(stepResult.message); return; }
|
||||
if (stepResult.record_id) { mbRecordId = stepResult.record_id; }
|
||||
updateProgress(stepResult.progress, stepResult.message, stepResult.phase);
|
||||
done = stepResult.done || false;
|
||||
}
|
||||
|
||||
// Complete
|
||||
document.getElementById('mb-modal-title').textContent = 'Backup Complete';
|
||||
setTimeout(function() {
|
||||
hideModal();
|
||||
location.reload();
|
||||
}, 2000);
|
||||
if (mbCancelled) { return; }
|
||||
backupComplete();
|
||||
|
||||
} catch (err) {
|
||||
updateProgress(0, 'ERROR: ' + err.message, 'failed');
|
||||
setTimeout(hideModal, 5000);
|
||||
if (mbCancelled) { return; }
|
||||
backupFailed(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -318,8 +412,9 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
|
||||
// Close restore modal handled by Bootstrap data-bs-dismiss
|
||||
|
||||
// AJAX stepped restore
|
||||
var restoreRunning = false;
|
||||
// --- AJAX stepped restore (controls mirror the backup-progress modal) ---
|
||||
var restoreRunning = false;
|
||||
var restoreCancelled = false;
|
||||
|
||||
function showRestoreProgress() {
|
||||
restoreRunning = true;
|
||||
@@ -332,6 +427,31 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
bootstrap.Modal.getInstance(document.getElementById('mb-restore-progress-modal'))?.hide();
|
||||
}
|
||||
|
||||
// Update the restore title's icon + text without innerHTML (values are static).
|
||||
function setRestoreTitle(iconClass, text) {
|
||||
var ic = mbEl('mb-restore-icon');
|
||||
if (ic) { ic.className = iconClass; }
|
||||
var tx = mbEl('mb-restore-titletext');
|
||||
if (tx) { tx.textContent = text; }
|
||||
}
|
||||
|
||||
function restoreRunningControls() {
|
||||
mbHide(mbEl('mb-restore-actions'));
|
||||
mbHide(mbEl('mb-restore-retry'));
|
||||
mbHide(mbEl('mb-restore-done'));
|
||||
mbShow(mbEl('mb-restore-cancel-wrap'));
|
||||
mbShow(mbEl('mb-restore-autocontinue-wrap'));
|
||||
if (mbEl('mb-restore-cancel')) { mbEl('mb-restore-cancel').disabled = false; }
|
||||
}
|
||||
|
||||
function restoreTerminalControls() {
|
||||
restoreRunning = false;
|
||||
mbHide(mbEl('mb-restore-cancel-wrap'));
|
||||
mbHide(mbEl('mb-restore-autocontinue-wrap'));
|
||||
}
|
||||
|
||||
function leaveRestoreToList() { hideRestoreProgress(); location.reload(); }
|
||||
|
||||
function updateRestoreProgress(progress, message, phase) {
|
||||
var bar = document.getElementById('mb-restore-progress-bar');
|
||||
bar.style.width = progress + '%';
|
||||
@@ -348,15 +468,60 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
}
|
||||
});
|
||||
|
||||
async function startSteppedRestore(e) {
|
||||
e.preventDefault();
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var doneBtn = mbEl('mb-restore-done');
|
||||
if (doneBtn) { doneBtn.addEventListener('click', leaveRestoreToList); }
|
||||
|
||||
// Cancel: double confirmation. A restore cannot be rolled back mid-flight,
|
||||
// so the second prompt warns that the site may be left partially restored.
|
||||
var cancelBtn = mbEl('mb-restore-cancel');
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', function() {
|
||||
if (!restoreRunning || restoreCancelled) { return; }
|
||||
if (!confirm('Cancel the restore that is in progress?')) { return; }
|
||||
if (!confirm('Are you sure? Stopping mid-restore may leave the site partially restored.')) { return; }
|
||||
restoreCancelled = true;
|
||||
restoreRunning = false;
|
||||
cancelBtn.disabled = true;
|
||||
document.getElementById('mb-restore-status').textContent = 'Cancelling…';
|
||||
leaveRestoreToList();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function restoreComplete() {
|
||||
updateRestoreProgress(100, 'Restore complete.', 'complete');
|
||||
setRestoreTitle('icon-check', 'Restore Complete');
|
||||
restoreTerminalControls();
|
||||
if (mbEl('mb-restore-autocontinue') && mbEl('mb-restore-autocontinue').checked) {
|
||||
setTimeout(leaveRestoreToList, 1500);
|
||||
return;
|
||||
}
|
||||
mbShow(mbEl('mb-restore-actions'));
|
||||
mbShow(mbEl('mb-restore-done'));
|
||||
}
|
||||
|
||||
function restoreFailed(message) {
|
||||
updateRestoreProgress(0, 'ERROR: ' + (message || 'Restore failed'), 'failed');
|
||||
setRestoreTitle('icon-cancel', 'Restore Failed');
|
||||
restoreTerminalControls();
|
||||
mbShow(mbEl('mb-restore-actions'));
|
||||
mbShow(mbEl('mb-restore-done'));
|
||||
var retry = mbEl('mb-restore-retry');
|
||||
mbShow(retry);
|
||||
retry.onclick = function() { runSteppedRestore(); };
|
||||
}
|
||||
|
||||
async function runSteppedRestore() {
|
||||
var recordId = document.getElementById('mb-restore-record-id').value;
|
||||
var restoreFiles = document.getElementById('mb-restore-files').checked ? 1 : 0;
|
||||
var restoreDb = document.getElementById('mb-restore-db').checked ? 1 : 0;
|
||||
var preserveConfig = document.getElementById('mb-restore-config').checked ? 1 : 0;
|
||||
var password = document.getElementById('mb-restore-password').value;
|
||||
|
||||
restoreCancelled = false;
|
||||
restoreRunningControls();
|
||||
setRestoreTitle('icon-refresh', 'Restore in Progress');
|
||||
showRestoreProgress();
|
||||
updateRestoreProgress(0, 'Initializing restore...', 'init');
|
||||
|
||||
@@ -370,47 +535,33 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
encryption_password: password
|
||||
});
|
||||
|
||||
if (initResult.error) {
|
||||
updateRestoreProgress(0, 'ERROR: ' + initResult.message, 'failed');
|
||||
document.getElementById('mb-restore-title').textContent = 'Restore Failed';
|
||||
setTimeout(hideRestoreProgress, 5000);
|
||||
return;
|
||||
}
|
||||
if (initResult.error) { restoreFailed(initResult.message); return; }
|
||||
|
||||
var sessionId = initResult.session_id;
|
||||
updateRestoreProgress(initResult.progress, initResult.message, initResult.phase);
|
||||
|
||||
var done = false;
|
||||
while (!done) {
|
||||
var stepResult = await postAjax({
|
||||
task: 'ajax.restoreStep',
|
||||
session_id: sessionId
|
||||
});
|
||||
|
||||
if (stepResult.error) {
|
||||
updateRestoreProgress(0, 'ERROR: ' + stepResult.message, 'failed');
|
||||
document.getElementById('mb-restore-title').textContent = 'Restore Failed';
|
||||
setTimeout(hideRestoreProgress, 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
while (!done && !restoreCancelled) {
|
||||
var stepResult = await postAjax({ task: 'ajax.restoreStep', session_id: sessionId });
|
||||
if (stepResult.error) { restoreFailed(stepResult.message); return; }
|
||||
updateRestoreProgress(stepResult.progress, stepResult.message, stepResult.phase);
|
||||
done = stepResult.done || false;
|
||||
}
|
||||
|
||||
document.getElementById('mb-restore-title').textContent = 'Restore Complete';
|
||||
setTimeout(function() {
|
||||
hideRestoreProgress();
|
||||
location.reload();
|
||||
}, 2000);
|
||||
if (restoreCancelled) { return; }
|
||||
restoreComplete();
|
||||
|
||||
} catch (err) {
|
||||
updateRestoreProgress(0, 'ERROR: ' + err.message, 'failed');
|
||||
document.getElementById('mb-restore-title').textContent = 'Restore Failed';
|
||||
setTimeout(hideRestoreProgress, 5000);
|
||||
if (restoreCancelled) { return; }
|
||||
restoreFailed(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function startSteppedRestore(e) {
|
||||
e.preventDefault();
|
||||
runSteppedRestore();
|
||||
}
|
||||
|
||||
// Attach the AJAX restore handler to the restore form
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var restoreForm = document.getElementById('mb-restore-form');
|
||||
@@ -484,8 +635,8 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" id="mb-restore-title">
|
||||
<span class="icon-refresh" aria-hidden="true"></span>
|
||||
Restore in Progress
|
||||
<span class="icon-refresh" aria-hidden="true" id="mb-restore-icon"></span>
|
||||
<span id="mb-restore-titletext">Restore in Progress</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -498,6 +649,22 @@ $listDirn = $this->escape($this->state->get('list.direction'));
|
||||
</div>
|
||||
<p id="mb-restore-status" class="msb-pm-status">Initializing...</p>
|
||||
<p id="mb-restore-phase" class="msb-pm-phase">Phase: init</p>
|
||||
|
||||
<div class="msb-pm-autocontinue" id="mb-restore-autocontinue-wrap">
|
||||
<label>
|
||||
<input type="checkbox" id="mb-restore-autocontinue" checked>
|
||||
Automatically return to the backups list when the restore finishes
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="msb-pm-actions d-none" id="mb-restore-actions">
|
||||
<button type="button" id="mb-restore-retry" class="btn btn-primary d-none">Retry restore</button>
|
||||
<button type="button" id="mb-restore-done" class="btn btn-secondary d-none">Back to backups</button>
|
||||
</div>
|
||||
|
||||
<div class="msb-pm-cancel" id="mb-restore-cancel-wrap">
|
||||
<button type="button" id="mb-restore-cancel" class="btn btn-outline-danger">Cancel restore</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user