261 lines
8.0 KiB
HTML
261 lines
8.0 KiB
HTML
{{define "content"}}
|
|
|
|
<section class="panel">
|
|
<h2>Disks</h2>
|
|
<div class="panel-body">
|
|
<div id="diskSummary" class="text-muted">Loading disks...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="disk-grid" id="diskGrid"></div>
|
|
|
|
<script>
|
|
let disks = [];
|
|
const taskState = new Map();
|
|
const taskPollers = new Map();
|
|
|
|
function escapeHTML(value) {
|
|
return String(value || '').replace(/[&<>"']/g, (char) => ({
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": '''
|
|
}[char]));
|
|
}
|
|
|
|
function diskKey(disk) {
|
|
return disk.disk_id || disk.mount_path;
|
|
}
|
|
|
|
function badgeClass(state) {
|
|
return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown';
|
|
}
|
|
|
|
function badgeLabel(state) {
|
|
return ({ absent: 'Not connected', foreign: 'Uninitialized disk', known: 'Ready' })[state] || '—';
|
|
}
|
|
|
|
function fmtSpeed(bps) {
|
|
if (!bps) return '';
|
|
if (bps >= 1e9) return (bps / 1e9).toFixed(1) + ' GB/s';
|
|
if (bps >= 1e6) return (bps / 1e6).toFixed(1) + ' MB/s';
|
|
if (bps >= 1e3) return (bps / 1e3).toFixed(0) + ' KB/s';
|
|
return bps + ' B/s';
|
|
}
|
|
|
|
function fmtETA(sec) {
|
|
if (!sec || sec <= 0) return '';
|
|
if (sec >= 3600) return Math.floor(sec / 3600) + ' h ' + Math.floor((sec % 3600) / 60) + ' min';
|
|
if (sec >= 60) return Math.floor(sec / 60) + ' min';
|
|
return sec + ' s';
|
|
}
|
|
|
|
function fmtDateTime(value) {
|
|
if (!value) return 'Never';
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return value;
|
|
return date.toLocaleString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
|
|
function taskMeta(task) {
|
|
if (!task) return '';
|
|
return [fmtSpeed(task.speed_bps), task.eta_sec ? 'ETA: ' + fmtETA(task.eta_sec) : ''].filter(Boolean).join(' · ');
|
|
}
|
|
|
|
function renderDisks() {
|
|
const grid = document.getElementById('diskGrid');
|
|
const summary = document.getElementById('diskSummary');
|
|
|
|
if (!disks.length) {
|
|
summary.textContent = 'No disks found.';
|
|
grid.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
const knownCount = disks.filter((disk) => disk.state === 'known').length;
|
|
summary.textContent = `Disks found: ${disks.length}. Ready to copy: ${knownCount}.`;
|
|
|
|
grid.innerHTML = disks.map((disk) => {
|
|
const activeTask = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
|
|
const progress = activeTask ? activeTask.progress : 0;
|
|
const message = activeTask ? (activeTask.message || 'Preparing...') : '';
|
|
const meta = activeTask ? taskMeta(activeTask) : '';
|
|
const isKnown = disk.state === 'known';
|
|
const isForeign = disk.state === 'foreign';
|
|
const hasCapacity = disk.state !== 'absent';
|
|
|
|
return `
|
|
<section class="panel disk-card">
|
|
<h2>${escapeHTML(disk.mount_path)}</h2>
|
|
<table class="kv-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Disk ID</th>
|
|
<td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">not initialized yet</span>'}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Total capacity</th>
|
|
<td>${hasCapacity ? fmtBytes(disk.total_bytes) : '—'}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Free space</th>
|
|
<td>${hasCapacity ? fmtBytes(disk.free_bytes) : '—'}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Last copied</th>
|
|
<td>${fmtDateTime(disk.last_copied_at)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
${activeTask ? `
|
|
<div class="panel-body progress-wrap">
|
|
<div class="progress-bar-bg">
|
|
<div class="progress-bar-fill" style="width:${progress}%"></div>
|
|
</div>
|
|
<div class="progress-label">${escapeHTML(message)}</div>
|
|
<div class="progress-label">${escapeHTML(meta)}</div>
|
|
</div>
|
|
` : ''}
|
|
<div class="btn-row">
|
|
${isKnown ? `
|
|
<button class="button-danger" data-action="start-copy" data-mode="replace" data-disk-id="${escapeHTML(disk.disk_id)}" ${activeTask ? 'disabled' : ''}>Replace media</button>
|
|
<button class="button-primary" data-action="start-copy" data-mode="add" data-disk-id="${escapeHTML(disk.disk_id)}" ${activeTask ? 'disabled' : ''}>Add media</button>
|
|
<button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy" data-disk-id="${escapeHTML(disk.disk_id)}">Cancel</button>
|
|
` : ''}
|
|
${isForeign ? `
|
|
<button class="button-secondary" data-action="init-disk" data-mount-path="${escapeHTML(disk.mount_path)}">Initialize disk</button>
|
|
` : ''}
|
|
</div>
|
|
</section>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function stopTaskPoll(taskID) {
|
|
if (!taskPollers.has(taskID)) return;
|
|
clearInterval(taskPollers.get(taskID));
|
|
taskPollers.delete(taskID);
|
|
}
|
|
|
|
function startTaskPoll(taskID) {
|
|
if (!taskID || taskPollers.has(taskID)) return;
|
|
taskPollers.set(taskID, setInterval(() => pollTask(taskID), 1500));
|
|
pollTask(taskID);
|
|
}
|
|
|
|
async function refreshDisks() {
|
|
try {
|
|
const response = await fetch('/api/disks');
|
|
if (!response.ok) return;
|
|
const payload = await response.json();
|
|
disks = payload.items || [];
|
|
renderDisks();
|
|
|
|
const activeTasks = new Set();
|
|
for (const disk of disks) {
|
|
if (disk.active_task_id) {
|
|
activeTasks.add(disk.active_task_id);
|
|
startTaskPoll(disk.active_task_id);
|
|
}
|
|
}
|
|
for (const taskID of Array.from(taskPollers.keys())) {
|
|
if (!activeTasks.has(taskID)) {
|
|
stopTaskPoll(taskID);
|
|
taskState.delete(taskID);
|
|
}
|
|
}
|
|
} catch (error) {}
|
|
}
|
|
|
|
async function pollTask(taskID) {
|
|
try {
|
|
const response = await fetch('/api/tasks/' + taskID);
|
|
if (!response.ok) return;
|
|
const task = await response.json();
|
|
taskState.set(taskID, task);
|
|
renderDisks();
|
|
|
|
if (['success', 'failed', 'canceled'].includes(task.status)) {
|
|
stopTaskPoll(taskID);
|
|
taskState.delete(taskID);
|
|
if (task.status === 'success') toast(task.message || 'Done', 'ok');
|
|
if (task.status === 'failed') toast('Error: ' + task.error, 'error');
|
|
if (task.status === 'canceled') toast('Copy canceled', 'error');
|
|
refreshDisks();
|
|
}
|
|
} catch (error) {}
|
|
}
|
|
|
|
async function startCopy(diskID, mode) {
|
|
try {
|
|
const response = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ mode })
|
|
});
|
|
const payload = await response.json();
|
|
if (!response.ok) {
|
|
toast(payload.error || 'Failed to start copy', 'error');
|
|
return;
|
|
}
|
|
startTaskPoll(payload.task_id);
|
|
refreshDisks();
|
|
} catch (error) {
|
|
toast('Network error', 'error');
|
|
}
|
|
}
|
|
|
|
async function cancelCopy(diskID) {
|
|
try {
|
|
await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/cancel', { method: 'POST' });
|
|
toast('Canceling...', 'ok');
|
|
} catch (error) {
|
|
toast('Network error', 'error');
|
|
}
|
|
}
|
|
|
|
async function initDisk(mountPath) {
|
|
try {
|
|
const response = await fetch('/api/disks/init', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ mount_path: mountPath })
|
|
});
|
|
const payload = await response.json();
|
|
if (!response.ok) {
|
|
toast(payload.error || 'Failed to initialize disk', 'error');
|
|
return;
|
|
}
|
|
toast('Disk initialized', 'ok');
|
|
refreshDisks();
|
|
} catch (error) {
|
|
toast('Network error', 'error');
|
|
}
|
|
}
|
|
|
|
document.getElementById('diskGrid').addEventListener('click', (event) => {
|
|
const button = event.target.closest('button[data-action]');
|
|
if (!button) return;
|
|
|
|
const action = button.dataset.action;
|
|
if (action === 'start-copy') startCopy(button.dataset.diskId, button.dataset.mode || 'add');
|
|
if (action === 'cancel-copy') cancelCopy(button.dataset.diskId);
|
|
if (action === 'init-disk') initDisk(button.dataset.mountPath);
|
|
});
|
|
|
|
refreshDisks();
|
|
setInterval(refreshDisks, 5000);
|
|
</script>
|
|
{{end}}
|