feat: add disk-safety warning step to setup wizard + health retention setting
- Add dedicated 'Disk Usage Note' step to setup wizard, shown after the configuration summary. Warns that health history, container stats, and event logs accumulate and links to Settings -> Health for retention limits. - Repoint the finish button to the new step (summary now has 'Continue ->'). - Remove the now-redundant inline disk tip from the JS-rendered summary. - Add 'Max Entries Per Service' (default 500) setting to the Health -> Configure -> Global Settings panel alongside the existing retention-days setting.
This commit is contained in:
+41
-1
@@ -680,7 +680,47 @@
|
|||||||
|
|
||||||
<div class="setup-wizard-buttons">
|
<div class="setup-wizard-buttons">
|
||||||
<button id="setup-summary-back">← Back</button>
|
<button id="setup-summary-back">← Back</button>
|
||||||
<button id="setup-finish" class="setup-btn-primary" style="background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg);">✓ Finish Setup</button>
|
<button id="setup-summary-next" class="setup-btn-primary">Continue →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Disk Safety Warning step (shown after the configuration summary) -->
|
||||||
|
<div class="setup-step" id="setup-step-disk-safety" style="display: none;">
|
||||||
|
<h2 style="margin: 0 0 8px;">⚠️ Disk Usage Note</h2>
|
||||||
|
<p class="setup-desc">Important information about storage before you finish</p>
|
||||||
|
|
||||||
|
<div style="margin-top: 8px; padding: 18px 20px; background: color-mix(in srgb, var(--warn-fg, #f39c12) 12%, transparent); border-radius: 10px; border: 1px solid var(--warn-fg, #f39c12);">
|
||||||
|
<div style="display: flex; gap: 12px; align-items: flex-start;">
|
||||||
|
<span style="font-size: 1.5rem; line-height: 1.2;">⚠️</span>
|
||||||
|
<div style="font-size: 0.92rem; line-height: 1.55; color: var(--text);">
|
||||||
|
<strong style="color: var(--warn-fg, #f39c12);">Disk Usage Note:</strong>
|
||||||
|
DashCaddy stores health check history, container statistics, and event logs.
|
||||||
|
On a busy server, this data can accumulate over time.
|
||||||
|
Set appropriate retention limits in <strong>Settings → Health</strong> to prevent disk fill.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 16px; padding: 14px 16px; background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border);">
|
||||||
|
<strong style="font-size: 0.9rem;">📋 Recommended after setup</strong>
|
||||||
|
<ul style="margin: 8px 0 0; padding-left: 20px; font-size: 0.85rem; color: var(--muted); line-height: 1.6;">
|
||||||
|
<li>Open <strong>Health → Configure → Global Settings</strong></li>
|
||||||
|
<li>Set a <strong>data retention period</strong> (default: 30 days)</li>
|
||||||
|
<li>Cap <strong>max entries per service</strong> (default: 500)</li>
|
||||||
|
<li>Set a <strong>disk-usage warning threshold</strong> (default: 80%)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 24px; padding: 16px; background: color-mix(in srgb, var(--ok-fg) 10%, transparent); border-radius: 8px; border: 1px solid var(--ok-fg);">
|
||||||
|
<strong style="color: var(--ok-fg);">✓ You can change these settings later</strong>
|
||||||
|
<div style="font-size: 0.85rem; margin-top: 4px; color: var(--muted);">
|
||||||
|
Go to Settings → System Configuration to edit your setup anytime
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setup-wizard-buttons">
|
||||||
|
<button id="setup-disk-safety-back">← Back</button>
|
||||||
|
<button id="setup-disk-safety-finish" class="setup-btn-primary" style="background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg);">✓ Finish Setup</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
<div id="health-global-settings" style="margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-base);">
|
<div id="health-global-settings" style="margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-base);">
|
||||||
<h4 style="margin: 0 0 4px;">🌍 Global Settings</h4>
|
<h4 style="margin: 0 0 4px;">🌍 Global Settings</h4>
|
||||||
<p class="text-muted-sm" style="margin: 0 0 12px;">Applies to all health checks. Settings are stored locally in this browser.</p>
|
<p class="text-muted-sm" style="margin: 0 0 12px;">Applies to all health checks. Settings are stored locally in this browser.</p>
|
||||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
|
||||||
<div>
|
<div>
|
||||||
<label class="text-muted-sm">Data Retention (days)</label>
|
<label class="text-muted-sm">Data Retention (days)</label>
|
||||||
<input type="number" id="health-setting-retention" value="30" min="1" max="3650" class="form-input" />
|
<input type="number" id="health-setting-retention" value="30" min="1" max="3650" class="form-input" />
|
||||||
@@ -49,6 +49,11 @@
|
|||||||
<input type="number" id="health-setting-interval" value="30" min="5" max="3600" class="form-input" />
|
<input type="number" id="health-setting-interval" value="30" min="5" max="3600" class="form-input" />
|
||||||
<div style="font-size: 0.72rem; color: var(--muted); margin-top: 2px;">How often each service is checked.</div>
|
<div style="font-size: 0.72rem; color: var(--muted); margin-top: 2px;">How often each service is checked.</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="text-muted-sm">Max Entries Per Service</label>
|
||||||
|
<input type="number" id="health-setting-max-entries" value="500" min="10" max="100000" class="form-input" />
|
||||||
|
<div style="font-size: 0.72rem; color: var(--muted); margin-top: 2px;">Cap on stored history records per service.</div>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label class="text-muted-sm">Disk-Usage Warning (%)</label>
|
<label class="text-muted-sm">Disk-Usage Warning (%)</label>
|
||||||
<input type="number" id="health-setting-disk-threshold" value="80" min="50" max="99" class="form-input" />
|
<input type="number" id="health-setting-disk-threshold" value="80" min="50" max="99" class="form-input" />
|
||||||
@@ -133,12 +138,13 @@
|
|||||||
|
|
||||||
// ---- Global health settings (retention, polling interval, disk threshold) ----
|
// ---- Global health settings (retention, polling interval, disk threshold) ----
|
||||||
const HEALTH_SETTINGS_KEY = 'dashcaddy-health-settings';
|
const HEALTH_SETTINGS_KEY = 'dashcaddy-health-settings';
|
||||||
const HEALTH_DEFAULTS = { retentionDays: 30, pollingInterval: 30, diskUsageThreshold: 80 };
|
const HEALTH_DEFAULTS = { retentionDays: 30, pollingInterval: 30, maxEntriesPerService: 500, diskUsageThreshold: 80 };
|
||||||
const globalSaveBtn = document.getElementById('health-global-save');
|
const globalSaveBtn = document.getElementById('health-global-save');
|
||||||
const globalResetBtn = document.getElementById('health-global-reset');
|
const globalResetBtn = document.getElementById('health-global-reset');
|
||||||
const globalStatusSpan = document.getElementById('health-global-status');
|
const globalStatusSpan = document.getElementById('health-global-status');
|
||||||
const retentionInput = document.getElementById('health-setting-retention');
|
const retentionInput = document.getElementById('health-setting-retention');
|
||||||
const intervalInput = document.getElementById('health-setting-interval');
|
const intervalInput = document.getElementById('health-setting-interval');
|
||||||
|
const maxEntriesInput = document.getElementById('health-setting-max-entries');
|
||||||
const diskThresholdInput = document.getElementById('health-setting-disk-threshold');
|
const diskThresholdInput = document.getElementById('health-setting-disk-threshold');
|
||||||
|
|
||||||
function loadHealthSettings() {
|
function loadHealthSettings() {
|
||||||
@@ -155,6 +161,7 @@
|
|||||||
const s = loadHealthSettings();
|
const s = loadHealthSettings();
|
||||||
if (retentionInput) retentionInput.value = s.retentionDays;
|
if (retentionInput) retentionInput.value = s.retentionDays;
|
||||||
if (intervalInput) intervalInput.value = s.pollingInterval;
|
if (intervalInput) intervalInput.value = s.pollingInterval;
|
||||||
|
if (maxEntriesInput) maxEntriesInput.value = s.maxEntriesPerService;
|
||||||
if (diskThresholdInput) diskThresholdInput.value = s.diskUsageThreshold;
|
if (diskThresholdInput) diskThresholdInput.value = s.diskUsageThreshold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -162,6 +169,7 @@
|
|||||||
const settings = {
|
const settings = {
|
||||||
retentionDays: Math.max(1, Math.min(3650, parseInt(retentionInput?.value) || HEALTH_DEFAULTS.retentionDays)),
|
retentionDays: Math.max(1, Math.min(3650, parseInt(retentionInput?.value) || HEALTH_DEFAULTS.retentionDays)),
|
||||||
pollingInterval: Math.max(5, Math.min(3600, parseInt(intervalInput?.value) || HEALTH_DEFAULTS.pollingInterval)),
|
pollingInterval: Math.max(5, Math.min(3600, parseInt(intervalInput?.value) || HEALTH_DEFAULTS.pollingInterval)),
|
||||||
|
maxEntriesPerService: Math.max(10, Math.min(100000, parseInt(maxEntriesInput?.value) || HEALTH_DEFAULTS.maxEntriesPerService)),
|
||||||
diskUsageThreshold: Math.max(50, Math.min(99, parseInt(diskThresholdInput?.value) || HEALTH_DEFAULTS.diskUsageThreshold))
|
diskUsageThreshold: Math.max(50, Math.min(99, parseInt(diskThresholdInput?.value) || HEALTH_DEFAULTS.diskUsageThreshold))
|
||||||
};
|
};
|
||||||
try {
|
try {
|
||||||
|
|||||||
+20
-18
@@ -135,22 +135,6 @@ window.populateTimezoneSelect = function(selectEl, selectedTz) {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Disk-safety reminder (universal across all config types)
|
|
||||||
html += `
|
|
||||||
<div style="margin-top: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--warn-fg, #f39c12); background: color-mix(in srgb, var(--warn-fg, #f39c12) 8%, transparent);">
|
|
||||||
<div style="display: flex; gap: 8px; align-items: flex-start;">
|
|
||||||
<span style="font-size: 1.1rem;">💾</span>
|
|
||||||
<div style="font-size: 0.85rem; line-height: 1.45;">
|
|
||||||
<strong style="color: var(--warn-fg, #f39c12);">Disk-space tip:</strong>
|
|
||||||
Health-check monitoring records uptime, response-time, and incident data continuously.
|
|
||||||
By default DashCaddy keeps <strong>30 days</strong> of history and warns at <strong>80% disk usage</strong>.
|
|
||||||
You can tune the retention period, polling interval, and disk threshold later under
|
|
||||||
<strong>Health → Configure → Global Settings</strong>.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
summaryContent.innerHTML = html;
|
summaryContent.innerHTML = html;
|
||||||
showStep('setup-step-summary');
|
showStep('setup-step-summary');
|
||||||
@@ -393,8 +377,26 @@ window.populateTimezoneSelect = function(selectEl, selectedTz) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Finish setup button
|
// Summary "Continue →" — advance to the disk-safety warning step
|
||||||
const finishBtn = document.getElementById('setup-finish');
|
const summaryNext = document.getElementById('setup-summary-next');
|
||||||
|
if (summaryNext) {
|
||||||
|
summaryNext.onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
showStep('setup-step-disk-safety');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disk-safety step navigation
|
||||||
|
const diskSafetyBack = document.getElementById('setup-disk-safety-back');
|
||||||
|
if (diskSafetyBack) {
|
||||||
|
diskSafetyBack.onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
showStep('setup-step-summary');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Finish setup button (now on the disk-safety step)
|
||||||
|
const finishBtn = document.getElementById('setup-disk-safety-finish');
|
||||||
if (finishBtn) {
|
if (finishBtn) {
|
||||||
finishBtn.onclick = function(e) {
|
finishBtn.onclick = function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|||||||
Reference in New Issue
Block a user