Initial commit: DashCaddy v1.0
Full codebase including API server (32 modules + routes), dashboard frontend, DashCA certificate distribution, installer script, and deployment skills.
This commit is contained in:
328
status/js/resource-monitor.js
Normal file
328
status/js/resource-monitor.js
Normal file
@@ -0,0 +1,328 @@
|
||||
// ========== RESOURCE MONITOR (Enhanced) ==========
|
||||
(function() {
|
||||
// Inject modal HTML
|
||||
injectModal('stats-modal', `<div id="stats-modal" class="weather-modal">
|
||||
<div class="weather-modal-content" style="min-width: 750px; max-width: 950px;">
|
||||
<h3>📊 Resource Monitor</h3>
|
||||
<p class="modal-subtitle">
|
||||
Real-time and historical CPU, memory, network, and disk usage for containers.
|
||||
</p>
|
||||
|
||||
<!-- Tab bar -->
|
||||
<div class="panel-tabs">
|
||||
<button class="panel-tab active" data-panel="stats-live">Live Stats</button>
|
||||
<button class="panel-tab" data-panel="stats-aggregated">24h Summary</button>
|
||||
<button class="panel-tab" data-panel="stats-alerts">Alerts</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Live Stats -->
|
||||
<div id="stats-live" class="panel-section active">
|
||||
<div id="stats-container" class="scroll-container">
|
||||
<div style="text-align: center; padding: 40px; color: var(--muted);">
|
||||
<span class="brand-spinner"></span> Loading container stats...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: 24h Aggregated Summary -->
|
||||
<div id="stats-aggregated" class="panel-section">
|
||||
<div id="stats-aggregated-container" class="scroll-container">
|
||||
<div class="panel-empty">
|
||||
<span class="empty-icon">📈</span>
|
||||
Loading 24-hour aggregated metrics...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Alert Configuration -->
|
||||
<div id="stats-alerts" class="panel-section">
|
||||
<div id="stats-alerts-container" class="scroll-container">
|
||||
<div class="panel-empty">
|
||||
<span class="empty-icon">🔔</span>
|
||||
Loading alert configurations...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto-refresh toggle (bottom bar) -->
|
||||
<div class="panel-bottom-bar">
|
||||
<label class="checkbox-label" style="font-size: 0.85rem;">
|
||||
<input type="checkbox" id="stats-auto-refresh" checked />
|
||||
Auto-refresh every 5s
|
||||
</label>
|
||||
<button id="stats-refresh-btn" class="btn-sm">🔄 Refresh Now</button>
|
||||
<span id="stats-last-update" class="text-auto-right"></span>
|
||||
</div>
|
||||
|
||||
<!-- Close Button -->
|
||||
<div class="weather-modal-buttons modal-footer-bar">
|
||||
<button id="stats-cancel">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const modal = document.getElementById('stats-modal');
|
||||
const openBtn = document.getElementById('container-stats-btn');
|
||||
const cancelBtn = document.getElementById('stats-cancel');
|
||||
const refreshBtn = document.getElementById('stats-refresh-btn');
|
||||
const autoRefreshCheckbox = document.getElementById('stats-auto-refresh');
|
||||
const container = document.getElementById('stats-container');
|
||||
const aggregatedContainer = document.getElementById('stats-aggregated-container');
|
||||
const alertsContainer = document.getElementById('stats-alerts-container');
|
||||
const lastUpdateSpan = document.getElementById('stats-last-update');
|
||||
|
||||
let refreshInterval = null;
|
||||
let cachedMonitoringData = null;
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0 || !bytes) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function getCpuColor(percent) {
|
||||
if (percent < 30) return '#2ecc71';
|
||||
if (percent < 70) return '#f39c12';
|
||||
return '#e74c3c';
|
||||
}
|
||||
|
||||
function getMemColor(percent) {
|
||||
if (percent < 50) return '#2ecc71';
|
||||
if (percent < 80) return '#f39c12';
|
||||
return '#e74c3c';
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
// Try new monitoring API first, fall back to old
|
||||
let stats = null;
|
||||
let isNewApi = false;
|
||||
try {
|
||||
const res = await fetch('/api/v1/monitoring/stats');
|
||||
const data = await res.json();
|
||||
if (data.success && data.stats) { stats = data.stats; isNewApi = true; cachedMonitoringData = data.stats; }
|
||||
} catch (_) {}
|
||||
|
||||
if (!isNewApi) {
|
||||
const response = await fetch('/api/v1/stats/containers');
|
||||
const data = await response.json();
|
||||
if (data.success && data.stats) {
|
||||
// Convert array format to object format
|
||||
stats = {};
|
||||
for (const s of data.stats) {
|
||||
stats[s.name] = { name: s.name, current: { cpu: s.cpu, memory: { percent: s.memory.percent, usage: s.memory.used, limit: s.memory.limit, usageMB: Math.round(s.memory.used / 1048576), limitMB: Math.round(s.memory.limit / 1048576) }, network: { rxBytes: s.network.rx, txBytes: s.network.tx, rxMB: (s.network.rx / 1048576).toFixed(1), txMB: (s.network.tx / 1048576).toFixed(1) }, disk: { readMB: 0, writeMB: 0 } }, status: s.status };
|
||||
}
|
||||
cachedMonitoringData = stats;
|
||||
}
|
||||
}
|
||||
|
||||
if (!stats || Object.keys(stats).length === 0) {
|
||||
container.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--muted);">No running containers found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '<div style="display: flex; flex-direction: column; gap: 8px;">';
|
||||
|
||||
for (const [id, info] of Object.entries(stats)) {
|
||||
const cur = info.current || info;
|
||||
const cpu = cur.cpu?.percent || 0;
|
||||
const mem = cur.memory?.percent || 0;
|
||||
const cpuColor = getCpuColor(cpu);
|
||||
const memColor = getMemColor(mem);
|
||||
const memUsed = cur.memory?.usage || cur.memory?.used || 0;
|
||||
const memLimit = cur.memory?.limit || 0;
|
||||
const netRx = cur.network?.rxBytes || cur.network?.rx || 0;
|
||||
const netTx = cur.network?.txBytes || cur.network?.tx || 0;
|
||||
const agg = info.aggregated;
|
||||
|
||||
html += `
|
||||
<div style="padding: 12px; background: var(--card-base); border-radius: 8px; border: 1px solid var(--border);">
|
||||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
|
||||
<span style="font-weight: 600; flex: 1;">${info.name || id}</span>
|
||||
${agg ? `<span style="font-size: 0.65rem; color: var(--muted); padding: 2px 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 4px;">avg ${agg.cpu?.avg?.toFixed(0) || 0}% cpu</span>` : ''}
|
||||
<span style="font-size: 0.75rem; color: var(--muted); background: var(--base); padding: 2px 8px; border-radius: 4px;">${info.status || 'running'}</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
|
||||
<div>
|
||||
<div style="font-size: 0.7rem; color: var(--muted); margin-bottom: 4px;">CPU</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<div style="flex: 1; height: 6px; background: var(--base); border-radius: 3px; overflow: hidden;">
|
||||
<div style="height: 100%; width: ${Math.min(cpu, 100)}%; background: ${cpuColor}; border-radius: 3px; transition: width 0.3s;"></div>
|
||||
</div>
|
||||
<span style="font-size: 0.8rem; font-weight: 500; color: ${cpuColor}; min-width: 45px; text-align: right;">${cpu.toFixed(1)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.7rem; color: var(--muted); margin-bottom: 4px;">Memory</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<div style="flex: 1; height: 6px; background: var(--base); border-radius: 3px; overflow: hidden;">
|
||||
<div style="height: 100%; width: ${Math.min(mem, 100)}%; background: ${memColor}; border-radius: 3px; transition: width 0.3s;"></div>
|
||||
</div>
|
||||
<span style="font-size: 0.8rem; font-weight: 500; color: ${memColor}; min-width: 45px; text-align: right;">${mem.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div style="font-size: 0.65rem; color: var(--muted); margin-top: 2px;">${formatBytes(memUsed)} / ${formatBytes(memLimit)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.7rem; color: var(--muted); margin-bottom: 4px;">Network</div>
|
||||
<div style="font-size: 0.8rem;">
|
||||
<span style="color: #3498db;">↓ ${formatBytes(netRx)}</span>
|
||||
<span style="color: var(--muted); margin: 0 4px;">/</span>
|
||||
<span style="color: #e74c3c;">↑ ${formatBytes(netTx)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
lastUpdateSpan.textContent = 'Updated: ' + new Date().toLocaleTimeString();
|
||||
} catch (e) {
|
||||
container.innerHTML = `<div style="text-align: center; padding: 40px; color: var(--bad-fg);">❌ Failed to load stats: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// === 24h Aggregated Tab ===
|
||||
async function loadAggregated() {
|
||||
if (!aggregatedContainer) return;
|
||||
const data = cachedMonitoringData;
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
aggregatedContainer.innerHTML = '<div class="panel-empty"><span class="empty-icon">📈</span>No monitoring data available. Open the Live Stats tab first.</div>';
|
||||
return;
|
||||
}
|
||||
let html = '<div style="display: flex; flex-direction: column; gap: 12px;">';
|
||||
for (const [id, info] of Object.entries(data)) {
|
||||
const agg = info.aggregated;
|
||||
if (!agg) continue;
|
||||
html += `<div style="padding: 12px; background: var(--card-base); border-radius: 8px; border: 1px solid var(--border);">
|
||||
<div style="font-weight: 600; margin-bottom: 10px;">${info.name || id}</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
|
||||
<div class="stat-mini-card"><span class="stat-val">${agg.cpu?.avg?.toFixed(1) || 0}%</span><span class="stat-lbl">Avg CPU</span></div>
|
||||
<div class="stat-mini-card"><span class="stat-val">${agg.cpu?.max?.toFixed(1) || 0}%</span><span class="stat-lbl">Max CPU</span></div>
|
||||
<div class="stat-mini-card"><span class="stat-val">${agg.memory?.avg?.toFixed(1) || 0}%</span><span class="stat-lbl">Avg Mem</span></div>
|
||||
<div class="stat-mini-card"><span class="stat-val">${agg.memory?.max?.toFixed(1) || 0}%</span><span class="stat-lbl">Max Mem</span></div>
|
||||
</div>
|
||||
${agg.dataPoints ? `<div style="font-size: 0.7rem; color: var(--muted); margin-top: 6px;">${agg.dataPoints} data points over ${agg.timeRange || 24}h</div>` : ''}
|
||||
</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
aggregatedContainer.innerHTML = html;
|
||||
}
|
||||
|
||||
// === Alerts Tab ===
|
||||
async function loadAlerts() {
|
||||
if (!alertsContainer) return;
|
||||
alertsContainer.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading alerts...</div>';
|
||||
const data = cachedMonitoringData;
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
alertsContainer.innerHTML = '<div class="panel-empty"><span class="empty-icon">🔔</span>No containers found. Open the Live Stats tab first.</div>';
|
||||
return;
|
||||
}
|
||||
let html = '<div style="display: flex; flex-direction: column; gap: 12px;">';
|
||||
for (const [id, info] of Object.entries(data)) {
|
||||
const alertCfg = info.alertConfig || {};
|
||||
html += `<div style="padding: 12px; background: var(--card-base); border-radius: 8px; border: 1px solid var(--border);">
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
|
||||
<span style="font-weight: 600; flex: 1;">${info.name || id}</span>
|
||||
<label style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer;">
|
||||
<input type="checkbox" class="alert-enabled" data-container="${id}" ${alertCfg.enabled ? 'checked' : ''} /> Enabled
|
||||
</label>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
|
||||
<div>
|
||||
<label style="font-size: 0.75rem; color: var(--muted);">CPU Threshold %</label>
|
||||
<input type="number" class="alert-cpu" data-container="${id}" value="${alertCfg.cpuThreshold || 80}" min="1" max="100" style="width: 100%; font-size: 0.85rem;" />
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.75rem; color: var(--muted);">Memory Threshold %</label>
|
||||
<input type="number" class="alert-mem" data-container="${id}" value="${alertCfg.memoryThreshold || 85}" min="1" max="100" style="width: 100%; font-size: 0.85rem;" />
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.75rem; color: var(--muted);">Cooldown (min)</label>
|
||||
<input type="number" class="alert-cooldown" data-container="${id}" value="${alertCfg.cooldownMinutes || 15}" min="1" max="1440" style="width: 100%; font-size: 0.85rem;" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-top: 8px; align-items: center;">
|
||||
<label style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer;">
|
||||
<input type="checkbox" class="alert-autorestart" data-container="${id}" ${alertCfg.autoRestart ? 'checked' : ''} /> Auto-restart on breach
|
||||
</label>
|
||||
<span style="flex: 1;"></span>
|
||||
<button class="alert-save-btn" data-container="${id}" style="padding: 4px 12px; font-size: 0.8rem; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; cursor: pointer;">Save</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
alertsContainer.innerHTML = html;
|
||||
|
||||
// Wire up save buttons
|
||||
alertsContainer.querySelectorAll('.alert-save-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const cId = btn.dataset.container;
|
||||
const enabled = alertsContainer.querySelector(`.alert-enabled[data-container="${cId}"]`)?.checked || false;
|
||||
const cpuThreshold = parseInt(alertsContainer.querySelector(`.alert-cpu[data-container="${cId}"]`)?.value) || 80;
|
||||
const memoryThreshold = parseInt(alertsContainer.querySelector(`.alert-mem[data-container="${cId}"]`)?.value) || 85;
|
||||
const cooldownMinutes = parseInt(alertsContainer.querySelector(`.alert-cooldown[data-container="${cId}"]`)?.value) || 15;
|
||||
const autoRestart = alertsContainer.querySelector(`.alert-autorestart[data-container="${cId}"]`)?.checked || false;
|
||||
try {
|
||||
const res = await secureFetch(`/api/v1/monitoring/alerts/${cId}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled, cpuThreshold, memoryThreshold, cooldownMinutes, autoRestart })
|
||||
});
|
||||
const data = await res.json();
|
||||
btn.textContent = data.success ? '✅ Saved' : '⚠️ Failed';
|
||||
setTimeout(() => { btn.textContent = 'Save'; }, 2000);
|
||||
} catch (e) {
|
||||
btn.textContent = '❌ Error';
|
||||
setTimeout(() => { btn.textContent = 'Save'; }, 2000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function startAutoRefresh() {
|
||||
if (refreshInterval) clearInterval(refreshInterval);
|
||||
if (autoRefreshCheckbox?.checked) {
|
||||
refreshInterval = setInterval(loadStats, DC.POLL.STATS);
|
||||
}
|
||||
}
|
||||
|
||||
function stopAutoRefresh() {
|
||||
if (refreshInterval) {
|
||||
clearInterval(refreshInterval);
|
||||
refreshInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Open modal
|
||||
openBtn?.addEventListener('click', () => {
|
||||
modal.classList.add('show');
|
||||
loadStats();
|
||||
startAutoRefresh();
|
||||
});
|
||||
|
||||
// Close modal
|
||||
cancelBtn?.addEventListener('click', () => {
|
||||
modal.classList.remove('show');
|
||||
stopAutoRefresh();
|
||||
});
|
||||
|
||||
modal?.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.classList.remove('show');
|
||||
stopAutoRefresh();
|
||||
}
|
||||
});
|
||||
|
||||
refreshBtn?.addEventListener('click', loadStats);
|
||||
|
||||
autoRefreshCheckbox?.addEventListener('change', () => {
|
||||
if (autoRefreshCheckbox.checked) startAutoRefresh();
|
||||
else stopAutoRefresh();
|
||||
});
|
||||
|
||||
// Lazy-load tabs
|
||||
document.querySelector('[data-panel="stats-aggregated"]')?.addEventListener('click', loadAggregated);
|
||||
document.querySelector('[data-panel="stats-alerts"]')?.addEventListener('click', loadAlerts);
|
||||
})();
|
||||
Reference in New Issue
Block a user