75 lines
4.7 KiB
Svelte
75 lines
4.7 KiB
Svelte
<script lang="ts">
|
|
import { timeFormat } from '$ui/stores/time-zone.js';
|
|
import type { ActivityEvent, OperationStep } from '$lib/operation-flow.js';
|
|
import Button from './primitives/Button.svelte';
|
|
import type { Snippet } from 'svelte';
|
|
let { steps = [], events, active = false, showOverview = true, footer }: { steps?: OperationStep[]; events: ActivityEvent[]; active?: boolean; showOverview?: boolean; footer?: Snippet } = $props();
|
|
let limit = $state(25);
|
|
let query = $state('');
|
|
let newestFirst = $state(true);
|
|
const latest = $derived(events.at(-1));
|
|
const matching = $derived(events.filter(event => event.message.toLowerCase().includes(query.toLowerCase())));
|
|
const visible = $derived(newestFirst ? matching.slice(-limit).reverse() : matching.slice(0, limit));
|
|
</script>
|
|
|
|
{#if showOverview}
|
|
<section>
|
|
<h2>Operation flow</h2>
|
|
<ol class="flow">
|
|
{#each steps as step, index}
|
|
<li class={step.state} aria-current={step.state === 'current' ? 'step' : undefined}>
|
|
<span>{index + 1}</span>{step.label}
|
|
<span class="sr-only">({step.state})</span>
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
</section>
|
|
{/if}
|
|
<section>
|
|
{#if showOverview && latest}<p class="latest"><strong>Latest update</strong> {latest.message}<time datetime={latest.created_at}>{$timeFormat.dateTime(latest.created_at)}</time></p>{/if}
|
|
<details>
|
|
<summary>Activity history · {events.length} events{active ? ' · updates automatically' : ''}</summary>
|
|
{#if events.length}
|
|
<div class="tools"><label>Search activity<input type="search" bind:value={query} oninput={() => limit = 25} placeholder="Server, stage, or message" /></label><label>Order<select bind:value={newestFirst}><option value={true}>Newest first</option><option value={false}>Oldest first</option></select></label></div>
|
|
<ol class="timeline">
|
|
{#each visible as event (event.id)}
|
|
<li><time datetime={event.created_at}>{$timeFormat.dateTime(event.created_at)}</time><p>{event.message}</p></li>
|
|
{/each}
|
|
</ol>
|
|
{#if !matching.length}<p class="muted">No matching activity.</p>{/if}
|
|
{#if matching.length > limit}<Button size="sm" onclick={() => limit += 25}>Show more activity ({matching.length - limit})</Button>{/if}
|
|
{:else}
|
|
<p class="muted">This operation predates detailed activity tracking. Its recorded status and timestamps are shown on this page.</p>
|
|
{/if}
|
|
{@render footer?.()}
|
|
</details>
|
|
</section>
|
|
|
|
<style>
|
|
section { display: grid; gap: 16px; }
|
|
h2 { font-size: 18px; margin: 0; }
|
|
details { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
|
|
summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
|
|
details[open] summary { margin-bottom: 16px; }
|
|
.latest { padding: 12px 16px; background: var(--surface); border-radius: var(--radius-md); font-size: var(--text-sm); }
|
|
.latest strong { display: block; margin-bottom: 4px; }
|
|
.latest time { display: block; margin-top: 4px; }
|
|
.tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
|
|
label { display: grid; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
|
|
label:first-child { flex: 1; min-width: 180px; }
|
|
input, select { background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--border-control); padding: 9px 12px; border-radius: var(--radius-sm); font: inherit; }
|
|
time, .muted { color: var(--text-secondary); font-size: 13px; }
|
|
p { margin: 0; line-height: 1.6; }
|
|
.flow { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; }
|
|
.flow li { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius-md); padding: 12px; font-size: 13px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
|
|
.flow span { color: var(--accent-primary-hover); font-family: var(--font-mono); }
|
|
.flow .done { color: var(--text-primary); }
|
|
.flow .current { color: var(--text-primary); border-color: var(--accent-primary); }
|
|
.flow .failed { color: var(--state-danger); border-color: var(--state-danger); }
|
|
.timeline { list-style: none; padding: 0 0 0 18px; margin: 0; border-left: 2px solid var(--border-strong); }
|
|
.timeline li { position: relative; padding: 0 0 24px 12px; overflow-wrap: anywhere; }
|
|
.timeline li::before { content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-primary); }
|
|
.timeline p { margin-top: 6px; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
|
</style>
|