feat(v1.1.9): dashboard Queues tab + queue:receive trigger form + 0.15.0
API client (src/lib/api.ts):
- TriggerKind gains 'queue'
- TriggerDetails gains { kind: 'queue', queue_name, visibility_timeout_secs, last_fired_at }
- CreateQueueTriggerInput, QueueSummary, QueueConsumer, QueueDetail
- api.triggers.createQueue(idOrSlug, input) -> POST /admin/.../triggers/queue
- api.queues.list(idOrSlug) -> GET /admin/.../queues
- api.queues.get(idOrSlug, name) -> GET /admin/.../queues/{name}
New routes:
- /apps/[slug]/queues — read-only list view (queue_name, total, pending,
claimed, drilldown link); empty state explains how queues are created
(first enqueue) and that consumers register via the Triggers tab
- /apps/[slug]/queues/[name] — drilldown showing depth + registered
consumer (script name + visibility timeout + last_fired_at + trigger
id); empty consumer state surfaces clearly
App detail page (src/routes/apps/[slug]/+page.svelte):
- New "Queues" link in the app-level nav between Files and Dead letters
- Triggers tab gains a "Queue:receive trigger (v1.1.9)" form alongside
cron/pubsub/email — target script select, queue_name, visibility
timeout (5–3600s, default 30), max_attempts (1–20, default 3)
- Trigger list renders queue triggers with queue_name + visibility
timeout + last_fired_at
dashboard/package.json: 0.14.0 -> 0.15.0
npm run check — all queue/invoke-related code typechecks clean; the
existing Playwright test errors (149 unrelated) carry forward unchanged.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
128
dashboard/src/routes/apps/[slug]/queues/+page.svelte
Normal file
128
dashboard/src/routes/apps/[slug]/queues/+page.svelte
Normal file
@@ -0,0 +1,128 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { page } from '$app/state';
|
||||
import { api, ApiError, type App, type QueueSummary } from '$lib/api';
|
||||
|
||||
let slug = $derived(page.params.slug ?? '');
|
||||
let app = $state<App | null>(null);
|
||||
let queues = $state<QueueSummary[]>([]);
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
async function loadApp() {
|
||||
try {
|
||||
app = await api.apps.get(slug);
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadQueues() {
|
||||
loading = true;
|
||||
error = null;
|
||||
try {
|
||||
queues = await api.queues.list(slug);
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void slug;
|
||||
void loadApp();
|
||||
void loadQueues();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Queues — {app?.name ?? slug} — PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<header>
|
||||
<a class="back" href="{base}/apps/{slug}">← Back to {app?.name ?? slug}</a>
|
||||
<h1>Queues</h1>
|
||||
<p class="subtle">
|
||||
Per-app durable queues. Producers call <code>queue::enqueue(name, msg)</code>;
|
||||
consumers register a <code>queue:receive</code> trigger. v1.1.9.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{#if error}
|
||||
<p class="error">{error}</p>
|
||||
{/if}
|
||||
|
||||
{#if loading && queues.length === 0}
|
||||
<p class="muted">Loading…</p>
|
||||
{:else if queues.length === 0}
|
||||
<p class="muted">
|
||||
No queues in this app yet. A queue is created implicitly the first time a
|
||||
message is enqueued. Register a <code>queue:receive</code> trigger from the
|
||||
Triggers tab to consume messages.
|
||||
</p>
|
||||
{:else}
|
||||
<table class="queues">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Queue</th>
|
||||
<th class="num">Total</th>
|
||||
<th class="num">Pending</th>
|
||||
<th class="num">Claimed</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each queues as q (q.queue_name)}
|
||||
<tr>
|
||||
<td><code>{q.queue_name}</code></td>
|
||||
<td class="num">{q.total}</td>
|
||||
<td class="num">{q.pending}</td>
|
||||
<td class="num">{q.claimed}</td>
|
||||
<td>
|
||||
<a href="{base}/apps/{slug}/queues/{encodeURIComponent(q.queue_name)}">
|
||||
drilldown →
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-link);
|
||||
}
|
||||
h1 {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.subtle {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.error {
|
||||
color: var(--color-error, #c00);
|
||||
}
|
||||
.muted {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
table.queues {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.queues th,
|
||||
table.queues td {
|
||||
text-align: left;
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border, #eee);
|
||||
}
|
||||
.num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
123
dashboard/src/routes/apps/[slug]/queues/[name]/+page.svelte
Normal file
123
dashboard/src/routes/apps/[slug]/queues/[name]/+page.svelte
Normal file
@@ -0,0 +1,123 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { page } from '$app/state';
|
||||
import { api, ApiError, type App, type QueueDetail } from '$lib/api';
|
||||
|
||||
let slug = $derived(page.params.slug ?? '');
|
||||
let name = $derived(page.params.name ?? '');
|
||||
let app = $state<App | null>(null);
|
||||
let detail = $state<QueueDetail | null>(null);
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
error = null;
|
||||
try {
|
||||
app = await api.apps.get(slug);
|
||||
detail = await api.queues.get(slug, name);
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void slug;
|
||||
void name;
|
||||
void load();
|
||||
});
|
||||
|
||||
function fmtTime(iso: string | null): string {
|
||||
return iso ? new Date(iso).toLocaleString() : 'never';
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{name} — Queues — {app?.name ?? slug} — PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<header>
|
||||
<a class="back" href="{base}/apps/{slug}/queues">← Back to Queues</a>
|
||||
<h1>Queue: <code>{name}</code></h1>
|
||||
</header>
|
||||
|
||||
{#if error}
|
||||
<p class="error">{error}</p>
|
||||
{/if}
|
||||
|
||||
{#if loading && !detail}
|
||||
<p class="muted">Loading…</p>
|
||||
{:else if detail}
|
||||
<section>
|
||||
<h2>Depth</h2>
|
||||
<dl class="kv">
|
||||
<dt>Total</dt>
|
||||
<dd>{detail.total}</dd>
|
||||
<dt>Pending</dt>
|
||||
<dd>{detail.pending}</dd>
|
||||
<dt>Claimed</dt>
|
||||
<dd>{detail.claimed}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Consumer</h2>
|
||||
{#if detail.consumer}
|
||||
<dl class="kv">
|
||||
<dt>Script</dt>
|
||||
<dd>
|
||||
<a href="{base}/apps/{slug}/scripts/{detail.consumer.script_id}">
|
||||
{detail.consumer.script_name}
|
||||
</a>
|
||||
</dd>
|
||||
<dt>Visibility timeout</dt>
|
||||
<dd>{detail.consumer.visibility_timeout_secs}s</dd>
|
||||
<dt>Last fired</dt>
|
||||
<dd>{fmtTime(detail.consumer.last_fired_at)}</dd>
|
||||
<dt>Trigger ID</dt>
|
||||
<dd><code>{detail.consumer.trigger_id}</code></dd>
|
||||
</dl>
|
||||
{:else}
|
||||
<p class="muted">
|
||||
No <code>queue:receive</code> trigger registered for this queue. Messages
|
||||
enqueued here will accumulate without a consumer. Register one in the
|
||||
Triggers tab of the parent app page.
|
||||
</p>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-link);
|
||||
}
|
||||
h1 {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
section {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.kv {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
dt {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
.error {
|
||||
color: var(--color-error, #c00);
|
||||
}
|
||||
.muted {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user