alexei.dolgolyov
ba199f24bd
- Defer quiet-hours dispatches into new deferred_dispatch table; drain job + periodic catch-up scan re-fire at window end with coalescing on (link, event_type, collection_id). - Add ON DELETE SET NULL migration on event_log_id and partial unique index on (link_id, collection_id, event_type) WHERE status='pending'. - Add release-check provider abstraction (Gitea/GitHub) with SSRF-safe URL validation, settings UI cassette, and scheduled polling. - Replace importlib-only version lookup with version.py helper that prefers the higher of installed metadata vs source pyproject so stale editable dev installs stop misreporting. - Aurora frontend polish: MetaStrip component, ReleaseCassette, EventDetailModal expansion, and i18n additions.
450 lines
15 KiB
Svelte
450 lines
15 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { t } from '$lib/i18n';
|
|
import type { EventLog } from '$lib/types';
|
|
import { requestHighlight } from '$lib/highlight';
|
|
import Modal from './Modal.svelte';
|
|
import MdiIcon from './MdiIcon.svelte';
|
|
|
|
interface Props {
|
|
event: EventLog | null;
|
|
onclose: () => void;
|
|
}
|
|
let { event, onclose }: Props = $props();
|
|
|
|
// Retain the last non-null event so the modal body stays populated
|
|
// while the close transition plays after the parent clears `event`.
|
|
let displayEvent = $state<EventLog | null>(null);
|
|
$effect(() => {
|
|
if (event) displayEvent = event;
|
|
});
|
|
|
|
function fmtDateTime(iso: string): string {
|
|
try {
|
|
const d = new Date(iso);
|
|
return d.toLocaleString();
|
|
} catch {
|
|
return iso;
|
|
}
|
|
}
|
|
|
|
/** Humanize a duration in seconds into ``Xd Yh`` / ``Xh Ym`` / ``Xm`` / ``Xs``.
|
|
*
|
|
* Used by the deferred-dispatch lifecycle banner to render
|
|
* ``deferred_for_seconds`` ("held for 8h 23m") rather than an opaque
|
|
* integer that the user has to mentally divide. Keeps two units so
|
|
* the magnitude reads correctly across hours-long quiet windows
|
|
* without becoming noisy for short ones. */
|
|
function humanDuration(totalSeconds: number): string {
|
|
if (!Number.isFinite(totalSeconds) || totalSeconds < 0) return '';
|
|
if (totalSeconds < 60) return `${Math.floor(totalSeconds)}s`;
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|
if (minutes < 60) return `${minutes}m`;
|
|
const hours = Math.floor(minutes / 60);
|
|
const remMin = minutes % 60;
|
|
if (hours < 24) return remMin ? `${hours}h ${remMin}m` : `${hours}h`;
|
|
const days = Math.floor(hours / 24);
|
|
const remHours = hours % 24;
|
|
return remHours ? `${days}d ${remHours}h` : `${days}d`;
|
|
}
|
|
|
|
/** Render an absolute ISO timestamp as a future-relative string.
|
|
*
|
|
* "in 8h 23m" / "in 12m". Returns an empty string for past times — the
|
|
* deferred-until banner shouldn't show a relative offset once the
|
|
* window has already ended (a follow-up event_log row marks delivery).
|
|
*/
|
|
function timeFromNow(iso: string | undefined): string {
|
|
if (!iso) return '';
|
|
try {
|
|
const target = new Date(iso).getTime();
|
|
const diff = Math.floor((target - Date.now()) / 1000);
|
|
if (diff <= 0) return '';
|
|
return humanDuration(diff);
|
|
} catch {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function issuerLabel(issuer: { id?: number; username?: string; first_name?: string; last_name?: string } | undefined): string {
|
|
if (!issuer) return '';
|
|
if (issuer.username) return '@' + issuer.username;
|
|
const name = [issuer.first_name, issuer.last_name].filter(Boolean).join(' ');
|
|
if (name) return name;
|
|
if (issuer.id) return 'id ' + issuer.id;
|
|
return '';
|
|
}
|
|
|
|
/** Navigate to a list page and highlight the specific entity card.
|
|
*
|
|
* The destination page calls ``highlightFromUrl()`` after data loads,
|
|
* which scrolls to and pulses the card with ``data-entity-id={id}``.
|
|
* Same mechanism CrossLink uses elsewhere — keeps the UX consistent. */
|
|
function openEntity(path: string, entityId: number | string | null | undefined) {
|
|
if (entityId != null) requestHighlight(entityId);
|
|
onclose();
|
|
goto(path);
|
|
}
|
|
|
|
const issuer = $derived(displayEvent?.details?.issuer as { id?: number; username?: string; first_name?: string; last_name?: string } | undefined);
|
|
const issuerText = $derived(issuerLabel(issuer));
|
|
|
|
const isCommand = $derived(displayEvent?.event_type?.startsWith('command_') ?? false);
|
|
const isAction = $derived(displayEvent?.event_type?.startsWith('action_') ?? false);
|
|
|
|
const detailsJson = $derived.by(() => {
|
|
if (!displayEvent?.details) return '';
|
|
try {
|
|
return JSON.stringify(displayEvent.details, null, 2);
|
|
} catch {
|
|
return String(displayEvent.details);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<Modal open={event !== null} title={displayEvent ? t('events.detailTitle') : ''} {onclose}>
|
|
{#if displayEvent}
|
|
<div class="event-detail">
|
|
<!-- Subject + verb -->
|
|
<div class="hero-row">
|
|
<MdiIcon name="mdiBell" size={18} />
|
|
<div>
|
|
<div class="hero-subject">{displayEvent.collection_name || displayEvent.event_type}</div>
|
|
<div class="hero-meta">
|
|
<span class="event-type">{displayEvent.event_type}</span>
|
|
<span class="dot">·</span>
|
|
<span>{fmtDateTime(displayEvent.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dispatch lifecycle (only when the event went through the
|
|
quiet-hours defer path). Rendered ABOVE the provenance grid
|
|
because timing of delivery is more interesting than the
|
|
bot/tracker names when the event is held back. -->
|
|
{#if displayEvent.details?.dispatch_status === 'deferred'}
|
|
<section class="lifecycle lifecycle--deferred">
|
|
<MdiIcon name="mdiPauseCircleOutline" size={18} />
|
|
<div class="lifecycle-body">
|
|
<div class="lifecycle-title">{t('events.lifecycle.heldTitle')}</div>
|
|
<div class="lifecycle-detail">
|
|
{t('events.lifecycle.heldUntil')}
|
|
<b>{fmtDateTime(displayEvent.details.deferred_until ?? '')}</b>
|
|
{#if timeFromNow(displayEvent.details.deferred_until)}
|
|
<span class="lifecycle-rel">· {t('events.lifecycle.inPrefix')} {timeFromNow(displayEvent.details.deferred_until)}</span>
|
|
{/if}
|
|
</div>
|
|
<div class="lifecycle-hint">{t('events.lifecycle.heldHint')}</div>
|
|
</div>
|
|
</section>
|
|
{:else if displayEvent.details?.dispatch_status === 'delivered_after_quiet_hours'}
|
|
<section class="lifecycle lifecycle--late">
|
|
<MdiIcon name="mdiClockCheckOutline" size={18} />
|
|
<div class="lifecycle-body">
|
|
<div class="lifecycle-title">{t('events.lifecycle.deliveredLateTitle')}</div>
|
|
{#if displayEvent.details.deferred_for_seconds != null}
|
|
<div class="lifecycle-detail">
|
|
{t('events.lifecycle.heldFor')}
|
|
<b>{humanDuration(displayEvent.details.deferred_for_seconds)}</b>
|
|
</div>
|
|
{/if}
|
|
{#if displayEvent.details.original_event_log_id}
|
|
<div class="lifecycle-hint">
|
|
{t('events.lifecycle.originalEvent')} #{displayEvent.details.original_event_log_id}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
{:else if displayEvent.details?.dispatch_status === 'deferred_then_dropped'}
|
|
<section class="lifecycle lifecycle--dropped">
|
|
<MdiIcon name="mdiCloseCircleOutline" size={18} />
|
|
<div class="lifecycle-body">
|
|
<div class="lifecycle-title">{t('events.lifecycle.droppedTitle')}</div>
|
|
{#if displayEvent.details.reason}
|
|
<div class="lifecycle-detail">
|
|
{t('events.lifecycle.reason')}:
|
|
<code class="lifecycle-reason">{displayEvent.details.reason}</code>
|
|
</div>
|
|
{/if}
|
|
{#if displayEvent.details.original_event_log_id}
|
|
<div class="lifecycle-hint">
|
|
{t('events.lifecycle.originalEvent')} #{displayEvent.details.original_event_log_id}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
{:else if displayEvent.details?.dispatch_status === 'deferred_then_failed'}
|
|
<section class="lifecycle lifecycle--dropped">
|
|
<MdiIcon name="mdiAlertCircleOutline" size={18} />
|
|
<div class="lifecycle-body">
|
|
<div class="lifecycle-title">{t('events.lifecycle.failedTitle')}</div>
|
|
{#if displayEvent.details.reason}
|
|
<div class="lifecycle-detail">
|
|
{t('events.lifecycle.reason')}:
|
|
<code class="lifecycle-reason">{displayEvent.details.reason}</code>
|
|
</div>
|
|
{/if}
|
|
{#if displayEvent.details.original_event_log_id}
|
|
<div class="lifecycle-hint">
|
|
{t('events.lifecycle.originalEvent')} #{displayEvent.details.original_event_log_id}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
{:else if displayEvent.details?.dispatch_status === 'suppressed_quiet_hours_nondeferrable'}
|
|
<section class="lifecycle lifecycle--dropped">
|
|
<MdiIcon name="mdiVolumeOff" size={18} />
|
|
<div class="lifecycle-body">
|
|
<div class="lifecycle-title">{t('events.lifecycle.suppressedTitle')}</div>
|
|
<div class="lifecycle-hint">{t('events.lifecycle.suppressedHint')}</div>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
<!-- Provenance grid -->
|
|
<dl class="provenance">
|
|
{#if displayEvent.bot_name}
|
|
<dt>{t('events.bot')}</dt>
|
|
<dd>{displayEvent.bot_name}</dd>
|
|
{/if}
|
|
{#if displayEvent.collection_id && isCommand}
|
|
<dt>{t('events.chat')}</dt>
|
|
<dd class="font-mono">{displayEvent.collection_id}</dd>
|
|
{/if}
|
|
{#if issuerText}
|
|
<dt>{t('events.issuer')}</dt>
|
|
<dd>
|
|
{issuerText}
|
|
{#if issuer?.id}<span class="muted font-mono">(id {issuer.id})</span>{/if}
|
|
</dd>
|
|
{/if}
|
|
{#if displayEvent.command_tracker_name}
|
|
<dt>{t('events.commandTracker')}</dt>
|
|
<dd>{displayEvent.command_tracker_name}</dd>
|
|
{/if}
|
|
{#if displayEvent.tracker_name}
|
|
<dt>{t('events.tracker')}</dt>
|
|
<dd>{displayEvent.tracker_name}</dd>
|
|
{/if}
|
|
{#if displayEvent.action_name}
|
|
<dt>{t('events.action')}</dt>
|
|
<dd>{displayEvent.action_name}</dd>
|
|
{/if}
|
|
{#if displayEvent.provider_name}
|
|
<dt>{t('events.provider')}</dt>
|
|
<dd>{displayEvent.provider_name}</dd>
|
|
{/if}
|
|
{#if displayEvent.assets_count > 0}
|
|
<dt>{t('events.assetsCount')}</dt>
|
|
<dd class="font-mono">{displayEvent.assets_count}</dd>
|
|
{/if}
|
|
</dl>
|
|
|
|
<!-- Action buttons — deep-link + highlight the related entity card -->
|
|
<div class="actions">
|
|
{#if displayEvent.provider_id}
|
|
<button type="button" onclick={() => openEntity('/providers', displayEvent.provider_id)}>
|
|
<MdiIcon name="mdiServer" size={14} />
|
|
{t('events.openProvider')}
|
|
</button>
|
|
{/if}
|
|
{#if displayEvent.telegram_bot_id && isCommand}
|
|
<button type="button" onclick={() => openEntity('/bots', displayEvent.telegram_bot_id)}>
|
|
<MdiIcon name="mdiRobotHappy" size={14} />
|
|
{t('events.openBot')}
|
|
</button>
|
|
{/if}
|
|
{#if displayEvent.command_tracker_id && isCommand}
|
|
<button type="button" onclick={() => openEntity('/command-trackers', displayEvent.command_tracker_id)}>
|
|
<MdiIcon name="mdiChat" size={14} />
|
|
{t('events.openCommandTracker')}
|
|
</button>
|
|
{/if}
|
|
{#if displayEvent.action_id && isAction}
|
|
<button type="button" onclick={() => openEntity('/actions', displayEvent.action_id)}>
|
|
<MdiIcon name="mdiPlayCircle" size={14} />
|
|
{t('events.openAction')}
|
|
</button>
|
|
{/if}
|
|
{#if !isCommand && !isAction && displayEvent.tracker_id}
|
|
<button type="button" onclick={() => openEntity('/notification-trackers', displayEvent.tracker_id)}>
|
|
<MdiIcon name="mdiRadar" size={14} />
|
|
{t('events.openTracker')}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Raw details JSON (always rendered — frequently the most useful piece) -->
|
|
{#if detailsJson && detailsJson !== '{}'}
|
|
<details class="raw-details" open={isCommand}>
|
|
<summary>{t('events.rawDetails')}</summary>
|
|
<pre>{detailsJson}</pre>
|
|
</details>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</Modal>
|
|
|
|
<style>
|
|
.event-detail {
|
|
display: flex; flex-direction: column; gap: 1.1rem;
|
|
}
|
|
.hero-row {
|
|
display: flex; align-items: flex-start; gap: 0.75rem;
|
|
}
|
|
.hero-subject {
|
|
font-family: var(--font-display);
|
|
font-size: 1.05rem;
|
|
font-weight: 500;
|
|
color: var(--color-foreground);
|
|
line-height: 1.3;
|
|
word-break: break-word;
|
|
}
|
|
.hero-meta {
|
|
font-size: 0.7rem;
|
|
color: var(--color-muted-foreground);
|
|
margin-top: 0.25rem;
|
|
display: flex; align-items: center; gap: 0.4rem;
|
|
}
|
|
.event-type {
|
|
font-family: var(--font-mono);
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 0.35rem;
|
|
background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
|
|
color: var(--color-foreground);
|
|
}
|
|
.dot { opacity: 0.5; }
|
|
|
|
.provenance {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 0.45rem 1rem;
|
|
margin: 0;
|
|
padding: 0.85rem 0.95rem;
|
|
border-radius: 0.7rem;
|
|
background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
|
|
font-size: 0.82rem;
|
|
}
|
|
.provenance dt {
|
|
color: var(--color-muted-foreground);
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
align-self: center;
|
|
}
|
|
.provenance dd {
|
|
margin: 0;
|
|
color: var(--color-foreground);
|
|
word-break: break-word;
|
|
}
|
|
.muted { color: var(--color-muted-foreground); margin-left: 0.35rem; font-size: 0.75rem; }
|
|
|
|
.actions {
|
|
display: flex; flex-wrap: wrap; gap: 0.5rem;
|
|
}
|
|
.actions button {
|
|
display: inline-flex; align-items: center; gap: 0.4rem;
|
|
padding: 0.45rem 0.8rem;
|
|
font-size: 0.78rem;
|
|
color: var(--color-foreground);
|
|
background: color-mix(in oklab, var(--color-primary) 10%, transparent);
|
|
border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent);
|
|
border-radius: 0.55rem;
|
|
cursor: pointer;
|
|
transition: background 150ms, border-color 150ms;
|
|
}
|
|
.actions button:hover {
|
|
background: color-mix(in oklab, var(--color-primary) 18%, transparent);
|
|
border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
|
|
}
|
|
|
|
.raw-details summary {
|
|
font-size: 0.75rem;
|
|
color: var(--color-muted-foreground);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.raw-details summary:hover { color: var(--color-foreground); }
|
|
.raw-details pre {
|
|
margin: 0.55rem 0 0;
|
|
padding: 0.7rem 0.85rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.5;
|
|
color: var(--color-foreground);
|
|
background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
|
|
border-radius: 0.55rem;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.font-mono { font-family: var(--font-mono); }
|
|
|
|
/* Dispatch lifecycle banner — appears only when the event took the
|
|
* quiet-hours defer path. The three colour variants mirror the dashboard
|
|
* badge palette: primary glow for "held", success for "delivered late",
|
|
* muted/dim for "dropped" / "failed" / "suppressed".
|
|
*/
|
|
.lifecycle {
|
|
display: flex; align-items: flex-start; gap: 0.7rem;
|
|
padding: 0.75rem 0.95rem;
|
|
border-radius: 0.7rem;
|
|
border: 1px solid var(--color-border);
|
|
background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
|
|
font-size: 0.82rem;
|
|
}
|
|
.lifecycle-body {
|
|
display: flex; flex-direction: column; gap: 0.2rem;
|
|
flex: 1; min-width: 0;
|
|
}
|
|
.lifecycle-title {
|
|
font-weight: 600;
|
|
color: var(--color-foreground);
|
|
}
|
|
.lifecycle-detail {
|
|
color: var(--color-foreground);
|
|
}
|
|
.lifecycle-detail b {
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
}
|
|
.lifecycle-rel {
|
|
color: var(--color-muted-foreground);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
.lifecycle-hint {
|
|
color: var(--color-muted-foreground);
|
|
font-size: 0.72rem;
|
|
}
|
|
.lifecycle-reason {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
padding: 0.05rem 0.35rem;
|
|
border-radius: 0.3rem;
|
|
background: color-mix(in oklab, var(--color-foreground) 8%, transparent);
|
|
word-break: break-all;
|
|
}
|
|
.lifecycle--deferred {
|
|
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
|
|
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
|
}
|
|
.lifecycle--deferred :global(svg) {
|
|
color: var(--color-primary);
|
|
}
|
|
.lifecycle--late {
|
|
border-color: color-mix(in srgb, var(--color-success, #16a34a) 35%, transparent);
|
|
background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent);
|
|
}
|
|
.lifecycle--late :global(svg) {
|
|
color: var(--color-success, #16a34a);
|
|
}
|
|
.lifecycle--dropped {
|
|
opacity: 0.92;
|
|
}
|
|
.lifecycle--dropped :global(svg) {
|
|
color: var(--color-muted-foreground);
|
|
}
|
|
</style>
|