Improve disk UI and build performance

web/templates/dashboard.html

@@ -1,9 +1,9 @@
 {{define "content"}}
 
 <section class="panel">
-  <h2>Накопители</h2>
+  <h2>Disks</h2>
   <div class="panel-body">
-    <div id="diskSummary" class="text-muted">Загрузка списка накопителей…</div>
+    <div id="diskSummary" class="text-muted">Loading disks...</div>
   </div>
 </section>
 
@@ -33,22 +33,35 @@ function badgeClass(state) {
 }
 
 function badgeLabel(state) {
-  return ({ absent: 'Не подключён', foreign: 'Незнакомый диск', known: 'Диск подключён' })[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) + ' ГБ/с';
-  if (bps >= 1e6) return (bps / 1e6).toFixed(1) + ' МБ/с';
-  if (bps >= 1e3) return (bps / 1e3).toFixed(0) + ' КБ/с';
-  return bps + ' Б/с';
+  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) + ' ч ' + Math.floor((sec % 3600) / 60) + ' мин';
-  if (sec >= 60) return Math.floor(sec / 60) + ' мин';
-  return sec + ' с';
+  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) {
@@ -61,21 +74,22 @@ function renderDisks() {
   const summary = document.getElementById('diskSummary');
 
   if (!disks.length) {
-    summary.textContent = 'Подключённые накопители не найдены.';
+    summary.textContent = 'No disks found.';
     grid.innerHTML = '';
     return;
   }
 
   const knownCount = disks.filter((disk) => disk.state === 'known').length;
-  summary.textContent = `Найдено накопителей: ${disks.length}. Готово к копированию: ${knownCount}.`;
+  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 || 'Подготовка…') : '';
+    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">
@@ -83,20 +97,24 @@ function renderDisks() {
         <table class="kv-table">
           <tbody>
             <tr>
-              <th>Статус</th>
+              <th>Status</th>
               <td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td>
             </tr>
             <tr>
-              <th>ID диска</th>
-              <td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">ещё не инициализирован</span>'}</td>
+              <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>Всего на диске</th>
-              <td>${isKnown ? fmtBytes(disk.total_bytes) : '—'}</td>
+              <th>Total capacity</th>
+              <td>${hasCapacity ? fmtBytes(disk.total_bytes) : '—'}</td>
             </tr>
             <tr>
-              <th>Свободно</th>
-              <td>${isKnown ? fmtBytes(disk.free_bytes) : '—'}</td>
+              <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>
@@ -111,11 +129,12 @@ function renderDisks() {
         ` : ''}
         <div class="btn-row">
           ${isKnown ? `
-            <button class="button-primary" data-action="start-copy" data-disk-id="${escapeHTML(disk.disk_id)}" ${activeTask ? 'disabled' : ''}>▶ Копировать</button>
-            <button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy" data-disk-id="${escapeHTML(disk.disk_id)}">✕ Отменить</button>
+            <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)}">Инициализировать диск</button>
+            <button class="button-secondary" data-action="init-disk" data-mount-path="${escapeHTML(disk.mount_path)}">Initialize disk</button>
           ` : ''}
         </div>
       </section>
@@ -170,35 +189,39 @@ async function pollTask(taskID) {
     if (['success', 'failed', 'canceled'].includes(task.status)) {
       stopTaskPoll(taskID);
       taskState.delete(taskID);
-      if (task.status === 'success') toast(task.message || 'Готово', 'ok');
-      if (task.status === 'failed') toast('Ошибка: ' + task.error, 'error');
-      if (task.status === 'canceled') toast('Копирование отменено', 'error');
+      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) {
+async function startCopy(diskID, mode) {
   try {
-    const response = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', { method: 'POST' });
+    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 || 'Ошибка запуска', 'error');
+      toast(payload.error || 'Failed to start copy', 'error');
       return;
     }
     startTaskPoll(payload.task_id);
     refreshDisks();
   } catch (error) {
-    toast('Ошибка связи', 'error');
+    toast('Network error', 'error');
   }
 }
 
 async function cancelCopy(diskID) {
   try {
     await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/cancel', { method: 'POST' });
-    toast('Отмена…', 'ok');
+    toast('Canceling...', 'ok');
   } catch (error) {
-    toast('Ошибка связи', 'error');
+    toast('Network error', 'error');
   }
 }
 
@@ -211,13 +234,13 @@ async function initDisk(mountPath) {
     });
     const payload = await response.json();
     if (!response.ok) {
-      toast(payload.error || 'Ошибка инициализации', 'error');
+      toast(payload.error || 'Failed to initialize disk', 'error');
       return;
     }
-    toast('Диск инициализирован', 'ok');
+    toast('Disk initialized', 'ok');
     refreshDisks();
   } catch (error) {
-    toast('Ошибка связи', 'error');
+    toast('Network error', 'error');
   }
 }
 
@@ -226,7 +249,7 @@ document.getElementById('diskGrid').addEventListener('click', (event) => {
   if (!button) return;
 
   const action = button.dataset.action;
-  if (action === 'start-copy') startCopy(button.dataset.diskId);
+  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);
 });