electric-cherry/src/routes/provisioning/+page.svelte

<script lang="ts">
    import { timeFormat } from '$ui/stores/time-zone.js';
    import { onMount } from 'svelte';
    import { page } from '$app/stores';
    import { goto } from '$app/navigation';
    import { pollVisible } from '$ui/poll.js';
    import Tabs from '$ui/components/primitives/Tabs.svelte';
    import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
    import ListFooter from '$ui/components/primitives/ListFooter.svelte';
    import HistoricalServerIdentity from '$ui/components/HistoricalServerIdentity.svelte';
    import { serverTitle } from '$ui/server-labels.js';
    import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
    import Badge from '$ui/components/primitives/Badge.svelte';
    import Button from '$ui/components/primitives/Button.svelte';
    import EmptyState from '$ui/components/primitives/EmptyState.svelte';
    import DeployServerDialog from '$ui/components/DeployServerDialog.svelte';
    import HousePartyDialog from '$ui/components/HousePartyDialog.svelte';
    import type { CollectionSummary } from '$lib/deployment-plan.js';

    import LifecycleDialog from '$ui/components/LifecycleDialog.svelte';
    import { provisioningActions, actionLabels, actionCompleted, type ProvisioningAction } from '$lib/provisioning.js';

    let lifecycleOpen = $state(false);
    interface Deployment {
        id: string; server: string; server_deleted_at?: string | null; action: ProvisioningAction;
        state: 'queued' | 'awaiting-health' | 'waiting' | 'running' | 'done' | 'failed' | 'warning' | 'interrupted' | 'cancelled';
        stage: string; started_at: string; finished_at: string | null;
        triggered_by: string; error: string | null; warnings: string; server_exists: number;
        canCancelRemoval: boolean;
    }
    let deployments = $state<Deployment[]>([]);
    let loading = $state(true);
    let error = $state('');
    let open = $state(false);
    let housePartyOpen = $state(false);
    let housePartyNotice = $state('');
    let collections = $state<CollectionSummary[]>([]);
    let tab = $state('active');
    let limit = $state(25);
    let collectionLimit = $state(10);
    let historyState = $state('all');
    let cancelling = $state(false);
    let cancellationNotice = $state('');
    $effect(() => {
        const params = $page.url.searchParams;
        tab = ['active', 'history'].includes(params.get('view') ?? '') ? params.get('view')! : 'active';
        action = provisioningActions.some(value => value === params.get('action')) ? params.get('action')! : 'all';
        historyState = params.get('status') === 'attention' ? 'attention' : 'all';
        search = params.get('server') ?? '';
        limit = Math.max(25, Number(params.get('limit')) || 25);
        collectionLimit = Math.max(10, Number(params.get('collections')) || 10);
    });
    function saveContext(reset = false) {
        if (reset) { limit = 25; collectionLimit = 10; }
        const url = new URL($page.url);
        for (const [key, value] of Object.entries({ view: tab === 'active' ? '' : tab, action: action === 'all' ? '' : action, status: historyState === 'all' ? '' : historyState, server: search, limit: limit > 25 ? String(limit) : '', collections: collectionLimit > 10 ? String(collectionLimit) : '' })) {
            if (value) url.searchParams.set(key, value); else url.searchParams.delete(key);
        }
        void goto(url, { replaceState: true, noScroll: true, keepFocus: true });
    }
    async function cancelRequests(ids: string[]) {
        cancelling = true; cancellationNotice = ''; let cancelled = 0; const unavailable: string[] = [];
        for (const id of ids) {
            try { const response = await fetch(`/api/provisioning/${encodeURIComponent(id)}/cancel`, { method: 'POST' }); if (response.ok) cancelled++; else unavailable.push(id); }
            catch { unavailable.push(id); }
        }
        cancellationNotice = `${cancelled} queued removal${cancelled === 1 ? '' : 's'} cancelled.${cancelled ? ' The servers covered by those cancelled requests and their files were kept.' : ''}${unavailable.length ? ` ${unavailable.length} could not be cancelled; refresh their operations to see whether removal has begun.` : ''}`;
        cancelling = false; await load();
    }
    const visibleCollections = $derived(collections.filter(c => tab === 'active' ? c.active > 0 : c.active === 0));
    const tabs = $derived.by(() => [{id:'active',label:'Active',badge:active.length},{id:'history',label:'History'}]);
    let action = $state('all');
    let search = $state('');
    let refreshing = false;
    let active = $derived(deployments.filter(d => !d.server_deleted_at && ['queued', 'awaiting-health', 'running', 'waiting'].includes(d.state)));
    const needsAttention = (deployment: Deployment) => ['failed', 'interrupted', 'warning'].includes(deployment.state);
    const attention = $derived(deployments.filter(needsAttention));
    let history = $derived(deployments.filter(d => (d.server_deleted_at || !['queued', 'awaiting-health', 'running', 'waiting'].includes(d.state)) &&
        (historyState === 'all' || needsAttention(d)) &&
        (action === 'all' || d.action === action) && (d.server + ' ' + serverTitle(d.server)).toLowerCase().includes(search.toLowerCase())));
    async function load() {
        if (refreshing) return;
        refreshing = true;
        try {
            const [res, collectionRes] = await Promise.all([fetch('/api/provisioning'), fetch('/api/deployment-collections')]);
            if (!res.ok || !collectionRes.ok) throw new Error('Could not load provisioning activity.');
            deployments = (await res.json()).deployments;
            collections = (await collectionRes.json()).collections;
            error = '';
        } catch (err) { error = (err as Error).message; }
        finally { loading = false; refreshing = false; }
    }
    onMount(() => pollVisible(load, 5000));
    function fmt(value: string) { return $timeFormat.dateTime(value); }
    function warnings(d: Deployment): string[] { try { return JSON.parse(d.warnings); } catch { return []; } }
</script>

<svelte:head><title>Provisioning | Electric Cherry</title></svelte:head>
<div class="page">
    <SectionHeader title="Provisioning" subtitle="Create, start, restart, rebuild, stop, and destroy server instances.">
        {#snippet actions()}<Button onclick={() => lifecycleOpen = true}>Manage server</Button><Button variant="primary" onclick={() => open = true}>Create server</Button><details class="fleet-actions"><summary>Fleet actions</summary><Button variant="danger" onclick={() => housePartyOpen = true}>Destroy fleet…</Button></details>{/snippet}
    </SectionHeader>
    <Tabs {tabs} bind:value={tab} onchange={() => saveContext(true)} ariaLabel="Provisioning views" idPrefix="deployment-tabs" panelId="deployment-panel" />
    <LifecycleDialog bind:open={lifecycleOpen} />
    <DeployServerDialog bind:open />
    <HousePartyDialog bind:open={housePartyOpen} onqueued={count => { housePartyNotice = `Destruction queued for ${count} server${count === 1 ? '' : 's'}. Follow progress in the Active tab.`; tab = 'active'; void load(); }} />
    {#if housePartyNotice}<p role="status">{housePartyNotice}</p>{/if}
    {#if cancellationNotice}<p role="status">{cancellationNotice}</p>{/if}
    <div id="deployment-panel" role="tabpanel" aria-labelledby={"deployment-tabs-" + tab} class="panels">
    {#if error}<p role="alert" class="error">{error} <button onclick={load}>Retry</button></p>{/if}
    {#if visibleCollections.length}
        <section>
            <h2>Collection launches</h2>
            <div class="rows">{#each visibleCollections.slice(0,collectionLimit) as collection (collection.id)}
                <a class="deployment-row collection-row" href="/provisioning/collections/{collection.id}">
                    <div class="row-head"><strong>{collection.name}</strong><Badge variant={collection.active ? 'info' : collection.failed ? 'danger' : 'online'}>{collection.active ? collection.provisioning + collection.verifying ? collection.mode === 'exact' ? 'Applying collection' : 'Launching' : 'Queued' : collection.failed ? 'Needs attention' : 'Completed'}</Badge></div>
                    <div class="collection-counts"><span><strong>{collection.done} / {collection.total}</strong> {collection.mode === 'exact' ? 'completed' : 'ready'}</span>{#if collection.provisioning + collection.verifying}<span>{collection.provisioning + collection.verifying} {collection.mode === 'exact' ? 'in progress' : 'launching'}</span>{/if}{#if collection.queued}<span>{collection.queued} queued</span>{/if}{#if collection.failed}<span class="error">{collection.failed} need attention</span>{/if}</div>
                    <div class="collection-meter" aria-hidden="true"><span class="verified" style:width={`${collection.done / (collection.total || 1) * 100}%`}></span><span class="unsuccessful" style:width={`${collection.failed / (collection.total || 1) * 100}%`}></span></div>
                    <div class="collection-footer"><span class="meta">Queued {fmt(collection.created_at)}</span><span class="collection-link">{collection.active ? 'Follow progress' : 'View results'} →</span></div>
                </a>
            {/each}</div>
            <ListFooter total={visibleCollections.length} bind:limit={collectionLimit} onchange={() => saveContext()} step={10} label="collections" />
        </section>
    {/if}
    {#if tab === 'active'}
    {#if attention.length}<div class="ui-summary"><span>{attention.length} recorded operations need review</span><Button size="sm" onclick={() => { historyState = 'attention'; tab = 'history'; saveContext(true); }}>Review history</Button></div>{/if}
    {#if active.some(d => d.canCancelRemoval)}<div class="ui-summary"><span>Waiting removals can be withdrawn until removal begins. Running and completed removals cannot be reversed.</span><Button disabled={cancelling} onclick={() => cancelRequests(active.filter(d => d.canCancelRemoval).map(d => d.id))}>Cancel all waiting removals</Button></div>{/if}
    <section>
        <h2>In flight <span>{active.length}</span></h2>
        {#if loading}<p>Loading provisioning activity...</p>
        {:else if active.length === 0}<EmptyState title="No server operations in flight" description="Server lifecycle operations appear here automatically." />
        {:else}<div class="rows">{#each active as d (d.id)}{@render row(d)}{/each}</div>{/if}
    </section>
    {:else}
    <section>
        <h2>History</h2>
        <div class="filters">
            <label>Operation <select bind:value={action} onchange={event => { action = event.currentTarget.value; saveContext(true); }}><option value="all">All operations</option>{#each provisioningActions as value}<option value={value}>{actionLabels[value]}</option>{/each}</select></label>
            <label>Status <select bind:value={historyState} onchange={event => { historyState = event.currentTarget.value; saveContext(true); }}><option value="all">All statuses</option><option value="attention">Needs review</option></select></label>
            <label>Server <input bind:value={search} oninput={event => { search = event.currentTarget.value; saveContext(true); }} placeholder="Filter by server name" /></label>
        </div>
        {#if !loading && history.length === 0}<EmptyState title="No matching operations" description="Try another search or operation type." />
        {:else}<div class="rows">{#each history.slice(0,limit) as d (d.id)}{@render row(d)}{/each}</div>{/if}
        <ListFooter total={history.length} bind:limit onchange={() => saveContext()} label="operations" />
    </section>
    {/if}
    </div>
</div>

{#snippet row(d: Deployment)}
    <article class="deployment-row"><a class="row-link" href="/provisioning/{d.id}">
        <div class="row-head">
            <div><Badge variant={d.action === 'create' ? 'info' : 'neutral'}>{actionLabels[d.action]}</Badge>
                <strong class="server"><HistoricalServerIdentity name={d.server} deletedAt={d.server_deleted_at} /></strong>
            </div>
            <StatusBadge state={d.state} />
        </div>
        <p>{d.state === 'done' ? actionCompleted[d.action] : d.stage}</p>
        <div class="meta"><span>Started {fmt(d.started_at)}</span>{#if d.finished_at}<span>Finished {fmt(d.finished_at)}</span>{/if}<span>By {d.triggered_by}</span></div>
        {#if d.error}<p class="error">{d.error}</p>{/if}
        {#each warnings(d) as warning}<p class="error">{warning}</p>{/each}
    </a>{#if d.canCancelRemoval && !d.server_deleted_at}<div class="row-actions"><Button size="sm" disabled={cancelling} onclick={() => cancelRequests([d.id])}>Cancel queued removal</Button></div>{/if}</article>
{/snippet}

<style>
    .row-link { color: inherit; text-decoration: none; display: block; }.row-actions { margin-top: 12px; }

    .page { display: flex; flex-direction: column; gap: 28px; }
    .row-head, .filters, .meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .row-head { justify-content: space-between; }

    section { display: grid; gap: 16px; }
    h2 { font-size: 18px; margin: 0; } h2 span { opacity: .6; margin-left: 8px; }
    p { margin: 8px 0; } a { color: var(--accent); }
    .rows { display: grid; gap: 12px; }
    .deployment-row { display: block; text-decoration: none; color: inherit; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); overflow-wrap: anywhere; }
    .deployment-row:hover { border-color: var(--border-strong); background: var(--surface-raised); }
    .deployment-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
    .collection-row { display: grid; gap: 16px; }.collection-counts { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; color: var(--text-secondary); }.collection-counts strong { color: var(--state-online); font-weight: 600; font-variant-numeric: tabular-nums; }.collection-meter { display: flex; height: 4px; background: var(--surface-raised); overflow: hidden; border-radius: var(--radius-pill); }.collection-meter .verified { background: var(--state-online); }.collection-meter .unsuccessful { background: var(--state-danger); }.collection-footer { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }.collection-footer .meta, .collection-link { font-size: 12px; }.collection-link { color: var(--accent-primary-hover); }
    .server { margin-left: 12px; font-family: var(--font-mono); font-size: 14px; }
    .meta { font-size: 13px; color: var(--text-secondary); }
    .error { color: var(--state-danger); }
    label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
    input, select { background: var(--surface); color: inherit; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 8px; max-width: 100%; }
    @media (max-width: 640px) { .row-head { align-items: flex-start; } .server { display: block; margin: 10px 0; } }
    .panels { display:grid; gap:24px; }
    .fleet-actions { position:relative; font-size:13px; }
    .fleet-actions summary { padding:10px; cursor:pointer; }
    .fleet-actions[open] :global(.btn) { position:absolute; right:0; top:100%; z-index:10; white-space:nowrap; box-shadow:var(--shadow-raised); }
</style>