Simplify beta lists and combine server test details

This commit is contained in:
2026-10-06 16:38:51 -04:00
parent ba015ca4c7
commit 36c2907602
8 changed files with 379 additions and 110 deletions
+18 -3
View File
@@ -1,5 +1,6 @@
import { db } from '../db/index.js';
import type { BetaRow } from './beta.js';
import { serverTitle } from '../../ui/server-labels.js';
const positive = (value: string | null, fallback: number) => {
const number = Number(value);
@@ -7,15 +8,29 @@ const positive = (value: string | null, fallback: number) => {
};
export function betaListPage(params: URLSearchParams) {
const state = params.get('state'), view = params.get('view'), search = (params.get('q') ?? '').slice(0, 200);
const state = params.get('state'), view = params.get('view'), search = (params.get('q') ?? '').slice(0, 200).trim();
const predicates: string[] = [], args: (string | number)[] = [];
if (state) { predicates.push('b.state=?'); args.push(state); }
else if (view === 'active') predicates.push("b.state IN ('running','ready-promote')");
else if (view === 'history') predicates.push("b.state IN ('promoted','rolled-back')");
const status = params.get('status');
if (status && ['ready', 'testing', 'attention', 'paused', 'promoted', 'rolled-back'].includes(status)) {
// Match betaStatus: closed lifecycle wins over the final test outcome.
predicates.push(`(CASE WHEN b.state IN ('promoted','rolled-back') THEN b.state
WHEN EXISTS (SELECT 1 FROM beta_servers m WHERE m.beta_id=b.id AND (m.server_deleted_at IS NOT NULL OR m.stage='failed'))
OR EXISTS (SELECT 1 FROM beta_test_plans p WHERE p.beta_id=b.id AND p.outcome IN ('failed','inconclusive')) THEN 'attention'
WHEN EXISTS (SELECT 1 FROM beta_test_plans p WHERE p.beta_id=b.id AND p.outcome='paused') THEN 'paused'
WHEN b.state='ready-promote' THEN 'ready' ELSE 'testing' END)=?`);
args.push(status);
}
if (search) {
const names = (db().prepare('SELECT DISTINCT server FROM beta_servers').all() as { server: string }[])
.filter(row => `${row.server} ${serverTitle(row.server)}`.toLowerCase().includes(search.toLowerCase())).map(row => row.server);
predicates.push(`(instr(lower('#'||b.id||' '||COALESCE(b.notes,'')),lower(?))>0 OR EXISTS (
SELECT 1 FROM beta_scripts bs JOIN scripts s ON s.id=bs.script_id WHERE bs.beta_id=b.id AND instr(lower(s.name),lower(?))>0))`);
args.push(search, search);
SELECT 1 FROM beta_scripts bs JOIN scripts s ON s.id=bs.script_id WHERE bs.beta_id=b.id AND (instr(lower(s.name),lower(?))>0 OR instr(lower(s.target_rel_path),lower(?))>0))
OR EXISTS (SELECT 1 FROM scripts s WHERE s.id=b.script_id AND (instr(lower(s.name),lower(?))>0 OR instr(lower(s.target_rel_path),lower(?))>0))
OR EXISTS (SELECT 1 FROM beta_servers m WHERE m.beta_id=b.id AND m.server IN (SELECT value FROM json_each(?))))`);
args.push(search, search, search, search, search, JSON.stringify(names));
}
const where = predicates.length ? ' WHERE ' + predicates.join(' AND ') : '';
const total = (db().prepare('SELECT COUNT(*) n FROM betas b' + where).get(...args) as { n: number }).n;
+21
View File
@@ -0,0 +1,21 @@
import type { StatusTone } from './status.js';
export interface BetaDeploymentServer {
server: string; server_deleted_at?: string | null; stage: string; error: string | null;
deployed_at: string | null; restarted_at: string | null; healthy_at: string | null;
match_seen_at: string | null; provisioning_id: string | null;
}
export function betaStatus(beta: { state: string; testOutcome?: string | null;
servers: { stage: string; server_deleted_at?: string | null }[] }): {
key: string; label: string; tone: StatusTone;
} {
if (beta.state === 'promoted') return { key: 'promoted', label: 'Promoted', tone: 'online' };
if (beta.state === 'rolled-back') return { key: 'rolled-back', label: 'Rolled back', tone: 'neutral' };
if (beta.servers.some(server => server.server_deleted_at || server.stage === 'failed') || ['failed', 'inconclusive'].includes(beta.testOutcome ?? '')) {
return { key: 'attention', label: 'Needs attention', tone: beta.testOutcome === 'failed' || beta.servers.some(server => server.stage === 'failed') ? 'danger' : 'warning' };
}
if (beta.testOutcome === 'paused') return { key: 'paused', label: 'Paused', tone: 'warning' };
if (beta.state === 'ready-promote') return { key: 'ready', label: 'Ready to promote', tone: 'online' };
return { key: 'testing', label: 'Testing', tone: 'info' };
}
+90 -23
View File
@@ -1,6 +1,10 @@
<script lang="ts">
import { timeFormat } from '$ui/stores/time-zone.js';
import { tick } from 'svelte';
import { page } from '$app/stores';
import { contextHref } from '$lib/navigation-context.js';
import type { BetaDeploymentServer } from '$ui/betas.js';
import Badge from './primitives/Badge.svelte';
import HistoricalServerIdentity from './HistoricalServerIdentity.svelte';
import StatusBadge from './primitives/StatusBadge.svelte';
import ListFooter from './primitives/ListFooter.svelte';
@@ -9,21 +13,38 @@
import { coverageSummary, requirementSummary, needsGameTelemetry } from '$lib/beta-plan-summary.js';
import { betaWaitingCondition, betaEvidenceSummary } from '$lib/beta-evidence.js';
import type { BetaRequirement, BetaTestView } from '$lib/beta-plan.js';
let { test, betaId, closed, deadline, retryBlocked, deletedParticipants = false, onUpdate }: { test:BetaTestView; betaId:number; closed:boolean; deadline?:string; retryBlocked?:string; deletedParticipants?:boolean; onUpdate:()=>Promise<void> } = $props();
let { test, betaId, closed, deadline, retryBlocked, deletedParticipants = false, deployments, busy = $bindable(false), onUpdate }: { test:BetaTestView; betaId:number; closed:boolean; deadline?:string; retryBlocked?:string; deletedParticipants?:boolean; deployments?:BetaDeploymentServer[]; busy?:boolean; onUpdate:()=>Promise<void> } = $props();
let notes = $state<Record<string,string>>({});
let evidenceOpen = $state(false), evidenceLimit = $state(25), busy = $state(false), error = $state(''), message = $state('');
let evidenceOpen = $state(false), evidenceLimit = $state(25), error = $state(''), message = $state('');
let evidenceServer = $state(''), evidenceKind = $state(''), evidenceQuery = $state('');
let evidenceSection = $state<HTMLDetailsElement>();
const hasDeletedServers = $derived(deletedParticipants || test.servers.some(server => server.server_deleted_at));
const hasDeletedServers = $derived(deletedParticipants || test.servers.some(server => server.server_deleted_at) || deployments?.some(server => server.server_deleted_at));
const canSign = $derived(!closed && !hasDeletedServers && ['active','passed'].includes(test.outcome));
const expired = $derived(test.outcome === 'inconclusive' || (!!deadline && test.outcome !== 'passed' && Date.parse(deadline) <= Date.now()));
const ranked = $derived([...test.servers].sort((a,b) => (a.progress.some(r => r.failed) ? 0 : a.passed ? 2 : 1) - (b.progress.some(r => r.failed) ? 0 : b.passed ? 2 : 1) || a.server.localeCompare(b.server)));
let expanded = $state<Record<string, boolean>>({});
const combined = $derived.by(() => {
const rows = [...(deployments ?? [])];
for (const server of test.servers) {
if (!rows.some(row => row.server === server.server)) rows.push({ server: server.server, server_deleted_at: server.server_deleted_at,
stage: 'unknown', error: null, deployed_at: null, restarted_at: null, healthy_at: null, match_seen_at: null, provisioning_id: null });
}
return rows.map(deployment => {
const result = test.servers.find(server => server.server === deployment.server);
const deletedAt = deployment.server_deleted_at ?? result?.server_deleted_at ?? null;
return { deployment: { ...deployment, server_deleted_at: deletedAt }, result: result ? { ...result, server_deleted_at: deletedAt } : undefined };
})
.sort((a,b) => rank(a) - rank(b) || a.deployment.server.localeCompare(b.deployment.server));
});
function rank(row: { deployment: BetaDeploymentServer; result?: BetaTestView['servers'][number] }) {
return row.deployment.stage === 'failed' || row.result?.progress.some(check => check.failed) ? 0 : row.result?.passed ? 2 : 1;
}
const filteredEvidence = $derived(test.evidence.filter(event => (!evidenceServer || event.server === evidenceServer)
&& (!evidenceKind || (evidenceKind === 'gameplay' ? ['game_start','round_change','heartbeat','game_end'].includes(event.kind) : evidenceKind === 'health' ? ['health','status-sample'].includes(event.kind) : event.kind === evidenceKind))
&& (!evidenceQuery || `${betaEvidenceSummary(event)} ${event.payload}`.toLowerCase().includes(evidenceQuery.toLowerCase()))));
$effect(() => { evidenceServer; evidenceKind; evidenceQuery; evidenceLimit = 25; });
function reportAge(at:string) { const minutes=Math.max(0,Math.floor((Date.now()-Date.parse(at))/60000));return minutes<1?'less than a minute ago':minutes<60?`${minutes}m ago`:`${Math.floor(minutes/60)}h ${minutes%60}m ago`; }
async function action(action:string, extra:Record<string,string>={}) {
export async function action(action:string, extra:Record<string,string>={}) {
if (action === 'retry' && !await confirmAction({title:'Start a fresh test attempt?',message:`Reset current progress and checklist sign-offs on ${test.servers.length} deployed servers. They will restart when empty and must collect fresh evidence. Previous evidence remains in history. The deadline stays ${deadline ? $timeFormat.dateTime(deadline) : 'unchanged'}.`,confirmLabel:'Reset and restart testing'})) return;
busy = true; error = ''; message = '';
try {
@@ -41,12 +62,11 @@
</script>
<section aria-label="Test plan progress">
<div class="heading"><h2>Test results</h2><StatusBadge state={test.outcome}/></div>
<p>{coverageSummary(test.plan)} · Every requirement must pass on each qualifying server.</p>
{#if !closed}
<div class="heading"><h2>{deployments ? 'Test servers' : 'Test results'}</h2>{#if !deployments}<StatusBadge state={test.outcome}/>{/if}</div>
{#if !closed && !deployments}
{#if !hasDeletedServers}<div class="actions">
{#if test.outcome === 'paused' && !expired}<Button size="sm" disabled={busy} onclick={()=>action('resume')}>Resume testing</Button>{/if}
{#if ['active','passed'].includes(test.outcome)}<Button size="sm" disabled={busy} onclick={()=>action('pause')}>Pause testing</Button>{/if}
{#if test.outcome === 'active'}<Button size="sm" disabled={busy} onclick={()=>action('pause')}>Pause testing</Button>{/if}
{#if ['paused','failed'].includes(test.outcome) && !expired}<Button size="sm" disabled={busy || !!retryBlocked} onclick={()=>action('retry')}>Start fresh attempt</Button>{/if}
</div>{/if}
{#if retryBlocked && ['paused','failed'].includes(test.outcome)}<p>{retryBlocked}</p>{/if}
@@ -55,10 +75,61 @@
{/if}
{#if error}<p role="alert" class="failed">{error}</p>{/if}
{#if message}<p role="status">{message}</p>{/if}
{#if !test.servers.length}<p>{hasDeletedServers ? 'No test run was recorded before a participating server was deleted.' : 'Waiting for the first server restart. Evidence collection begins with that run. The testing window is already running.'}</p>{/if}
{#if !test.servers.length}<p>{closed ? 'Test results were not recorded.' : hasDeletedServers ? 'No test run was recorded before a participating server was deleted.' : 'Awaiting the first test run.'}</p>{/if}
{#if deployments}
<div class="table-scroll"><table>
<thead><tr><th scope="col">Server</th><th scope="col">Deployment</th><th scope="col">Test result</th><th scope="col" class="align-right">Details</th></tr></thead>
<tbody>{#each combined as { deployment, result } (deployment.server)}
{@const failed = deployment.stage === 'failed' || result?.progress.some(check => check.failed)}
{@const open = expanded[deployment.server] ?? Boolean(failed)}
<tr>
<td><HistoricalServerIdentity name={deployment.server} deletedAt={deployment.server_deleted_at} href={contextHref(`/servers/${encodeURIComponent(deployment.server)}`, $page.url)} /></td>
<td><StatusBadge state={deployment.stage === 'observing' ? 'ready' : deployment.stage} /></td>
<td>{#if result?.passed}<Badge variant="online">Passed</Badge>
{:else if result?.progress.some(check => check.failed)}<Badge variant="danger">Failed</Badge>
{:else if !result}<span>{closed || deployment.server_deleted_at ? 'Not recorded' : 'Awaiting test run'}</span>
{:else}<Badge variant="neutral">{closed ? 'Incomplete' : test.outcome === 'paused' ? 'Paused' : 'Waiting'}</Badge>{/if}
</td>
<td class="align-right"><button class="disclosure" aria-expanded={open} aria-controls={`beta-server-${betaId}-${deployment.server}`} aria-label={`${open ? 'Hide' : 'Show'} details for ${deployment.server}`} onclick={() => expanded = { ...expanded, [deployment.server]: !open }}>{open ? 'Hide' : 'Details'} <span aria-hidden="true">{open ? '−' : '+'}</span></button></td>
</tr>
<tr hidden={!open} id={`beta-server-${betaId}-${deployment.server}`} class="server-detail"><td colspan="4">
{#if deployment.error}<p class:failed={deployment.stage === 'failed'}>{deployment.error}</p>{/if}
<div class="deployment-details"><span>Files: {deployment.deployed_at ? 'installed' : 'pending'}</span><span>Restart: {deployment.restarted_at ? 'submitted' : 'pending'}</span><span>Health: {deployment.healthy_at ? 'verified' : 'not recorded'}</span>
{#if deployment.match_seen_at}<span>Match observed {$timeFormat.dateTime(deployment.match_seen_at)}</span>{/if}
</div>
<div class="deployment-links">
{#if !deployment.server_deleted_at}<a href={contextHref(`/servers/${encodeURIComponent(deployment.server)}?tab=diagnostics`, $page.url)}>Diagnostics</a><a href={contextHref(`/servers/${encodeURIComponent(deployment.server)}?tab=logs`, $page.url)}>Open logs</a>{/if}
{#if deployment.provisioning_id}<a href={contextHref(`/provisioning/${encodeURIComponent(deployment.provisioning_id)}`, $page.url)}>View provisioning</a>{/if}
</div>
{#if result}
{#if result.progress.length}<p>{result.progress.filter(check => check.passed).length} of {result.progress.length} checks passed{test.plan.requirements.some(requirement => requirement.kind === 'recovery') ? ` · Recovery cycle ${result.phase}` : ''}</p>{/if}
{@render checks(result)}
{:else}<p>{closed || deployment.server_deleted_at ? 'No test results were recorded for this server.' : 'Checks become available after the server restarts.'}</p>{/if}
</td></tr>
{/each}</tbody>
</table></div>
{:else}
{#each ranked as server (server.server)}
<details class="server" open={!server.passed}>
<summary><HistoricalServerIdentity name={server.server} deletedAt={server.server_deleted_at}/><span>{server.progress.filter(p=>p.passed).length} / {server.progress.length} checks passed</span>{#if test.plan.requirements.some(r=>r.kind==='recovery')}<span>Recovery cycles: {server.phase}</span>{/if}</summary>
{@render checks(server)}
</details>
{/each}
{/if}
<details><summary>Test policy</summary><p>{coverageSummary(test.plan)} · Every requirement must pass on each qualifying server.</p><p>{test.plan.waveSize ? `${test.plan.waveSize} servers per wave.` : 'All selected servers deployed together.'} {test.plan.failureAction === 'rollback' ? 'Failed checks trigger automatic rollback.' : test.plan.failureAction === 'pause' ? 'Failed checks pause testing for investigation.' : 'Failed checks hold testing for review.'} {test.plan.rollbackRestart === 'when-empty' ? 'Rollback restarts wait for empty servers.' : 'Rollback changes wait until the rollback campaign is resumed.'} Health checks continue after passing until promotion.</p></details>
<details bind:this={evidenceSection} bind:open={evidenceOpen} class="evidence-section">
<summary>Evidence ({test.evidence.length}{test.evidence.length===200 ? ' most recent' : ''})</summary>
{#if evidenceOpen}
<p>Newest first. Includes retained evidence from earlier attempts and recovery cycles; current progress uses only the current attempt.</p>
<div class="filters"><label>Server<select bind:value={evidenceServer}><option value="">All servers</option>{#each [...new Set(test.evidence.map(event=>event.server))] as server}<option value={server}>{server}</option>{/each}</select></label><label>Event type<select bind:value={evidenceKind}><option value="">All events</option><option value="gameplay">Gameplay reports</option><option value="health">Health observations</option><option value="manual-sign-off">Tester sign-offs</option></select></label><label>Search evidence<input type="search" bind:value={evidenceQuery} placeholder="Round, map, tester, observation…"/></label></div>
{#each filteredEvidence.slice(0,evidenceLimit) as event(event.id)}<article class="evidence"><div class="heading"><HistoricalServerIdentity name={event.server} deletedAt={event.server_deleted_at}/><time datetime={event.received_at}>{$timeFormat.dateTime(event.received_at)}</time></div><p>{betaEvidenceSummary(event)}</p><details><summary>Raw payload · {event.kind}</summary><pre>{event.payload}</pre></details></article>{/each}
<ListFooter total={filteredEvidence.length} bind:limit={evidenceLimit} label="events"/>
{#if !filteredEvidence.length}<p>{test.evidence.length ? 'No evidence matches these filters.' : 'No evidence recorded yet. Check deployment progress and telemetry diagnostics.'}</p>{/if}
{/if}
</details>
</section>
{#snippet checks(server: BetaTestView['servers'][number])}
{#if test.plan.requirements.some(needsGameTelemetry)}<p class="observation">{#if server.observation?.lastGameplayAt}Latest gameplay: {server.observation.lastEvent?.replaceAll('_',' ')} · <time datetime={server.observation.lastGameplayAt} title={$timeFormat.dateTime(server.observation.lastGameplayAt)}>{reportAge(server.observation.lastGameplayAt)}</time> · {server.observation.players ?? 'Unknown'} players{#if server.observation.round !== null} · Round {server.observation.round}{/if}{:else}No gameplay reports in this attempt yet.{/if} {#if !server.server_deleted_at}<a href={`/servers/${encodeURIComponent(server.server)}?tab=diagnostics#telemetry`}>Telemetry diagnostics</a>{/if}</p>{/if}
{#each server.progress as progress (progress.id)}
{@const requirement = test.plan.requirements.find(r=>r.id===progress.id)}
@@ -74,22 +145,18 @@
<button class="evidence-link" onclick={()=>showEvidence(server.server,requirement)}>View relevant evidence</button>
</div>{/if}
{/each}
</details>
{/each}
<details><summary>Test policy</summary><p>{test.plan.waveSize ? `${test.plan.waveSize} servers per wave.` : 'All selected servers deployed together.'} {test.plan.failureAction === 'rollback' ? 'Failed checks trigger automatic rollback.' : test.plan.failureAction === 'pause' ? 'Failed checks pause testing for investigation.' : 'Failed checks hold testing for review.'} {test.plan.rollbackRestart === 'when-empty' ? 'Rollback restarts wait for empty servers.' : 'Rollback restores files; restart servers manually.'} Health checks continue after passing until promotion.</p></details>
<details bind:this={evidenceSection} bind:open={evidenceOpen} class="evidence-section">
<summary>Evidence ({test.evidence.length}{test.evidence.length===200 ? ' most recent' : ''})</summary>
{#if evidenceOpen}
<p>Newest first. Includes retained evidence from earlier attempts and recovery cycles; current progress uses only the current attempt.</p>
<div class="filters"><label>Server<select bind:value={evidenceServer}><option value="">All servers</option>{#each [...new Set(test.evidence.map(event=>event.server))] as server}<option value={server}>{server}</option>{/each}</select></label><label>Event type<select bind:value={evidenceKind}><option value="">All events</option><option value="gameplay">Gameplay reports</option><option value="health">Health observations</option><option value="manual-sign-off">Tester sign-offs</option></select></label><label>Search evidence<input type="search" bind:value={evidenceQuery} placeholder="Round, map, tester, observation…"/></label></div>
{#each filteredEvidence.slice(0,evidenceLimit) as event(event.id)}<article class="evidence"><div class="heading"><HistoricalServerIdentity name={event.server} deletedAt={event.server_deleted_at}/><time datetime={event.received_at}>{$timeFormat.dateTime(event.received_at)}</time></div><p>{betaEvidenceSummary(event)}</p><details><summary>Raw payload · {event.kind}</summary><pre>{event.payload}</pre></details></article>{/each}
<ListFooter total={filteredEvidence.length} bind:limit={evidenceLimit} label="events"/>
{#if !filteredEvidence.length}<p>{test.evidence.length ? 'No evidence matches these filters.' : 'No evidence recorded yet. Check deployment progress and telemetry diagnostics.'}</p>{/if}
{/if}
</details>
</section>
{/snippet}
<style>
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:var(--text-sm); text-align:left; }
th { padding:10px 12px; border-bottom:1px solid var(--border-strong); color:var(--text-tertiary); font-size:var(--text-xs); font-weight:var(--weight-medium); }
td { padding:16px 12px; border-bottom:1px solid var(--border-subtle); }
.align-right { text-align:right; }
.disclosure { background:transparent; border:0; padding:8px 0; color:var(--text-secondary); cursor:pointer; font:inherit; white-space:nowrap; }
.server-detail { background:var(--surface); }
.deployment-details,.deployment-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin:12px 0; font-size:var(--text-sm); }
@media(max-width:720px) { table { min-width:620px; } }
section { display:grid; gap:16px; } h2,p { margin:0; } h2 { font-size:18px; }
p,span,time { font-size:13px; line-height:1.6; color:var(--text-secondary); } a { color:var(--accent-primary-hover); }
.heading,.actions,.filters { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .heading { justify-content:space-between; }
@@ -2,7 +2,8 @@
import { timeFormat } from '$ui/stores/time-zone.js';
import type { ActivityEvent, OperationStep } from '$lib/operation-flow.js';
import Button from './primitives/Button.svelte';
let { steps = [], events, active = false, showOverview = true }: { steps?: OperationStep[]; events: ActivityEvent[]; active?: boolean; showOverview?: boolean } = $props();
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);
@@ -40,6 +41,7 @@
{: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>
+60 -30
View File
@@ -9,10 +9,9 @@
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
import Button from '$ui/components/primitives/Button.svelte';
import Tabs from '$ui/components/primitives/Tabs.svelte';
import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
import Badge from '$ui/components/primitives/Badge.svelte';
import { betaStatus } from '$ui/betas.js';
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
import { statusPresentation } from '$lib/ui/status.js';
import { serverTitle } from '$ui/server-labels.js';
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
interface BetaListRow {
id: number;
@@ -29,7 +28,7 @@
id: number; name: string; target_rel_path: string; kind: ArtifactKind;
version: { id: number; version: number; release_version: string | null; sha256: string } | null;
}>;
servers: Array<{ server: string; stage: string; error: string | null }>;
servers: Array<{ server: string; server_deleted_at?: string | null; stage: string; error: string | null }>;
}
let betas = $state<BetaListRow[]>([]);
@@ -37,6 +36,7 @@
let error = $state('');
let tab = $state('active');
let search = $state('');
let status = $state('');
let pageNumber = $state(1), totalPages = $state(1), total = $state(0);
let counts = $state({ active: 0, history: 0 });
let request = 0;
@@ -45,20 +45,16 @@
let now = $state(Date.now());
function age(date:string) { const minutes=Math.max(0,Math.floor((now-Date.parse(date))/60000));return minutes<60?`${minutes}m ago`:minutes<1440?`${Math.floor(minutes/60)}h ago`:`${Math.floor(minutes/1440)}d ago`; }
function blocker(beta:BetaListRow) {
if(beta.state==='promoted')return 'Version promoted; check its campaign for remaining activation.';
if(beta.state==='rolled-back')return 'Rolled back. The files and plan can be reused for another attempt.';
if(beta.state==='ready-promote')return 'Ready for promotion review.';
if(beta.testReason)return beta.testReason;
const problem=beta.servers.find(server=>server.error);
if(problem)return `${serverTitle(problem.server)}: ${problem.error}`;
const waiting=beta.servers.find(server=>server.stage!=='ready');
return waiting?`${serverTitle(waiting.server)}: ${statusPresentation(waiting.stage).label.toLowerCase()}.`:'Waiting for test evaluation.';
function deadlineLabel(beta: BetaListRow) {
if (!beta.deadlineAt || !active(beta) || beta.testOutcome === 'passed') return '';
const minutes = Math.ceil((Date.parse(beta.deadlineAt) - now) / 60000);
return minutes <= 0 ? 'Testing window ended' : minutes <= 120 ? `${minutes}m remaining` : '';
}
$effect(() => {
const params = $page.url.searchParams;
tab = params.get('view') === 'history' ? 'history' : 'active';
search = params.get('q') ?? '';
status = params.get('status') ?? '';
pageNumber = Math.max(1, Number(params.get('page')) || 1);
void load(params);
});
@@ -66,6 +62,7 @@
const url = new URL($page.url);
if (tab === 'history') url.searchParams.set('view', tab); else url.searchParams.delete('view');
if (search) url.searchParams.set('q', search); else url.searchParams.delete('q');
if (status) url.searchParams.set('status', status); else url.searchParams.delete('status');
url.searchParams.delete('limit');
if (pageNumber > 1) url.searchParams.set('page', String(pageNumber)); else url.searchParams.delete('page');
void goto(url, { replaceState: true, noScroll: true, keepFocus: true });
@@ -95,29 +92,62 @@
</script>
<svelte:head><title>Betas · Electric Cherry</title></svelte:head>
<div class="page">
<SectionHeader title="Betas" subtitle="Test selected versions before promoting them to the fleet.">
<SectionHeader title="Betas">
{#snippet actions()}<Button variant="primary" href="/betas/new">New beta</Button>{/snippet}
</SectionHeader>
<Tabs {tabs} bind:value={tab} onchange={() => { pageNumber = 1; saveContext(); }} idPrefix="beta-tabs" panelId="beta-list" ariaLabel="Beta views" />
<div class="ui-toolbar"><input type="search" bind:value={search} oninput={event => { search = event.currentTarget.value; pageNumber = 1; saveContext(); }} aria-label="Search betas" placeholder="Search betas or files…" /></div>
<div class="toolbar">
<div class="view-tabs"><Tabs {tabs} bind:value={tab} onchange={() => { pageNumber = 1; status = ''; saveContext(); }} idPrefix="beta-tabs" panelId="beta-list" ariaLabel="Beta views" /></div>
<label class="search">Search<input type="search" bind:value={search} oninput={() => { pageNumber = 1; saveContext(); }} placeholder="Name, beta number, file, or server" maxlength="200" /></label>
<label>Status<select bind:value={status} onchange={() => { pageNumber = 1; saveContext(); }}>
<option value="">All statuses</option>
{#if tab === 'active'}<option value="ready">Ready to promote</option><option value="testing">Testing</option><option value="attention">Needs attention</option><option value="paused">Paused</option>
{:else}<option value="promoted">Promoted</option><option value="rolled-back">Rolled back</option>{/if}
</select></label>
{#if search || status}<Button variant="ghost" onclick={() => { search = ''; status = ''; pageNumber = 1; saveContext(); }}>Clear filters</Button>{/if}
</div>
{#if error}<div class="ui-error" role="alert">{error} {betas.length ? 'Showing the last loaded results.' : ''}<Button size="sm" onclick={() => load()}>Retry</Button></div>{/if}
<div id="beta-list" role="tabpanel" aria-labelledby={'beta-tabs-' + tab}>
{#if loading}<EmptyState title="Loading betas…" />
{:else if !betas.length && !error}<EmptyState title={search ? 'No matching betas' : tab === 'active' ? 'No active betas' : 'No beta history'} description={tab === 'active' && !search ? 'Start a beta when you have a version ready to test.' : undefined} />
{:else}<div class="rows">{#each betas as beta (beta.id)}
<a href={contextHref('/betas/' + beta.id, $page.url)} class="row">
<div class="identity"><strong>{beta.notes || `Beta #${beta.id}`}</strong>{#if beta.notes}<span class="beta-id"> · #{beta.id}</span>{/if}<span class="files">{beta.scripts.map(s => s.name + ' · ' + artifactVersionLabel(s.version)).join(', ')}</span><span class="blocker">{blocker(beta)}</span><span class="timing"><time datetime={beta.opened_at} title={$timeFormat.dateTime(beta.opened_at)}>Opened {age(beta.opened_at)}</time>{#if beta.deadlineAt && active(beta)} · Ends {$timeFormat.dateTime(beta.deadlineAt)}{:else if beta.closed_at} · Finished {$timeFormat.dateTime(beta.closed_at)}{/if}</span></div>
<div class="meta"><StatusBadge state={beta.state} />{#if beta.testOutcome && beta.testOutcome !== 'active'}<StatusBadge state={beta.testOutcome} />{/if}<span>{beta.servers.filter(server=>server.stage==='ready').length} / {beta.servers.length} servers passed</span></div>
</a>
{/each}</div><div class="ui-toolbar" aria-label="Beta pagination"><span>{total} betas · Page {pageNumber} of {totalPages}</span><Button size="sm" disabled={pageNumber <= 1} onclick={() => { pageNumber--; saveContext(); }}>Previous</Button><Button size="sm" disabled={pageNumber >= totalPages} onclick={() => { pageNumber++; saveContext(); }}>Next</Button></div>{/if}
{:else if !betas.length && !error}<EmptyState title={search || status ? 'No matching betas' : tab === 'active' ? 'No active betas' : 'No beta history'} description={search || status ? 'Try another search or clear the filters.' : tab === 'active' ? 'Start a beta when you have a version ready to test.' : undefined} />
{:else}
<div class="table-scroll"><table>
<thead><tr><th scope="col">Beta</th><th scope="col">Files</th><th scope="col">Status</th><th scope="col" class="started">Started</th></tr></thead>
<tbody>{#each betas as beta (beta.id)}
{@const presentation = betaStatus(beta)}
{@const expiry = deadlineLabel(beta)}
<tr>
<td><a class="beta-link" href={contextHref('/betas/' + beta.id, $page.url)}>{beta.notes || `Beta #${beta.id}`}</a>{#if beta.notes}<span class="beta-id">#{beta.id}</span>{/if}</td>
<td class="files">{#if beta.scripts.length === 1}{beta.scripts[0].name} <span>{artifactVersionLabel(beta.scripts[0].version)}</span>{:else}{beta.scripts.length} files{/if}</td>
<td><Badge variant={presentation.tone} size="md">{presentation.label}</Badge>{#if expiry}<span class="expiry">{expiry}</span>{/if}</td>
<td class="started"><button type="button" class="timestamp" aria-label={`Started ${$timeFormat.dateTime(beta.opened_at)}`}><time datetime={beta.opened_at}>{age(beta.opened_at)}</time><span class="exact-time" aria-hidden="true">{$timeFormat.dateTime(beta.opened_at)}</span></button></td>
</tr>
{/each}</tbody>
</table></div>
{#if totalPages > 1}<div class="pagination" aria-label="Beta pagination"><span>{total} betas · Page {pageNumber} of {totalPages}</span><div><Button size="sm" disabled={pageNumber <= 1} onclick={() => { pageNumber--; saveContext(); }}>Previous</Button><Button size="sm" disabled={pageNumber >= totalPages} onclick={() => { pageNumber++; saveContext(); }}>Next</Button></div></div>{/if}
{/if}
</div>
</div>
<style>
.page { display:grid; gap:24px; }
.rows { display:grid; gap:8px; }
.row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:16px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); color:var(--text-primary); text-decoration:none; }
.row:hover { border-color:var(--border-strong); }
.files { display:block; margin-top:6px; font-size:13px; color:var(--text-secondary); overflow-wrap:anywhere; }
.meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--text-secondary); }
.identity { flex:1 1 320px; min-width:0; } .blocker,.timing { display:block; margin-top:8px; line-height:1.5; font-size:13px; overflow-wrap:anywhere; } .timing,.beta-id { color:var(--text-secondary); font-size:12px; }
.page { display:grid; gap:24px; min-width:0; }
.toolbar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.view-tabs { align-self:flex-end; max-width:100%; }
label { display:grid; gap:6px; font-size:var(--text-xs); color:var(--text-secondary); }
.search { flex:1; min-width:240px; }
input,select { padding:10px 12px; min-height:40px; background:var(--surface-sunken); color:var(--text-primary); border:1px solid var(--border-control); border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm); }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:var(--text-sm); text-align:left; }
th { padding:10px 16px; border-bottom:1px solid var(--border-strong); color:var(--text-tertiary); font-size:var(--text-xs); font-weight:var(--weight-medium); }
td { padding:16px; border-bottom:1px solid var(--border-subtle); }
tbody tr:hover { background:var(--surface); }
.beta-link { font-weight:var(--weight-semibold); color:var(--text-primary); text-decoration:none; overflow-wrap:anywhere; }
.beta-link:hover { color:var(--accent-primary-hover); text-decoration:underline; }
.beta-id { margin-left:8px; font-size:var(--text-xs); color:var(--text-tertiary); }
.files { color:var(--text-secondary); overflow-wrap:anywhere; }.files span { white-space:nowrap; }
.expiry { display:block; margin-top:6px; font-size:var(--text-xs); color:var(--state-warning); }
.started { text-align:right; color:var(--text-secondary); }
.timestamp { position:relative; display:inline-block; white-space:nowrap; cursor:help; background:transparent; border:0; color:inherit; font:inherit; padding:0; }
.exact-time { display:none; position:absolute; right:0; bottom:100%; z-index:1; background:var(--surface-overlay); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:6px 10px; font-size:var(--text-xs); }
.timestamp:hover .exact-time,.timestamp:focus .exact-time { display:block; }
.pagination,.pagination > div { display:flex; align-items:center; gap:12px; }.pagination { justify-content:space-between; margin-top:16px; font-size:var(--text-sm); color:var(--text-secondary); }
@media(max-width:720px) { table { min-width:620px; } th,td { padding:12px 8px; }.search { flex-basis:100%; }.pagination { flex-wrap:wrap; } }
</style>
+91 -51
View File
@@ -1,14 +1,14 @@
<script lang="ts">
import { contextHref } from '$lib/navigation-context.js';
import BackLink from '$ui/components/BackLink.svelte';
import { timeFormat } from '$ui/stores/time-zone.js';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { artifactVersionLabel } from '$lib/artifact-version.js';
import type { BetaTestView } from '$lib/beta-plan.js';
import type { BetaPromotionPreview } from '$lib/beta-promotion.js';
import { coverageSummary, requirementSummary } from '$lib/beta-plan-summary.js';
import { requirementSummary } from '$lib/beta-plan-summary.js';
import type { ActivityEvent } from '$lib/operation-flow.js';
import { betaStatus } from '$ui/betas.js';
import { betaUpdates } from '$ui/beta-updates.js';
import { confirmAction } from '$ui/confirm.js';
import type { BetaRevision } from '$lib/beta-revision.js';
@@ -18,7 +18,6 @@
import HistoricalServerIdentity from '$ui/components/HistoricalServerIdentity.svelte';
import OperationHistory from '$ui/components/OperationHistory.svelte';
import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
import Card from '$ui/components/primitives/Card.svelte';
import Button from '$ui/components/primitives/Button.svelte';
import Dialog from '$ui/components/primitives/Dialog.svelte';
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
@@ -43,6 +42,9 @@
let reviewOpen = $state(false), preview = $state<BetaPromotionPreview|null>(null), reviewError = $state('');
let now = $state(Date.now());
let revision = $state({ revision: 1, started_at: '' }), revisions = $state<BetaRevision[]>([]);
let testProgress = $state<{ action: (action: string) => Promise<void> }>();
let testBusy = $state(false), moreActionsOpen = $state(false);
let legacyExpanded = $state<Record<string, boolean>>({});
let updateOpen = $state(false), updateRevision = $state(1), updateFiles = $state<BetaFile[]>([]);
function openUpdate() { updateRevision = revision.revision; updateFiles = [...scripts]; updateOpen = true; }
const id = $derived(Number($page.params.id));
@@ -51,16 +53,21 @@
const deadline = $derived(beta && test ? new Date(Date.parse(revision.started_at || beta.opened_at) + test.plan.timeoutHours * 3600000) : null);
const remaining = $derived(deadline ? Math.max(0, Math.ceil((deadline.getTime() - now) / 60000)) : 0);
const deadlineText = $derived(remaining > 0 ? `${Math.floor(remaining / 60)}h ${remaining % 60}m remaining` : 'Testing window ended');
const passed = $derived(test?.servers.filter(server => server.passed).length ?? servers.filter(server => server.stage === 'ready').length);
const passed = $derived(test?.servers.filter(server => server.passed).length ?? 0);
const presentation = $derived(betaStatus({ state: beta?.state ?? 'running', testOutcome: test?.outcome, servers }));
const testExpired = $derived(test?.outcome === 'inconclusive' || (!!deadline && test?.outcome !== 'passed' && deadline.getTime() <= now));
const retryBlocked = $derived(servers.some(server => server.error?.startsWith('deploy:')));
const busy = $derived(acting !== null || testBusy);
const ranked = $derived([...servers].sort((a,b) => (a.stage === 'failed' ? 0 : a.stage === 'ready' ? 2 : 1) - (b.stage === 'failed' ? 0 : b.stage === 'ready' ? 2 : 1) || a.server.localeCompare(b.server)));
const waiting = $derived(ranked.filter(server => server.stage !== 'ready'));
const nextAction = $derived(closed ? beta?.state === 'promoted' ? 'Follow the campaign to check server activation.' : rollbackCampaign ? 'Follow the rollback campaign to resume held changes or check restoration and restart progress.' : 'Reuse these files and this plan when you are ready to test again.'
: hasDeletedServers ? 'A participating server was deleted. Its results remain below. Roll back, then reuse this plan to test the current servers.'
: test?.outcome === 'inconclusive' ? 'The deadline passed without enough evidence. Update the files to start a new revision, or roll back and reuse this plan.'
: test?.outcome === 'paused' ? 'Resume to continue collecting evidence, or start a fresh attempt. The original deadline still applies.'
: test?.outcome === 'failed' ? 'Investigate the failed check before a fresh attempt, or roll back.'
: beta?.state === 'ready-promote' ? 'All required coverage passed. Review the full promotion impact before deploying to additional servers.'
: 'Review the outstanding conditions below. Promotion becomes available when the required coverage passes.');
const blocker = $derived(closed ? ''
: hasDeletedServers ? 'A test server was deleted. Roll back and reuse the plan to test the current servers.'
: test?.outcome === 'inconclusive' ? 'The testing window ended without enough evidence. Update the beta for a new revision, or roll back.'
: test?.outcome === 'paused' ? 'Testing is paused. The original deadline still applies.'
: presentation.key === 'ready' ? '' : test?.reason || ranked.find(server => server.stage === 'failed')?.error
|| ranked.find(server => server.stage !== 'ready')?.error
|| (ranked.length ? outstanding(test?.servers.find(server => !server.passed)?.server ?? ranked[0].server) : 'Waiting for test servers.'));
function testAction(action: string) { moreActionsOpen = false; void testProgress?.action(action); }
async function load() {
const current = ++request, requestedId = id;
@@ -78,7 +85,7 @@
} catch (error) { if (current === request && requestedId === id) loadError = (error as Error).message; }
finally { if (current === request && requestedId === id) loading = false; }
}
$effect(() => { id; activityRequest++; activityBefore = null; activityLoading = false; beta = null; loading = true; loadError = ''; flash = ''; success = ''; reviewOpen = false; updateOpen = false; void load(); });
$effect(() => { id; activityRequest++; activityBefore = null; activityLoading = false; beta = null; loading = true; loadError = ''; flash = ''; success = ''; reviewOpen = false; updateOpen = false; moreActionsOpen = false; legacyExpanded = {}; void load(); });
onMount(() => {
const stop = betaUpdates(load, () => id);
const clock = setInterval(() => { now = Date.now(); }, 30000);
@@ -155,41 +162,65 @@
{:else if !beta && !loadError}<EmptyState title="Beta not found" description="Return to Betas to find another test." />
{:else if beta}
<div class="page">
<SectionHeader title={beta.notes || `Beta #${beta.id}`} subtitle={`Beta #${beta.id} · Revision ${revision.revision}`}>
<SectionHeader title={beta.notes || `Beta #${beta.id}`} subtitle={beta.notes ? `Beta #${beta.id}` : undefined}>
{#snippet crumbs()}<Breadcrumbs items={[{label:'Betas',href:'/betas'},{label:`#${id}`}]} />{/snippet}
{#snippet actions()}<StatusBadge state={test && !closed ? test.outcome : beta?.state ?? 'running'} />{/snippet}
</SectionHeader>
<BackLink fallback="/betas" />
<Card padding="lg">
<div class="summary-heading"><h2>{closed ? beta.state === 'promoted' ? 'Version promoted' : 'Beta rolled back' : `${passed} / ${servers.length} servers passed`}</h2>{#if test}<span>{coverageSummary(test.plan)}</span>{/if}</div>
<p>{nextAction}</p>
{#if test?.reason}<p class="reason">{test.reason}</p>{/if}
<div class="timing"><span>Started <time datetime={beta.opened_at}>{$timeFormat.dateTime(beta.opened_at)}</time></span>
{#if revision.revision > 1}<span>Revision {revision.revision} started {$timeFormat.dateTime(revision.started_at)}</span>{/if}
{#if deadline && !closed}<strong>Ends <time datetime={deadline.toISOString()}>{$timeFormat.dateTime(deadline)}</time> · {deadlineText}</strong>{/if}
{#if beta.closed_at}<span>Finished {$timeFormat.dateTime(beta.closed_at)}</span>{/if}
</div>
{#if !closed && test}<p class="muted">Waiting for empty servers uses this window. Pausing or retrying does not extend the deadline. Deploying a revision starts a fresh window.</p>{/if}
<section class="decision" aria-label="Beta summary">
<div class="summary-heading">
<div><h2>{presentation.label}</h2><p class="summary-count">{test && test.servers.length ? `${passed}/${servers.length} test servers passed` : test && !closed ? 'Awaiting test results' : 'Test results not recorded'}</p></div>
<div class="actions">
{#if !closed}<Button variant="primary" onclick={reviewPromotion} disabled={hasDeletedServers || beta.state !== 'ready-promote' || acting !== null}>Review promotion</Button><Button onclick={openUpdate} disabled={hasDeletedServers || acting !== null}>Update beta</Button><Button variant="danger" onclick={rollback} disabled={acting !== null} loading={acting === 'rollback'}>{beta.state === 'ready-promote' ? 'Reject beta' : 'Roll back'}</Button>{/if}
{#if closed}<Button href={contextHref(`/betas/new?reuse=${id}`, $page.url)}>Reuse files and test plan</Button>{/if}
{#if promotion}<Button href={contextHref(`/campaigns/${encodeURIComponent(promotion.id)}`, $page.url)}>View campaign</Button>{/if}
{#if rollbackCampaign}<Button href={contextHref(`/campaigns/${encodeURIComponent(rollbackCampaign.id)}`, $page.url)}>View rollback campaign</Button>{/if}
{#if beta.state === 'promoted' && promotion}<Button variant="primary" href={contextHref(`/campaigns/${encodeURIComponent(promotion.id)}`, $page.url)}>View campaign</Button>
{:else if beta.state === 'rolled-back' && rollbackCampaign}<Button variant="primary" href={contextHref(`/campaigns/${encodeURIComponent(rollbackCampaign.id)}`, $page.url)}>View rollback campaign</Button>
{:else if closed}<Button variant="primary" href={contextHref(`/betas/new?reuse=${id}`, $page.url)}>Reuse files and test plan</Button>
{:else if presentation.key === 'ready'}<Button variant="primary" onclick={reviewPromotion} disabled={hasDeletedServers || busy}>Review promotion</Button>
{:else if presentation.key === 'attention'}<Button variant="primary" href="#test-servers">Review {servers.some(server => server.stage === 'failed') || test?.outcome === 'failed' ? 'failures' : 'issues'}</Button>
{:else if presentation.key === 'paused' && !testExpired}<Button variant="primary" onclick={() => testAction('resume')} disabled={busy}>Resume testing</Button>{/if}
{#if !closed || promotion || rollbackCampaign}<details class="more-actions" bind:open={moreActionsOpen}>
<summary>More actions</summary>
<div class="action-menu">
{#if !closed}
<Button variant="ghost" onclick={() => { moreActionsOpen = false; openUpdate(); }} disabled={hasDeletedServers || busy}>Update beta</Button>
{#if test && !hasDeletedServers}
{#if ['active','passed'].includes(test.outcome) && !testExpired}<Button variant="ghost" disabled={busy} onclick={() => testAction('pause')}>{test.outcome === 'passed' ? 'Pause health monitoring' : 'Pause testing'}</Button>{/if}
{#if ['paused','failed'].includes(test.outcome) && !testExpired}<Button variant="ghost" disabled={busy || retryBlocked} onclick={() => testAction('retry')}>Start fresh attempt</Button>{/if}
{/if}
<Button variant="danger" onclick={() => { moreActionsOpen = false; void rollback(); }} disabled={busy} loading={acting === 'rollback'}>{beta.state === 'ready-promote' ? 'Reject beta' : 'Roll back beta'}</Button>
{:else}<Button variant="ghost" href={contextHref(`/betas/new?reuse=${id}`, $page.url)}>Reuse files and test plan</Button>{/if}
</div>
{#if promotion}<p class="muted">{promotion.pending} servers awaiting activation · {promotion.failed} need attention. Promoting a version does not mean it is already running everywhere.</p>{/if}
</details>{/if}
</div>
</div>
{#if blocker}<p class:reason={presentation.key === 'attention'}>{blocker}</p>{/if}
{#if retryBlocked && !closed && ['paused','failed'].includes(test?.outcome ?? '')}<p class="muted">Deployment was incomplete. Roll back before opening a fresh beta.</p>{/if}
{#if promotion && (promotion.pending || promotion.failed)}<p class="muted">{#if promotion.pending}{promotion.pending} awaiting activation{/if}{#if promotion.pending && promotion.failed} · {/if}{#if promotion.failed}{promotion.failed} need attention{/if}</p>{/if}
{#if deadline && !closed && test?.outcome !== 'passed'}
<details class="deadline" class:urgent={remaining <= 120}><summary>{deadlineText}</summary><p>Deadline: <time datetime={deadline.toISOString()}>{$timeFormat.dateTime(deadline)}</time>. Waiting, pausing, and retrying use the same testing window. Deploying a new revision starts a fresh window.</p></details>
{/if}
{#if flash}<p role="alert" class="ui-error">{flash}</p>{/if}
{#if success}<p role="status">{success}</p>{/if}
</Card>
{#if !closed && waiting.length}
<section aria-label="Outstanding servers"><h2>Outstanding conditions</h2><div class="server-list">
{#each waiting as server}<div class="server-row"><HistoricalServerIdentity name={server.server} deletedAt={server.server_deleted_at} href={contextHref(`/servers/${encodeURIComponent(server.server)}`, $page.url)} /><StatusBadge state={server.stage} /><p>{server.error ?? (server.server_deleted_at ? 'This server was deleted. Recorded progress is retained.' : outstanding(server.server))}</p>{#if server.error && !server.server_deleted_at}<a href={contextHref(`/servers/${encodeURIComponent(server.server)}?tab=diagnostics`, $page.url)}>Diagnose</a>{:else if test}<a href="#test-results">View checks</a>{/if}</div>{/each}
</div></section>
</section>
<div id="test-servers">
{#if test}
{#key id}<BetaTestProgress bind:this={testProgress} bind:busy={testBusy} {test} betaId={id} {closed} deployments={servers} deletedParticipants={hasDeletedServers} deadline={deadline?.toISOString()} retryBlocked={retryBlocked ? 'Deployment was incomplete. Roll back before opening a fresh beta.' : undefined} onUpdate={load} />{/key}
{:else}
<section aria-labelledby="servers-heading"><h2 id="servers-heading">Test servers</h2>
<div class="table-scroll"><table><thead><tr><th scope="col">Server</th><th scope="col">Deployment</th><th scope="col">Test result</th><th scope="col">Details</th></tr></thead><tbody>
{#each ranked as server (server.server)}
{@const expanded = legacyExpanded[server.server] ?? server.stage === 'failed'}
<tr><td><HistoricalServerIdentity name={server.server} deletedAt={server.server_deleted_at} href={contextHref(`/servers/${encodeURIComponent(server.server)}`, $page.url)} /></td><td><StatusBadge state={server.stage} /></td><td class="muted">Not recorded</td><td><button class="text-button" aria-expanded={expanded} aria-controls={`legacy-server-${server.server}`} onclick={() => legacyExpanded = { ...legacyExpanded, [server.server]: !expanded }}>{expanded ? 'Hide' : 'Details'}</button></td></tr>
<tr hidden={!expanded} id={`legacy-server-${server.server}`}><td colspan="4">
<p class="muted">Files {server.deployed_at ? 'installed' : 'pending'} · Restart {server.restarted_at ? 'submitted' : 'pending'}{#if beta.wait_for_health} · Health {server.healthy_at ? 'verified' : 'pending'}{/if}{#if beta.wait_for_match} · Match {server.match_seen_at ? 'observed' : 'pending'}{/if}</p>
{#if server.error}<p class:reason={server.stage === 'failed'}>{server.error}</p>{/if}
<div class="actions">{#if !server.server_deleted_at}<a href={contextHref(`/servers/${encodeURIComponent(server.server)}?tab=diagnostics`, $page.url)}>Diagnostics</a><a href={contextHref(`/servers/${encodeURIComponent(server.server)}?tab=logs`, $page.url)}>Open logs</a>{/if}{#if server.provisioning_id}<a href={contextHref(`/provisioning/${encodeURIComponent(server.provisioning_id)}`, $page.url)}>View provisioning</a>{/if}
{#if server.stage === 'failed' && !server.server_deleted_at && !closed}<Button size="sm" onclick={() => retry(server.server)} disabled={busy} loading={acting === `retry:${server.server}`}>Retry server</Button>{/if}</div>
</td></tr>
{:else}<tr><td colspan="4" class="muted">No servers recorded.</td></tr>{/each}
</tbody></table></div>
</section>
{/if}
{#if test}<div id="test-results"><Card padding="lg"><BetaTestProgress {test} betaId={id} {closed} deletedParticipants={hasDeletedServers} deadline={deadline?.toISOString()} retryBlocked={servers.some(server=>server.error?.startsWith('deploy:')) ? 'Deployment was incomplete. Roll back before opening a fresh beta.' : undefined} onUpdate={load} /></Card></div>{/if}
<details class="ui-panel"><summary>Files and versions ({scripts.length})</summary><div class="file-list">{#each scripts as file}<div><a href={contextHref(`/${file.kind === 'baseline' ? 'configs' : file.kind + 's'}/${file.id}`, $page.url)}>{file.name}</a><strong>{artifactVersionLabel(file.version)}</strong><code>{file.target_rel_path}</code><span>{file.version?.sha256.slice(0,12)}</span></div>{/each}</div></details>
<details class="ui-panel"><summary>Deployment progress ({servers.length} servers)</summary><div class="server-list">
{#each ranked as server}<div class="server-row"><HistoricalServerIdentity name={server.server} deletedAt={server.server_deleted_at} href={contextHref(`/servers/${encodeURIComponent(server.server)}`, $page.url)}/><StatusBadge state={server.stage}/><p>Files {server.deployed_at ? 'installed' : 'pending'} · Restart {server.restarted_at ? 'submitted' : 'pending'}{#if beta.wait_for_health} · Health {server.healthy_at ? 'verified' : 'pending'}{/if}{#if beta.wait_for_match} · Match {server.match_seen_at ? 'observed' : 'pending'}{/if}</p>{#if server.provisioning_id}<a href={contextHref(`/provisioning/${encodeURIComponent(server.provisioning_id)}`, $page.url)}>View provisioning</a>{/if}{#if server.error}<p class="ui-error">{server.error}</p>{/if}{#if server.stage === 'failed' && !server.server_deleted_at && !test && !closed}<Button size="sm" onclick={() => retry(server.server)} disabled={acting !== null} loading={acting === `retry:${server.server}`}>Retry server</Button>{/if}</div>{/each}
</div></details>
</div>
<details class="ui-panel"><summary>Files and versions ({scripts.length})</summary><div class="file-list">{#each scripts as file}<details><summary><a href={contextHref(`/${file.kind === 'baseline' ? 'configs' : file.kind + 's'}/${file.id}`, $page.url)}>{file.name}</a> · {artifactVersionLabel(file.version)}</summary><p><code>{file.target_rel_path}</code></p>{#if file.version}<p class="muted">SHA <code>{file.version.sha256}</code></p>{/if}</details>{/each}</div></details>
<details class="ui-panel"><summary>Beta details</summary><div class="timing"><span>Revision {revision.revision}</span><span>Started {$timeFormat.dateTime(beta.opened_at)}</span>{#if revision.revision > 1}<span>Revision started {$timeFormat.dateTime(revision.started_at)}</span>{/if}{#if beta.closed_at}<span>Finished {$timeFormat.dateTime(beta.closed_at)}</span>{/if}</div></details>
{#if revisions.length}
<details class="ui-panel"><summary>Revision history ({revisions.length})</summary><div class="revision-list">
{#each revisions as item}<details><summary>Revision {item.revision} · {item.revision === revision.revision ? 'Current' : item.results?.test?.outcome ?? item.results?.state ?? 'Superseded'} · {$timeFormat.dateTime(item.started_at)}</summary>
@@ -200,8 +231,9 @@
</details>{/each}
</div></details>
{/if}
<OperationHistory {events} active={!closed} showOverview={false}/>
<div class="ui-toolbar" aria-label="Activity pagination">{#if activityBefore !== null}<Button size="sm" disabled={activityLoading} onclick={() => loadActivity(null)}>Latest activity</Button>{/if}{#if nextBefore !== null}<Button size="sm" disabled={activityLoading} onclick={() => loadActivity(nextBefore)}>Older activity</Button>{/if}</div>
<OperationHistory {events} active={!closed} showOverview={false}>
{#snippet footer()}<div class="ui-toolbar" aria-label="Activity pagination">{#if activityBefore !== null}<Button size="sm" disabled={activityLoading} onclick={() => loadActivity(null)}>Latest activity</Button>{/if}{#if nextBefore !== null}<Button size="sm" disabled={activityLoading} onclick={() => loadActivity(nextBefore)}>Older activity</Button>{/if}</div>{/snippet}
</OperationHistory>
</div>
{/if}
@@ -223,16 +255,24 @@
<style>
.revision-list { display:grid; gap:20px; margin-top:16px; }
.page { display:grid; gap:24px; }
.page { display:grid; gap:24px; min-width:0; }
h2 { margin:0; font-size:18px; } p { line-height:1.6; overflow-wrap:anywhere; }
a { color:var(--accent-primary-hover); }
.decision { background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:20px 24px; }
.decision > p { margin:12px 0 0; }
.summary-heading,.actions,.timing { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.summary-heading { justify-content:space-between; } .timing,.muted,.summary-heading span { color:var(--text-secondary); font-size:13px; }
.timing strong { color:var(--text-primary); } .actions { margin-top:16px; } .reason { border-left:3px solid var(--state-warning); padding-left:12px; }
.server-list,.file-list { display:grid; gap:12px; margin-top:16px; }
.server-row { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:8px 16px; padding:16px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.server-row p { margin:0; font-size:13px; } .server-row a,.file-list a { color:var(--accent-primary-hover); }
.summary-heading { justify-content:space-between; }
.summary-count { color:var(--text-secondary); font-size:var(--text-sm); margin:6px 0 0; }
.timing,.muted { color:var(--text-secondary); font-size:13px; }.timing { margin-top:16px; }
.reason { border-left:3px solid var(--state-warning); padding-left:12px; }
.deadline { margin-top:12px; font-size:var(--text-sm); color:var(--text-secondary); }.deadline p { max-width:760px; }.deadline.urgent > summary { color:var(--state-warning); }
.more-actions { position:relative; }.more-actions > summary { padding:10px 12px; color:var(--text-secondary); font-size:var(--text-sm); }
.action-menu { position:absolute; top:100%; right:0; z-index:2; display:grid; gap:8px; min-width:220px; padding:12px; background:var(--surface-overlay); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:0 8px 24px #0006; }
.table-scroll { overflow-x:auto; margin-top:16px; } table { width:100%; border-collapse:collapse; font-size:var(--text-sm); text-align:left; } th { padding:10px 12px; border-bottom:1px solid var(--border-strong); color:var(--text-tertiary); font-size:var(--text-xs); } td { padding:16px 12px; border-bottom:1px solid var(--border-subtle); }
.text-button { background:transparent; border:0; color:var(--text-secondary); font:inherit; cursor:pointer; }
.file-list { display:grid; gap:12px; margin-top:16px; }
.file-list > div { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.file-list code { overflow-wrap:anywhere; } .file-list li { margin:10px 0; } .file-list li span { margin-left:12px; font-size:12px; color:var(--text-secondary); }
details > summary { cursor:pointer; font-weight:600; } #test-results { scroll-margin-top:80px; }
@media(max-width:600px) { .server-row { grid-template-columns:1fr; } .timing { align-items:flex-start; flex-direction:column; } }
details > summary { cursor:pointer; font-weight:600; } #test-servers { scroll-margin-top:80px; min-width:0; }
@media(max-width:720px) { table { min-width:620px; }.decision { padding:16px; }.timing { align-items:flex-start; flex-direction:column; }.action-menu { right:auto; left:0; } }
</style>
+38
View File
@@ -46,3 +46,41 @@ it('coalesces beta progress notifications after synchronous database work', asyn
expect(events).toEqual([{ type: 'beta-changed', betaId: 1 }, { type: 'beta-changed', betaId: 2 }]);
} finally { stop(); }
});
it('filters by displayed status and searches servers and file paths before pagination', async () => {
const { db } = await import('../../src/lib/server/db/index.js');
const { defaultPlan } = await import('../../src/lib/beta-plan.js');
const { betaListPage } = await import('../../src/lib/server/fleet/beta-pages.js');
const { betaStatus } = await import('../../src/lib/ui/betas.js');
const { GET } = await import('../../src/routes/api/betas/+server.js');
db().exec(`INSERT INTO scripts(id,name,target_rel_path) VALUES(1,'Plugin','special-file.dll');
INSERT INTO script_versions(id,script_id,version,sha256,size) VALUES(1,1,1,'hash',0);
INSERT INTO servers(name) VALUES('t5_zombie_theater_3');`);
const states = [
['running','active','awaiting-empty'], ['ready-promote','passed','ready'], ['running','failed','failed'],
['running','paused','observing'], ['promoted','passed','ready'], ['rolled-back','paused','ready'], ['running','inconclusive','observing']
];
for (let index = 0; index < 35; index++) {
const [state, outcome, stage] = states[index % states.length];
const id = index + 1;
db().prepare('INSERT INTO betas(id,script_id,script_version_id,trigger_kind,state,notes) VALUES(?,1,1,?,?,?)').run(id, 'ui', state, `Beta test ${id}`);
db().prepare('INSERT INTO beta_scripts(beta_id,script_id,script_version_id) VALUES(?,1,1)').run(id);
db().prepare('INSERT INTO beta_servers(beta_id,server,stage,had_original) VALUES(?,?,?,0)').run(id, 't5_zombie_theater_3', stage);
db().prepare('INSERT INTO beta_test_plans(beta_id,plan,outcome) VALUES(?,?,?)').run(id, JSON.stringify(defaultPlan()), outcome);
}
const body = await (await GET({ url: new URL('http://localhost/api/betas?limit=100') })).json();
for (const status of ['ready', 'testing', 'attention', 'paused', 'promoted', 'rolled-back']) {
const expected = body.betas.filter((beta: Parameters<typeof betaStatus>[0]) => betaStatus(beta).key === status);
const result = betaListPage(new URLSearchParams({ status, limit: '100' }));
expect(result.total).toBe(expected.length);
expect(result.betas.map(beta => beta.id)).toEqual(expected.map((beta: { id: number }) => beta.id));
}
expect(betaListPage(new URLSearchParams('q=Kino%20Der%20Toten')).total).toBe(35);
expect(betaListPage(new URLSearchParams('q=special-file.dll')).total).toBe(35);
expect(betaListPage(new URLSearchParams('q=%2335')).betas.map(beta => beta.id)).toEqual([35]);
const first = betaListPage(new URLSearchParams('view=active&status=attention&q=Kino&limit=3'));
const second = betaListPage(new URLSearchParams('view=active&status=attention&q=Kino&limit=3&page=2'));
expect(first.total).toBe(10);
expect(first.betas).toHaveLength(3);
expect(second.betas.some(beta => first.betas.some(other => other.id === beta.id))).toBe(false);
});
+56
View File
@@ -0,0 +1,56 @@
import { expect, it, vi } from 'vitest';
import { render } from 'svelte/server';
import { writable } from 'svelte/store';
import { defaultPlan, requirement, type BetaTestView } from '../../src/lib/beta-plan.js';
import { betaStatus, type BetaDeploymentServer } from '../../src/lib/ui/betas.js';
import BetaTestProgress from '../../src/lib/ui/components/BetaTestProgress.svelte';
vi.mock('$app/stores', () => ({ page: writable({ url: new URL('http://localhost/betas/75') }) }));
it('prioritizes lifecycle, failures and pauses over readiness without treating stage text as failure', () => {
expect(betaStatus({ state: 'promoted', testOutcome: 'paused', servers: [] })).toMatchObject({ key: 'promoted', label: 'Promoted' });
expect(betaStatus({ state: 'rolled-back', testOutcome: 'failed', servers: [] })).toMatchObject({ key: 'rolled-back' });
expect(betaStatus({ state: 'ready-promote', testOutcome: 'failed', servers: [] })).toMatchObject({ key: 'attention', tone: 'danger' });
expect(betaStatus({ state: 'ready-promote', testOutcome: 'paused', servers: [] })).toMatchObject({ key: 'paused' });
expect(betaStatus({ state: 'ready-promote', testOutcome: 'passed', servers: [{ stage: 'ready' }] })).toMatchObject({ key: 'ready' });
expect(betaStatus({ state: 'running', servers: [{ stage: 'awaiting-empty' }] })).toMatchObject({ key: 'testing' });
expect(betaStatus({ state: 'running', servers: [{ stage: 'ready', server_deleted_at: '2026-10-06' }] })).toMatchObject({ key: 'attention' });
});
const deployment = (server: string, stage = 'ready'): BetaDeploymentServer => ({ server, stage, error: null, deployed_at: '2026-10-06', restarted_at: '2026-10-06', healthy_at: '2026-10-06', match_seen_at: null, provisioning_id: null });
const testRun = (server: string, passed = true, failed = false): BetaTestView['servers'][number] => ({
server, server_deleted_at: null, phase: 1, passed, observingAt: '2026-10-06',
progress: [{ id: 'health', label: 'Health', current: passed ? 1 : 0, target: 1, passed, failed, detail: failed ? 'Health check failed' : 'Health observation' }]
});
it('combines deployment and tests once per server, expands failures first, and keeps passing details collapsed', () => {
const test: BetaTestView = { plan: defaultPlan(), outcome: 'failed', reason: null, servers: [testRun('passed'), testRun('failed', false, true)], evidence: [] };
const body = render(BetaTestProgress, { props: { test, betaId: 75, closed: false, deployments: [deployment('passed'), deployment('waiting', 'awaiting-empty'), deployment('failed')], onUpdate: async () => {} } }).body;
expect(body).toContain('Deployment</th>');
expect(body).toContain('Test result</th>');
expect(body).toContain('Awaiting test run');
expect(body.indexOf('id="beta-server-75-failed"')).toBeLessThan(body.indexOf('id="beta-server-75-passed"'));
expect(body).toMatch(/<tr hidden[^>]*id="beta-server-75-passed"/);
expect(body).toMatch(/<tr id="beta-server-75-failed"/);
expect(body.match(/id="beta-server-75-passed"/g)).toHaveLength(1);
expect(body).toContain('View relevant evidence');
expect(body).not.toContain('Search evidence');
});
it('keeps manual sign-offs in server details and disables them on closed or deleted tests', () => {
const test: BetaTestView = { plan: { ...defaultPlan(), requirements: [requirement('manual', 'health')] }, outcome: 'active', reason: null, servers: [testRun('manual', false)], evidence: [] };
const props = { test, betaId: 75, closed: false, deployments: [deployment('manual')], onUpdate: async () => {} };
expect(render(BetaTestProgress, { props }).body).toContain('Tester name and observation');
expect(render(BetaTestProgress, { props: { ...props, closed: true } }).body).not.toContain('Tester name and observation');
const deleted = render(BetaTestProgress, { props: { ...props, deletedParticipants: true, deployments: [{ ...deployment('manual'), server_deleted_at: '2026-10-06' }] } }).body;
expect(deleted).not.toContain('Tester name and observation');
expect(deleted).not.toContain('href="/servers/manual');
});
it('shows missing historical evidence as not recorded, without claiming zero servers passed', () => {
const test: BetaTestView = { plan: defaultPlan(), outcome: 'passed', reason: null, servers: [], evidence: [] };
const body = render(BetaTestProgress, { props: { test, betaId: 75, closed: true, deployments: [deployment('historical')], onUpdate: async () => {} } }).body;
expect(body).toContain('Not recorded');
expect(body).not.toContain('Awaiting test run');
expect(body).not.toContain('0 / 0');
});