Jared Vititoe
f2541eb45c
All rack servers (and large1 on table) have both a 10G link to USW-Agg and a 1G management link to Pro 24 PoE. Update topology: - Move all 6 hosts into single row (including large1) - Update sublabels to "10G+1G" for all nodes - large1 dashed-border (off-rack) with "table · 10G+1G" - Add dashed amber "1G mgmt (PoE)" horizontal band above hosts to represent the PoE switch management connections - 10G primary fan-out lines still drop from Agg switch above - large1 primary line rendered as dashed green (off-rack run) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
422 lines
17 KiB
HTML
422 lines
17 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Dashboard – GANDALF{% endblock %}
|
||
|
||
{% block content %}
|
||
|
||
<!-- ── Status bar ──────────────────────────────────────────────────── -->
|
||
<div class="status-bar">
|
||
<div class="status-chips">
|
||
{% if summary.critical %}
|
||
<span class="chip chip-critical">● {{ summary.critical }} CRITICAL</span>
|
||
{% endif %}
|
||
{% if summary.warning %}
|
||
<span class="chip chip-warning">● {{ summary.warning }} WARNING</span>
|
||
{% endif %}
|
||
{% if not summary.critical and not summary.warning %}
|
||
<span class="chip chip-ok">✔ ALL SYSTEMS NOMINAL</span>
|
||
{% endif %}
|
||
</div>
|
||
<div class="status-meta">
|
||
<span class="last-check" id="last-check">{{ last_check }}</span>
|
||
<button class="btn-refresh" onclick="refreshAll()">↻ REFRESH</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Network topology + host grid ───────────────────────────────── -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Network Hosts</h2>
|
||
</div>
|
||
|
||
<div class="topology" id="topology-diagram">
|
||
|
||
<!-- ── Tier 1: Internet ───────────────────────── -->
|
||
<div class="topo-row">
|
||
<div class="topo-node topo-internet">
|
||
<span class="topo-icon">◈</span>
|
||
<span class="topo-label">Internet</span>
|
||
</div>
|
||
</div>
|
||
<div class="topo-connectors single">
|
||
<div class="topo-line topo-line-labeled" data-link-label="WAN 10G SFP+"></div>
|
||
</div>
|
||
|
||
<!-- ── Tier 2: Router ─────────────────────────── -->
|
||
<div class="topo-row">
|
||
<div class="topo-node topo-unifi">
|
||
<span class="topo-icon">⬡</span>
|
||
<span class="topo-label">UDM-Pro</span>
|
||
<span class="topo-node-sub">Dream Machine Pro · RU24</span>
|
||
</div>
|
||
</div>
|
||
<div class="topo-connectors single">
|
||
<div class="topo-line topo-line-labeled" data-link-label="10G DAC"></div>
|
||
</div>
|
||
|
||
<!-- ── Tier 3: Switches (Agg + PoE side by side) ─ -->
|
||
<div class="topo-row">
|
||
<div class="topo-switch-tier">
|
||
<div class="topo-node topo-switch" id="topo-switch-agg">
|
||
<span class="topo-icon">⬡</span>
|
||
<span class="topo-label">USW-Agg</span>
|
||
<span class="topo-node-sub">8×10G SFP+ · RU22</span>
|
||
</div>
|
||
<div class="topo-h-link">
|
||
<div class="topo-h-link-line"></div>
|
||
<span class="topo-h-link-label">10G SFP+</span>
|
||
</div>
|
||
<div class="topo-node topo-switch" id="topo-switch-poe">
|
||
<span class="topo-icon">⬡</span>
|
||
<span class="topo-label">Pro 24 PoE</span>
|
||
<span class="topo-node-sub">24×1G PoE · RU23</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Tier 4: Hosts (all dual-homed 10G + 1G) ── -->
|
||
<div class="topo-host-tier">
|
||
<div class="topo-host-group">
|
||
|
||
<!-- 10G primary lines from Agg -->
|
||
<div class="topo-connectors" style="gap:20px; justify-content:center">
|
||
<div class="topo-line"></div>
|
||
<div class="topo-line"></div>
|
||
<div class="topo-line"></div>
|
||
<div class="topo-line"></div>
|
||
<div class="topo-line"></div>
|
||
<div class="topo-line topo-line-dashed"></div>
|
||
</div>
|
||
|
||
<!-- 1G management lines from PoE (dashed amber) -->
|
||
<div class="topo-mgmt-band">
|
||
<span class="topo-mgmt-label">1G mgmt (PoE)</span>
|
||
<div class="topo-mgmt-line"></div>
|
||
</div>
|
||
|
||
<div class="topo-row topo-hosts-row">
|
||
{%- set topo_h = snapshot.hosts if snapshot.hosts else {} -%}
|
||
{%- set all_defs = [
|
||
('compute-storage-gpu-01', 'csg-01', 'RU4–12 · 10G+1G', False),
|
||
('compute-storage-01', 'cs-01', 'RU14–17 · 10G+1G', False),
|
||
('storage-01', 'storage-01','rack · 10G+1G', False),
|
||
('monitor-01', 'monitor-01','ZimaBoard · 10G+1G', False),
|
||
('monitor-02', 'monitor-02','ZimaBoard · 10G+1G', False),
|
||
('large1', 'large1', 'table · 10G+1G', True),
|
||
] -%}
|
||
{%- for hname, hlabel, hsub, off_rack in all_defs -%}
|
||
{%- set st = topo_h[hname].status if hname in topo_h else 'unknown' -%}
|
||
<div class="topo-node topo-host{{ ' topo-host-table' if off_rack else '' }} topo-status-{{ st }}" data-host="{{ hname }}">
|
||
<span class="topo-icon">▣</span>
|
||
<span class="topo-label">{{ hlabel }}</span>
|
||
<span class="topo-node-sub">{{ hsub }}</span>
|
||
<span class="topo-badge topo-badge-{{ st }}">{{ st if st != 'unknown' else '–' }}</span>
|
||
</div>
|
||
{%- endfor -%}
|
||
</div>
|
||
|
||
</div>
|
||
</div><!-- /topo-host-tier -->
|
||
</div>
|
||
|
||
<!-- Host cards -->
|
||
<div class="host-grid" id="host-grid">
|
||
{% for name, host in snapshot.hosts.items() %}
|
||
{% set suppressed = suppressions | selectattr('target_name', 'equalto', name) | list %}
|
||
<div class="host-card host-card-{{ host.status }}" data-host="{{ name }}">
|
||
<div class="host-card-header">
|
||
<div class="host-name-row">
|
||
<span class="host-status-dot dot-{{ host.status }}"></span>
|
||
<span class="host-name">{{ name }}</span>
|
||
{% if suppressed %}
|
||
<span class="badge-suppressed" title="Suppressed">🔕</span>
|
||
{% endif %}
|
||
</div>
|
||
<div class="host-meta">
|
||
<span class="host-ip">{{ host.ip }}</span>
|
||
<span class="host-source source-{{ host.source }}">{{ host.source }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{% if host.interfaces %}
|
||
<div class="iface-list">
|
||
{% for iface, state in host.interfaces.items() | sort %}
|
||
<div class="iface-row">
|
||
<span class="iface-dot dot-{{ state }}"></span>
|
||
<span class="iface-name">{{ iface }}</span>
|
||
<span class="iface-state state-{{ state }}">{{ state }}</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="host-ping-note">ping-only / no node_exporter</div>
|
||
{% endif %}
|
||
|
||
<div class="host-actions">
|
||
<button class="btn-sm btn-suppress"
|
||
data-sup-type="host"
|
||
data-sup-name="{{ name }}"
|
||
data-sup-detail=""
|
||
title="Suppress alerts for this host">
|
||
🔕 Suppress
|
||
</button>
|
||
<a href="{{ url_for('links_page') }}#{{ name }}"
|
||
class="btn-sm btn-secondary" style="text-decoration:none">
|
||
↗ Links
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<p class="empty-state">No host data yet – monitor is initializing.</p>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── UniFi devices ────────────────────────────────────────────────── -->
|
||
{% if snapshot.unifi %}
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">UniFi Devices</h2>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="data-table" id="unifi-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Status</th>
|
||
<th>Name</th>
|
||
<th>Type</th>
|
||
<th>Model</th>
|
||
<th>IP</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for d in snapshot.unifi %}
|
||
<tr class="{% if not d.connected %}row-critical{% endif %}">
|
||
<td>
|
||
<span class="dot-{{ 'up' if d.connected else 'down' }}"></span>
|
||
{{ 'ONLINE' if d.connected else 'OFFLINE' }}
|
||
</td>
|
||
<td><strong>{{ d.name }}</strong></td>
|
||
<td>{{ d.type }}</td>
|
||
<td>{{ d.model }}</td>
|
||
<td>{{ d.ip }}</td>
|
||
<td>
|
||
{% if not d.connected %}
|
||
<button class="btn-sm btn-suppress"
|
||
data-sup-type="unifi_device"
|
||
data-sup-name="{{ d.name }}"
|
||
data-sup-detail="">
|
||
🔕 Suppress
|
||
</button>
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
|
||
<!-- ── Active alerts ───────────────────────────────────────────────── -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Active Alerts</h2>
|
||
{% if summary.critical or summary.warning %}
|
||
<span class="section-badge">{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
|
||
{% endif %}
|
||
</div>
|
||
<div id="events-table-wrap">
|
||
{% if events %}
|
||
<div class="table-wrap">
|
||
<table class="data-table" id="events-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Sev</th>
|
||
<th>Type</th>
|
||
<th>Target</th>
|
||
<th>Detail</th>
|
||
<th>Description</th>
|
||
<th>First Seen</th>
|
||
<th>Last Seen</th>
|
||
<th>Failures</th>
|
||
<th>Ticket</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for e in events %}
|
||
{% if e.severity != 'info' %}
|
||
<tr class="row-{{ e.severity }}">
|
||
<td><span class="badge badge-{{ e.severity }}">{{ e.severity }}</span></td>
|
||
<td>{{ e.event_type | replace('_', ' ') }}</td>
|
||
<td><strong>{{ e.target_name }}</strong></td>
|
||
<td>{{ e.target_detail or '–' }}</td>
|
||
<td class="desc-cell" title="{{ e.description | e }}">{{ e.description | truncate(60) }}</td>
|
||
<td class="ts-cell" title="{{ e.first_seen }}">
|
||
<span class="event-age" data-ts="{{ e.first_seen }}">{{ e.first_seen }}</span>
|
||
</td>
|
||
<td class="ts-cell" title="{{ e.last_seen }}">
|
||
<span class="event-age" data-ts="{{ e.last_seen }}">{{ e.last_seen }}</span>
|
||
</td>
|
||
<td>{{ e.consecutive_failures }}</td>
|
||
<td>
|
||
{% if e.ticket_id %}
|
||
<a href="{{ config.ticket_api.web_url }}{{ e.ticket_id }}" target="_blank"
|
||
class="ticket-link">#{{ e.ticket_id }}</a>
|
||
{% else %}–{% endif %}
|
||
</td>
|
||
<td>
|
||
<button class="btn-sm btn-suppress"
|
||
data-sup-type="{{ 'unifi_device' if e.event_type == 'unifi_device_offline' else 'interface' if e.event_type == 'interface_down' else 'host' }}"
|
||
data-sup-name="{{ e.target_name }}"
|
||
data-sup-detail="{{ e.target_detail or '' }}"
|
||
title="Suppress">🔕</button>
|
||
</td>
|
||
</tr>
|
||
{% endif %}
|
||
{% else %}
|
||
<tr><td colspan="10" class="empty-state">No active alerts ✔</td></tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{% else %}
|
||
<p class="empty-state">No active alerts ✔</p>
|
||
{% endif %}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── Recently Resolved (last 24h) ───────────────────────────────── -->
|
||
{% if recent_resolved %}
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Recently Resolved</h2>
|
||
<span class="section-badge section-badge-resolved">{{ recent_resolved | length }} in last 24h</span>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Sev</th>
|
||
<th>Type</th>
|
||
<th>Target</th>
|
||
<th>Detail</th>
|
||
<th>Resolved</th>
|
||
<th>Duration</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for e in recent_resolved %}
|
||
<tr class="row-resolved">
|
||
<td><span class="badge badge-resolved">{{ e.severity }}</span></td>
|
||
<td>{{ e.event_type | replace('_', ' ') }}</td>
|
||
<td><strong>{{ e.target_name }}</strong></td>
|
||
<td>{{ e.target_detail or '–' }}</td>
|
||
<td class="ts-cell">
|
||
<span class="event-age" data-ts="{{ e.resolved_at }}">{{ e.resolved_at }}</span>
|
||
</td>
|
||
<td class="ts-cell event-duration" data-first="{{ e.first_seen }}" data-resolved="{{ e.resolved_at }}">–</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
|
||
<!-- ── Quick-suppress modal ─────────────────────────────────────────── -->
|
||
<div id="suppress-modal" class="modal-overlay" style="display:none">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>Suppress Alert</h3>
|
||
<button class="modal-close" onclick="closeSuppressModal()">✕</button>
|
||
</div>
|
||
<form id="suppress-form" onsubmit="submitSuppress(event)">
|
||
<div class="form-group" style="margin-bottom:10px">
|
||
<label>Target Type</label>
|
||
<select id="sup-type" name="target_type" onchange="updateSuppressForm()">
|
||
<option value="host">Host (all interfaces)</option>
|
||
<option value="interface">Specific Interface</option>
|
||
<option value="unifi_device">UniFi Device</option>
|
||
<option value="all">Global Maintenance</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group" id="sup-name-group" style="margin-bottom:10px">
|
||
<label>Target Name</label>
|
||
<input type="text" id="sup-name" name="target_name" placeholder="e.g. large1">
|
||
</div>
|
||
<div class="form-group" id="sup-detail-group" style="margin-bottom:10px;display:none">
|
||
<label>Interface <span class="form-hint">(interface type only)</span></label>
|
||
<input type="text" id="sup-detail" name="target_detail" placeholder="e.g. enp35s0">
|
||
</div>
|
||
<div class="form-group" style="margin-bottom:10px">
|
||
<label>Reason <span class="required">*</span></label>
|
||
<input type="text" id="sup-reason" name="reason"
|
||
placeholder="e.g. Planned switch reboot" required>
|
||
</div>
|
||
<div class="form-group" style="margin-bottom:0">
|
||
<label>Duration</label>
|
||
<div class="duration-pills">
|
||
<button type="button" class="pill" onclick="setDuration(30, this)">30 min</button>
|
||
<button type="button" class="pill" onclick="setDuration(60, this)">1 hr</button>
|
||
<button type="button" class="pill" onclick="setDuration(240, this)">4 hr</button>
|
||
<button type="button" class="pill" onclick="setDuration(480, this)">8 hr</button>
|
||
<button type="button" class="pill pill-manual active" onclick="setDuration(null, this)">Manual ∞</button>
|
||
</div>
|
||
<input type="hidden" id="sup-expires" name="expires_minutes" value="">
|
||
<div class="form-hint" id="duration-hint">Persists until manually removed.</div>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn btn-secondary" onclick="closeSuppressModal()">Cancel</button>
|
||
<button type="submit" class="btn btn-primary">Apply</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
setInterval(refreshAll, 30000);
|
||
|
||
// ── Relative time display for event age cells ──────────────────
|
||
function fmtRelTime(tsStr) {
|
||
if (!tsStr) return '–';
|
||
const d = new Date(tsStr.replace(' UTC', 'Z').replace(' ', 'T'));
|
||
if (isNaN(d)) return tsStr;
|
||
const secs = Math.floor((Date.now() - d) / 1000);
|
||
if (secs < 60) return `${secs}s ago`;
|
||
if (secs < 3600) return `${Math.floor(secs/60)}m ago`;
|
||
if (secs < 86400) return `${Math.floor(secs/3600)}h ago`;
|
||
return `${Math.floor(secs/86400)}d ago`;
|
||
}
|
||
|
||
function updateEventAges() {
|
||
document.querySelectorAll('.event-age[data-ts]').forEach(el => {
|
||
el.textContent = fmtRelTime(el.dataset.ts);
|
||
});
|
||
}
|
||
|
||
updateEventAges();
|
||
setInterval(updateEventAges, 60000);
|
||
|
||
// ── Event duration (resolved_at - first_seen) ──────────────────
|
||
function fmtDuration(firstTs, resolvedTs) {
|
||
if (!firstTs || !resolvedTs) return '–';
|
||
const parse = s => new Date(s.replace(' UTC', 'Z').replace(' ', 'T'));
|
||
const secs = Math.floor((parse(resolvedTs) - parse(firstTs)) / 1000);
|
||
if (secs < 0) return '–';
|
||
if (secs < 60) return `${secs}s`;
|
||
if (secs < 3600) return `${Math.floor(secs/60)}m`;
|
||
if (secs < 86400) return `${Math.floor(secs/3600)}h ${Math.floor((secs%3600)/60)}m`;
|
||
return `${Math.floor(secs/86400)}d`;
|
||
}
|
||
|
||
document.querySelectorAll('.event-duration[data-first][data-resolved]').forEach(el => {
|
||
el.textContent = fmtDuration(el.dataset.first, el.dataset.resolved);
|
||
});
|
||
</script>
|
||
{% endblock %}
|