refactor: rename package directory fabledscryer → roundtable
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
{#
|
||||
Reusable time-range selector.
|
||||
Requires `current_range` to be in template context.
|
||||
Places a hidden input #time-range (name="range") that HTMX hx-include picks up,
|
||||
plus a visible button group that calls setTimeRange() defined in base.html.
|
||||
#}
|
||||
<div style="display:flex;align-items:center;gap:0.2rem;">
|
||||
<input type="hidden" id="time-range" name="range" value="{{ current_range }}">
|
||||
{% for key in ["1h", "6h", "24h", "7d", "30d"] %}
|
||||
<button type="button"
|
||||
class="range-btn{% if current_range == key %} active{% endif %}"
|
||||
data-range="{{ key }}"
|
||||
onclick="setTimeRange('{{ key }}')">{{ key }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,104 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Alerts — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="page-title">Alerts</h1>
|
||||
|
||||
{% if active %}
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Active</h2>
|
||||
<div class="card-flush" style="margin-bottom:2rem;">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>State</th>
|
||||
<th>Rule</th>
|
||||
<th>Resource</th>
|
||||
<th>Metric</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for state, rule in active %}
|
||||
<tr>
|
||||
<td>
|
||||
{% if state.state.value == 'firing' %}
|
||||
<span class="badge badge-red">FIRING</span>
|
||||
{% elif state.state.value == 'acknowledged' %}
|
||||
<span class="badge badge-yellow">ACK</span>
|
||||
{% else %}
|
||||
<span class="badge badge-dim">PENDING</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ rule.name }}</td>
|
||||
<td style="color:var(--text-muted);">{{ rule.resource_name }}</td>
|
||||
<td style="color:var(--text-muted);">{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}</td>
|
||||
<td class="td-actions">
|
||||
{% if state.state.value == 'firing' %}
|
||||
<form method="post" action="/alerts/{{ rule.id }}/acknowledge" style="display:inline;">
|
||||
<button type="submit" class="btn btn-sm btn-warn">Acknowledge</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="color:var(--text-muted);margin-bottom:2rem;">No active alerts.</p>
|
||||
{% endif %}
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
|
||||
<h2 class="section-title">Rules</h2>
|
||||
<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">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Condition</th>
|
||||
<th style="text-align:center;">Consec.</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for rule in rules %}
|
||||
<tr {% if not rule.enabled %}style="opacity:0.55;"{% endif %}>
|
||||
<td>
|
||||
{{ 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>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="color:var(--text-muted);">No alert rules configured.</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -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 %}
|
||||
@@ -0,0 +1,141 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{% if rule %}Edit Rule{% else %}New Alert Rule{% endif %} — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<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>
|
||||
{% 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 %}
|
||||
@@ -0,0 +1,101 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Browse Playbooks — 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;">Browse Playbooks</h1>
|
||||
<a href="/ansible/" class="btn btn-ghost btn-sm">← Run History</a>
|
||||
</div>
|
||||
|
||||
{% if view_contents is defined %}
|
||||
<div class="card">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
|
||||
<h3 class="section-title">{{ view_path }}</h3>
|
||||
<a href="/ansible/browse" class="btn btn-ghost btn-sm">← Back to browse</a>
|
||||
</div>
|
||||
<pre style="background:var(--bg);padding:1rem;border-radius:4px;overflow-x:auto;font-size:0.8rem;color:var(--text-muted);max-height:600px;overflow-y:auto;">{{ view_contents }}</pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not source_data %}
|
||||
{% if view_contents is not defined %}
|
||||
<div class="card">
|
||||
<p style="color:var(--text-muted);">No Ansible sources configured. <a href="/settings/ansible/">Add sources in Settings → Ansible</a>.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% for sd in source_data %}
|
||||
<div class="card" style="margin-bottom:1.5rem;">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
|
||||
<h3 class="section-title">{{ sd.source.name }}</h3>
|
||||
<span style="color:var(--text-muted);font-size:0.8rem;background:var(--bg-elevated);padding:0.2rem 0.5rem;border-radius:3px;">{{ sd.source.type }}</span>
|
||||
<span style="color:var(--text-dim);font-size:0.8rem;">{{ sd.source.path }}</span>
|
||||
</div>
|
||||
|
||||
{% if not sd.playbooks %}
|
||||
<p style="color:#606080;font-size:0.9rem;">No playbooks found at this path.</p>
|
||||
{% else %}
|
||||
<table class="table" style="margin-bottom:1rem;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Playbook</th>
|
||||
<th style="width:120px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for pb in sd.playbooks %}
|
||||
<tr>
|
||||
<td style="font-family:ui-monospace,monospace;font-size:0.88rem;">{{ pb }}</td>
|
||||
<td class="td-actions">
|
||||
<a href="/ansible/browse/{{ sd.source.name }}/{{ pb }}" class="btn btn-sm btn-ghost" style="margin-right:0.5rem;">View</a>
|
||||
<a href="#run-form-{{ sd.source.name }}"
|
||||
onclick="document.getElementById('run-form-{{ sd.source.name }}').style.display='block';
|
||||
document.getElementById('run-playbook-{{ sd.source.name }}').value='{{ pb }}';
|
||||
document.getElementById('run-playbook-display-{{ sd.source.name }}').value='{{ pb }}';
|
||||
return false;"
|
||||
class="btn btn-sm btn-ghost">Run</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{# Run trigger form for this source #}
|
||||
<div id="run-form-{{ sd.source.name }}" style="display:none;background:var(--bg-elevated);border-radius:6px;padding:1rem;border:1px solid var(--border-mid);">
|
||||
<h4 class="section-title" style="margin-bottom:0.75rem;">Trigger Run</h4>
|
||||
<form hx-post="/ansible/runs" hx-target="#run-result-{{ sd.source.name }}" hx-swap="innerHTML">
|
||||
<input type="hidden" name="source_name" value="{{ sd.source.name }}">
|
||||
<input type="hidden" id="run-playbook-{{ sd.source.name }}" name="playbook_path" value="">
|
||||
<div class="form-group">
|
||||
<label>Playbook</label>
|
||||
<input type="text" id="run-playbook-display-{{ sd.source.name }}"
|
||||
readonly style="color:var(--text-muted);" value="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Inventory</label>
|
||||
<select name="inventory_path">
|
||||
{% for inv in sd.inventories %}
|
||||
<option value="{{ inv }}">{{ inv }}</option>
|
||||
{% endfor %}
|
||||
<option value="">— Enter manually below —</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Or enter inventory path manually</label>
|
||||
<input type="text" id="manual-inv-{{ sd.source.name }}" placeholder="inventories/production/hosts">
|
||||
</div>
|
||||
<div style="display:flex;gap:0.75rem;align-items:center;">
|
||||
<button type="button" class="btn"
|
||||
onclick="var manual=document.getElementById('manual-inv-{{ sd.source.name }}').value.trim();
|
||||
if(manual){this.closest('form').querySelector('[name=inventory_path]').value=manual;}
|
||||
htmx.trigger(this.closest('form'),'submit');">Execute</button>
|
||||
<a href="#" onclick="document.getElementById('run-form-{{ sd.source.name }}').style.display='none';return false;"
|
||||
class="btn btn-ghost btn-sm">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
<div id="run-result-{{ sd.source.name }}" style="margin-top:1rem;"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,43 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Ansible Runs — 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;">Ansible Runs</h1>
|
||||
<a href="/ansible/browse" class="btn">Browse Playbooks</a>
|
||||
</div>
|
||||
{% if not runs %}
|
||||
<div class="card">
|
||||
<p style="color:var(--text-muted);">No runs yet. <a href="/ansible/browse">Browse playbooks</a> to begin.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-flush">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Playbook</th>
|
||||
<th>Source</th>
|
||||
<th>Status</th>
|
||||
<th>Started</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for run in runs %}
|
||||
{% set status_color = {"running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "var(--orange)"}.get(run.status.value, "var(--text-muted)") %}
|
||||
<tr>
|
||||
<td style="font-size:0.9rem;">{{ run.playbook_path }}</td>
|
||||
<td style="color:var(--text-muted);font-size:0.9rem;">{{ run.source_name }}</td>
|
||||
<td>
|
||||
<span style="color:{{ status_color }};font-size:0.85rem;font-weight:bold;">{{ run.status.value.upper() }}</span>
|
||||
</td>
|
||||
<td style="color:var(--text-muted);font-size:0.85rem;">{{ run.started_at.strftime("%Y-%m-%d %H:%M") }}</td>
|
||||
<td class="td-actions">
|
||||
<a href="/ansible/runs/{{ run.id }}" class="btn btn-sm btn-ghost">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,53 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Run {{ run.id[:8] }} — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
|
||||
<a href="/ansible/" class="btn btn-ghost btn-sm">← Runs</a>
|
||||
<h1 class="page-title" style="margin-bottom:0;">Run Detail</h1>
|
||||
</div>
|
||||
|
||||
{% set status_color = {"running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "var(--orange)"}.get(run.status.value, "var(--text-muted)") %}
|
||||
<div class="card">
|
||||
<div style="display:grid;grid-template-columns:auto 1fr;gap:0.4rem 1rem;font-size:0.9rem;margin-bottom:1rem;">
|
||||
<span style="color:var(--text-muted);">ID</span><span style="color:var(--text-dim);font-family:monospace;">{{ run.id }}</span>
|
||||
<span style="color:var(--text-muted);">Playbook</span><span>{{ run.playbook_path }}</span>
|
||||
<span style="color:var(--text-muted);">Inventory</span><span>{{ run.inventory_path }}</span>
|
||||
<span style="color:var(--text-muted);">Source</span><span>{{ run.source_name }}</span>
|
||||
<span style="color:var(--text-muted);">Status</span><span style="color:{{ status_color }};font-weight:bold;">{{ run.status.value.upper() }}</span>
|
||||
<span style="color:var(--text-muted);">Started</span><span style="color:var(--text-dim);">{{ run.started_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
|
||||
{% if run.finished_at %}
|
||||
<span style="color:var(--text-muted);">Finished</span><span style="color:var(--text-dim);">{{ run.finished_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding:0;">
|
||||
<div style="padding:0.75rem 1rem;background:var(--bg-elevated);border-bottom:1px solid var(--border);">
|
||||
<span style="color:var(--text-muted);font-size:0.85rem;">Output</span>
|
||||
</div>
|
||||
{% if run.status.value == "running" %}
|
||||
<pre id="live-output"
|
||||
style="margin:0;padding:1rem;background:var(--bg);font-size:0.78rem;color:var(--green);max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "" }}</pre>
|
||||
<div id="run-done-status" style="padding:0.5rem 1rem;font-size:0.85rem;color:var(--text-muted);">
|
||||
Streaming…
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
var es = new EventSource('/ansible/runs/{{ run.id }}/stream');
|
||||
var pre = document.getElementById('live-output');
|
||||
var status = document.getElementById('run-done-status');
|
||||
es.addEventListener('output', function(e) {
|
||||
pre.textContent += e.data + '\n';
|
||||
pre.scrollTop = pre.scrollHeight;
|
||||
});
|
||||
es.addEventListener('done', function(e) {
|
||||
es.close();
|
||||
status.textContent = 'Finished: ' + e.data;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% else %}
|
||||
<pre style="margin:0;padding:1rem;background:var(--bg);font-size:0.78rem;color:var(--text-muted);max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "(no output)" }}</pre>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,28 @@
|
||||
<div style="background:#0f0f1e;border:1px solid #2a2a4a;border-radius:6px;padding:1rem;">
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;">
|
||||
<span style="color:#a0a000;font-weight:bold;">RUNNING</span>
|
||||
<span style="color:#a0a0c0;font-size:0.9rem;">{{ run.playbook_path }}</span>
|
||||
<a href="/ansible/runs/{{ run.id }}" style="color:#6060c0;font-size:0.82rem;margin-left:auto;">Full view →</a>
|
||||
</div>
|
||||
<pre id="sse-output-{{ run.id }}"
|
||||
style="background:#080810;padding:0.75rem;border-radius:4px;font-family:monospace;font-size:0.78rem;color:#a0c0a0;max-height:400px;overflow-y:auto;white-space:pre-wrap;margin:0 0 0.5rem 0;">
|
||||
</pre>
|
||||
<div id="sse-status-{{ run.id }}" style="font-size:0.85rem;color:#606080;">
|
||||
Streaming output…
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
var es = new EventSource('/ansible/runs/{{ run.id }}/stream');
|
||||
var pre = document.getElementById('sse-output-{{ run.id }}');
|
||||
var status = document.getElementById('sse-status-{{ run.id }}');
|
||||
es.addEventListener('output', function(e) {
|
||||
pre.textContent += e.data + '\n';
|
||||
pre.scrollTop = pre.scrollHeight;
|
||||
});
|
||||
es.addEventListener('done', function(e) {
|
||||
es.close();
|
||||
status.textContent = 'Finished: ' + e.data;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
@@ -0,0 +1,78 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Audit Log — 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;">Audit Log</h1>
|
||||
<form method="get" style="display:flex;gap:0.5rem;align-items:center;">
|
||||
<input type="text" name="action" value="{{ action_filter }}"
|
||||
placeholder="Filter by action…"
|
||||
style="width:200px;font-size:0.85rem;">
|
||||
<button type="submit" class="btn btn-ghost btn-sm">Filter</button>
|
||||
{% if action_filter %}
|
||||
<a href="/audit/" class="btn btn-ghost btn-sm">Clear</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if events %}
|
||||
<div class="card-flush">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="min-width:160px;">Time (UTC)</th>
|
||||
<th>User</th>
|
||||
<th>Action</th>
|
||||
<th>Entity</th>
|
||||
<th>Detail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in events %}
|
||||
{% set e = item.event %}
|
||||
{% set d = item.detail %}
|
||||
<tr>
|
||||
<td style="font-family:ui-monospace,monospace;font-size:0.8rem;white-space:nowrap;color:var(--text-muted);">
|
||||
{{ e.timestamp.strftime("%Y-%m-%d %H:%M:%S") }}
|
||||
</td>
|
||||
<td style="font-size:0.85rem;">{{ e.username }}</td>
|
||||
<td>
|
||||
{% set cat = e.action.split('.')[0] %}
|
||||
<span style="
|
||||
font-size:0.78rem;font-family:ui-monospace,monospace;
|
||||
padding:0.15rem 0.4rem;border-radius:3px;
|
||||
background:{% if cat == 'auth' %}var(--bg-elevated){% elif cat == 'plugin' %}var(--gold-dim){% elif cat == 'alert' %}var(--red-dim){% elif cat == 'host' %}var(--green-dim){% elif cat == 'settings' %}var(--bg-elevated){% else %}var(--bg-elevated){% endif %};
|
||||
color:{% if cat == 'auth' %}var(--accent){% elif cat == 'plugin' %}var(--gold){% elif cat == 'alert' %}var(--red){% elif cat == 'host' %}var(--green){% elif cat == 'settings' %}var(--text-muted){% else %}var(--text-muted){% endif %};">
|
||||
{{ e.action }}
|
||||
</span>
|
||||
</td>
|
||||
<td style="font-size:0.82rem;color:var(--text-muted);">
|
||||
{% if e.entity_type %}
|
||||
<span style="color:var(--text-dim);">{{ e.entity_type }}/</span>{{ e.entity_id or "" }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="font-size:0.8rem;color:var(--text-muted);max-width:340px;">
|
||||
{% if d %}
|
||||
{% for k, v in d.items() %}
|
||||
<span style="color:var(--text-dim);">{{ k }}:</span>
|
||||
<span style="font-family:ui-monospace,monospace;">{{ v }}</span>
|
||||
{% if not loop.last %} · {% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p style="font-size:0.78rem;color:var(--text-dim);margin-top:0.75rem;">
|
||||
Showing last {{ limit }} events.
|
||||
{% if events | length == limit %}
|
||||
<a href="?limit={{ limit * 2 }}{% if action_filter %}&action={{ action_filter }}{% endif %}">Load more</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% else %}
|
||||
<div class="card" style="text-align:center;padding:3rem;">
|
||||
<p style="color:var(--text-muted);">No audit events recorded yet.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,37 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Login — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="max-width:400px;margin:4rem auto;">
|
||||
<div class="card">
|
||||
<h1 style="font-family: var(--font-serif); font-weight: 700; font-size: 2.75rem; color: var(--gold); text-align: center; margin: 0; line-height: 1.1; letter-spacing: 0.02em;">Roundtable</h1>
|
||||
<p style="color: var(--text-dim); font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; text-align: center; margin: 0 0 1.5rem;">Under Watch, Under Care.</p>
|
||||
{% if error %}
|
||||
<div style="color:var(--red);font-size:0.88rem;margin-bottom:1rem;
|
||||
background:var(--red-dim);padding:0.6rem 0.75rem;border-radius:4px;">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if oidc_enabled %}
|
||||
<a href="/login/oidc" class="btn" style="width:100%;text-align:center;margin-bottom:1.25rem;display:block;">
|
||||
Sign in with SSO
|
||||
</a>
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;">
|
||||
<div style="flex:1;height:1px;background:var(--border-mid);"></div>
|
||||
<span style="font-size:0.78rem;color:var(--text-dim);">or</span>
|
||||
<div style="flex:1;height:1px;background:var(--border-mid);"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<form method="post" action="/login">
|
||||
<div class="form-group">
|
||||
<input type="text" name="username" placeholder="Username" autofocus required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" name="password" placeholder="Password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn {% if oidc_enabled %}btn-ghost{% endif %}" style="width:100%;">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,25 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}First-Run Setup — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="max-width:400px;margin:4rem auto;">
|
||||
<div class="card">
|
||||
<h2 class="page-title" style="margin-bottom:0.5rem;">First-Run Setup</h2>
|
||||
<p style="margin-bottom:1.5rem;color:var(--text-muted);font-size:0.9rem;">Create the initial admin account.</p>
|
||||
<form method="post" action="/setup">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" name="username" autofocus required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn">Create Admin Account</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Fabled Scryer{% endblock %}</title>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #131315;
|
||||
--bg-card: #1d1d20;
|
||||
--bg-elevated: #24242a;
|
||||
--border: #30303a;
|
||||
--border-mid: #3a3a44;
|
||||
--text: #d4d0c0;
|
||||
--text-muted: #b8b8b0;
|
||||
--text-dim: #8a8a92;
|
||||
--gold: #c8a840;
|
||||
--gold-hover: #d8b850;
|
||||
--gold-dim: #2a2410;
|
||||
--pewter: #8a8a92;
|
||||
--accent: var(--gold);
|
||||
--accent-hover: var(--gold-hover);
|
||||
--green: #4aa86a;
|
||||
--green-dim: #162a1c;
|
||||
--yellow: #d4a840;
|
||||
--yellow-dim: #2a2410;
|
||||
--orange: #c87840;
|
||||
--orange-dim: #2a1a10;
|
||||
--red: #c84048;
|
||||
--red-dim: #2a1014;
|
||||
--font-serif: 'EB Garamond', Georgia, serif;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { color: var(--accent-hover); }
|
||||
code { font-family: ui-monospace, monospace; font-size: 0.875em; background: var(--bg-elevated); padding: 0.1em 0.35em; border-radius: 3px; }
|
||||
|
||||
#candle-glow {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200, 168, 64, 0.045) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 50% 40% at 20% 80%, rgba(200, 168, 64, 0.025) 0%, transparent 65%);
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
nav {
|
||||
background: var(--bg-card);
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border-mid);
|
||||
height: 48px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
nav .brand {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-right: 2rem;
|
||||
letter-spacing: 0.01em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: var(--gold);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav .brand svg { flex-shrink: 0; }
|
||||
nav a { color: var(--text-muted); font-size: 0.875rem; padding: 0 0.875rem; height: 48px; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
|
||||
nav a:hover { color: var(--text); border-bottom-color: var(--border-mid); }
|
||||
nav a.nav-end { margin-left: auto; }
|
||||
|
||||
/* Layout */
|
||||
main { padding: 1.5rem 2rem; max-width: 1600px; margin: 0 auto; width: 100%; box-sizing: border-box; position: relative; z-index: 1; }
|
||||
|
||||
/* Alerts */
|
||||
.alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
|
||||
.alert-error { background: var(--red-dim); border: 1px solid #6a1820; color: #ffb0b8; }
|
||||
.alert-success { background: var(--green-dim); border: 1px solid #1a5a28; color: #90f0b0; }
|
||||
|
||||
/* Cards */
|
||||
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
|
||||
.card-flush { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
|
||||
|
||||
/* Typography */
|
||||
.page-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; color: #c8b4f8; margin-bottom: 1.5rem; letter-spacing: 0.01em; }
|
||||
.section-title { font-family: var(--font-serif); font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
h1, h2, h3 { font-family: var(--font-serif); }
|
||||
|
||||
/* Tables */
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th { text-align: left; padding: 0.6rem 1rem; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-mid); }
|
||||
.table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
|
||||
.table tbody tr:last-child td { border-bottom: none; }
|
||||
.table tbody tr:hover td { background: var(--bg-elevated); }
|
||||
.table .td-actions { text-align: right; white-space: nowrap; }
|
||||
|
||||
/* Forms */
|
||||
.form-group { margin-bottom: 1rem; }
|
||||
label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-serif); }
|
||||
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea {
|
||||
width: 100%; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border-mid);
|
||||
border-radius: 5px; color: var(--text); font-size: 0.9rem; font-family: inherit;
|
||||
transition: border-color .15s;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
|
||||
select { cursor: pointer; }
|
||||
textarea { resize: vertical; }
|
||||
|
||||
/* Buttons */
|
||||
.btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; background: var(--accent); color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 0.875rem; font-family: inherit; font-weight: 500; transition: background .15s; text-decoration: none; }
|
||||
.btn:hover { background: var(--accent-hover); color: #fff; }
|
||||
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
|
||||
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-mid); }
|
||||
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text); }
|
||||
.btn-danger { background: #7a1820; color: #ffb0b0; }
|
||||
.btn-danger:hover { background: #9a2030; }
|
||||
.btn-warn { background: var(--yellow-dim); color: var(--yellow); border: 1px solid #6a5000; }
|
||||
.btn-warn:hover { background: #4a4000; }
|
||||
|
||||
/* Badges / Status */
|
||||
.badge { display: inline-block; padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; }
|
||||
.badge-green { background: var(--green-dim); color: var(--green); }
|
||||
.badge-red { background: var(--red-dim); color: #ff8090; }
|
||||
.badge-yellow { background: var(--yellow-dim); color: var(--yellow); }
|
||||
.badge-orange { background: var(--orange-dim); color: var(--orange); }
|
||||
.badge-gold { background: var(--gold-dim); color: var(--gold); }
|
||||
.badge-dim { background: var(--bg-elevated); color: var(--text-muted); }
|
||||
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.dot-up { background: var(--green); box-shadow: 0 0 4px var(--green); }
|
||||
.dot-down { background: var(--red); }
|
||||
.dot-warn { background: var(--yellow); }
|
||||
.dot-dim { background: var(--text-dim); }
|
||||
|
||||
/* Empty state */
|
||||
.empty { color: var(--text-muted); font-size: 0.9rem; padding: 2rem; text-align: center; }
|
||||
|
||||
/* Stat cards (dashboard) */
|
||||
.stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
|
||||
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
|
||||
|
||||
/* Ping pills */
|
||||
.ping-card { padding: 0.75rem 1.25rem; }
|
||||
.ping-row { display:flex; align-items:center; gap:1rem; padding:0.45rem 0; border-bottom:1px solid var(--border); }
|
||||
.ping-row:last-child { border-bottom:none; }
|
||||
.ping-meta { min-width:120px; max-width:180px; flex-shrink:1; overflow:hidden; }
|
||||
.ping-name { font-size:0.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
|
||||
.ping-addr { display:block; color:var(--text-muted); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.ping-pills { display:flex; gap:2px; flex:1; min-width:0; overflow:hidden; align-items:center; }
|
||||
.pill { display:inline-block; width:7px; height:22px; border-radius:2px; cursor:default; transition:opacity .1s; }
|
||||
.pill:hover { opacity:.75; }
|
||||
.pill-empty { background:var(--bg-elevated); }
|
||||
.ping-cur { min-width:72px; text-align:right; font-size:0.85rem; font-variant-numeric:tabular-nums; }
|
||||
.ping-cur-good { color:var(--green); }
|
||||
.ping-cur-warn { color:var(--yellow); }
|
||||
.ping-cur-bad { color:var(--orange); }
|
||||
.ping-cur-down { color:var(--red); font-weight:bold; }
|
||||
.ping-cur-nd { color:var(--text-dim); }
|
||||
|
||||
/* Widget headers */
|
||||
.widget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
|
||||
.widget-title { font-family:var(--font-serif); font-size:0.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
|
||||
.widget-link { font-size:0.8rem; color:var(--text-muted); }
|
||||
.widget-link:hover { color:var(--text); }
|
||||
|
||||
/* Time range selector */
|
||||
.range-btn { background:none; border:1px solid var(--border-mid); border-radius:4px; color:var(--text-muted); padding:0.18rem 0.5rem; cursor:pointer; font-size:0.75rem; font-family:inherit; transition:background .1s,color .1s,border-color .1s; }
|
||||
.range-btn:hover { background:var(--bg-elevated); color:var(--text); border-color:var(--accent); }
|
||||
.range-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
|
||||
</style>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="candle-glow"></div>
|
||||
|
||||
{% if session.user_id is defined %}
|
||||
<nav>
|
||||
<a href="/" class="brand">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10.5" fill="none" stroke="#c8a840" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="12" r="9.3" fill="#8a8a92" opacity="0.1"/>
|
||||
<path d="M7 10 L7 5.8 L9 7.8 L10.5 5 L12 7.2 L13.5 5 L15 7.8 L17 5.8 L17 10 Z" fill="#c8a840"/>
|
||||
<ellipse cx="12" cy="15.5" rx="5.2" ry="1" fill="#c8a840"/>
|
||||
<rect x="9.6" y="15.5" width="1" height="3.8" fill="#c8a840"/>
|
||||
<rect x="13.4" y="15.5" width="1" height="3.8" fill="#c8a840"/>
|
||||
</svg>
|
||||
Fabled Scryer
|
||||
</a>
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/hosts/">Hosts</a>
|
||||
<a href="/hosts/uptime">Uptime</a>
|
||||
<a href="/ping/">Ping</a>
|
||||
<a href="/dns/">DNS</a>
|
||||
<a href="/alerts/">Alerts</a>
|
||||
<a href="/ansible/">Ansible</a>
|
||||
{% if session.user_role == 'admin' %}
|
||||
<a href="/settings/">Settings</a>
|
||||
<a href="/audit/">Audit</a>
|
||||
{% endif %}
|
||||
<a href="/logout" class="nav-end">{{ session.username }}</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
function setTimeRange(val) {
|
||||
var input = document.getElementById('time-range');
|
||||
if (input) input.value = val;
|
||||
document.querySelectorAll('.range-btn').forEach(function(b) {
|
||||
b.classList.toggle('active', b.dataset.range === val);
|
||||
});
|
||||
var url = new URL(window.location);
|
||||
url.searchParams.set('range', val);
|
||||
history.replaceState({}, '', url);
|
||||
document.body.dispatchEvent(new CustomEvent('rangeChange'));
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
{% if plugin_failures and session.user_role == 'admin' %}
|
||||
<div style="background:color-mix(in srgb,var(--yellow) 12%,var(--bg-elevated));
|
||||
border:1px solid color-mix(in srgb,var(--yellow) 35%,var(--border));
|
||||
border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;
|
||||
font-size:0.84rem;display:flex;align-items:flex-start;gap:0.6rem;">
|
||||
<span style="color:var(--yellow);flex-shrink:0;">⚠</span>
|
||||
<span>
|
||||
<strong style="color:var(--text);">
|
||||
{{ plugin_failures | length }} plugin{{ 's' if plugin_failures | length != 1 }} failed to load.
|
||||
</strong>
|
||||
<a href="/settings/plugins/" style="color:var(--accent);margin-left:0.4rem;">View details →</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="alert alert-error">{{ error }}</div>
|
||||
{% endif %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
{# dashboard/_edit_panels.html — returned by all mutation routes and included by edit.html #}
|
||||
<div id="edit-panels" style="display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start;">
|
||||
|
||||
{# ── Current layout ───────────────────────────────────────────────────── #}
|
||||
<div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">Current Layout</div>
|
||||
{% if widgets %}
|
||||
<div id="widget-sort-list" data-dash-id="{{ dashboard.id }}" style="display:grid;gap:0.5rem;">
|
||||
{% for item in widgets %}
|
||||
<div class="card" data-widget-id="{{ item.db.id }}"
|
||||
style="margin-bottom:0;display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;">
|
||||
|
||||
<div class="drag-handle" style="flex-shrink:0;cursor:grab;color:var(--text-muted);
|
||||
font-size:1.1rem;line-height:1;user-select:none;"
|
||||
title="Drag to reorder">⠿</div>
|
||||
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-weight:600;font-size:0.9rem;">{{ item.title }}</div>
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.1rem;">{{ item.defn.description }}</div>
|
||||
</div>
|
||||
|
||||
<button hx-post="/d/{{ dashboard.id }}/edit/remove/{{ item.db.id }}"
|
||||
hx-target="#edit-panels" hx-swap="outerHTML"
|
||||
class="btn btn-danger btn-sm" style="flex-shrink:0;">Remove</button>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="color:var(--text-muted);text-align:center;padding:2rem;font-size:0.9rem;">
|
||||
No widgets yet. Draw one from the right to begin.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# ── Available widgets ────────────────────────────────────────────────── #}
|
||||
<div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">Available Widgets</div>
|
||||
{% if addable %}
|
||||
<div style="display:grid;gap:0.5rem;">
|
||||
{% for w in addable %}
|
||||
<div class="card" style="margin-bottom:0;padding:0;overflow:hidden;">
|
||||
<details>
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
|
||||
padding:0.85rem 1rem;cursor:pointer;list-style:none;user-select:none;">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-weight:600;font-size:0.875rem;">{{ w.label }}</div>
|
||||
<div style="font-size:0.77rem;color:var(--text-muted);margin-top:0.1rem;">{{ w.description }}</div>
|
||||
</div>
|
||||
<span class="btn btn-sm" style="flex-shrink:0;pointer-events:none;">Add ▾</span>
|
||||
</summary>
|
||||
|
||||
<form method="post"
|
||||
action="/d/{{ dashboard.id }}/edit/add/{{ w.key }}"
|
||||
hx-post="/d/{{ dashboard.id }}/edit/add/{{ w.key }}"
|
||||
hx-target="#edit-panels"
|
||||
hx-swap="outerHTML"
|
||||
style="padding:0.75rem 1rem;padding-top:0;border-top:1px solid var(--border);">
|
||||
<div style="display:grid;gap:0.5rem;padding-top:0.75rem;">
|
||||
|
||||
<div>
|
||||
<label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
|
||||
Widget title <span style="color:var(--text-dim);">(optional)</span>
|
||||
</label>
|
||||
<input type="text" name="title" placeholder="{{ w.label }}"
|
||||
style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
|
||||
border:1px solid var(--border-mid);border-radius:4px;
|
||||
color:var(--text);font-size:0.85rem;">
|
||||
</div>
|
||||
|
||||
{% for p in w.params %}
|
||||
<div>
|
||||
<label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
|
||||
{{ p.label }}
|
||||
</label>
|
||||
{% if p.type == "select" %}
|
||||
<select name="param_{{ p.key }}"
|
||||
style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
|
||||
border:1px solid var(--border-mid);border-radius:4px;
|
||||
color:var(--text);font-size:0.85rem;">
|
||||
{% for opt in p.options %}
|
||||
<option value="{{ opt.value }}" {% if opt.value == p.default %}selected{% endif %}>
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<button type="submit" class="btn btn-sm" style="width:100%;margin-top:0.1rem;">
|
||||
Add to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</details>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="color:var(--text-muted);font-size:0.85rem;padding:1rem 0;">
|
||||
No plugin widgets available. Enable plugins in Settings → Plugins.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Edit: {{ dashboard.name }} — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Edit: {{ dashboard.name }}</h1>
|
||||
<a href="/d/{{ dashboard.id }}" class="btn btn-ghost btn-sm">Done</a>
|
||||
</div>
|
||||
{% include "dashboard/_edit_panels.html" %}
|
||||
{% endblock %}
|
||||
{% block extra_scripts %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
function initSortable() {
|
||||
var el = document.getElementById('widget-sort-list');
|
||||
if (!el) return;
|
||||
var dashId = el.dataset.dashId;
|
||||
Sortable.create(el, {
|
||||
handle: '.drag-handle',
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
onEnd: function () {
|
||||
var order = Array.from(el.querySelectorAll('[data-widget-id]'))
|
||||
.map(function (row) { return parseInt(row.dataset.widgetId, 10); });
|
||||
fetch('/d/' + dashId + '/edit/reorder', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ order: order }),
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Init on first load and after every HTMX swap (add/remove re-renders the list)
|
||||
document.addEventListener('DOMContentLoaded', initSortable);
|
||||
document.addEventListener('htmx:afterSwap', initSortable);
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
.sortable-ghost { opacity: 0.4; }
|
||||
.drag-handle:active { cursor: grabbing; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,88 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ dashboard.name }} — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
{# ── Header ────────────────────────────────────────────────────────────────── #}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap;">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">{{ dashboard.name }}</h1>
|
||||
{% if dashboard.is_default %}
|
||||
<span class="badge badge-gold" style="font-size:0.7rem;">Default</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;">
|
||||
{# Dashboard switcher — shown when more than one dashboard exists #}
|
||||
{% if all_dashboards | length > 1 %}
|
||||
<select onchange="window.location='/d/'+this.value"
|
||||
style="font-size:0.82rem;padding:0.3rem 0.6rem;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:5px;color:var(--text);cursor:pointer;">
|
||||
{% for d in all_dashboards %}
|
||||
<option value="{{ d.id }}" {% if d.id == dashboard.id %}selected{% endif %}>{{ d.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endif %}
|
||||
{% if can_edit %}
|
||||
<a href="/d/{{ dashboard.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>
|
||||
<a href="/d/{{ dashboard.id }}/share" class="btn btn-ghost btn-sm">Share</a>
|
||||
{% endif %}
|
||||
<a href="/dashboards/" class="btn btn-ghost btn-sm">Dashboards</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Summary strip ─────────────────────────────────────────────────────────── #}
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<div class="section-title" style="margin-bottom:0.5rem;">Hosts</div>
|
||||
<span class="stat-val">{{ total_hosts }}</span>
|
||||
<span class="stat-label">total</span>
|
||||
<div style="margin-top:0.5rem;"><a href="/hosts/" style="font-size:0.8rem;">Manage →</a></div>
|
||||
</div>
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<div class="section-title" style="margin-bottom:0.5rem;">Ping</div>
|
||||
{% if ping_up + ping_down == 0 %}
|
||||
<span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
|
||||
{% else %}
|
||||
<span class="stat-val" style="color:var(--green);">{{ ping_up }}</span><span class="stat-label">up</span>
|
||||
{% if ping_down %} <span class="stat-val" style="color:var(--red);">{{ ping_down }}</span><span class="stat-label">down</span>{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<div class="section-title" style="margin-bottom:0.5rem;">DNS</div>
|
||||
{% if dns_ok + dns_fail == 0 %}
|
||||
<span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
|
||||
{% else %}
|
||||
<span class="stat-val" style="color:var(--green);">{{ dns_ok }}</span><span class="stat-label">ok</span>
|
||||
{% if dns_fail %} <span class="stat-val" style="color:var(--red);">{{ dns_fail }}</span><span class="stat-label">failed</span>{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<div class="section-title" style="margin-bottom:0.5rem;">Alerts</div>
|
||||
<a href="/alerts/" style="font-size:0.85rem;">View rules →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Widget grid ───────────────────────────────────────────────────────────── #}
|
||||
{% if widgets %}
|
||||
<div style="column-width:380px;column-count:3;column-gap:1rem;">
|
||||
{% for item in widgets %}
|
||||
<div class="card ping-card" style="break-inside:avoid;margin-bottom:1rem;">
|
||||
<div class="widget-header">
|
||||
<span class="widget-title">{{ item.title }}</span>
|
||||
<a href="{{ item.defn.detail_url }}" class="widget-link">Details →</a>
|
||||
</div>
|
||||
<div id="widget-{{ item.db.id }}"
|
||||
hx-get="{{ item.hx_url }}"
|
||||
hx-trigger="load{% if item.defn.poll %}, every {{ poll_interval }}s{% endif %}"
|
||||
hx-swap="innerHTML">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="text-align:center;padding:3rem;">
|
||||
<div style="font-size:1.1rem;color:var(--text-muted);margin-bottom:1rem;">No widgets on this dashboard yet.</div>
|
||||
{% if can_edit %}
|
||||
<a href="/d/{{ dashboard.id }}/edit" class="btn">Add Widgets</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,132 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Dashboards — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Dashboards</h1>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 300px;gap:1.5rem;align-items:start;">
|
||||
|
||||
{# ── Left: dashboard lists ─────────────────────────────────────────── #}
|
||||
<div style="display:grid;gap:1.5rem;">
|
||||
|
||||
{# My dashboards #}
|
||||
<div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">My Dashboards</div>
|
||||
{% if my_dashboards %}
|
||||
<div style="display:grid;gap:0.5rem;">
|
||||
{% for dash in my_dashboards %}
|
||||
<div class="card" style="margin-bottom:0;padding:0.85rem 1rem;">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
|
||||
<a href="/d/{{ dash.id }}" style="font-weight:600;font-size:0.9rem;">{{ dash.name }}</a>
|
||||
{% if dash.is_default %}
|
||||
<span class="badge badge-gold" style="font-size:0.68rem;">Your Default</span>
|
||||
{% endif %}
|
||||
{% if dash.is_shared %}
|
||||
<span class="badge badge-dim" style="font-size:0.68rem;">Shared</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:0.4rem;flex-shrink:0;">
|
||||
<a href="/d/{{ dash.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>
|
||||
|
||||
<details style="position:relative;">
|
||||
<summary class="btn btn-ghost btn-sm" style="cursor:pointer;list-style:none;">Rename</summary>
|
||||
<div style="position:absolute;right:0;top:calc(100% + 4px);background:var(--bg-card);border:1px solid var(--border-mid);border-radius:6px;padding:0.75rem;z-index:50;width:220px;box-shadow:0 4px 16px rgba(0,0,0,0.4);">
|
||||
<form method="post" action="/dashboards/{{ dash.id }}/rename" style="display:flex;gap:0.4rem;">
|
||||
<input type="text" name="name" value="{{ dash.name }}"
|
||||
style="flex:1;font-size:0.85rem;padding:0.3rem 0.5rem;" required>
|
||||
<button type="submit" class="btn btn-sm">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<form method="post" action="/dashboards/{{ dash.id }}/toggle-share" style="margin:0;" title="{{ 'Make private' if dash.is_shared else 'Share with all users' }}">
|
||||
<button type="submit" class="btn btn-ghost btn-sm">{{ '🔒' if dash.is_shared else '🔗' }}</button>
|
||||
</form>
|
||||
|
||||
{% if not dash.is_default %}
|
||||
<form method="post" action="/dashboards/{{ dash.id }}/set-default" style="margin:0;" title="Set as my default">
|
||||
<button type="submit" class="btn btn-ghost btn-sm">★</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{% if my_dashboards | length > 1 %}
|
||||
<form method="post" action="/dashboards/{{ dash.id }}/delete" style="margin:0;"
|
||||
onsubmit="return confirm('Delete \'{{ dash.name }}\'?')">
|
||||
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
|
||||
You don't have any personal dashboards yet.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Shared / system dashboards #}
|
||||
{% if shared_dashboards %}
|
||||
<div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">Shared Dashboards</div>
|
||||
<div style="display:grid;gap:0.5rem;">
|
||||
{% for dash in shared_dashboards %}
|
||||
<div class="card" style="margin-bottom:0;padding:0.85rem 1rem;">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
|
||||
<a href="/d/{{ dash.id }}" style="font-weight:600;font-size:0.9rem;">{{ dash.name }}</a>
|
||||
{% if dash.owner_id is none %}
|
||||
<span class="badge badge-dim" style="font-size:0.68rem;">System</span>
|
||||
{% endif %}
|
||||
{% if dash.is_default %}
|
||||
<span class="badge badge-gold" style="font-size:0.68rem;">Global Default</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:0.4rem;flex-shrink:0;">
|
||||
<a href="/d/{{ dash.id }}" class="btn btn-ghost btn-sm">View</a>
|
||||
<form method="post" action="/dashboards/{{ dash.id }}/set-default" style="margin:0;" title="Set as my default">
|
||||
<button type="submit" class="btn btn-ghost btn-sm">★</button>
|
||||
</form>
|
||||
{# Admins can also edit system dashboards #}
|
||||
{% if user_role == 'admin' %}
|
||||
<a href="/d/{{ dash.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{# ── Right: create new dashboard ──────────────────────────────────── #}
|
||||
<div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">New Dashboard</div>
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<form method="post" action="/dashboards/create">
|
||||
<div class="form-group" style="margin-bottom:0.75rem;">
|
||||
<label>Name</label>
|
||||
<input type="text" name="name" placeholder="e.g. Network Overview" required>
|
||||
</div>
|
||||
<button type="submit" class="btn">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.75rem;line-height:1.5;">
|
||||
New dashboards are private by default.<br>
|
||||
Use 🔗 to share with all users.<br>
|
||||
Use ★ to set as your default view.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,78 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Share: {{ dashboard.name }} — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Share: {{ dashboard.name }}</h1>
|
||||
<a href="/d/{{ dashboard.id }}" class="btn btn-ghost btn-sm">Back to Dashboard</a>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start;max-width:900px;">
|
||||
|
||||
{# ── Active tokens ─────────────────────────────────────────────────── #}
|
||||
<div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">Active Share Links</div>
|
||||
{% if tokens %}
|
||||
<div style="display:grid;gap:0.5rem;">
|
||||
{% for token in tokens %}
|
||||
{% set expired = token.expires_at is not none and token.expires_at <= now %}
|
||||
<div class="card" style="margin-bottom:0;padding:0.85rem 1rem;{% if expired %}opacity:0.5;{% endif %}">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-weight:600;font-size:0.875rem;">
|
||||
{{ token.label or "Unnamed link" }}
|
||||
{% if expired %}<span class="badge badge-red" style="font-size:0.68rem;">Expired</span>{% endif %}
|
||||
</div>
|
||||
<div style="font-size:0.77rem;color:var(--text-muted);margin-top:0.15rem;">
|
||||
Created {{ token.created_at.strftime("%Y-%m-%d") }}
|
||||
{% if token.expires_at %}
|
||||
· Expires {{ token.expires_at.strftime("%Y-%m-%d") }}
|
||||
{% else %}
|
||||
· Never expires
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" action="/d/{{ dashboard.id }}/share/revoke/{{ token.id }}"
|
||||
style="margin:0;" onsubmit="return confirm('Revoke this share link?')">
|
||||
<button type="submit" class="btn btn-danger btn-sm">Revoke</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
|
||||
No active share links. Create one on the right.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# ── Create new token ──────────────────────────────────────────────── #}
|
||||
<div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">Create Share Link</div>
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<form method="post" action="/d/{{ dashboard.id }}/share/create">
|
||||
<div class="form-group" style="margin-bottom:0.75rem;">
|
||||
<label>Label <span style="color:var(--text-muted);font-size:0.78rem;">(optional)</span></label>
|
||||
<input type="text" name="label" placeholder="e.g. Public display screen">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom:0.75rem;">
|
||||
<label>Expires after</label>
|
||||
<select name="expires_in">
|
||||
<option value="">Never</option>
|
||||
<option value="1">1 day</option>
|
||||
<option value="7">7 days</option>
|
||||
<option value="30">30 days</option>
|
||||
<option value="90">90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn">Generate Link</button>
|
||||
</form>
|
||||
</div>
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.75rem;line-height:1.5;">
|
||||
The link is shown <strong>once</strong> after creation.<br>
|
||||
Revoke it at any time to cut off access immediately.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,32 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Share Link Created — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="max-width:640px;">
|
||||
<h1 class="page-title">Share Link Created</h1>
|
||||
|
||||
<div class="card" style="border-color:var(--gold);margin-bottom:1rem;">
|
||||
<div style="font-size:0.8rem;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.75rem;">
|
||||
Copy this link now — it cannot be shown again
|
||||
</div>
|
||||
|
||||
{% set share_url = request.host_url.rstrip('/') + '/share/' + raw_token %}
|
||||
<div style="display:flex;gap:0.5rem;align-items:center;">
|
||||
<input type="text" id="share-url" value="{{ share_url }}" readonly
|
||||
style="flex:1;font-family:ui-monospace,monospace;font-size:0.8rem;background:var(--bg);color:var(--text);">
|
||||
<button onclick="navigator.clipboard.writeText(document.getElementById('share-url').value).then(()=>this.textContent='Copied!')"
|
||||
class="btn btn-ghost btn-sm" style="white-space:nowrap;">Copy</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:0.75rem;font-size:0.82rem;color:var(--text-muted);">
|
||||
{% if label %}<strong>Label:</strong> {{ label }} · {% endif %}
|
||||
{% if expires_at %}<strong>Expires:</strong> {{ expires_at.strftime("%Y-%m-%d") }}
|
||||
{% else %}<strong>Expires:</strong> Never{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:0.75rem;">
|
||||
<a href="/d/{{ dashboard.id }}/share" class="btn btn-ghost">Manage Share Links</a>
|
||||
<a href="/d/{{ dashboard.id }}" class="btn btn-ghost">Back to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ dashboard.name }} — Fabled Scryer</title>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #07071a; --bg-card: #0f0f24; --bg-elevated: #17172e;
|
||||
--border: #1e1e3e; --border-mid: #28284c;
|
||||
--text: #d2cef0; --text-muted: #6858a0; --text-dim: #282860;
|
||||
--accent: #7c5ef4; --gold: #c9a84c;
|
||||
--green: #26d96b; --green-dim: #0e3a1e;
|
||||
--yellow: #e6b818; --red: #e83848; --red-dim: #3a0e14;
|
||||
--orange: #e07828;
|
||||
--font-serif: 'Libertinus Serif', Georgia, serif;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
code { font-family: ui-monospace, monospace; font-size: 0.875em; background: var(--bg-elevated); padding: 0.1em 0.35em; border-radius: 3px; }
|
||||
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
|
||||
.card-flush { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
|
||||
.section-title { font-family: var(--font-serif); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th { text-align: left; padding: 0.6rem 1rem; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-mid); }
|
||||
.table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
|
||||
.table tbody tr:last-child td { border-bottom: none; }
|
||||
.table tbody tr:hover td { background: var(--bg-elevated); }
|
||||
.badge { display: inline-block; padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; }
|
||||
.badge-green { background: var(--green-dim); color: var(--green); }
|
||||
.badge-red { background: var(--red-dim); color: #ff8090; }
|
||||
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.dot-up { background: var(--green); box-shadow: 0 0 4px var(--green); }
|
||||
.dot-down { background: var(--red); }
|
||||
.dot-warn { background: var(--yellow); }
|
||||
.dot-dim { background: var(--text-dim); }
|
||||
.ping-card { padding: 0.75rem 1.25rem; }
|
||||
.ping-row { display:flex; align-items:center; gap:1rem; padding:0.45rem 0; border-bottom:1px solid var(--border); }
|
||||
.ping-row:last-child { border-bottom:none; }
|
||||
.ping-meta { min-width:120px; max-width:180px; flex-shrink:1; overflow:hidden; }
|
||||
.ping-name { font-size:0.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
|
||||
.ping-addr { display:block; color:var(--text-muted); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.ping-pills { display:flex; gap:2px; flex:1; min-width:0; overflow:hidden; align-items:center; }
|
||||
.pill { display:inline-block; width:7px; height:22px; border-radius:2px; }
|
||||
.pill-empty { background:var(--bg-elevated); }
|
||||
.ping-cur { min-width:72px; text-align:right; font-size:0.85rem; font-variant-numeric:tabular-nums; }
|
||||
.ping-cur-good { color:var(--green); } .ping-cur-warn { color:var(--yellow); }
|
||||
.ping-cur-bad { color:var(--orange); } .ping-cur-down { color:var(--red); font-weight:bold; }
|
||||
.ping-cur-nd { color:var(--text-dim); }
|
||||
.widget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
|
||||
.widget-title { font-family:var(--font-serif); font-size:0.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
|
||||
.stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
|
||||
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
|
||||
header { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-mid); height: 48px; font-family: var(--font-serif); }
|
||||
main { padding: 1.5rem 2rem; max-width: 1600px; margin: 0 auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<span style="font-weight:700;font-size:1rem;background:linear-gradient(110deg,#c8b4f8,#c9a84c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">
|
||||
{{ dashboard.name }}
|
||||
</span>
|
||||
<span style="font-size:0.78rem;color:var(--text-muted);">Fabled Scryer · read-only view</span>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{% if widgets %}
|
||||
<div style="column-width:380px;column-count:3;column-gap:1rem;">
|
||||
{% for item in widgets %}
|
||||
<div class="card ping-card" style="break-inside:avoid;margin-bottom:1rem;">
|
||||
<div class="widget-header">
|
||||
<span class="widget-title">{{ item.title }}</span>
|
||||
</div>
|
||||
{# Pass share token as &s= param so require_role allows through #}
|
||||
<div id="widget-{{ item.db.id }}"
|
||||
hx-get="{{ item.hx_url }}&s={{ raw_token }}"
|
||||
hx-trigger="load{% if item.defn.poll %}, every {{ poll_interval }}s{% endif %}"
|
||||
hx-swap="innerHTML">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="color:var(--text-muted);text-align:center;padding:4rem;font-size:0.9rem;">
|
||||
This dashboard has no widgets.
|
||||
</div>
|
||||
{% endif %}
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}DNS Monitor — 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;">DNS Monitor</h1>
|
||||
<span style="color:var(--text-muted);font-size:0.85rem;">polling every {{ poll_interval }}s</span>
|
||||
</div>
|
||||
<div class="card ping-card">
|
||||
<div id="dns-rows"
|
||||
hx-get="/dns/rows"
|
||||
hx-trigger="every {{ poll_interval }}s"
|
||||
hx-swap="innerHTML">
|
||||
{% include "dns/rows.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,29 @@
|
||||
{% if hosts %}
|
||||
{% for host in hosts %}
|
||||
{% set d = latest.get(host.id) %}
|
||||
<div class="ping-row">
|
||||
<div class="ping-meta">
|
||||
<span class="ping-name">{{ host.name }}</span>
|
||||
<span class="ping-addr">{{ host.address }}</span>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
{% if d is none %}
|
||||
<span style="color:var(--text-dim);font-size:0.85rem;">—</span>
|
||||
{% elif d.status.value == 'resolved' %}
|
||||
<span class="dot dot-up" style="margin-right:0.5rem;"></span>
|
||||
<span style="font-size:0.85rem;color:var(--green);">{{ d.resolved_ip or 'resolved' }}</span>
|
||||
{% else %}
|
||||
<span class="dot dot-down" style="margin-right:0.5rem;"></span>
|
||||
<span style="font-size:0.85rem;color:var(--red);">Failed</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="ping-cur">
|
||||
{% if d %}
|
||||
<span style="color:var(--text-muted);font-size:0.75rem;">{{ d.resolved_at.strftime('%H:%M:%S') }} UTC</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="empty" style="padding:0.5rem 0;">No DNS checks yet. <a href="/hosts/">Enable DNS on a host →</a></p>
|
||||
{% endif %}
|
||||
@@ -0,0 +1,10 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Not Found — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="text-align:center; padding: 4rem 2rem; font-family: var(--font-serif);">
|
||||
<h1 style="color: var(--gold); font-size: 2.5rem; margin-bottom: 0.5rem;">404</h1>
|
||||
<p style="color: var(--text); font-size: 1.2rem; margin-bottom: 0.25rem;">No such seat at this table.</p>
|
||||
<p style="color: var(--text-dim); margin-bottom: 1.5rem;">The page you sought is not among us.</p>
|
||||
<a href="/" class="btn">Return to the hall</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,10 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Error — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="text-align:center; padding: 4rem 2rem; font-family: var(--font-serif);">
|
||||
<h1 style="color: var(--red); font-size: 2.5rem; margin-bottom: 0.5rem;">500</h1>
|
||||
<p style="color: var(--text); font-size: 1.2rem; margin-bottom: 0.25rem;">The watch has faltered.</p>
|
||||
<p style="color: var(--text-dim); margin-bottom: 1.5rem;">An unexpected error occurred. The cause has been logged.</p>
|
||||
<a href="/" class="btn">Return to the hall</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,53 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{% if host %}Edit Host{% else %}New Host{% endif %} — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="max-width:560px;margin:2rem auto;">
|
||||
<h1 class="page-title">{% if host %}Edit Host{% else %}Add Host{% endif %}</h1>
|
||||
<div class="card">
|
||||
<form method="post" action="{% if host %}/hosts/{{ host.id }}{% else %}/hosts/{% endif %}">
|
||||
<div class="form-group">
|
||||
<label>Display Name</label>
|
||||
<input type="text" name="name" value="{{ host.name if host else '' }}" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Address (hostname or IP)</label>
|
||||
<input type="text" name="address" value="{{ host.address if host else '' }}" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Probe Type</label>
|
||||
<select name="probe_type">
|
||||
{% for pt in probe_types %}
|
||||
<option value="{{ pt.value }}" {% if host and host.probe_type == pt %}selected{% endif %}>
|
||||
{{ pt.value | upper }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>TCP Port (used for TCP probe; ignored for ICMP)</label>
|
||||
<input type="number" name="probe_port" value="{{ host.probe_port if host else 80 }}" min="1" max="65535">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer;">
|
||||
<input type="checkbox" name="ping_enabled" {% if not host or host.ping_enabled %}checked{% endif %}>
|
||||
Enable ping monitor
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer;">
|
||||
<input type="checkbox" name="dns_enabled" {% if host and host.dns_enabled %}checked{% endif %}>
|
||||
Enable DNS monitor
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Expected IP (optional — leave blank to accept any)</label>
|
||||
<input type="text" name="dns_expected_ip" value="{{ host.dns_expected_ip if host and host.dns_expected_ip else '' }}">
|
||||
</div>
|
||||
<div style="display:flex;gap:1rem;margin-top:1.5rem;">
|
||||
<button type="submit" class="btn">{% if host %}Save{% else %}Add Host{% endif %}</button>
|
||||
<a href="/hosts/" class="btn btn-ghost">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,109 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Hosts — 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;">Hosts</h1>
|
||||
<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">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Address</th>
|
||||
<th>Probe</th>
|
||||
<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>
|
||||
<tbody>
|
||||
{% 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>
|
||||
<td style="color:var(--text-muted);font-size:0.85rem;">
|
||||
{{ host.probe_type.value | upper }}{% if host.probe_type.value == 'tcp' %}:{{ host.probe_port }}{% endif %}
|
||||
</td>
|
||||
<td style="text-align:center;">
|
||||
{% if not host.ping_enabled %}
|
||||
<span style="color:var(--text-dim);font-size:0.8rem;">off</span>
|
||||
{% elif ping is none %}
|
||||
<span style="color:var(--text-muted);font-size:0.8rem;">—</span>
|
||||
{% elif ping.status.value == 'up' %}
|
||||
<span class="dot dot-up" title="Up"></span>
|
||||
{% else %}
|
||||
<span class="dot dot-down" title="Down"></span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="text-align:center;font-size:0.9rem;">
|
||||
{% if ping and ping.response_time_ms is not none %}
|
||||
{% if ping.response_time_ms < 10 %}
|
||||
<span style="color:var(--green);">{{ ping.response_time_ms | round(1) }} ms</span>
|
||||
{% elif ping.response_time_ms < 100 %}
|
||||
<span style="color:var(--yellow);">{{ ping.response_time_ms | round(1) }} ms</span>
|
||||
{% else %}
|
||||
<span style="color:var(--orange);">{{ ping.response_time_ms | round(1) }} ms</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span style="color:var(--text-dim);">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="text-align:center;">
|
||||
{% if not host.dns_enabled %}
|
||||
<span style="color:var(--text-dim);font-size:0.8rem;">off</span>
|
||||
{% elif dns is none %}
|
||||
<span style="color:var(--text-muted);font-size:0.8rem;">—</span>
|
||||
{% elif dns.status.value == 'resolved' %}
|
||||
<span class="dot dot-up" title="{{ dns.resolved_ip }}"></span>
|
||||
{% else %}
|
||||
<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;">
|
||||
<button type="submit" class="btn btn-sm btn-danger"
|
||||
onclick="return confirm('Delete {{ host.name }}?')">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card">
|
||||
<p style="color:var(--text-muted);">No hosts yet. <a href="/hosts/new">Summon one to the table.</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -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 under watch. <a href="/hosts/new">Summon one to the table.</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 %}
|
||||
@@ -0,0 +1,47 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Ping Monitor — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.25rem;">
|
||||
<div style="display:flex;align-items:baseline;gap:1rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Ping Monitor</h1>
|
||||
<span style="color:var(--text-muted);font-size:0.85rem;">polling every {{ poll_interval }}s</span>
|
||||
</div>
|
||||
{% include "_time_range.html" %}
|
||||
</div>
|
||||
|
||||
{# ── Threshold settings ─────────────────────────────────────────────────── #}
|
||||
<div class="card" style="margin-bottom:1.25rem;">
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Latency Thresholds</h2>
|
||||
<form method="post" action="/ping/settings"
|
||||
style="display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#1a6632;vertical-align:middle;margin-right:4px;"></span>
|
||||
Good below (ms)
|
||||
</label>
|
||||
<input type="number" name="good_ms" value="{{ good_ms }}" min="1" max="9999" style="width:100px;">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#6b5c00;vertical-align:middle;margin-right:4px;"></span>
|
||||
Warn above (ms)
|
||||
</label>
|
||||
<input type="number" name="warn_ms" value="{{ warn_ms }}" min="1" max="9999" style="width:100px;">
|
||||
</div>
|
||||
<button type="submit" class="btn" style="padding:0.4rem 1rem;">Save</button>
|
||||
<span style="color:#505070;font-size:0.8rem;align-self:center;">
|
||||
Above warn = <span style="color:#c06020;">■</span> orange | No response = <span style="color:#c03030;">■</span> red
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{# ── Live host rows ─────────────────────────────────────────────────────── #}
|
||||
<div class="card ping-card">
|
||||
<div id="ping-rows"
|
||||
hx-get="/ping/rows"
|
||||
hx-trigger="load, every {{ poll_interval }}s, rangeChange from:body"
|
||||
hx-include="#time-range"
|
||||
hx-swap="innerHTML">
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,64 @@
|
||||
{# HTMX fragment — included in both /ping/ page and dashboard widget #}
|
||||
{% macro pill_bg(p) %}
|
||||
{%- if p is none or p.status.value == 'down' or p.response_time_ms is none -%}
|
||||
#6a1515
|
||||
{%- elif p.response_time_ms <= good_ms -%}
|
||||
#1a6632
|
||||
{%- elif p.response_time_ms <= warn_ms -%}
|
||||
#6b5c00
|
||||
{%- else -%}
|
||||
#7a3800
|
||||
{%- endif -%}
|
||||
{% endmacro %}
|
||||
{% macro pill_title(p) %}
|
||||
{%- if p is none -%}No data
|
||||
{%- elif p.status.value == 'down' -%}Down — {{ p.probed_at.strftime('%H:%M:%S') }} UTC
|
||||
{%- else -%}{{ "%.1f"|format(p.response_time_ms) }} ms — {{ p.probed_at.strftime('%H:%M:%S') }} UTC
|
||||
{%- endif -%}
|
||||
{% endmacro %}
|
||||
{% if hosts %}
|
||||
{% for host in hosts %}
|
||||
{% set host_pings = pings_by_host.get(host.id, []) %}
|
||||
{% set last = host_pings[-1] if host_pings else none %}
|
||||
<div class="ping-row">
|
||||
<div class="ping-meta">
|
||||
<span class="ping-name">{{ host.name }}</span>
|
||||
<span class="ping-addr">{{ host.address }}</span>
|
||||
</div>
|
||||
<div class="ping-pills">
|
||||
{% for _ in range([30 - host_pings|length, 0]|max) %}
|
||||
<span class="pill pill-empty" title="No data"></span>
|
||||
{% endfor %}
|
||||
{% for p in host_pings %}
|
||||
<span class="pill" style="background:{{ pill_bg(p) }};" title="{{ pill_title(p) }}"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="ping-cur">
|
||||
{% if last is none %}
|
||||
<span class="ping-cur-nd">—</span>
|
||||
{% elif last.status.value == 'down' or last.response_time_ms is none %}
|
||||
<span class="ping-cur-down">DOWN</span>
|
||||
{% elif last.response_time_ms <= good_ms %}
|
||||
<span class="ping-cur-good">{{ "%.1f"|format(last.response_time_ms) }} ms</span>
|
||||
{% elif last.response_time_ms <= warn_ms %}
|
||||
<span class="ping-cur-warn">{{ "%.1f"|format(last.response_time_ms) }} ms</span>
|
||||
{% else %}
|
||||
<span class="ping-cur-bad">{{ "%.1f"|format(last.response_time_ms) }} ms</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if uptime_pcts is defined %}
|
||||
{% set pct = uptime_pcts.get(host.id) %}
|
||||
<div style="min-width:4.5rem;text-align:right;font-size:0.78rem;font-variant-numeric:tabular-nums;color:
|
||||
{% if pct is none %}var(--text-dim)
|
||||
{% elif pct >= 99 %}var(--green)
|
||||
{% elif pct >= 95 %}var(--yellow)
|
||||
{% else %}var(--red){% endif %};">
|
||||
{% if pct is not none %}{{ "%.1f"|format(pct) }}%{% else %}—{% endif %}
|
||||
<span style="color:var(--text-dim);font-size:0.7rem;margin-left:0.15rem;">{{ range_key }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p style="color:#505070;font-size:0.85rem;padding:0.5rem 0;">No ping-enabled hosts. <a href="/hosts/" style="color:#7070c0;">Add hosts →</a></p>
|
||||
{% endif %}
|
||||
@@ -0,0 +1,206 @@
|
||||
{# settings/_ansible_sources.html — HTMX partial for Ansible source management #}
|
||||
<div id="ansible-sources">
|
||||
|
||||
{% if sources %}
|
||||
<div style="display:grid;gap:0.75rem;margin-bottom:0.75rem;">
|
||||
{% for src in sources %}
|
||||
{% set idx = loop.index0 %}
|
||||
|
||||
<div class="card" style="padding:0;overflow:visible;">
|
||||
|
||||
{# ── View row ──────────────────────────────────────────────────────── #}
|
||||
<div id="ansible-source-view-{{ idx }}"
|
||||
style="display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;">
|
||||
|
||||
<span style="flex-shrink:0;font-size:0.7rem;font-weight:600;text-transform:uppercase;
|
||||
letter-spacing:0.06em;padding:0.15em 0.5em;border-radius:3px;
|
||||
background:{% if src.type == 'git' %}var(--accent-faint){% else %}var(--bg-elevated){% endif %};
|
||||
color:{% if src.type == 'git' %}var(--accent){% else %}var(--text-muted){% endif %};">
|
||||
{{ src.type }}
|
||||
</span>
|
||||
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-weight:600;font-size:0.9rem;">{{ src.name }}</div>
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.1rem;
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||
{% if src.type == 'git' %}
|
||||
{{ src.url or '(no URL)' }}
|
||||
<span style="color:var(--text-dim);margin-left:0.5rem;">branch: {{ src.branch or 'main' }}</span>
|
||||
{% if src.pull_interval_seconds %}<span style="color:var(--text-dim);margin-left:0.5rem;">· pull every {{ src.pull_interval_seconds }}s</span>{% endif %}
|
||||
{% else %}
|
||||
{{ src.path or '(no path)' }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:0.4rem;flex-shrink:0;align-items:center;">
|
||||
<a href="/ansible/browse" class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Browse</a>
|
||||
|
||||
{% if src.type == 'git' %}
|
||||
<span id="ansible-sync-status-{{ idx }}"></span>
|
||||
<button class="btn btn-ghost btn-sm" style="font-size:0.78rem;"
|
||||
hx-post="/settings/ansible/sources/{{ idx }}/sync"
|
||||
hx-target="#ansible-sync-status-{{ idx }}"
|
||||
hx-swap="innerHTML"
|
||||
hx-indicator="#ansible-sync-status-{{ idx }}">Sync</button>
|
||||
{% endif %}
|
||||
|
||||
<button class="btn btn-ghost btn-sm" style="font-size:0.78rem;"
|
||||
onclick="toggleAnsibleEdit({{ idx }})">Edit</button>
|
||||
|
||||
<button class="btn btn-danger btn-sm" style="font-size:0.78rem;"
|
||||
hx-post="/settings/ansible/sources/{{ idx }}/remove"
|
||||
hx-target="#ansible-sources"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Remove source '{{ src.name }}'?">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Inline edit form ──────────────────────────────────────────────── #}
|
||||
<div id="ansible-source-edit-{{ idx }}" style="display:none;
|
||||
border-top:1px solid var(--border);padding:1rem;">
|
||||
<form hx-post="/settings/ansible/sources/{{ idx }}/save"
|
||||
hx-target="#ansible-sources"
|
||||
hx-swap="outerHTML">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;">
|
||||
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Name</label>
|
||||
<input type="text" name="name" value="{{ src.name }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Type</label>
|
||||
<select name="type" id="ansible-edit-type-{{ idx }}"
|
||||
onchange="updateAnsibleEditFields({{ idx }})">
|
||||
<option value="local" {% if src.type == 'local' %}selected{% endif %}>local</option>
|
||||
<option value="git" {% if src.type == 'git' %}selected{% endif %}>git</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="ansible-edit-git-fields-{{ idx }}"
|
||||
style="display:{% if src.type == 'git' %}contents{% else %}none{% endif %};
|
||||
grid-column:1/-1;display:{% if src.type == 'git' %}grid{% else %}none{% endif %};
|
||||
grid-template-columns:1fr 1fr;gap:0.6rem;grid-column:1/-1;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">URL</label>
|
||||
<input type="url" name="url" value="{{ src.url or '' }}" placeholder="https://github.com/org/repo.git">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Branch</label>
|
||||
<input type="text" name="branch" value="{{ src.branch or 'main' }}" placeholder="main">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;grid-column:1/-1;">
|
||||
<label style="font-size:0.8rem;">Pull interval (seconds)</label>
|
||||
<input type="number" name="pull_interval_seconds" value="{{ src.pull_interval_seconds or 3600 }}" min="60">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ansible-edit-local-fields-{{ idx }}"
|
||||
style="display:{% if src.type == 'local' %}grid{% else %}none{% endif %};
|
||||
grid-template-columns:1fr;gap:0.6rem;grid-column:1/-1;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Path</label>
|
||||
<input type="text" name="path" value="{{ src.path or '' }}" placeholder="/opt/playbooks">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;margin-top:0.75rem;">
|
||||
<button type="submit" class="btn btn-sm">Save</button>
|
||||
<button type="button" class="btn btn-ghost btn-sm"
|
||||
onclick="toggleAnsibleEdit({{ idx }})">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="color:var(--text-muted);font-size:0.9rem;text-align:center;padding:2rem;">
|
||||
No sources mustered. Add one below.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Add source ────────────────────────────────────────────────────────── #}
|
||||
<details class="card" style="padding:0;overflow:hidden;">
|
||||
<summary style="display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;
|
||||
cursor:pointer;list-style:none;user-select:none;">
|
||||
<span style="flex:1;font-weight:600;font-size:0.875rem;color:var(--text);">Add Source</span>
|
||||
<span class="btn btn-sm" style="pointer-events:none;">New ▾</span>
|
||||
</summary>
|
||||
|
||||
<form hx-post="/settings/ansible/sources/add"
|
||||
hx-target="#ansible-sources"
|
||||
hx-swap="outerHTML"
|
||||
style="padding:1rem;padding-top:0;border-top:1px solid var(--border);">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;padding-top:1rem;">
|
||||
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Name</label>
|
||||
<input type="text" name="name" placeholder="my-playbooks" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Type</label>
|
||||
<select name="type" id="ansible-add-type"
|
||||
onchange="updateAnsibleAddFields()">
|
||||
<option value="local">local</option>
|
||||
<option value="git">git</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="ansible-add-git-fields"
|
||||
style="display:none;grid-template-columns:1fr 1fr;gap:0.6rem;grid-column:1/-1;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">URL</label>
|
||||
<input type="url" name="url" placeholder="https://github.com/org/repo.git">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Branch</label>
|
||||
<input type="text" name="branch" placeholder="main" value="main">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;grid-column:1/-1;">
|
||||
<label style="font-size:0.8rem;">Pull interval (seconds)</label>
|
||||
<input type="number" name="pull_interval_seconds" value="3600" min="60">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ansible-add-local-fields"
|
||||
style="display:grid;grid-template-columns:1fr;gap:0.6rem;grid-column:1/-1;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Path</label>
|
||||
<input type="text" name="path" placeholder="/opt/playbooks">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button type="submit" class="btn btn-sm" style="margin-top:0.75rem;width:100%;">
|
||||
Add Source
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleAnsibleEdit(idx) {
|
||||
var view = document.getElementById('ansible-source-view-' + idx);
|
||||
var edit = document.getElementById('ansible-source-edit-' + idx);
|
||||
var showingEdit = edit.style.display !== 'none';
|
||||
edit.style.display = showingEdit ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function updateAnsibleEditFields(idx) {
|
||||
var t = document.getElementById('ansible-edit-type-' + idx).value;
|
||||
document.getElementById('ansible-edit-git-fields-' + idx).style.display = t === 'git' ? 'grid' : 'none';
|
||||
document.getElementById('ansible-edit-local-fields-' + idx).style.display = t === 'local' ? 'grid' : 'none';
|
||||
}
|
||||
|
||||
function updateAnsibleAddFields() {
|
||||
var t = document.getElementById('ansible-add-type').value;
|
||||
document.getElementById('ansible-add-git-fields').style.display = t === 'git' ? 'grid' : 'none';
|
||||
document.getElementById('ansible-add-local-fields').style.display = t === 'local' ? 'grid' : 'none';
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
{# settings/_catalog_partial.html — HTMX partial for plugin catalog #}
|
||||
<div id="plugin-catalog">
|
||||
|
||||
{% if error %}
|
||||
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;margin-bottom:0.75rem;">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if catalog %}
|
||||
<div style="display:grid;gap:0.75rem;">
|
||||
{% for plugin in catalog %}
|
||||
{% set is_installed = plugin.name in installed_names %}
|
||||
{% set is_loaded = plugin.name in loaded_names %}
|
||||
{% set installed_ver = installed_versions.get(plugin.name, "") %}
|
||||
{# update_available: catalog version is strictly newer than what's on disk #}
|
||||
{% set update_available = is_installed and installed_ver and installed_ver != plugin.version %}
|
||||
|
||||
<div class="card" style="margin-bottom:0;padding:1rem 1.25rem;{% if update_available %}border-color:var(--gold);{% endif %}">
|
||||
<div style="display:flex;align-items:flex-start;gap:1rem;">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;">
|
||||
<span style="font-weight:600;color:var(--text);font-size:0.9rem;">{{ plugin.name }}</span>
|
||||
<span style="font-size:0.75rem;color:var(--text-muted);">v{{ plugin.version }}</span>
|
||||
|
||||
{% if update_available %}
|
||||
<span class="badge badge-gold" style="font-size:0.68rem;">
|
||||
Update available — installed v{{ installed_ver }}
|
||||
</span>
|
||||
{% elif is_loaded %}
|
||||
<span class="badge badge-green" style="font-size:0.68rem;">Active</span>
|
||||
{% elif is_installed %}
|
||||
<span class="badge" style="background:var(--bg-elevated);color:var(--text-muted);font-size:0.68rem;">Installed</span>
|
||||
{% endif %}
|
||||
|
||||
{% for tag in plugin.tags %}
|
||||
<span style="font-size:0.68rem;padding:0.1em 0.4em;background:var(--bg-elevated);color:var(--text-muted);border-radius:3px;">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if plugin.description %}
|
||||
<div style="font-size:0.82rem;color:var(--text-muted);margin-top:0.25rem;">{{ plugin.description }}</div>
|
||||
{% endif %}
|
||||
<div style="font-size:0.75rem;color:var(--text-dim);margin-top:0.15rem;display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;">
|
||||
{% if plugin.author %}<span>by {{ plugin.author }}</span>{% endif %}
|
||||
{% if plugin.license %}<span style="color:var(--text-muted);">{{ plugin.license }}</span>{% endif %}
|
||||
{% if plugin.min_app_version %}<span style="color:var(--text-muted);">requires v{{ plugin.min_app_version }}+</span>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:0.5rem;flex-shrink:0;align-items:center;">
|
||||
{% if plugin.homepage %}
|
||||
<a href="{{ plugin.homepage }}" target="_blank" rel="noopener"
|
||||
class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Docs</a>
|
||||
{% elif plugin.repository_url %}
|
||||
<a href="{{ plugin.repository_url }}" target="_blank" rel="noopener"
|
||||
class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Source</a>
|
||||
{% endif %}
|
||||
|
||||
{% if update_available %}
|
||||
{# Installed but outdated — offer update (download + restart) #}
|
||||
<form method="post"
|
||||
action="/settings/plugins/install/{{ plugin.name }}"
|
||||
hx-post="/settings/plugins/install/{{ plugin.name }}"
|
||||
hx-target="#catalog-result-{{ plugin.name }}"
|
||||
hx-swap="outerHTML"
|
||||
style="margin:0;">
|
||||
<input type="hidden" name="download_url" value="{{ plugin.download_url }}">
|
||||
<input type="hidden" name="checksum_sha256" value="{{ plugin.checksum_sha256 }}">
|
||||
<button type="submit" class="btn btn-warn btn-sm" style="font-size:0.78rem;">Update</button>
|
||||
</form>
|
||||
|
||||
{% elif is_loaded %}
|
||||
{# Active and up to date — no action needed #}
|
||||
|
||||
{% elif is_installed %}
|
||||
{# Installed but not active — offer hot-reload #}
|
||||
<form method="post"
|
||||
action="/settings/plugins/reload/{{ plugin.name }}"
|
||||
hx-post="/settings/plugins/reload/{{ plugin.name }}"
|
||||
hx-target="#catalog-result-{{ plugin.name }}"
|
||||
hx-swap="outerHTML"
|
||||
style="margin:0;">
|
||||
<button type="submit" class="btn btn-sm" style="font-size:0.78rem;">Activate</button>
|
||||
</form>
|
||||
|
||||
{% else %}
|
||||
{# Not installed — offer install #}
|
||||
<form method="post"
|
||||
action="/settings/plugins/install/{{ plugin.name }}"
|
||||
hx-post="/settings/plugins/install/{{ plugin.name }}"
|
||||
hx-target="#catalog-result-{{ plugin.name }}"
|
||||
hx-swap="outerHTML"
|
||||
style="margin:0;">
|
||||
<input type="hidden" name="download_url" value="{{ plugin.download_url }}">
|
||||
<input type="hidden" name="checksum_sha256" value="{{ plugin.checksum_sha256 }}">
|
||||
<button type="submit" class="btn btn-sm" style="font-size:0.78rem;">Install</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Inline result placeholder — replaced by _install_result.html after action #}
|
||||
<div id="catalog-result-{{ plugin.name }}"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% elif not error %}
|
||||
<div style="color:var(--text-muted);font-size:0.85rem;">No plugins listed in the catalog.</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
{# settings/_install_result.html — inline result after install/reload action #}
|
||||
<div id="catalog-result-{{ name }}"
|
||||
style="margin-top:0.6rem;padding:0.5rem 0.75rem;border-radius:5px;font-size:0.82rem;
|
||||
background:{% if success %}var(--green-dim){% else %}var(--red-dim){% endif %};
|
||||
color:{% if success %}var(--green){% else %}#ff8090{% endif %};">
|
||||
{{ message }}
|
||||
{% if restart_required %}
|
||||
·
|
||||
<form method="post" action="/settings/plugins/restart/"
|
||||
hx-post="/settings/plugins/restart/"
|
||||
hx-target="#restart-banner"
|
||||
hx-swap="outerHTML"
|
||||
style="display:inline;margin:0;">
|
||||
<button type="submit"
|
||||
style="background:none;border:none;padding:0;color:var(--yellow);cursor:pointer;font-size:0.82rem;text-decoration:underline;">
|
||||
Restart now
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,99 @@
|
||||
{# settings/_plugin_repos.html — HTMX partial for plugin repository management #}
|
||||
<div id="plugin-repos">
|
||||
|
||||
{% if repos %}
|
||||
<div style="display:grid;gap:0.6rem;margin-bottom:0.6rem;">
|
||||
{% for repo in repos %}
|
||||
{% set idx = loop.index0 %}
|
||||
|
||||
<div class="card" style="padding:0;overflow:visible;">
|
||||
|
||||
{# ── View row ────────────────────────────────────────────────────────── #}
|
||||
<div id="plugin-repo-view-{{ idx }}"
|
||||
style="display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-weight:600;font-size:0.88rem;">{{ repo.name or repo.url }}</div>
|
||||
<div style="font-size:0.77rem;color:var(--text-muted);margin-top:0.1rem;
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ repo.url }}</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:0.4rem;flex-shrink:0;">
|
||||
<button class="btn btn-ghost btn-sm" style="font-size:0.78rem;"
|
||||
onclick="toggleRepoEdit({{ idx }})">Edit</button>
|
||||
<button class="btn btn-danger btn-sm" style="font-size:0.78rem;"
|
||||
hx-post="/settings/plugins/repos/{{ idx }}/remove"
|
||||
hx-target="#plugin-repos"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Remove repository '{{ repo.name or repo.url }}'?">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Inline edit form ──────────────────────────────────────────────── #}
|
||||
<div id="plugin-repo-edit-{{ idx }}"
|
||||
style="display:none;border-top:1px solid var(--border);padding:1rem;">
|
||||
<form hx-post="/settings/plugins/repos/{{ idx }}/save"
|
||||
hx-target="#plugin-repos"
|
||||
hx-swap="outerHTML">
|
||||
<div style="display:grid;grid-template-columns:1fr 2fr;gap:0.6rem;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Name</label>
|
||||
<input type="text" name="name" value="{{ repo.name }}" placeholder="My Plugins">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Index URL</label>
|
||||
<input type="url" name="url" value="{{ repo.url }}"
|
||||
placeholder="https://example.com/plugins/index.yaml" required>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;margin-top:0.75rem;">
|
||||
<button type="submit" class="btn btn-sm">Save</button>
|
||||
<button type="button" class="btn btn-ghost btn-sm"
|
||||
onclick="toggleRepoEdit({{ idx }})">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="color:var(--text-muted);font-size:0.88rem;text-align:center;padding:1.5rem;margin-bottom:0.6rem;">
|
||||
No repositories charted. Add one below.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Add repository ────────────────────────────────────────────────────────── #}
|
||||
<details class="card" style="padding:0;overflow:hidden;">
|
||||
<summary style="display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;
|
||||
cursor:pointer;list-style:none;user-select:none;">
|
||||
<span style="flex:1;font-weight:600;font-size:0.875rem;color:var(--text);">Add Repository</span>
|
||||
<span class="btn btn-sm" style="pointer-events:none;">New ▾</span>
|
||||
</summary>
|
||||
<form hx-post="/settings/plugins/repos/add"
|
||||
hx-target="#plugin-repos"
|
||||
hx-swap="outerHTML"
|
||||
style="padding:1rem;padding-top:0;border-top:1px solid var(--border);">
|
||||
<div style="display:grid;grid-template-columns:1fr 2fr;gap:0.6rem;padding-top:1rem;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Name</label>
|
||||
<input type="text" name="name" placeholder="My Plugins">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.8rem;">Index URL</label>
|
||||
<input type="url" name="url"
|
||||
placeholder="https://example.com/plugins/index.yaml" required>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-sm" style="margin-top:0.75rem;width:100%;">
|
||||
Add Repository
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleRepoEdit(idx) {
|
||||
var edit = document.getElementById('plugin-repo-edit-' + idx);
|
||||
edit.style.display = edit.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,6 @@
|
||||
{# settings/_restart_pending.html — shown after restart is triggered #}
|
||||
<div id="restart-banner"
|
||||
style="padding:0.75rem 1rem;border-radius:6px;background:var(--gold-dim);
|
||||
border:1px solid var(--gold);color:var(--gold);font-size:0.85rem;">
|
||||
Restart initiated — the app will reload in a moment. Refresh this page in a few seconds.
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
{# settings/_tabs.html — include at top of each settings section #}
|
||||
<h1 class="page-title">Settings</h1>
|
||||
<div style="display:flex;gap:0;border-bottom:1px solid var(--border-mid);margin-bottom:1.5rem;">
|
||||
{% 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/"),
|
||||
] %}
|
||||
{% for key, label, href in tabs %}
|
||||
<a href="{{ href }}"
|
||||
style="padding:0.6rem 1.1rem;font-size:0.875rem;border-bottom:2px solid {{ 'var(--accent)' if active_tab == key else 'transparent' }};color:{{ 'var(--text)' if active_tab == key else 'var(--text-muted)' }};font-weight:{{ '500' if active_tab == key else 'normal' }};text-decoration:none;">
|
||||
{{ label }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
{# fabledscryer/templates/settings/ansible.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings — Ansible — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
{% set active_tab = "ansible" %}
|
||||
{% include "settings/_tabs.html" %}
|
||||
|
||||
<div style="max-width:720px;">
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:0.75rem;">
|
||||
<div class="section-title">Ansible Sources</div>
|
||||
<a href="/ansible/" class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Run History →</a>
|
||||
</div>
|
||||
<p style="color:var(--text-muted);font-size:0.84rem;margin-bottom:1rem;">
|
||||
Sources are directories of playbooks — either a local path or a git repository
|
||||
cloned automatically. Add as many as you need; each can be browsed and run independently.
|
||||
</p>
|
||||
{% include "settings/_ansible_sources.html" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,178 @@
|
||||
{# fabledscryer/templates/settings/auth.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings — Auth — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
{% set active_tab = "auth" %}
|
||||
{% include "settings/_tabs.html" %}
|
||||
|
||||
<form method="post" action="/settings/auth/">
|
||||
<div style="display:grid;gap:1.25rem;max-width:640px;">
|
||||
|
||||
{# ── OIDC ─────────────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1.25rem;">OIDC / SSO</h2>
|
||||
<p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem;">
|
||||
Supports any OIDC provider — Authentik, Keycloak, Authelia, etc. Uses Authorization Code flow.
|
||||
Local admin login always works regardless of OIDC status.
|
||||
</p>
|
||||
|
||||
<div class="form-group" style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<input type="checkbox" name="oidc.enabled" id="oidc-enabled"
|
||||
{% if settings['oidc.enabled'] %}checked{% endif %}>
|
||||
<label for="oidc-enabled" style="margin:0;">Enable OIDC login</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Discovery URL</label>
|
||||
<input type="text" name="oidc.discovery_url" value="{{ settings['oidc.discovery_url'] }}"
|
||||
placeholder="https://auth.example.com/application/o/fabledscryer/.well-known/openid-configuration">
|
||||
<p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
|
||||
Authentik: <code>https://<host>/application/o/<slug>/.well-known/openid-configuration</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Client ID</label>
|
||||
<input type="text" name="oidc.client_id" value="{{ settings['oidc.client_id'] }}"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Client Secret <span style="color:var(--text-dim);font-size:0.8rem;">(blank = keep current)</span></label>
|
||||
<input type="password" name="oidc.client_secret" placeholder="••••••••"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Scopes</label>
|
||||
<input type="text" name="oidc.scopes" value="{{ settings['oidc.scopes'] }}"
|
||||
placeholder="openid profile email">
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Username claim</label>
|
||||
<input type="text" name="oidc.username_claim" value="{{ settings['oidc.username_claim'] }}"
|
||||
placeholder="preferred_username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email claim</label>
|
||||
<input type="text" name="oidc.email_claim" value="{{ settings['oidc.email_claim'] }}"
|
||||
placeholder="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Groups claim</label>
|
||||
<input type="text" name="oidc.groups_claim" value="{{ settings['oidc.groups_claim'] }}"
|
||||
placeholder="groups">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Admin group name</label>
|
||||
<input type="text" name="oidc.admin_group" value="{{ settings['oidc.admin_group'] }}"
|
||||
placeholder="fabledscryer-admins">
|
||||
<p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">Members → admin role</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Operator group name</label>
|
||||
<input type="text" name="oidc.operator_group" value="{{ settings['oidc.operator_group'] }}"
|
||||
placeholder="fabledscryer-operators">
|
||||
<p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">Members → operator role; others → viewer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── LDAP ─────────────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1.25rem;">LDAP</h2>
|
||||
<p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem;">
|
||||
Binds user credentials against an LDAP/AD directory. Requires the
|
||||
<code>ldap3</code> Python package (<code>pip install ldap3</code>).
|
||||
If both LDAP and OIDC are enabled, the login form tries LDAP; OIDC uses the SSO button.
|
||||
</p>
|
||||
|
||||
<div class="form-group" style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<input type="checkbox" name="ldap.enabled" id="ldap-enabled"
|
||||
{% if settings['ldap.enabled'] %}checked{% endif %}>
|
||||
<label for="ldap-enabled" style="margin:0;">Enable LDAP login</label>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:end;">
|
||||
<div class="form-group">
|
||||
<label>LDAP host</label>
|
||||
<input type="text" name="ldap.host" value="{{ settings['ldap.host'] }}"
|
||||
placeholder="ldap.example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Port</label>
|
||||
<input type="number" name="ldap.port" value="{{ settings['ldap.port'] }}" style="width:80px;">
|
||||
</div>
|
||||
<div class="form-group" style="display:flex;align-items:center;gap:0.5rem;padding-bottom:0.1rem;">
|
||||
<input type="checkbox" name="ldap.tls" id="ldap-tls"
|
||||
{% if settings['ldap.tls'] %}checked{% endif %}>
|
||||
<label for="ldap-tls" style="margin:0;white-space:nowrap;">StartTLS</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Service account bind DN</label>
|
||||
<input type="text" name="ldap.bind_dn" value="{{ settings['ldap.bind_dn'] }}"
|
||||
placeholder="cn=svc-fabledscryer,ou=service,dc=example,dc=com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Bind password <span style="color:var(--text-dim);font-size:0.8rem;">(blank = keep current)</span></label>
|
||||
<input type="password" name="ldap.bind_password" placeholder="••••••••"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Base DN</label>
|
||||
<input type="text" name="ldap.base_dn" value="{{ settings['ldap.base_dn'] }}"
|
||||
placeholder="ou=users,dc=example,dc=com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>User search filter</label>
|
||||
<input type="text" name="ldap.user_filter" value="{{ settings['ldap.user_filter'] }}"
|
||||
placeholder="(uid={username})">
|
||||
<p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
|
||||
<code>{username}</code> is replaced with the login username. AD example: <code>(sAMAccountName={username})</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Admin group DN</label>
|
||||
<input type="text" name="ldap.admin_group_dn" value="{{ settings['ldap.admin_group_dn'] }}"
|
||||
placeholder="cn=scryer-admins,ou=groups,dc=example,dc=com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Operator group DN</label>
|
||||
<input type="text" name="ldap.operator_group_dn" value="{{ settings['ldap.operator_group_dn'] }}"
|
||||
placeholder="cn=scryer-operators,ou=groups,dc=example,dc=com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Username attribute</label>
|
||||
<input type="text" name="ldap.attr_username" value="{{ settings['ldap.attr_username'] }}"
|
||||
placeholder="uid">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email attribute</label>
|
||||
<input type="text" name="ldap.attr_email" value="{{ settings['ldap.attr_email'] }}"
|
||||
placeholder="mail">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="margin-top:1.25rem;">
|
||||
<button type="submit" class="btn">Save</button>
|
||||
<span style="color:var(--text-muted);font-size:0.82rem;margin-left:1rem;">
|
||||
Changes take effect immediately.
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,38 @@
|
||||
{# fabledscryer/templates/settings/general.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings — General — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
{% set active_tab = "general" %}
|
||||
{% include "settings/_tabs.html" %}
|
||||
|
||||
<form method="post" action="/settings/general/">
|
||||
<div class="card" style="max-width:640px;">
|
||||
<h2 class="section-title" style="margin-bottom:1.25rem;">General</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Session lifetime <span style="color:var(--text-muted);font-size:0.8rem;">(hours)</span></label>
|
||||
<input type="number" name="session.lifetime_hours" min="1" max="720"
|
||||
value="{{ settings['session.lifetime_hours'] }}" style="max-width:120px;">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Data retention <span style="color:var(--text-muted);font-size:0.8rem;">(days)</span></label>
|
||||
<input type="number" name="data.retention_days" min="1"
|
||||
value="{{ settings['data.retention_days'] }}" style="max-width:120px;">
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">Old ping/DNS results older than this are pruned by the cleanup job.</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Monitor poll interval <span style="color:var(--text-muted);font-size:0.8rem;">(seconds)</span></label>
|
||||
<input type="number" name="monitors.poll_interval_seconds" min="10"
|
||||
value="{{ settings['monitors.poll_interval_seconds'] }}" style="max-width:120px;">
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">Requires restart to take effect.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:1rem;display:flex;align-items:center;gap:1rem;">
|
||||
<button type="submit" class="btn">Save</button>
|
||||
<span style="font-size:0.82rem;color:var(--text-muted);">Changes to session lifetime take effect immediately.</span>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,157 @@
|
||||
{# fabledscryer/templates/settings/index.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="page-title">Settings</h1>
|
||||
<form method="post" action="/settings/">
|
||||
<div style="display:grid;gap:1.5rem;">
|
||||
|
||||
{# ── General ──────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">General</h2>
|
||||
<div class="form-group">
|
||||
<label>Session lifetime (hours)</label>
|
||||
<input type="number" name="session.lifetime_hours" min="1" max="720"
|
||||
value="{{ settings['session.lifetime_hours'] }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Data retention (days)</label>
|
||||
<input type="number" name="data.retention_days" min="1"
|
||||
value="{{ settings['data.retention_days'] }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Monitor poll interval (seconds)</label>
|
||||
<input type="number" name="monitors.poll_interval_seconds" min="10"
|
||||
value="{{ settings['monitors.poll_interval_seconds'] }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── SMTP ─────────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Email (SMTP)</h2>
|
||||
<div class="form-group">
|
||||
<label>SMTP host</label>
|
||||
<input type="text" name="smtp.host" value="{{ settings['smtp.host'] }}" placeholder="mail.example.com">
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Port</label>
|
||||
<input type="number" name="smtp.port" value="{{ settings['smtp.port'] }}">
|
||||
</div>
|
||||
<div class="form-group" style="display:flex;align-items:center;gap:0.5rem;padding-top:1.5rem;">
|
||||
<input type="checkbox" name="smtp.tls" id="smtp-tls"
|
||||
{% if settings['smtp.tls'] %}checked{% endif %}>
|
||||
<label for="smtp-tls" style="margin:0;">Use TLS</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" name="smtp.username" value="{{ settings['smtp.username'] }}" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password <span style="color:#606080;font-size:0.8rem;">(leave blank to keep current)</span></label>
|
||||
<input type="password" name="smtp.password" placeholder="••••••••" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Recipients <span style="color:#606080;font-size:0.8rem;">(comma-separated)</span></label>
|
||||
<input type="text" name="smtp.recipients"
|
||||
value="{{ settings['smtp.recipients'] | join(', ') }}"
|
||||
placeholder="admin@example.com, ops@example.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Webhook ──────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Webhook</h2>
|
||||
<div class="form-group">
|
||||
<label>Webhook URL <span style="color:#606080;font-size:0.8rem;">(leave blank to disable)</span></label>
|
||||
<input type="text" name="webhook.url" value="{{ settings['webhook.url'] }}"
|
||||
placeholder="https://discord.com/api/webhooks/...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Payload template <span style="color:#606080;font-size:0.8rem;">(Jinja2, must produce valid JSON)</span></label>
|
||||
<textarea name="webhook.template" rows="3" style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Ansible Sources ──────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Ansible Sources</h2>
|
||||
<p style="color:#606080;font-size:0.85rem;margin-bottom:0.75rem;">JSON array of source objects. Each requires <code>name</code>, <code>type</code> (git or local), and either <code>url</code> or <code>path</code>.</p>
|
||||
<textarea name="ansible.sources" rows="8" style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['ansible.sources'] | tojson(indent=2) }}</textarea>
|
||||
</div>
|
||||
|
||||
{# ── Plugins ──────────────────────────────────────────────────────────── #}
|
||||
{% if discovered_plugins %}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1rem;">Plugins</h2>
|
||||
{% for plugin in discovered_plugins %}
|
||||
<div style="border:1px solid #2a2a4a;border-radius:4px;padding:1rem;margin-bottom:0.75rem;">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;">
|
||||
<input type="checkbox" name="plugin.{{ plugin._dir }}.enabled"
|
||||
id="plugin-{{ plugin._dir }}-enabled"
|
||||
{% if plugin._enabled %}checked{% endif %}>
|
||||
<label for="plugin-{{ plugin._dir }}-enabled"
|
||||
style="margin:0;font-weight:bold;color:#c0c0e0;">
|
||||
{{ plugin.get('name', plugin._dir) }}
|
||||
<span style="color:#606080;font-size:0.8rem;font-weight:normal;">
|
||||
v{{ plugin.get('version', '?') }} — {{ plugin.get('description', '') }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% for cfg_key, cfg_default in plugin.get('config', {}).items() %}
|
||||
{% if cfg_default is mapping %}
|
||||
{# Nested dict — render each sub-key as its own field #}
|
||||
<div style="margin-left:1.5rem;margin-bottom:0.6rem;">
|
||||
<div style="font-size:0.82rem;color:var(--text-muted);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.04em;">{{ cfg_key }}</div>
|
||||
{% set sub_cfg = plugin._config.get(cfg_key, cfg_default) if plugin._config.get(cfg_key, cfg_default) is mapping else cfg_default %}
|
||||
{% for sub_key, sub_default in cfg_default.items() %}
|
||||
<div class="form-group" style="margin-left:1rem;">
|
||||
{% if sub_default is sameas false or sub_default is sameas true %}
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;">
|
||||
<input type="checkbox"
|
||||
name="plugin.{{ plugin._dir }}.{{ cfg_key }}.{{ sub_key }}"
|
||||
id="plugin-{{ plugin._dir }}-{{ cfg_key }}-{{ sub_key }}"
|
||||
{% if sub_cfg.get(sub_key, sub_default) %}checked{% endif %}>
|
||||
<label for="plugin-{{ plugin._dir }}-{{ cfg_key }}-{{ sub_key }}"
|
||||
style="margin:0;font-size:0.85rem;">{{ sub_key }}</label>
|
||||
</div>
|
||||
{% else %}
|
||||
<label style="font-size:0.85rem;">{{ sub_key }}</label>
|
||||
<input type="text"
|
||||
name="plugin.{{ plugin._dir }}.{{ cfg_key }}.{{ sub_key }}"
|
||||
value="{{ sub_cfg.get(sub_key, sub_default) }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% elif cfg_default is sameas false or cfg_default is sameas true %}
|
||||
<div class="form-group" style="margin-left:1.5rem;display:flex;align-items:center;gap:0.5rem;">
|
||||
<input type="checkbox"
|
||||
name="plugin.{{ plugin._dir }}.{{ cfg_key }}"
|
||||
id="plugin-{{ plugin._dir }}-{{ cfg_key }}"
|
||||
{% if plugin._config.get(cfg_key, cfg_default) %}checked{% endif %}>
|
||||
<label for="plugin-{{ plugin._dir }}-{{ cfg_key }}" style="margin:0;font-size:0.85rem;">{{ cfg_key }}</label>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="form-group" style="margin-left:1.5rem;">
|
||||
<label style="font-size:0.85rem;">{{ cfg_key }}</label>
|
||||
<input type="text" name="plugin.{{ plugin._dir }}.{{ cfg_key }}"
|
||||
value="{{ plugin._config.get(cfg_key, cfg_default) }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div style="margin-top:1.5rem;">
|
||||
<button type="submit" class="btn">Save Settings</button>
|
||||
<span style="color:#606080;font-size:0.85rem;margin-left:1rem;">
|
||||
Changes take effect immediately. Monitor interval, plugin enable/disable require a restart.
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,74 @@
|
||||
{# fabledscryer/templates/settings/notifications.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings — Notifications — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
{% set active_tab = "notifications" %}
|
||||
{% include "settings/_tabs.html" %}
|
||||
|
||||
<form method="post" action="/settings/notifications/">
|
||||
<div style="display:grid;gap:1.25rem;max-width:640px;">
|
||||
|
||||
{# ── SMTP ──────────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1.25rem;">Email (SMTP)</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label>SMTP host</label>
|
||||
<input type="text" name="smtp.host" value="{{ settings['smtp.host'] }}"
|
||||
placeholder="mail.example.com">
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
|
||||
<div class="form-group">
|
||||
<label>Port</label>
|
||||
<input type="number" name="smtp.port" value="{{ settings['smtp.port'] }}">
|
||||
</div>
|
||||
<div class="form-group" style="display:flex;align-items:center;gap:0.5rem;padding-top:1.5rem;">
|
||||
<input type="checkbox" name="smtp.tls" id="smtp-tls"
|
||||
{% if settings['smtp.tls'] %}checked{% endif %}>
|
||||
<label for="smtp-tls" style="margin:0;">Use TLS</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" name="smtp.username" value="{{ settings['smtp.username'] }}"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Password <span style="color:var(--text-muted);font-size:0.8rem;">(leave blank to keep current)</span></label>
|
||||
<input type="password" name="smtp.password" placeholder="••••••••" autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Recipients <span style="color:var(--text-muted);font-size:0.8rem;">(comma-separated)</span></label>
|
||||
<input type="text" name="smtp.recipients"
|
||||
value="{{ settings['smtp.recipients'] | join(', ') }}"
|
||||
placeholder="admin@example.com, ops@example.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Webhook ───────────────────────────────────────────────────────────── #}
|
||||
<div class="card">
|
||||
<h2 class="section-title" style="margin-bottom:1.25rem;">Webhook</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label>URL <span style="color:var(--text-muted);font-size:0.8rem;">(leave blank to disable)</span></label>
|
||||
<input type="text" name="webhook.url" value="{{ settings['webhook.url'] }}"
|
||||
placeholder="https://discord.com/api/webhooks/...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Payload template <span style="color:var(--text-muted);font-size:0.8rem;">(Jinja2, must produce valid JSON)</span></label>
|
||||
<textarea name="webhook.template" rows="4"
|
||||
style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="margin-top:1rem;">
|
||||
<button type="submit" class="btn">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,134 @@
|
||||
{# fabledscryer/templates/settings/plugin_detail.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ plugin.get('name', plugin._dir) }} Settings — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
{% set active_tab = "plugins" %}
|
||||
{% include "settings/_tabs.html" %}
|
||||
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
|
||||
<a href="/settings/plugins/" class="btn btn-ghost btn-sm">← Plugins</a>
|
||||
<h1 class="page-title" style="margin-bottom:0;">{{ plugin.get('name', plugin._dir) }}</h1>
|
||||
<span style="color:var(--text-muted);font-size:0.82rem;">v{{ plugin.get('version', '?') }}</span>
|
||||
{% if fail_reason %}
|
||||
<span style="font-size:0.75rem;padding:0.15em 0.55em;border-radius:3px;
|
||||
background:color-mix(in srgb,var(--red) 15%,var(--bg));color:var(--red);">Error</span>
|
||||
{% elif is_loaded %}
|
||||
<span style="font-size:0.75rem;padding:0.15em 0.55em;border-radius:3px;
|
||||
background:color-mix(in srgb,var(--green) 12%,var(--bg));color:var(--green);">Loaded</span>
|
||||
{% elif plugin._enabled %}
|
||||
<span style="font-size:0.75rem;padding:0.15em 0.55em;border-radius:3px;
|
||||
background:var(--bg-elevated);color:var(--text-muted);">Enabled (restart required)</span>
|
||||
{% else %}
|
||||
<span style="font-size:0.75rem;padding:0.15em 0.55em;border-radius:3px;
|
||||
background:var(--bg-elevated);color:var(--text-muted);">Disabled</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if fail_reason %}
|
||||
<div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.6rem 0.9rem;margin-bottom:1rem;
|
||||
background:color-mix(in srgb,var(--red) 10%,var(--bg));
|
||||
border:1px solid color-mix(in srgb,var(--red) 30%,var(--border));
|
||||
border-radius:6px;font-size:0.84rem;max-width:720px;">
|
||||
<span style="color:var(--red);flex-shrink:0;">✕</span>
|
||||
<span><strong style="color:var(--red);">Failed to load</strong>
|
||||
<span style="color:var(--text-muted);margin-left:0.3rem;">— {{ fail_reason }}</span>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if plugin.get('description') %}
|
||||
<p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1.25rem;max-width:620px;">{{ plugin.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/settings/plugins/{{ plugin._dir }}/" style="max-width:720px;">
|
||||
|
||||
{# ── Enable toggle ────────────────────────────────────────────────────────── #}
|
||||
<div class="card" style="padding:1rem 1.25rem;margin-bottom:1rem;">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;">
|
||||
<input type="checkbox"
|
||||
name="plugin.{{ plugin._dir }}.enabled"
|
||||
id="plugin-{{ plugin._dir }}-enabled"
|
||||
{% if plugin._enabled %}checked{% endif %}>
|
||||
<label for="plugin-{{ plugin._dir }}-enabled" style="margin:0;font-weight:600;cursor:pointer;">
|
||||
Enable this plugin
|
||||
</label>
|
||||
</div>
|
||||
<div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.4rem;margin-left:1.6rem;">
|
||||
Enable/disable changes take effect after a restart.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Config fields ─────────────────────────────────────────────────────────── #}
|
||||
{% if plugin.get('config') %}
|
||||
<div class="card" style="padding:1.25rem;margin-bottom:1rem;">
|
||||
<div class="section-title" style="margin-bottom:1rem;">Configuration</div>
|
||||
<div style="display:grid;gap:0.75rem;">
|
||||
|
||||
{% for cfg_key, cfg_default in plugin.config.items() %}
|
||||
|
||||
{% if cfg_default is iterable and cfg_default is not string and cfg_default is not mapping %}
|
||||
<div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.5rem 0.75rem;
|
||||
background:var(--bg);border-radius:5px;border:1px solid var(--border);
|
||||
font-size:0.82rem;color:var(--text-muted);">
|
||||
<span style="flex-shrink:0;">📋</span>
|
||||
<span><strong style="color:var(--text);">{{ cfg_key }}</strong> — list config, edit in
|
||||
<code>plugin.yaml</code> ({{ cfg_default | length }} item{{ 's' if cfg_default | length != 1 }}).</span>
|
||||
</div>
|
||||
|
||||
{% elif cfg_default is mapping %}
|
||||
<div style="padding:0.75rem;background:var(--bg);border-radius:5px;border:1px solid var(--border);">
|
||||
<div style="font-size:0.74rem;color:var(--text-muted);text-transform:uppercase;
|
||||
letter-spacing:0.05em;margin-bottom:0.6rem;">{{ cfg_key }}</div>
|
||||
{% set sub_cfg = plugin._config.get(cfg_key, cfg_default) if plugin._config.get(cfg_key, cfg_default) is mapping else cfg_default %}
|
||||
<div style="display:grid;gap:0.5rem;">
|
||||
{% for sub_key, sub_default in cfg_default.items() %}
|
||||
{% if sub_default is sameas false or sub_default is sameas true %}
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;">
|
||||
<input type="checkbox"
|
||||
name="plugin.{{ plugin._dir }}.{{ cfg_key }}.{{ sub_key }}"
|
||||
id="plugin-{{ plugin._dir }}-{{ cfg_key }}-{{ sub_key }}"
|
||||
{% if sub_cfg.get(sub_key, sub_default) %}checked{% endif %}>
|
||||
<label for="plugin-{{ plugin._dir }}-{{ cfg_key }}-{{ sub_key }}"
|
||||
style="margin:0;font-size:0.85rem;color:var(--text);">{{ sub_key }}</label>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.82rem;">{{ sub_key }}</label>
|
||||
<input type="text"
|
||||
name="plugin.{{ plugin._dir }}.{{ cfg_key }}.{{ sub_key }}"
|
||||
value="{{ sub_cfg.get(sub_key, sub_default) }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% elif cfg_default is sameas false or cfg_default is sameas true %}
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;">
|
||||
<input type="checkbox"
|
||||
name="plugin.{{ plugin._dir }}.{{ cfg_key }}"
|
||||
id="plugin-{{ plugin._dir }}-{{ cfg_key }}"
|
||||
{% if plugin._config.get(cfg_key, cfg_default) %}checked{% endif %}>
|
||||
<label for="plugin-{{ plugin._dir }}-{{ cfg_key }}"
|
||||
style="margin:0;font-size:0.85rem;color:var(--text);">{{ cfg_key }}</label>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:0.82rem;">{{ cfg_key }}</label>
|
||||
<input type="{% if 'password' in cfg_key or 'secret' in cfg_key %}password{% else %}text{% endif %}"
|
||||
name="plugin.{{ plugin._dir }}.{{ cfg_key }}"
|
||||
value="{% if 'password' in cfg_key or 'secret' in cfg_key %}{% else %}{{ plugin._config.get(cfg_key, cfg_default) }}{% endif %}"
|
||||
{% if 'password' in cfg_key or 'secret' in cfg_key %}placeholder="••••••••"{% endif %}>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<button type="submit" class="btn">Save</button>
|
||||
|
||||
</form>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,116 @@
|
||||
{# fabledscryer/templates/settings/plugins.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings — Plugins — Fabled Scryer{% endblock %}
|
||||
{% block content %}
|
||||
{% set active_tab = "plugins" %}
|
||||
{% include "settings/_tabs.html" %}
|
||||
|
||||
{# ── Restart banner ────────────────────────────────────────────────────────── #}
|
||||
<div id="restart-banner"></div>
|
||||
|
||||
{# ── Installed Plugins ─────────────────────────────────────────────────────── #}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
|
||||
<div class="section-title">Installed Plugins</div>
|
||||
<form method="post" action="/settings/plugins/restart/"
|
||||
hx-post="/settings/plugins/restart/"
|
||||
hx-target="#restart-banner"
|
||||
hx-swap="outerHTML"
|
||||
onsubmit="return confirm('Restart the app now? This will briefly interrupt all monitoring.')"
|
||||
style="margin:0;">
|
||||
<button type="submit" class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Restart App</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if not discovered_plugins %}
|
||||
<div class="card" style="color:var(--text-muted);font-size:0.9rem;margin-bottom:1.5rem;">
|
||||
No plugins installed. The table awaits new seats.
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="display:grid;gap:0.6rem;max-width:720px;margin-bottom:1.5rem;">
|
||||
{% for plugin in discovered_plugins %}
|
||||
{% set fail_reason = plugin_failures.get(plugin._dir) %}
|
||||
<div class="card" style="padding:0.85rem 1rem;display:flex;align-items:center;gap:0.75rem;">
|
||||
|
||||
{# Status indicator #}
|
||||
{% if fail_reason %}
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;" title="{{ fail_reason }}"></span>
|
||||
{% elif plugin._enabled %}
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;"></span>
|
||||
{% else %}
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:var(--border-mid);flex-shrink:0;"></span>
|
||||
{% endif %}
|
||||
|
||||
{# Name + version + description #}
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;">
|
||||
<span style="font-weight:600;font-size:0.9rem;color:var(--text);">{{ plugin.get('name', plugin._dir) }}</span>
|
||||
<span style="font-size:0.75rem;color:var(--text-muted);">v{{ plugin.get('version', '?') }}</span>
|
||||
{% if fail_reason %}
|
||||
<span style="font-size:0.72rem;padding:0.1em 0.45em;border-radius:3px;
|
||||
background:color-mix(in srgb,var(--red) 15%,var(--bg));
|
||||
color:var(--red);">Error</span>
|
||||
{% elif plugin._enabled %}
|
||||
<span style="font-size:0.72rem;padding:0.1em 0.45em;border-radius:3px;
|
||||
background:color-mix(in srgb,var(--green) 12%,var(--bg));
|
||||
color:var(--green);">Enabled</span>
|
||||
{% else %}
|
||||
<span style="font-size:0.72rem;padding:0.1em 0.45em;border-radius:3px;
|
||||
background:var(--bg-elevated);color:var(--text-muted);">Disabled</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if plugin.get('description') %}
|
||||
<div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.1rem;
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ plugin.description }}</div>
|
||||
{% endif %}
|
||||
{% if fail_reason %}
|
||||
<div style="font-size:0.77rem;color:var(--red);margin-top:0.1rem;
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
|
||||
title="{{ fail_reason }}">{{ fail_reason }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Settings button #}
|
||||
<a href="/settings/plugins/{{ plugin._dir }}/"
|
||||
class="btn btn-ghost btn-sm" style="flex-shrink:0;font-size:0.78rem;">Settings →</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Plugin Repositories ───────────────────────────────────────────────────── #}
|
||||
<div style="margin-bottom:2rem;max-width:720px;">
|
||||
<div class="section-title" style="margin-bottom:0.75rem;">Plugin Repositories</div>
|
||||
<p style="color:var(--text-muted);font-size:0.84rem;margin-bottom:0.75rem;">
|
||||
Repositories are remote <code>index.yaml</code> files that Scryer checks for available
|
||||
and updated plugins. Add repos from other developers to expand the plugin catalog.
|
||||
</p>
|
||||
{% include "settings/_plugin_repos.html" %}
|
||||
</div>
|
||||
|
||||
{# ── Plugin Catalog ────────────────────────────────────────────────────────── #}
|
||||
<div style="max-width:720px;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
|
||||
<div class="section-title">Plugin Catalog</div>
|
||||
<button class="btn btn-ghost btn-sm" style="font-size:0.78rem;"
|
||||
hx-get="/settings/plugins/catalog/?refresh=1"
|
||||
hx-target="#plugin-catalog"
|
||||
hx-swap="outerHTML">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% if repos %}
|
||||
<div id="plugin-catalog"
|
||||
hx-get="/settings/plugins/catalog/"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML">
|
||||
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">Loading catalog…</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="plugin-catalog" style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
|
||||
Add a plugin repository above to browse available plugins.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -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