feat(ui): audit log, alert history and Ansible runs load as you scroll (#5211)
#5211 "Lists load as you scroll: audit, alert history, Ansible runs" (milestone 477), per preference 172. - core/paging.py: keyset paging over (time, id), newest first, with an opaque "<iso>|<id>" cursor; a page reads one row past itself to know whether another follows. No OFFSET, so rows added while someone scrolls never shift the pages after them. - _macros.html scroll_more / scroll_end and static/scroll-more.js, written once: an IntersectionObserver with a 600px margin fetches the next page before the reader reaches the end; "Loading more…" while in flight, "End of the list." at the end, and a failed page says so with a Retry button instead of re-firing on every scroll. - Audit log: no "Load more" link and no 500-row cap. - Alert history: no 200-row stop with "pick a shorter range"; alert_svc.history takes the cursor, so the MCP tool and the page share one query. - Ansible runs: no silent cap of 50. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -84,3 +84,20 @@
|
||||
{%- if kwargs.get('confirm') %} data-confirm="{{ kwargs.confirm }}"{% endif %}>{{ icon }}</button>
|
||||
{%- endif -%}
|
||||
{%- endmacro %}
|
||||
|
||||
{# A list that continues itself (#5211, pref 172; static/scroll-more.js).
|
||||
scroll_more ends a page while there are more rows: it fetches `url` (the
|
||||
next page, built with core.paging's cursor) when it comes near the
|
||||
viewport, and is replaced by that page's rows. scroll_end ends the last
|
||||
page. Pass `cols` inside a table body, to render as a full-width row. #}
|
||||
{% macro scroll_more(url, cols=none) -%}
|
||||
{%- if cols %}<tr data-scroll-more hx-get="{{ url }}" hx-trigger="scroll-more" hx-swap="outerHTML"><td colspan="{{ cols }}">
|
||||
{%- else %}<div data-scroll-more hx-get="{{ url }}" hx-trigger="scroll-more" hx-swap="outerHTML">{% endif -%}
|
||||
<span class="field-hint" role="status" aria-live="polite" data-scroll-status>Loading more…</span>
|
||||
{%- if cols %}</td></tr>{% else %}</div>{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro scroll_end(cols=none, text="End of the list.") -%}
|
||||
{%- if cols %}<tr><td colspan="{{ cols }}"><span class="field-hint" role="status">{{ text }}</span></td></tr>
|
||||
{%- else %}<p class="field-hint" role="status">{{ text }}</p>{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
{# alerts/_history_page.html — one page of alert transitions, then the sentinel
|
||||
that loads the next page as the reader nears it (core.paging, pref 172). #}
|
||||
{% from "_macros.html" import status_badge, scroll_more, scroll_end %}
|
||||
{% for ev in events %}
|
||||
<tr>
|
||||
<td style="font-family:ui-monospace,monospace;font-size:0.82rem;white-space:nowrap;">
|
||||
{{ ev.at.strftime("%Y-%m-%d %H:%M:%S") }}
|
||||
</td>
|
||||
<td>
|
||||
<a href="/alerts/history?rule={{ ev.rule.id }}&range={{ current_range }}">{{ ev.rule.name }}</a>
|
||||
<div style="font-size:0.78rem;color:var(--text-dim);">{{ ev.rule.source_module }}/{{ ev.rule.resource_name }}</div>
|
||||
</td>
|
||||
<td style="white-space:nowrap;">
|
||||
{{ status_badge(ev.from_state) }}
|
||||
<span style="color:var(--text-dim);">→</span>
|
||||
{{ status_badge(ev.to_state) }}
|
||||
{% for n in ev.notes %}
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;white-space:normal;">{{ n }}</div>
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td style="font-family:ui-monospace,monospace;font-size:0.85rem;white-space:nowrap;">
|
||||
{{ ev.rule.metric_name }} = {{ ev.value }}
|
||||
<div style="font-size:0.75rem;color:var(--text-dim);">rule: {{ ev.condition }}</div>
|
||||
</td>
|
||||
<td style="font-size:0.82rem;">
|
||||
{% if ev.muted_by %}
|
||||
<span class="badge badge-yellow" title="A maintenance window muted this notification">muted · {{ ev.muted_by }}</span>
|
||||
{% if ev.released %}<div style="color:var(--text-muted);margin-top:0.25rem;">notified when the window ended</div>{% endif %}
|
||||
{% endif %}
|
||||
{% for label, sent, error in ev.deliveries %}
|
||||
<div style="margin-top:0.15rem;">
|
||||
{% if sent %}
|
||||
<span class="badge badge-green">{{ label }} sent</span>
|
||||
{% else %}
|
||||
<span class="badge badge-red">{{ label }} failed</span>
|
||||
{% if error %}<div style="color:var(--text-muted);font-size:0.78rem;margin-top:0.15rem;max-width:28rem;word-break:break-word;">{{ error }}</div>{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if not ev.muted_by and not ev.deliveries %}<span style="color:var(--text-dim);" title="No notification was sent for this change">—</span>{% endif %}
|
||||
</td>
|
||||
<td style="font-size:0.82rem;">
|
||||
{% if ev.ansible_run_id %}
|
||||
<a href="/ansible/runs/{{ ev.ansible_run_id }}">Ansible run</a>
|
||||
{% else %}<span style="color:var(--text-dim);">—</span>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% if after %}
|
||||
{{ scroll_more("/alerts/history?before=" ~ (after|urlencode) ~ "&range=" ~ (current_range|urlencode) ~ (("&rule=" ~ (chosen.id|urlencode)) if chosen else ""), cols=6) }}
|
||||
{% else %}
|
||||
{{ scroll_end(cols=6) }}
|
||||
{% endif %}
|
||||
@@ -1,4 +1,5 @@
|
||||
{# alerts/_history_rows.html — the history table; swapped in on a range or rule change #}
|
||||
{# alerts/_history_rows.html — the history table; swapped in on a range or rule
|
||||
change. Its rows come a page at a time (alerts/_history_page.html). #}
|
||||
{% from "_macros.html" import status_badge, empty_state %}
|
||||
{% if events %}
|
||||
<div class="card-flush" style="overflow-x:auto;">
|
||||
@@ -14,59 +15,10 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ev in events %}
|
||||
<tr>
|
||||
<td style="font-family:ui-monospace,monospace;font-size:0.82rem;white-space:nowrap;">
|
||||
{{ ev.at.strftime("%Y-%m-%d %H:%M:%S") }}
|
||||
</td>
|
||||
<td>
|
||||
<a href="/alerts/history?rule={{ ev.rule.id }}&range={{ current_range }}">{{ ev.rule.name }}</a>
|
||||
<div style="font-size:0.78rem;color:var(--text-dim);">{{ ev.rule.source_module }}/{{ ev.rule.resource_name }}</div>
|
||||
</td>
|
||||
<td style="white-space:nowrap;">
|
||||
{{ status_badge(ev.from_state) }}
|
||||
<span style="color:var(--text-dim);">→</span>
|
||||
{{ status_badge(ev.to_state) }}
|
||||
{% for n in ev.notes %}
|
||||
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;white-space:normal;">{{ n }}</div>
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td style="font-family:ui-monospace,monospace;font-size:0.85rem;white-space:nowrap;">
|
||||
{{ ev.rule.metric_name }} = {{ ev.value }}
|
||||
<div style="font-size:0.75rem;color:var(--text-dim);">rule: {{ ev.condition }}</div>
|
||||
</td>
|
||||
<td style="font-size:0.82rem;">
|
||||
{% if ev.muted_by %}
|
||||
<span class="badge badge-yellow" title="A maintenance window muted this notification">muted · {{ ev.muted_by }}</span>
|
||||
{% if ev.released %}<div style="color:var(--text-muted);margin-top:0.25rem;">notified when the window ended</div>{% endif %}
|
||||
{% endif %}
|
||||
{% for label, sent, error in ev.deliveries %}
|
||||
<div style="margin-top:0.15rem;">
|
||||
{% if sent %}
|
||||
<span class="badge badge-green">{{ label }} sent</span>
|
||||
{% else %}
|
||||
<span class="badge badge-red">{{ label }} failed</span>
|
||||
{% if error %}<div style="color:var(--text-muted);font-size:0.78rem;margin-top:0.15rem;max-width:28rem;word-break:break-word;">{{ error }}</div>{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if not ev.muted_by and not ev.deliveries %}<span style="color:var(--text-dim);" title="No notification was sent for this change">—</span>{% endif %}
|
||||
</td>
|
||||
<td style="font-size:0.82rem;">
|
||||
{% if ev.ansible_run_id %}
|
||||
<a href="/ansible/runs/{{ ev.ansible_run_id }}">Ansible run</a>
|
||||
{% else %}<span style="color:var(--text-dim);">—</span>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% include "alerts/_history_page.html" %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% if truncated %}
|
||||
<p style="color:var(--text-muted);font-size:0.82rem;margin-top:0.75rem;">
|
||||
Showing the newest {{ limit }}. Pick a shorter range or one rule to see the rest.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="card">{{ empty_state("No alert changed state in the last " ~ current_range ~ ((" for " ~ chosen.name) if chosen else "") ~ ".") }}</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
{# ansible/_runs_page.html — one page of runs, then the sentinel that loads the
|
||||
next page as the reader nears it (core.paging, pref 172). #}
|
||||
{% from "_macros.html" import status_badge, scroll_more, scroll_end %}
|
||||
{% for row in runs %}
|
||||
{% set run = row.run %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/ansible/runs/{{ run.id }}" title="{{ run.inventory_scope }}">{{ row.title }}</a>
|
||||
{% if row.check %}<span class="badge badge-dim" title="Ansible check mode: nothing was changed">dry run</span>{% endif %}
|
||||
<div class="field-hint">{{ run.source_name }}</div>
|
||||
</td>
|
||||
<td>{{ status_badge(run.status) }}</td>
|
||||
<td title="{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ run.started_at|ago }}</td>
|
||||
<td>{{ row.duration_s|duration }}{% if not run.finished_at and run.status.value in ('running', 'queued') %} so far{% endif %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% if after %}
|
||||
{{ scroll_more("/ansible/?before=" ~ (after|urlencode), cols=4) }}
|
||||
{% else %}
|
||||
{{ scroll_end(cols=4) }}
|
||||
{% endif %}
|
||||
@@ -21,19 +21,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in runs %}
|
||||
{% set run = row.run %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/ansible/runs/{{ run.id }}" title="{{ run.inventory_scope }}">{{ row.title }}</a>
|
||||
{% if row.check %}<span class="badge badge-dim" title="Ansible check mode: nothing was changed">dry run</span>{% endif %}
|
||||
<div class="field-hint">{{ run.source_name }}</div>
|
||||
</td>
|
||||
<td>{{ status_badge(run.status) }}</td>
|
||||
<td title="{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ run.started_at|ago }}</td>
|
||||
<td>{{ row.duration_s|duration }}{% if not run.finished_at and run.status.value in ('running', 'queued') %} so far{% endif %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% include "ansible/_runs_page.html" %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
{# audit/_rows.html — one page of the audit log's rows, then the sentinel that
|
||||
loads the next page as the reader nears it (core.paging, pref 172). #}
|
||||
{% from "_macros.html" import scroll_more, scroll_end %}
|
||||
{% for item in events %}
|
||||
{% set e = item.event %}
|
||||
{% set d = item.detail %}
|
||||
<tr>
|
||||
<td style="white-space:nowrap;" title="{{ e.timestamp.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ e.timestamp|ago }}</td>
|
||||
<td style="font-size:0.85rem;">{{ e.username }}</td>
|
||||
<td><span class="mono">{{ e.action }}</span></td>
|
||||
<td>
|
||||
{% if item.entity %}
|
||||
<span class="field-hint">{{ e.entity_type|replace('_', ' ') }}</span>
|
||||
{% if item.entity.url %}<a href="{{ item.entity.url }}">{{ item.entity.label }}</a>{% else %}{{ item.entity.label }}{% endif %}
|
||||
{% if item.entity.gone %}<span class="field-hint">(deleted)</span>{% endif %}
|
||||
{% elif e.entity_type %}<span class="field-hint">{{ e.entity_type|replace('_', ' ') }}</span>{% 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 class="mono">{{ v }}</span>
|
||||
{% if not loop.last %} · {% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% if after %}
|
||||
{{ scroll_more("/audit/?before=" ~ (after|urlencode) ~ (("&action=" ~ (action_filter|urlencode)) if action_filter else ""), cols=5) }}
|
||||
{% else %}
|
||||
{{ scroll_end(cols=5) }}
|
||||
{% endif %}
|
||||
@@ -27,40 +27,10 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in events %}
|
||||
{% set e = item.event %}
|
||||
{% set d = item.detail %}
|
||||
<tr>
|
||||
<td style="white-space:nowrap;" title="{{ e.timestamp.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ e.timestamp|ago }}</td>
|
||||
<td style="font-size:0.85rem;">{{ e.username }}</td>
|
||||
<td><span class="mono">{{ e.action }}</span></td>
|
||||
<td>
|
||||
{% if item.entity %}
|
||||
<span class="field-hint">{{ e.entity_type|replace('_', ' ') }}</span>
|
||||
{% if item.entity.url %}<a href="{{ item.entity.url }}">{{ item.entity.label }}</a>{% else %}{{ item.entity.label }}{% endif %}
|
||||
{% if item.entity.gone %}<span class="field-hint">(deleted)</span>{% endif %}
|
||||
{% elif e.entity_type %}<span class="field-hint">{{ e.entity_type|replace('_', ' ') }}</span>{% 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 class="mono">{{ v }}</span>
|
||||
{% if not loop.last %} · {% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% include "audit/_rows.html" %}
|
||||
</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">{{ empty_state("No audit events recorded yet.") }}</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='steward.css') }}">
|
||||
<script src="{{ url_for('static', filename='chart-colors.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='scroll-more.js') }}" defer></script>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user