Add live activity progress and logs
This commit is contained in:
Mikei386
@@ -97,6 +97,18 @@
|
||||
#backupper-app .bu-weekdays input:checked + span { background: var(--bu-accent) !important; border-color: var(--bu-accent) !important; color: #fff !important; }
|
||||
.bu-custom-cron { margin-top: 14px; }
|
||||
.bu-event-options { display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.bu-progress-wrap { min-width: 280px; }
|
||||
.bu-progress-label { align-items: center; display: flex; font-size: 12px; gap: 8px; justify-content: space-between; margin-bottom: 5px; }
|
||||
.bu-progress-label span { color: var(--bu-muted); }
|
||||
.bu-progress { background: var(--bu-panel-alt); border: 1px solid var(--bu-border); border-radius: 999px; height: 12px; overflow: hidden; }
|
||||
.bu-progress span { background: var(--bu-accent); display: block; height: 100%; min-width: 0; transition: width .35s ease; }
|
||||
.bu-progress.indeterminate span { animation: bu-progress-scan 1.2s ease-in-out infinite alternate; }
|
||||
.bu-current-file { color: var(--bu-muted); font-size: 12px; margin-top: 5px; max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.bu-log-row td { border-top: 0 !important; padding-top: 0 !important; }
|
||||
.bu-live-log { background: #11161a; border: 1px solid var(--bu-border); border-radius: 6px; color: #e8edf1; margin: 2px 0 8px; padding: 9px 12px; }
|
||||
.bu-live-log summary { cursor: pointer; font-weight: 700; }
|
||||
.bu-live-log pre { color: #e8edf1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; margin: 10px 0 0; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
|
||||
@keyframes bu-progress-scan { from { transform: translateX(-20%); } to { transform: translateX(250%); } }
|
||||
.bu-form-grid { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(220px, 1fr)); }
|
||||
.bu-managed-mount, .bu-external-mount { margin-top: 14px; }
|
||||
.bu-managed-mount[hidden], .bu-external-mount[hidden] { display: none; }
|
||||
|
||||
@@ -126,6 +126,12 @@
|
||||
while (size >= 1024 && unit < units.length-1) { size /= 1024; unit++; }
|
||||
return `${size >= 10 || unit === 0 ? size.toFixed(0) : size.toFixed(1)} ${units[unit]}`;
|
||||
};
|
||||
const formatEta = value => {
|
||||
let seconds=Math.max(0,Math.round(Number(value)||0));
|
||||
const hours=Math.floor(seconds/3600); seconds%=3600;
|
||||
const minutes=Math.floor(seconds/60); seconds%=60;
|
||||
return hours?`${hours}h ${minutes}m`:minutes?`${minutes}m ${seconds}s`:`${seconds}s`;
|
||||
};
|
||||
const weekDays = [{value:'1',short:'Mo',name:'Montag'},{value:'2',short:'Di',name:'Dienstag'},{value:'3',short:'Mi',name:'Mittwoch'},{value:'4',short:'Do',name:'Donnerstag'},{value:'5',short:'Fr',name:'Freitag'},{value:'6',short:'Sa',name:'Samstag'},{value:'0',short:'So',name:'Sonntag'}];
|
||||
function parseSchedule(cron = '0 2 * * *') {
|
||||
const match = String(cron).trim().match(/^(\d{1,2})\s+(\d{1,2})\s+\*\s+\*\s+(.+)$/);
|
||||
@@ -451,8 +457,27 @@
|
||||
return `<section class="bu-card"><h2>Restore</h2><form id="bu-restore-form" class="bu-form"><label>Repository<select name="repositoryId">${options}</select></label><label>Snapshot ID<input name="snapshotId" required value="${esc(state.selectedSnapshot||'')}"></label><label class="wide">Include paths, one per line<textarea name="includes">${esc((state.restoreIncludes||[]).join('\n'))}</textarea></label><label class="wide">Target<input name="target" required value="${esc(state.config.settings.restoreRoot)}/${esc(id('restore'))}"></label><label>In-place restore<input name="inPlace" type="checkbox"></label><label>Confirm overwrite risk<input name="confirmed" type="checkbox"></label><div class="wide bu-actions">${button('Queue restore','submit-restore','primary')}</div></form></section>`;
|
||||
}
|
||||
|
||||
function renderActivity() { return `<div class="bu-toolbar"><h2>Activity</h2>${button('Refresh','refresh','primary')}</div><section class="bu-card">${runsTable([...state.runs].reverse())}</section>`; }
|
||||
function runsTable(runs) { return runs.length ? `<table class="bu-table"><thead><tr><th>Task</th><th>Status</th><th>Created</th><th>Message</th><th></th></tr></thead><tbody>${runs.map(r=>`<tr><td>${esc(r.taskType)} ${esc(r.jobId||'')}</td><td>${status(r.status)}</td><td>${esc(new Date(r.createdAt).toLocaleString())}</td><td>${esc(r.message||'')}</td><td>${['queued','running'].includes(r.status)?button('Cancel',`cancel-run:${r.id}`,'danger'):''}</td></tr>`).join('')}</tbody></table>` : '<div class="bu-empty">No activity recorded.</div>'; }
|
||||
function renderActivity() { return `<div class="bu-toolbar"><div><h2>Activity</h2><div class="bu-muted">Running tasks update automatically every two seconds.</div></div>${button('Refresh','refresh','primary')}</div><section class="bu-card">${runsTable([...state.runs].reverse())}</section>`; }
|
||||
function progressView(run) {
|
||||
if(run.status==='queued') return '<span class="bu-muted">Waiting in queue</span>';
|
||||
if(run.taskType!=='backup'&&!run.progressPercent) return '<span class="bu-muted">No percentage available</span>';
|
||||
const percent=Math.max(0,Math.min(100,Number(run.progressPercent)||0));
|
||||
const scanning=run.status==='running'&&percent===0;
|
||||
const details=[];
|
||||
if(run.progressTotal) details.push(`${formatBytes(run.progressBytes)} / ${formatBytes(run.progressTotal)}`);
|
||||
if(run.progressFileTotal) details.push(`${Number(run.progressFiles||0).toLocaleString()} / ${Number(run.progressFileTotal).toLocaleString()} files`);
|
||||
if(run.bytesPerSecond) details.push(`${formatBytes(run.bytesPerSecond)}/s`);
|
||||
if(run.secondsRemaining>0) details.push(`ETA ${formatEta(run.secondsRemaining)}`);
|
||||
return `<div class="bu-progress-wrap"><div class="bu-progress-label"><strong>${scanning?'Scanning…':`${percent.toFixed(1)}%`}</strong><span>${esc(details.join(' · '))}</span></div><div class="bu-progress ${scanning?'indeterminate':''}"><span style="width:${scanning?30:percent}%"></span></div>${run.currentFile?`<div class="bu-current-file" title="${esc(run.currentFile)}">${esc(run.currentFile)}</div>`:''}</div>`;
|
||||
}
|
||||
function liveLogView(run) {
|
||||
if(!(run.liveLog||[]).length) return '';
|
||||
return `<details class="bu-live-log" ${run.status==='running'?'open':''}><summary>${run.status==='running'?'Live log':'Run log'} (${run.liveLog.length})</summary><pre>${esc(run.liveLog.join('\n'))}</pre></details>`;
|
||||
}
|
||||
function runsTable(runs) {
|
||||
if(!runs.length) return '<div class="bu-empty">No activity recorded.</div>';
|
||||
return `<table class="bu-table bu-runs-table"><thead><tr><th>Task</th><th>Status</th><th>Created</th><th>Progress</th><th>Message</th><th></th></tr></thead><tbody>${runs.map(r=>`<tr><td>${esc(r.taskType)} ${esc(r.jobId||'')}</td><td>${status(r.status)}</td><td>${esc(new Date(r.createdAt).toLocaleString())}</td><td>${progressView(r)}</td><td>${esc(r.message||'')}</td><td>${['queued','running'].includes(r.status)?button('Cancel',`cancel-run:${r.id}`,'danger'):''}</td></tr>${(r.liveLog||[]).length?`<tr class="bu-log-row"><td colspan="6">${liveLogView(r)}</td></tr>`:''}`).join('')}</tbody></table>`;
|
||||
}
|
||||
|
||||
function renderSettings() {
|
||||
const s = state.config.settings;
|
||||
@@ -600,6 +625,6 @@
|
||||
window.addEventListener('scroll', hideTooltip, true);
|
||||
window.addEventListener('resize', hideTooltip);
|
||||
enhanceTooltips(root);
|
||||
setInterval(async()=>{ if(!state.config)return; try { state.runs=await api('/v1/runs'); if(['dashboard','activity'].includes(state.view))render(); }catch(_){ } },10000);
|
||||
setInterval(async()=>{ if(!state.config)return; try { state.runs=await api('/v1/runs'); if(['dashboard','activity'].includes(state.view))render(); }catch(_){ } },2000);
|
||||
load();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user