feat: maintenance windows, reports, uptime widget, alert improvements
- Add maintenance window scheduling to suppress alerts during planned downtime (model, routes, templates) - Add weekly email/webhook reports with host summary (core/reports.py, Settings → Reports tab) - Add host uptime history widget with per-check sparkline view - Expand alert rules: dynamic metric catalog for plugin sources, per-rule HTMX field loading, maintenance window awareness - Register additional dashboard widgets (uptime, SNMP, UniFi, UPS) - Add Settings → Reports tab configuration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
{# alerts/_rule_fields.html — HTMX partial: resource + metric selects for a given source_module #}
|
||||
<div class="form-group">
|
||||
<label>Resource Name</label>
|
||||
{% if resources %}
|
||||
<select name="resource_name" required>
|
||||
{% if not current_resource %}<option value="" disabled selected>— pick a resource —</option>{% endif %}
|
||||
{% for r in resources %}
|
||||
<option value="{{ r }}" {% if r == current_resource %}selected{% endif %}>{{ r }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% else %}
|
||||
<select name="resource_name" required disabled>
|
||||
<option value="">No data yet — run monitors first</option>
|
||||
</select>
|
||||
<p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
||||
Resource names populate from live metric data. Start the scheduler and try again.
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Metric Name</label>
|
||||
<select name="metric_name" required>
|
||||
{% if not current_metric %}<option value="" disabled selected>— pick a metric —</option>{% endif %}
|
||||
{% for m in metrics %}
|
||||
<option value="{{ m }}" {% if m == current_metric %}selected{% endif %}>{{ m }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@@ -49,7 +49,10 @@
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
|
||||
<h2 class="section-title">Rules</h2>
|
||||
<a class="btn" href="/alerts/rules/new">New Rule</a>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<a class="btn btn-ghost" href="/alerts/maintenance">Maintenance</a>
|
||||
<a class="btn" href="/alerts/rules/new">New Rule</a>
|
||||
</div>
|
||||
</div>
|
||||
{% if rules %}
|
||||
<div class="card-flush">
|
||||
@@ -58,24 +61,33 @@
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Condition</th>
|
||||
<th>Consec.</th>
|
||||
<th>Enabled</th>
|
||||
<th style="text-align:center;">Consec.</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for rule in rules %}
|
||||
<tr>
|
||||
<td>{{ rule.name }}</td>
|
||||
<td style="color:var(--text-muted);">
|
||||
{{ rule.source_module }}/{{ rule.resource_name }}:{{ rule.metric_name }}
|
||||
{{ rule.operator.value }} {{ rule.threshold }}
|
||||
</td>
|
||||
<td style="color:var(--text-muted);">{{ rule.consecutive_failures_required }}</td>
|
||||
<tr {% if not rule.enabled %}style="opacity:0.55;"{% endif %}>
|
||||
<td>
|
||||
{% if rule.enabled %}<span class="badge badge-green">yes</span>{% else %}<span class="badge badge-dim">no</span>{% endif %}
|
||||
{{ rule.name }}
|
||||
{% if not rule.enabled %}
|
||||
<span style="font-size:0.72rem;color:var(--text-dim);margin-left:0.35rem;">disabled</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="color:var(--text-muted);font-size:0.85rem;">
|
||||
<span style="color:var(--text-dim);">{{ rule.source_module }}/</span>{{ rule.resource_name }}
|
||||
<span style="font-family:ui-monospace,monospace;font-size:0.8rem;">
|
||||
:{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}
|
||||
</span>
|
||||
</td>
|
||||
<td style="color:var(--text-muted);text-align:center;">{{ rule.consecutive_failures_required }}</td>
|
||||
<td class="td-actions">
|
||||
<a href="/alerts/rules/{{ rule.id }}/edit" class="btn btn-sm btn-ghost">Edit</a>
|
||||
<form method="post" action="/alerts/rules/{{ rule.id }}/toggle" style="display:inline;">
|
||||
<button type="submit" class="btn btn-sm btn-ghost">
|
||||
{% if rule.enabled %}Disable{% else %}Enable{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
<form method="post" action="/alerts/rules/{{ rule.id }}/delete" style="display:inline;">
|
||||
<button type="submit" class="btn btn-sm btn-danger"
|
||||
onclick="return confirm('Delete rule {{ rule.name }}?')">Delete</button>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Maintenance Windows — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Maintenance Windows</h1>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<a class="btn btn-ghost" href="/alerts/">← Alerts</a>
|
||||
<a class="btn" href="/alerts/maintenance/new">New Window</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1.5rem;">
|
||||
During an active window, alert rule evaluation is suppressed for the matching scope.
|
||||
Metrics are still recorded — only notifications are silenced.
|
||||
</p>
|
||||
|
||||
{% if windows %}
|
||||
<div class="card-flush">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Scope</th>
|
||||
<th>Start</th>
|
||||
<th>End</th>
|
||||
<th style="text-align:center;">Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for w in windows %}
|
||||
{% set is_active = w.start_at <= now and w.end_at >= now %}
|
||||
{% set is_upcoming = w.start_at > now %}
|
||||
<tr>
|
||||
<td style="font-weight:500;">{{ w.name }}</td>
|
||||
<td style="font-size:0.85rem;color:var(--text-muted);">
|
||||
{% if w.scope_source is none %}
|
||||
<span title="All alert rules">All alerts</span>
|
||||
{% elif w.scope_resource is none %}
|
||||
<span>{{ w.scope_source }}/*</span>
|
||||
{% else %}
|
||||
<span>{{ w.scope_source }}/{{ w.scope_resource }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="font-size:0.85rem;font-family:ui-monospace,monospace;">
|
||||
{{ w.start_at.strftime("%Y-%m-%d %H:%M") }} UTC
|
||||
</td>
|
||||
<td style="font-size:0.85rem;font-family:ui-monospace,monospace;">
|
||||
{{ w.end_at.strftime("%Y-%m-%d %H:%M") }} UTC
|
||||
</td>
|
||||
<td style="text-align:center;">
|
||||
{% if is_active %}
|
||||
<span class="badge badge-yellow">active</span>
|
||||
{% elif is_upcoming %}
|
||||
<span class="badge badge-dim">upcoming</span>
|
||||
{% else %}
|
||||
<span style="color:var(--text-dim);font-size:0.8rem;">expired</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="td-actions">
|
||||
<form method="post" action="/alerts/maintenance/{{ w.id }}/delete" style="display:inline;">
|
||||
<button type="submit" class="btn btn-sm btn-danger"
|
||||
onclick="return confirm('Delete window "{{ w.name }}"?')">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="text-align:center;padding:3rem;">
|
||||
<p style="color:var(--text-muted);">No maintenance windows configured.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,86 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}New Maintenance Window — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="max-width:560px;margin:2rem auto;">
|
||||
<h1 class="page-title">New Maintenance Window</h1>
|
||||
<div class="card">
|
||||
<form method="post" action="/alerts/maintenance">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Window Name</label>
|
||||
<input type="text" name="name" required autofocus
|
||||
placeholder="e.g. Weekly reboot — homelab">
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Start (UTC)</label>
|
||||
<input type="datetime-local" name="start_at" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>End (UTC)</label>
|
||||
<input type="datetime-local" name="end_at" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Scope ─────────────────────────────────────────────────────────────── #}
|
||||
<div class="form-group">
|
||||
<label>Scope</label>
|
||||
<select name="_scope_type" id="scope-type" onchange="updateScope()">
|
||||
<option value="all">All alerts</option>
|
||||
<option value="source">By source module</option>
|
||||
<option value="resource">By source + resource</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="scope-source-row" style="display:none;" class="form-group">
|
||||
<label>Source Module</label>
|
||||
<select name="scope_source" id="scope-source">
|
||||
<option value="">— select —</option>
|
||||
{% for src in source_modules %}
|
||||
<option value="{{ src }}">{{ src }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="scope-resource-row" style="display:none;" class="form-group">
|
||||
<label>Resource Name</label>
|
||||
<input type="text" name="scope_resource" id="scope-resource"
|
||||
placeholder="Exact resource name (e.g. my-server)">
|
||||
<p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
||||
Leave blank to suppress all resources within the selected source.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:1rem;margin-top:1.5rem;">
|
||||
<button type="submit" class="btn">Create Window</button>
|
||||
<a href="/alerts/maintenance" class="btn btn-ghost">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:1rem;">
|
||||
<div class="section-title" style="margin-bottom:0.5rem;">How scope works</div>
|
||||
<div style="display:grid;gap:0.4rem;font-size:0.82rem;color:var(--text-muted);">
|
||||
<div><strong style="color:var(--text);">All alerts</strong> — every alert rule is suppressed</div>
|
||||
<div><strong style="color:var(--text);">By source</strong> — e.g. source=ping suppresses all ping alerts</div>
|
||||
<div><strong style="color:var(--text);">By source + resource</strong> — e.g. ping/my-server suppresses only that host's ping alerts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function updateScope() {
|
||||
var t = document.getElementById('scope-type').value;
|
||||
document.getElementById('scope-source-row').style.display = t === 'all' ? 'none' : '';
|
||||
document.getElementById('scope-resource-row').style.display = t === 'resource' ? '' : 'none';
|
||||
if (t === 'all') {
|
||||
document.getElementById('scope-source').value = '';
|
||||
document.getElementById('scope-resource').value = '';
|
||||
}
|
||||
if (t === 'source') {
|
||||
document.getElementById('scope-resource').value = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -1,49 +1,141 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}New Alert Rule — Fabled Scryer{% endblock %}
|
||||
{% block title %}{% if rule %}Edit Rule{% else %}New Alert Rule{% endif %} — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="max-width:560px;margin:2rem auto;">
|
||||
<h1 class="page-title">New Alert Rule</h1>
|
||||
<div class="card">
|
||||
<form method="post" action="/alerts/rules">
|
||||
<div class="form-group">
|
||||
<label>Rule Name</label>
|
||||
<input type="text" name="name" required autofocus placeholder="e.g. Home server down">
|
||||
<div style="max-width:600px;margin:2rem auto;">
|
||||
<h1 class="page-title">{% if rule %}Edit Rule{% else %}New Alert Rule{% endif %}</h1>
|
||||
<div class="card">
|
||||
<form method="post" action="{% if rule %}/alerts/rules/{{ rule.id }}{% else %}/alerts/rules{% endif %}">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Rule Name</label>
|
||||
<input type="text" name="name" required autofocus
|
||||
value="{{ rule.name if rule else '' }}"
|
||||
placeholder="e.g. Home server down">
|
||||
</div>
|
||||
|
||||
{# ── Source module ───────────────────────────────────────────────────── #}
|
||||
<div class="form-group">
|
||||
<label>Source</label>
|
||||
<select name="source_module" required
|
||||
hx-get="/alerts/api/rule_fields"
|
||||
hx-trigger="change"
|
||||
hx-target="#rule-fields"
|
||||
hx-include="[name='source_module']">
|
||||
{% for src in source_modules %}
|
||||
<option value="{{ src }}" {% if src == initial_source %}selected{% endif %}>
|
||||
{{ src }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{# ── Dynamic resource + metric ────────────────────────────────────────── #}
|
||||
<div id="rule-fields">
|
||||
{# Inline the same partial logic so the page is fully usable without JS #}
|
||||
<div class="form-group">
|
||||
<label>Resource Name</label>
|
||||
{% if resources %}
|
||||
<select name="resource_name" required>
|
||||
{% if not (rule and rule.resource_name) %}<option value="" disabled selected>— pick a resource —</option>{% endif %}
|
||||
{% for r in resources %}
|
||||
<option value="{{ r }}" {% if rule and r == rule.resource_name %}selected{% endif %}>{{ r }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% else %}
|
||||
<select name="resource_name" required disabled>
|
||||
<option value="">No data yet — run monitors first</option>
|
||||
</select>
|
||||
<p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
||||
Resource names populate from live metric data. Start the scheduler and try again.
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Metric Name</label>
|
||||
<select name="metric_name" required>
|
||||
{% if not (rule and rule.metric_name) %}<option value="" disabled selected>— pick a metric —</option>{% endif %}
|
||||
{% for m in metrics %}
|
||||
<option value="{{ m }}" {% if rule and m == rule.metric_name %}selected{% endif %}>{{ m }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Condition ───────────────────────────────────────────────────────── #}
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Operator</label>
|
||||
<select name="operator">
|
||||
{% for val, label in operators %}
|
||||
<option value="{{ val }}" {% if rule and rule.operator.value == val %}selected{% endif %}>
|
||||
{{ label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Threshold</label>
|
||||
<input type="number" name="threshold" step="any" required
|
||||
value="{{ rule.threshold if rule else '' }}"
|
||||
placeholder="0.5">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Consecutive failures before FIRING</label>
|
||||
<input type="number" name="consecutive_failures_required" min="1"
|
||||
value="{{ rule.consecutive_failures_required if rule else 1 }}">
|
||||
</div>
|
||||
|
||||
{# ── Metric reference ────────────────────────────────────────────────── #}
|
||||
<details style="margin-bottom:1rem;">
|
||||
<summary style="cursor:pointer;font-size:0.82rem;color:var(--text-muted);user-select:none;">
|
||||
Metric reference
|
||||
</summary>
|
||||
<div style="margin-top:0.75rem;display:grid;gap:0.5rem;">
|
||||
{% set descs = {
|
||||
"ping": [("up", "1.0 = reachable, 0.0 = unreachable"),
|
||||
("response_time_ms", "round-trip latency in milliseconds")],
|
||||
"dns": [("resolved", "1.0 = resolved, 0.0 = failed"),
|
||||
("ip_changed", "1.0 when resolved IP differs from expected")],
|
||||
"traefik": [("request_rate", "requests/sec for this router"),
|
||||
("error_rate", "fraction of 5xx responses (0–1)"),
|
||||
("latency_p50_ms", "median response time ms"),
|
||||
("latency_p95_ms", "p95 response time ms"),
|
||||
("latency_p99_ms", "p99 response time ms"),
|
||||
("response_bytes_rate", "bytes/sec of responses"),
|
||||
("cert_expiry_days", "days until TLS cert expires")],
|
||||
"unifi": [("is_up", "1.0 = WAN up, 0.0 = down"),
|
||||
("latency_ms", "WAN latency in ms"),
|
||||
("total_clients", "number of connected clients")],
|
||||
"ups": [("battery_charge_pct", "battery charge 0–100"),
|
||||
("on_battery", "1.0 when running on battery"),
|
||||
("battery_runtime_secs", "estimated runtime remaining in seconds")],
|
||||
"docker": [("cpu_pct", "container CPU usage %"),
|
||||
("mem_pct", "container memory usage %")],
|
||||
"http": [("is_up", "1.0 = check passed, 0.0 = failed"),
|
||||
("response_ms", "HTTP response time in ms")],
|
||||
} %}
|
||||
{% for src, pairs in descs.items() %}
|
||||
<div>
|
||||
<div style="font-size:0.78rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.2rem;">{{ src }}</div>
|
||||
{% for metric, desc in pairs %}
|
||||
<div style="display:grid;grid-template-columns:160px 1fr;gap:0.5rem;font-size:0.78rem;padding:0.15rem 0;">
|
||||
<code>{{ metric }}</code>
|
||||
<span style="color:var(--text-muted);">{{ desc }}</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Source Module</label>
|
||||
<input type="text" name="source_module" required placeholder="ping, dns, traefik, ...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Resource Name</label>
|
||||
<input type="text" name="resource_name" required placeholder="host name, router name, ...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Metric Name</label>
|
||||
<input type="text" name="metric_name" required placeholder="up, response_time_ms, ...">
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Operator</label>
|
||||
<select name="operator">
|
||||
{% for val, label in operators %}
|
||||
<option value="{{ val }}">{{ label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Threshold</label>
|
||||
<input type="number" name="threshold" step="any" required placeholder="0.5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Consecutive failures required before FIRING (default: 1)</label>
|
||||
<input type="number" name="consecutive_failures_required" value="1" min="1">
|
||||
</div>
|
||||
<div style="display:flex;gap:1rem;margin-top:1.5rem;">
|
||||
<button type="submit" class="btn">Create Rule</button>
|
||||
<a href="/alerts/" class="btn btn-ghost">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div style="display:flex;gap:1rem;margin-top:1.5rem;">
|
||||
<button type="submit" class="btn">{% if rule %}Save Changes{% else %}Create Rule{% endif %}</button>
|
||||
<a href="/alerts/" class="btn btn-ghost">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -3,7 +3,10 @@
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Hosts</h1>
|
||||
<a class="btn" href="/hosts/new">Add Host</a>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<a class="btn btn-ghost" href="/hosts/uptime">SLA</a>
|
||||
<a class="btn" href="/hosts/new">Add Host</a>
|
||||
</div>
|
||||
</div>
|
||||
{% if hosts %}
|
||||
<div class="card-flush">
|
||||
@@ -16,6 +19,9 @@
|
||||
<th style="text-align:center;">Ping</th>
|
||||
<th style="text-align:center;">Latency</th>
|
||||
<th style="text-align:center;">DNS</th>
|
||||
<th style="text-align:center;" title="Uptime last 24 hours">24h</th>
|
||||
<th style="text-align:center;" title="Uptime last 7 days">7d</th>
|
||||
<th style="text-align:center;" title="Uptime last 30 days">30d</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -23,6 +29,7 @@
|
||||
{% for host in hosts %}
|
||||
{% set ping = latest_pings.get(host.id) %}
|
||||
{% set dns = latest_dns.get(host.id) %}
|
||||
{% set ut = uptime.get(host.id, {}) %}
|
||||
<tr>
|
||||
<td>{{ host.name }}</td>
|
||||
<td style="color:var(--text-muted);">{{ host.address }}</td>
|
||||
@@ -64,6 +71,24 @@
|
||||
<span class="dot dot-down" title="Failed"></span>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% for window in ["24h", "7d", "30d"] %}
|
||||
{% set pct = ut.get(window) %}
|
||||
<td style="text-align:center;font-size:0.82rem;font-family:ui-monospace,monospace;">
|
||||
{% if not host.ping_enabled %}
|
||||
<span style="color:var(--text-dim);">—</span>
|
||||
{% elif pct is none %}
|
||||
<span style="color:var(--text-muted);">—</span>
|
||||
{% elif pct >= 99.9 %}
|
||||
<span style="color:var(--green);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% elif pct >= 99 %}
|
||||
<span style="color:var(--yellow);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% elif pct >= 95 %}
|
||||
<span style="color:var(--orange);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% else %}
|
||||
<span style="color:var(--red);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
<td class="td-actions">
|
||||
<a href="/hosts/{{ host.id }}/edit" class="btn btn-sm btn-ghost" style="margin-right:0.5rem;">Edit</a>
|
||||
<form method="post" action="/hosts/{{ host.id }}/delete" style="display:inline;">
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Uptime / SLA — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Uptime / SLA</h1>
|
||||
<a class="btn btn-ghost" href="/hosts/">← Hosts</a>
|
||||
</div>
|
||||
|
||||
{# ── Summary pills ──────────────────────────────────────────────────────────── #}
|
||||
{% set ping_hosts = hosts | selectattr("ping_enabled") | list %}
|
||||
{% set total = ping_hosts | length %}
|
||||
{% if total %}
|
||||
{% set full_30d = ping_hosts | selectattr("id", "in", uptime.keys())
|
||||
| selectattr("id", "defined") | list %}
|
||||
{% set healthy = namespace(count=0) %}
|
||||
{% for h in ping_hosts %}
|
||||
{% set pct = uptime.get(h.id, {}).get("30d") %}
|
||||
{% if pct is not none and pct >= 99 %}{% set healthy.count = healthy.count + 1 %}{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<div class="section-title" style="margin-bottom:0.3rem;">Hosts monitored</div>
|
||||
<span class="stat-val">{{ total }}</span>
|
||||
</div>
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<div class="section-title" style="margin-bottom:0.3rem;">≥ 99% (30d)</div>
|
||||
<span class="stat-val" style="color:{% if healthy.count == total %}var(--green){% else %}var(--orange){% endif %};">
|
||||
{{ healthy.count }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── SLA table ──────────────────────────────────────────────────────────────── #}
|
||||
{% if hosts %}
|
||||
<div class="card-flush">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Host</th>
|
||||
<th>Address</th>
|
||||
<th style="text-align:center;min-width:80px;" title="Uptime last 24 hours">24 h</th>
|
||||
<th style="text-align:center;min-width:80px;" title="Uptime last 7 days">7 d</th>
|
||||
<th style="text-align:center;min-width:80px;" title="Uptime last 30 days">30 d</th>
|
||||
<th style="min-width:160px;">30-day bar</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for host in hosts %}
|
||||
{% set ut = uptime.get(host.id, {}) %}
|
||||
<tr>
|
||||
<td style="font-weight:500;">{{ host.name }}</td>
|
||||
<td style="color:var(--text-muted);font-size:0.85rem;">{{ host.address }}</td>
|
||||
|
||||
{% for window in ["24h", "7d", "30d"] %}
|
||||
{% set pct = ut.get(window) %}
|
||||
<td style="text-align:center;font-size:0.88rem;font-family:ui-monospace,monospace;">
|
||||
{% if not host.ping_enabled %}
|
||||
<span style="color:var(--text-dim);">—</span>
|
||||
{% elif pct is none %}
|
||||
<span style="color:var(--text-muted);" title="No data yet">—</span>
|
||||
{% elif pct >= 99.9 %}
|
||||
<span style="color:var(--green);">{{ "%.2f"|format(pct) }}%</span>
|
||||
{% elif pct >= 99 %}
|
||||
<span style="color:var(--yellow);">{{ "%.2f"|format(pct) }}%</span>
|
||||
{% elif pct >= 95 %}
|
||||
<span style="color:var(--orange);">{{ "%.2f"|format(pct) }}%</span>
|
||||
{% else %}
|
||||
<span style="color:var(--red);">{{ "%.2f"|format(pct) }}%</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
|
||||
{# 30-day visual bar #}
|
||||
{% set pct30 = ut.get("30d") %}
|
||||
<td>
|
||||
{% if not host.ping_enabled %}
|
||||
<span style="color:var(--text-dim);font-size:0.8rem;">ping off</span>
|
||||
{% elif pct30 is none %}
|
||||
<span style="color:var(--text-muted);font-size:0.8rem;">no data</span>
|
||||
{% else %}
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;">
|
||||
<div style="flex:1;height:8px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;border:1px solid var(--border);">
|
||||
<div style="height:100%;width:{{ pct30 | round(1) }}%;background:{% if pct30 >= 99.9 %}var(--green){% elif pct30 >= 99 %}var(--yellow){% elif pct30 >= 95 %}var(--orange){% else %}var(--red){% endif %};border-radius:4px;transition:width 0.3s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="text-align:center;padding:3rem;">
|
||||
<p style="color:var(--text-muted);">No hosts configured. <a href="/hosts/new">Add one.</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p style="color:var(--text-dim);font-size:0.78rem;margin-top:1rem;">
|
||||
Uptime is computed from ping probe results only. Hosts with ping disabled show —.
|
||||
</p>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,45 @@
|
||||
{# hosts/uptime_widget.html — dashboard widget: SLA uptime summary #}
|
||||
{% if not hosts %}
|
||||
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
|
||||
No ping-enabled hosts configured.
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<div style="display:grid;gap:2px;">
|
||||
<div style="display:grid;grid-template-columns:1fr 52px 52px 52px;gap:0.35rem;font-size:0.72rem;color:var(--text-dim);padding:0 0 0.25rem;border-bottom:1px solid var(--border);">
|
||||
<span>Host</span>
|
||||
<span style="text-align:center;">24h</span>
|
||||
<span style="text-align:center;">7d</span>
|
||||
<span style="text-align:center;">30d</span>
|
||||
</div>
|
||||
{% for host in hosts %}
|
||||
{% set ut = uptime.get(host.id, {}) %}
|
||||
<div style="display:grid;grid-template-columns:1fr 52px 52px 52px;gap:0.35rem;align-items:center;padding:0.15rem 0;font-size:0.82rem;">
|
||||
<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ host.name }}</span>
|
||||
{% for window in ["24h", "7d", "30d"] %}
|
||||
{% set pct = ut.get(window) %}
|
||||
<span style="text-align:center;font-family:ui-monospace,monospace;font-size:0.78rem;">
|
||||
{% if pct is none %}
|
||||
<span style="color:var(--text-dim);">—</span>
|
||||
{% elif pct >= 99.9 %}
|
||||
<span style="color:var(--green);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% elif pct >= 99 %}
|
||||
<span style="color:var(--yellow);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% elif pct >= 95 %}
|
||||
<span style="color:var(--orange);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% else %}
|
||||
<span style="color:var(--red);">{{ "%.1f"|format(pct) }}%</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if share_token %}
|
||||
<div style="margin-top:0.5rem;text-align:right;">
|
||||
<a href="/hosts/uptime" style="font-size:0.75rem;color:var(--text-muted);">Full SLA →</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
@@ -4,6 +4,8 @@
|
||||
{% set tabs = [
|
||||
("general", "General", "/settings/general/"),
|
||||
("notifications", "Notifications", "/settings/notifications/"),
|
||||
("reports", "Reports", "/settings/reports/"),
|
||||
("auth", "Auth", "/settings/auth/"),
|
||||
("ansible", "Ansible", "/settings/ansible/"),
|
||||
("plugins", "Plugins", "/settings/plugins/"),
|
||||
] %}
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
{# fabledscryer/templates/settings/reports.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings — Reports — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
{% set active_tab = "reports" %}
|
||||
{% include "settings/_tabs.html" %}
|
||||
|
||||
{% if flash %}
|
||||
<div style="padding:0.75rem 1rem;border-radius:6px;margin-bottom:1.25rem;
|
||||
background:{% if flash.ok %}var(--green-dim){% else %}var(--red-dim){% endif %};
|
||||
border:1px solid {% if flash.ok %}var(--green){% else %}var(--red){% endif %};
|
||||
color:{% if flash.ok %}var(--green){% else %}var(--red){% endif %};
|
||||
font-size:0.88rem;">
|
||||
{{ flash.message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="max-width:560px;">
|
||||
|
||||
{# ── Schedule ─────────────────────────────────────────────────────────────── #}
|
||||
<form method="post" action="/settings/reports/">
|
||||
<div class="card" style="margin-bottom:1.25rem;">
|
||||
<h2 class="section-title" style="margin-bottom:1.25rem;">Weekly Digest</h2>
|
||||
|
||||
<div class="form-group" style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<input type="checkbox" name="reports.enabled" id="reports-enabled"
|
||||
{% if settings['reports.enabled'] %}checked{% endif %}>
|
||||
<label for="reports-enabled" style="margin:0;">Enable weekly email digest</label>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:0.5rem;">
|
||||
<div class="form-group">
|
||||
<label>Send on day</label>
|
||||
<select name="reports.schedule_day">
|
||||
{% for i, day in [(0,"Monday"),(1,"Tuesday"),(2,"Wednesday"),(3,"Thursday"),(4,"Friday"),(5,"Saturday"),(6,"Sunday")] %}
|
||||
<option value="{{ i }}" {% if settings['reports.schedule_day'] == i %}selected{% endif %}>
|
||||
{{ day }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>At hour (UTC)</label>
|
||||
<select name="reports.schedule_hour">
|
||||
{% for h in range(24) %}
|
||||
<option value="{{ h }}" {% if settings['reports.schedule_hour'] == h %}selected{% endif %}>
|
||||
{{ "%02d:00"|format(h) }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
|
||||
Requires SMTP configured in <a href="/settings/notifications/">Notifications</a>.
|
||||
{% if settings['reports.last_sent_at'] %}
|
||||
Last sent: {{ settings['reports.last_sent_at'][:16] }} UTC.
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<div style="margin-top:1rem;">
|
||||
<button type="submit" class="btn">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{# ── Report contents ─────────────────────────────────────────────────────── #}
|
||||
<div class="card" style="margin-bottom:1.25rem;">
|
||||
<h2 class="section-title" style="margin-bottom:0.75rem;">Report contents</h2>
|
||||
<div style="display:grid;gap:0.35rem;font-size:0.85rem;color:var(--text-muted);">
|
||||
<div>• <strong style="color:var(--text);">Uptime summary</strong> — 7-day % per ping-enabled host</div>
|
||||
<div>• <strong style="color:var(--text);">Hosts currently down</strong> — highlighted at top if any</div>
|
||||
<div>• <strong style="color:var(--text);">Active alerts</strong> — firing, acknowledged, pending rules</div>
|
||||
<div>• <strong style="color:var(--text);">Alert events (7d)</strong> — fired and resolved counts</div>
|
||||
<div>• <strong style="color:var(--text);">Top Traefik routers</strong> — avg req/s over last 24h (if plugin enabled)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Send now ─────────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:0.75rem;">Send Now</h2>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">
|
||||
Send a report immediately regardless of schedule. Useful for testing.
|
||||
</p>
|
||||
<form method="post" action="/settings/reports/send-now/">
|
||||
<button type="submit" class="btn btn-ghost">Send report now</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user