canadabot/infrastructure-monitoring-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Gitea remote info to CLAUDE.md; implement vendor integrations and remove FortiGate modules

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Klein
2026-06-07 08:37:10 -04:00
parent 51eb3bf7c8
commit 09404db559
19 changed files with 95 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
-52
View File
@@ -21,58 +21,6 @@
</div>
</header>
<div id="summary-bar"></div>
<section id="wan-section">
<div id="wan-graphs">
<div class="wan-panel">
<div class="wan-panel-header">
<span class="wan-name" id="wan1-name">Crown Castle</span>
<div class="wan-legend">
<span class="wan-legend-item"><span class="wan-legend-dot rx"></span><span id="wan1-rx">— Mbps ↓</span></span>
<span class="wan-legend-item"><span class="wan-legend-dot tx"></span><span id="wan1-tx">— Mbps ↑</span></span>
</div>
</div>
<canvas id="wan1-canvas" class="wan-canvas"></canvas>
</div>
<div class="wan-panel">
<div class="wan-panel-header">
<span class="wan-name" id="wan2-name">Comcast</span>
<div class="wan-legend">
<span class="wan-legend-item"><span class="wan-legend-dot rx"></span><span id="wan2-rx">— Mbps ↓</span></span>
<span class="wan-legend-item"><span class="wan-legend-dot tx"></span><span id="wan2-tx">— Mbps ↑</span></span>
</div>
</div>
<canvas id="wan2-canvas" class="wan-canvas"></canvas>
</div>
</div>
<div id="fg-health-card">
<div class="fg-identity">
<span class="status-indicator operational" id="fg-status-dot"></span>
<span class="fg-model" id="fg-model">FortiGate 1800F</span>
</div>
<div class="fg-metrics">
<div class="fg-metric">
<span class="fg-metric-label">Hostname</span>
<span class="fg-metric-value" id="fg-hostname">—</span>
</div>
<div class="fg-metric">
<span class="fg-metric-label">Version</span>
<span class="fg-metric-value" id="fg-version">—</span>
</div>
<div class="fg-metric">
<span class="fg-metric-label">Uptime</span>
<span class="fg-metric-value" id="fg-uptime">—</span>
</div>
<div class="fg-metric">
<span class="fg-metric-label">CPU</span>
<span class="fg-metric-value" id="fg-cpu">—</span>
</div>
<div class="fg-metric">
<span class="fg-metric-label">Memory</span>
<span class="fg-metric-value" id="fg-mem">—</span>
</div>
</div>
</div>
</section>
<main id="vendor-grid"></main>
<script src="js/app.js"></script>
</body>
frontend/js/app.js
-173
View File
@@ -1,9 +1,6 @@
// How often to fetch status (ms)
const REFRESH_INTERVAL = 60_000;
// How often to fetch WAN throughput (ms) — matches backend poll rate
const THROUGHPUT_INTERVAL = 30_000;
// Status severity for sorting (higher = more severe = shown first)
const SEVERITY = { outage: 3, degraded: 2, unknown: 1, operational: 0 };
@@ -225,178 +222,8 @@ async function refresh() {
render(vendors);
}
// ===== WAN THROUGHPUT GRAPH =====
async function fetchThroughput() {
try {
const res = await fetch("/api/throughput");
if (!res.ok) throw new Error(res.statusText);
return await res.json();
} catch {
return [];
}
}
// Round up to the nearest "nice" scale value for the Y axis
function niceMax(val) {
const steps = [10, 25, 50, 100, 200, 500, 1000, 2000, 5000, 10000];
return steps.find((s) => s >= val) ?? Math.ceil(val * 1.2);
}
function fmtMbps(mbps) {
if (mbps >= 1000) return `${(mbps / 1000).toFixed(1)} Gbps`;
if (mbps >= 100) return `${Math.round(mbps)} Mbps`;
if (mbps >= 10) return `${mbps.toFixed(1)} Mbps`;
return `${mbps.toFixed(2)} Mbps`;
}
function drawGraph(canvas, points, wanKey) {
const dpr = window.devicePixelRatio || 1;
const W = canvas.offsetWidth;
const H = canvas.offsetHeight;
canvas.width = W * dpr;
canvas.height = H * dpr;
const ctx = canvas.getContext("2d");
ctx.scale(dpr, dpr);
ctx.clearRect(0, 0, W, H);
if (points.length < 2) {
ctx.fillStyle = "#484f58";
ctx.font = "11px Consolas, monospace";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Waiting for data…", W / 2, H / 2);
return;
}
const PAD = { top: 6, right: 6, bottom: 4, left: 42 };
const plotW = W - PAD.left - PAD.right;
const plotH = H - PAD.top - PAD.bottom;
const allVals = points.flatMap((p) => [p[wanKey].rxMbps, p[wanKey].txMbps]);
const maxVal = niceMax(Math.max(...allVals, 1));
// Grid lines and Y-axis labels
ctx.font = "9px Consolas, monospace";
ctx.textAlign = "right";
ctx.textBaseline = "middle";
[0, 0.5, 1].forEach((frac) => {
const y = PAD.top + plotH * (1 - frac);
ctx.strokeStyle = "#21262d";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(PAD.left, y);
ctx.lineTo(PAD.left + plotW, y);
ctx.stroke();
if (frac > 0) {
ctx.fillStyle = "#484f58";
ctx.fillText(fmtMbps(maxVal * frac), PAD.left - 5, y);
}
});
// Draw a line with a fill underneath
function drawLine(getValue, strokeColor, fillColor) {
const n = points.length;
const pts = points.map((p, i) => ({
x: PAD.left + (i / (n - 1)) * plotW,
y: PAD.top + plotH * (1 - Math.max(0, getValue(p)) / maxVal),
}));
// Fill
ctx.beginPath();
ctx.moveTo(pts[0].x, PAD.top + plotH);
pts.forEach((pt) => ctx.lineTo(pt.x, pt.y));
ctx.lineTo(pts[n - 1].x, PAD.top + plotH);
ctx.closePath();
ctx.fillStyle = fillColor;
ctx.fill();
// Stroke
ctx.beginPath();
pts.forEach((pt, i) => (i === 0 ? ctx.moveTo(pt.x, pt.y) : ctx.lineTo(pt.x, pt.y)));
ctx.strokeStyle = strokeColor;
ctx.lineWidth = 1.5;
ctx.lineJoin = "round";
ctx.stroke();
}
drawLine((p) => p[wanKey].rxMbps, "#58a6ff", "rgba(88, 166, 255, 0.10)");
drawLine((p) => p[wanKey].txMbps, "#3fb950", "rgba(63, 185, 80, 0.10)");
}
function renderThroughput(points) {
if (points.length === 0) return;
const latest = points[points.length - 1];
// Update labels from the data (picks up names from .env via backend)
document.getElementById("wan1-name").textContent = latest.wan1.label;
document.getElementById("wan2-name").textContent = latest.wan2.label;
document.getElementById("wan1-rx").textContent = `${fmtMbps(latest.wan1.rxMbps)} ↓`;
document.getElementById("wan1-tx").textContent = `${fmtMbps(latest.wan1.txMbps)} ↑`;
document.getElementById("wan2-rx").textContent = `${fmtMbps(latest.wan2.rxMbps)} ↓`;
document.getElementById("wan2-tx").textContent = `${fmtMbps(latest.wan2.txMbps)} ↑`;
drawGraph(document.getElementById("wan1-canvas"), points, "wan1");
drawGraph(document.getElementById("wan2-canvas"), points, "wan2");
}
async function refreshThroughput() {
const points = await fetchThroughput();
renderThroughput(points);
}
// ===== FORTIGATE HEALTH CARD =====
async function fetchFgHealth() {
try {
const res = await fetch("/api/fortigate-health");
if (!res.ok) return null;
return await res.json();
} catch {
return null;
}
}
function renderFgHealth(health) {
if (!health) return;
document.getElementById("fg-model").textContent =
`FortiGate ${health.model}`;
document.getElementById("fg-hostname").textContent = health.hostname;
document.getElementById("fg-version").textContent = health.version;
document.getElementById("fg-uptime").textContent = health.uptimeLabel;
const cpuEl = document.getElementById("fg-cpu");
cpuEl.textContent = health.cpuPct !== null ? `${health.cpuPct}%` : "—";
cpuEl.className = "fg-metric-value" +
(health.cpuPct >= 90 ? " crit" : health.cpuPct >= 75 ? " warn" : "");
const memEl = document.getElementById("fg-mem");
memEl.textContent = health.memPct !== null ? `${health.memPct}%` : "—";
memEl.className = "fg-metric-value" +
(health.memPct >= 90 ? " crit" : health.memPct >= 75 ? " warn" : "");
const dot = document.getElementById("fg-status-dot");
const stressed = health.cpuPct >= 90 || health.memPct >= 90;
dot.className = `status-indicator ${stressed ? "degraded" : "operational"}`;
}
async function refreshFgHealth() {
const health = await fetchFgHealth();
renderFgHealth(health);
}
// Initialize
updateClock();
setInterval(updateClock, 1000);
refresh();
setInterval(refresh, REFRESH_INTERVAL);
refreshThroughput();
setInterval(refreshThroughput, THROUGHPUT_INTERVAL);
refreshFgHealth();
setInterval(refreshFgHealth, 2 * 60 * 1000);