dashcaddy/status/js/disk-settings.js

// Disk Safety Settings Panel
(function() {
  let diskSettings = null;

  async function loadDiskSettings() {
    try {
      const res = await secureFetch('/api/v1/disk-settings');
      if (res.ok) {
        diskSettings = await res.json();
        renderDiskSettingsModal();
      }
    } catch (e) {
      console.error('Failed to load disk settings:', e);
    }
  }

  function renderDiskSettingsModal() {
    const existing = document.getElementById('disk-settings-modal');
    if (existing) existing.remove();

    const c = diskSettings?.current || {};
    const du = diskSettings?.diskUsage || {};
    const usedGB = (du.dataDirSize / 1073741824).toFixed(2);
    const diskFreeGB = (du.free / 1073741824).toFixed(1);
    const diskTotalGB = (du.total / 1073741824).toFixed(1);
    const diskPct = du.total > 0 ? ((du.used / du.total) * 100).toFixed(1) : 0;

    const modal = document.createElement('div');
    modal.id = 'disk-settings-modal';
    modal.className = 'modal';
    modal.style.cssText = 'display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:10000;align-items:center;justify-content:center;';
    modal.innerHTML = `
      <div style="background:var(--bg-card,#1a1a2e);border-radius:12px;padding:28px;max-width:520px;width:90%;max-height:85vh;overflow-y:auto;border:1px solid var(--border,#333);">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
          <h2 style="margin:0;font-size:1.3rem;">💾 Disk Safety</h2>
          <button id="disk-close-btn" aria-label="Close" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted,#888);">×</button>
        </div>

        <div style="background:rgba(99,102,241,0.08);border:1px solid rgba(99,102,241,0.2);border-radius:8px;padding:14px;margin-bottom:20px;">
          <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
            <span style="font-size:0.9rem;color:var(--text-muted,#888);">DashCaddy Data Size</span>
            <span style="font-weight:600;">${usedGB} GB</span>
          </div>
          <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
            <span style="font-size:0.9rem;color:var(--text-muted,#888);">Disk Free</span>
            <span style="font-weight:600;">${diskFreeGB} GB / ${diskTotalGB} GB (${diskPct}% used)</span>
          </div>
        </div>

        <div style="background:rgba(243,156,18,0.08);border:1px solid rgba(243,156,18,0.25);border-radius:8px;padding:12px;margin-bottom:16px;">
          <div style="font-size:0.82rem;color:#f0a040;line-height:1.45;">
            ⚠ <strong>Disk impact:</strong> Lowering the health check interval increases how often data is written to disk.
            DashCaddy caps history at <strong>max entries per service</strong> and prunes entries older than the retention period,
            so these two values together determine steady-state disk usage. For busy hosts, prefer a longer interval (60–120s)
            and a lower entry cap.
          </div>
        </div>

        <div style="display:grid;gap:16px;">
          ${settingRow('Health Check Interval', 'healthInterval', c.healthCheckInterval, 'seconds', Math.round((c.healthCheckInterval||30000)/1000), 5, 300)}
          ${settingRow('Max Health Entries/Service', 'healthMaxEntries', c.healthMaxEntries, 'entries', c.healthMaxEntries||500, 50, 5000)}
          ${settingRow('Health Retention', 'healthRetentionDays', c.healthRetentionDays, 'days', c.healthRetentionDays||30, 1, 90)}
          ${settingRow('Max Stats Entries', 'statsMaxEntries', c.statsMaxEntries, 'entries', c.statsMaxEntries||500, 100, 10000)}
          ${settingRow('Max Audit Entries', 'auditMaxEntries', c.auditMaxEntries, 'entries', c.auditMaxEntries||1000, 100, 10000)}
        </div>

        <div style="display:flex;gap:10px;margin-top:24px;">
          <button id="disk-save-btn" style="flex:1;padding:10px 16px;background:#6366f1;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;">Save Settings</button>
          <button id="disk-cleanup-btn" style="flex:1;padding:10px 16px;background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);border-radius:8px;cursor:pointer;font-weight:600;">Clean Up Now</button>
        </div>
        <p style="font-size:0.8rem;color:var(--text-muted,#666);margin-top:12px;text-align:center;">Some changes apply on next container restart.</p>
      </div>
    `;
    document.body.appendChild(modal);
    // Audit P0-3 (2026-10-27): the meta CSP blocks inline event handlers, so
    // the injected onclick/oninput attributes were dead — Save/Clean Up/
    // Close did nothing and slider value labels never updated. Wire after
    // injection instead.
    document.getElementById('disk-close-btn').addEventListener('click', () => modal.remove());
    document.getElementById('disk-save-btn').addEventListener('click', () => saveDiskSettings());
    document.getElementById('disk-cleanup-btn').addEventListener('click', () => cleanupDiskNow());
    modal.querySelectorAll('input[type="range"]').forEach((inp) => {
      inp.addEventListener('input', () => {
        const out = document.getElementById(`${inp.id}-val`);
        if (out) out.textContent = inp.value;
      });
    });
  }

  function settingRow(label, id, current, unit, displayVal, min, max) {
    return `
      <div>
        <label style="font-size:0.85rem;color:var(--text-muted,#aaa);display:block;margin-bottom:4px;">${label}</label>
        <div style="display:flex;align-items:center;gap:10px;">
          <input type="range" id="disk-${id}" min="${min}" max="${max}" value="${displayVal}"
            style="flex:1;accent-color:#6366f1;">
          <span id="disk-${id}-val" style="min-width:50px;text-align:right;font-weight:600;">${displayVal}</span>
          <span style="font-size:0.8rem;color:var(--text-muted,#666);min-width:60px;">${unit}</span>
        </div>
      </div>`;
  }

  async function saveDiskSettings() {
    const payload = {
      healthInterval: parseInt(document.getElementById('disk-healthInterval').value) * 1000,
      healthMaxEntries: parseInt(document.getElementById('disk-healthMaxEntries').value),
      healthRetentionDays: parseInt(document.getElementById('disk-healthRetentionDays').value),
      statsMaxEntries: parseInt(document.getElementById('disk-statsMaxEntries').value),
      auditMaxEntries: parseInt(document.getElementById('disk-auditMaxEntries').value),
    };
    try {
      const res = await secureFetch('/api/v1/disk-settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (data.success) {
        showToast('Disk settings saved', 'success');
      } else {
        showToast(data.error || 'Save failed', 'error');
      }
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  async function cleanupDiskNow() {
    if (!confirm('Clean up old health entries, stats, and audit logs now?')) return;
    try {
      const res = await secureFetch('/api/v1/disk-settings/cleanup', { method: 'POST' });
      const data = await res.json();
      if (data.success) {
        const items = Object.entries(data.results.cleaned).map(([k,v]) => `${k}: ${v}`).join('\n');
        showToast('Cleanup complete', 'success');
        loadDiskSettings();
      }
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  window.openDiskSettings = function() { loadDiskSettings(); };
  window.saveDiskSettings = saveDiskSettings;
  window.cleanupDiskNow = cleanupDiskNow;

  // Audit P0-3: index.html's Disk button carried an inline handler calling
  // openDiskSettings() — dead under the meta CSP. Wired here instead.
  const diskOpenBtn = document.getElementById('disk-settings-open');
  if (diskOpenBtn) diskOpenBtn.addEventListener('click', () => loadDiskSettings());
})();