492 lines
21 KiB
Svelte
492 lines
21 KiB
Svelte
<script lang="ts">
|
||
import BetaPlanBuilder from "$ui/components/BetaPlanBuilder.svelte";
|
||
import { defaultPlan, parseBetaPlan } from "$lib/beta-plan.js";
|
||
import { onMount, onDestroy } from 'svelte';
|
||
import { goto } from '$app/navigation';
|
||
import Card from '$ui/components/primitives/Card.svelte';
|
||
import Badge from '$ui/components/primitives/Badge.svelte';
|
||
import Button from '$ui/components/primitives/Button.svelte';
|
||
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||
import Field from '$ui/components/primitives/Field.svelte';
|
||
|
||
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
||
interface BetaListRow {
|
||
id: number;
|
||
state: 'running' | 'ready-promote' | 'promoted' | 'rolled-back';
|
||
testOutcome: string | null;
|
||
wait_for_health: number;
|
||
wait_for_match: number;
|
||
opened_at: string;
|
||
closed_at: string | null;
|
||
scripts: Array<{
|
||
id: number; name: string; target_rel_path: string; kind: ArtifactKind;
|
||
version: { id: number; version: number; sha256: string } | null;
|
||
}>;
|
||
servers: Array<{ server: string; stage: string; error: string | null }>;
|
||
}
|
||
interface ScriptListRow {
|
||
id: number; name: string; target_rel_path: string;
|
||
scope_type: 'game' | 'map' | null; scope_value: string | null;
|
||
current_version_id: number | null; kind: ArtifactKind;
|
||
latestVersion: {
|
||
id: number; version: number; sha256: string;
|
||
state: 'untested' | 'tested' | 'test-failed';
|
||
} | null;
|
||
runningBetaId: number | null;
|
||
}
|
||
interface Version { id: number; version: number; sha256: string; size: number; state: 'untested' | 'tested' | 'test-failed'; }
|
||
interface ServerRow { name: string; game: string | null; map: string | null; }
|
||
interface ScriptDetail { script: ScriptListRow; versions: Version[]; matchedServers: string[]; }
|
||
interface Pick { key: number; scriptId: number | null; versionId: number | null; }
|
||
|
||
let betas = $state<BetaListRow[]>([]);
|
||
let loading = $state(true);
|
||
let scripts = $state<ScriptListRow[]>([]);
|
||
let fleetServers = $state<ServerRow[]>([]);
|
||
let detailById = $state<Record<number, ScriptDetail>>({});
|
||
let nextKey = 0;
|
||
let picks = $state<Pick[]>([{ key: nextKey++, scriptId: null, versionId: null }]);
|
||
let pickedServers = $state<Set<string>>(new Set());
|
||
let testPlan = $state(defaultPlan());
|
||
let waitForHealth = $state(true);
|
||
let waitForMatch = $state(false);
|
||
let openingBeta = $state(false);
|
||
let flash = $state<string | null>(null);
|
||
|
||
async function load(): Promise<void> {
|
||
const [betasRes, scriptsRes, serversRes] = await Promise.all([
|
||
fetch('/api/betas'),
|
||
fetch('/api/scripts'),
|
||
fetch('/api/servers')
|
||
]);
|
||
const bBody = (await betasRes.json()) as { betas: BetaListRow[] };
|
||
betas = bBody.betas;
|
||
if (scriptsRes.ok) {
|
||
const sBody = (await scriptsRes.json()) as { scripts: ScriptListRow[] };
|
||
scripts = sBody.scripts;
|
||
}
|
||
if (serversRes.ok) {
|
||
const svBody = (await serversRes.json()) as { servers: ServerRow[] };
|
||
fleetServers = svBody.servers;
|
||
}
|
||
loading = false;
|
||
}
|
||
async function refreshBetas(): Promise<void> {
|
||
const res = await fetch('/api/betas');
|
||
if (!res.ok) return;
|
||
const body = (await res.json()) as { betas: BetaListRow[] };
|
||
betas = body.betas;
|
||
}
|
||
|
||
let poll: ReturnType<typeof setInterval> | null = null;
|
||
onMount(() => {
|
||
load();
|
||
poll = setInterval(refreshBetas, 5000);
|
||
});
|
||
onDestroy(() => {
|
||
if (poll) clearInterval(poll);
|
||
});
|
||
|
||
const eligibleScripts = $derived(
|
||
scripts.filter(
|
||
(s) => s.runningBetaId === null && s.latestVersion !== null && s.latestVersion.id !== s.current_version_id
|
||
)
|
||
);
|
||
|
||
function eligibleForRow(rowIdx: number): ScriptListRow[] {
|
||
const takenIds = new Set(
|
||
picks.map((p, i) => (i === rowIdx ? null : p.scriptId)).filter((id): id is number => id !== null)
|
||
);
|
||
return eligibleScripts.filter((s) => !takenIds.has(s.id));
|
||
}
|
||
|
||
async function onPickScript(rowIdx: number): Promise<void> {
|
||
flash = null;
|
||
const pick = picks[rowIdx];
|
||
pick.versionId = null;
|
||
picks = [...picks];
|
||
if (pick.scriptId === null) return;
|
||
if (!detailById[pick.scriptId]) {
|
||
const res = await fetch(`/api/scripts/${pick.scriptId}`);
|
||
if (!res.ok) { flash = 'Failed to load script detail'; return; }
|
||
const body = (await res.json()) as ScriptDetail;
|
||
detailById = { ...detailById, [pick.scriptId]: body };
|
||
}
|
||
const detail = detailById[pick.scriptId];
|
||
const eligibleVersions = detail.versions.filter((v) => v.id !== detail.script.current_version_id);
|
||
pick.versionId = eligibleVersions[0]?.id ?? null;
|
||
picks = [...picks];
|
||
// Start with nothing selected — user opts in each server explicitly.
|
||
pickedServers = new Set();
|
||
}
|
||
|
||
function addRow(): void {
|
||
picks = [...picks, { key: nextKey++, scriptId: null, versionId: null }];
|
||
}
|
||
function removeRow(idx: number): void {
|
||
picks = picks.filter((_, i) => i !== idx);
|
||
// Start with nothing selected — user opts in each server explicitly.
|
||
pickedServers = new Set();
|
||
}
|
||
function toggleServer(name: string): void {
|
||
const next = new Set(pickedServers);
|
||
if (next.has(name)) next.delete(name);
|
||
else next.add(name);
|
||
pickedServers = next;
|
||
}
|
||
function versionsForRow(row: Pick): Version[] {
|
||
if (row.scriptId === null) return [];
|
||
const detail = detailById[row.scriptId];
|
||
if (!detail) return [];
|
||
return detail.versions.filter((v) => v.id !== detail.script.current_version_id);
|
||
}
|
||
function candidatesFor(row: Pick): string[] | null {
|
||
if (row.scriptId === null) return null;
|
||
const detail = detailById[row.scriptId];
|
||
if (!detail) return null;
|
||
return detail.script.scope_type ? detail.matchedServers : fleetServers.map((s) => s.name);
|
||
}
|
||
const candidateServers = $derived.by(() => {
|
||
const perPick: string[][] = [];
|
||
for (const p of picks) {
|
||
const c = candidatesFor(p);
|
||
if (c === null) continue;
|
||
perPick.push(c);
|
||
}
|
||
if (perPick.length === 0) return [] as string[];
|
||
const [first, ...rest] = perPick;
|
||
return first.filter((name) => rest.every((set) => set.includes(name)));
|
||
});
|
||
|
||
const canSubmit = $derived(
|
||
!openingBeta &&
|
||
testPlan.requirements.length > 0 &&
|
||
picks.length > 0 &&
|
||
picks.every((p) => p.scriptId !== null && p.versionId !== null) &&
|
||
candidateServers.length > 0 &&
|
||
pickedServers.size > 0
|
||
);
|
||
|
||
async function openNewBeta(e: Event): Promise<void> {
|
||
e.preventDefault();
|
||
if (!canSubmit) return;
|
||
openingBeta = true;
|
||
flash = null;
|
||
try {
|
||
const res = await fetch('/api/betas', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
scripts: picks.map((p) => ({ scriptId: p.scriptId!, scriptVersionId: p.versionId! })),
|
||
servers: [...pickedServers],
|
||
testPlan: parseBetaPlan(testPlan),
|
||
waitForHealth,
|
||
waitForMatch
|
||
})
|
||
});
|
||
const body = (await res.json()) as { ok: boolean; error?: string; result?: { betaId: number } };
|
||
if (!res.ok || !body.ok) {
|
||
flash = body.error ?? `HTTP ${res.status}`;
|
||
return;
|
||
}
|
||
if (body.result) await goto(`/betas/${body.result.betaId}`);
|
||
} catch (error) { flash = (error as Error).message; } finally {
|
||
openingBeta = false;
|
||
}
|
||
}
|
||
|
||
const stateOrder = ['running', 'ready-promote', 'promoted', 'rolled-back'] as const;
|
||
let grouped = $derived(
|
||
stateOrder.map((state) => ({ state, rows: betas.filter((b) => b.state === state) }))
|
||
);
|
||
|
||
function summarizeScripts(b: BetaListRow): string {
|
||
if (b.scripts.length === 0) return '(no artifacts)';
|
||
if (b.scripts.length === 1) {
|
||
const s = b.scripts[0];
|
||
return `[${s.kind}] ${s.name} · v${s.version?.version ?? '?'}`;
|
||
}
|
||
const byKind: Record<string, number> = {};
|
||
for (const s of b.scripts) byKind[s.kind] = (byKind[s.kind] ?? 0) + 1;
|
||
return Object.entries(byKind).map(([k, n]) => `${n} ${k}${n === 1 ? '' : 's'}`).join(', ');
|
||
}
|
||
function betaStateVariant(s: string): 'online' | 'warning' | 'info' | 'neutral' {
|
||
return s === 'ready-promote' ? 'online' :
|
||
s === 'running' ? 'warning' :
|
||
s === 'promoted' ? 'info' :
|
||
'neutral';
|
||
}
|
||
</script>
|
||
|
||
<div class="page">
|
||
<SectionHeader
|
||
title="Betas"
|
||
subtitle="Test unpromoted versions on selected servers before rolling them out."
|
||
/>
|
||
|
||
{#if loading}
|
||
<div class="loading">Loading…</div>
|
||
{:else}
|
||
<Card padding="lg">
|
||
<h2 class="panel-title">Open a beta</h2>
|
||
|
||
{#if eligibleScripts.length === 0}
|
||
<EmptyState
|
||
title="No artifacts with untested versions"
|
||
description="Upload a new version from scripts / configs / plugins to open a beta."
|
||
/>
|
||
{:else}
|
||
<form onsubmit={openNewBeta} class="beta-form">
|
||
<Field label="Artifacts">
|
||
<div class="picks">
|
||
{#each picks as row, idx (row.key)}
|
||
<div class="pick-row">
|
||
<div class="pick-select">
|
||
<select
|
||
class="native-select"
|
||
bind:value={row.scriptId}
|
||
onchange={() => onPickScript(idx)}
|
||
>
|
||
<option value={null}>— Pick an artifact —</option>
|
||
{#each eligibleForRow(idx) as s (s.id)}
|
||
<option value={s.id}>[{s.kind}] {s.name}</option>
|
||
{/each}
|
||
</select>
|
||
<span class="chev">▾</span>
|
||
</div>
|
||
<div class="pick-select">
|
||
<select
|
||
class="native-select"
|
||
bind:value={row.versionId}
|
||
disabled={row.scriptId === null}
|
||
>
|
||
{#if row.scriptId === null}
|
||
<option value={null}>—</option>
|
||
{:else}
|
||
{#each versionsForRow(row) as v (v.id)}
|
||
<option value={v.id}>v{v.version} · {v.sha256.slice(0, 8)} · {v.state}</option>
|
||
{/each}
|
||
{/if}
|
||
</select>
|
||
<span class="chev">▾</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="row-x"
|
||
onclick={() => removeRow(idx)}
|
||
disabled={picks.length === 1}
|
||
title={picks.length === 1 ? 'Need at least one script' : 'Remove this script'}
|
||
aria-label="Remove artifact"
|
||
>×</button>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
<button type="button" class="add-row" onclick={addRow}>+ Add artifact</button>
|
||
</Field>
|
||
|
||
<Field label="Test servers" hint="Intersection of scopes across all picked artifacts.">
|
||
<div class="server-picker">
|
||
{#if candidateServers.length === 0}
|
||
<span class="picker-empty">No server satisfies all selected scopes — pick different scripts.</span>
|
||
{:else}
|
||
{#each candidateServers as name (name)}
|
||
<label class="chk">
|
||
<input
|
||
type="checkbox"
|
||
checked={pickedServers.has(name)}
|
||
onchange={() => toggleServer(name)}
|
||
/>
|
||
<span>{name}</span>
|
||
</label>
|
||
{/each}
|
||
{/if}
|
||
</div>
|
||
</Field>
|
||
|
||
<BetaPlanBuilder bind:plan={testPlan} />
|
||
|
||
<div class="form-actions">
|
||
<Button
|
||
type="submit"
|
||
variant="primary"
|
||
disabled={!canSubmit}
|
||
loading={openingBeta}
|
||
>
|
||
Open beta
|
||
</Button>
|
||
{#if flash}<span class="flash">{flash}</span>{/if}
|
||
</div>
|
||
</form>
|
||
{/if}
|
||
</Card>
|
||
|
||
{#if betas.length === 0}
|
||
<EmptyState title="No betas yet" description="Open one above once you have unpromoted versions." />
|
||
{:else}
|
||
{#each grouped as g (g.state)}
|
||
{#if g.rows.length > 0}
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2 class="capitalize">{g.state.replace('-', ' ')}</h2>
|
||
<Badge variant="neutral" size="sm">{g.rows.length}</Badge>
|
||
</div>
|
||
<div class="beta-rows">
|
||
{#each g.rows as b (b.id)}
|
||
<a class="beta-row" href="/betas/{b.id}">
|
||
<span class="beta-id">#{b.id}</span>
|
||
<span class="beta-script">{summarizeScripts(b)}</span>
|
||
<Badge variant={betaStateVariant(b.state)} size="sm" uppercase>{b.testOutcome && b.state === 'running' ? b.testOutcome : b.state}</Badge>
|
||
<span class="beta-servers">{b.servers.length} server{b.servers.length === 1 ? '' : 's'}</span>
|
||
</a>
|
||
{/each}
|
||
</div>
|
||
</section>
|
||
{/if}
|
||
{/each}
|
||
{/if}
|
||
{/if}
|
||
</div>
|
||
|
||
<style>
|
||
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||
.loading { text-align: center; padding: var(--space-12); color: var(--text-tertiary); }
|
||
|
||
.panel-title {
|
||
margin: 0 0 var(--space-4);
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-md);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.beta-form { display: flex; flex-direction: column; gap: var(--space-5); }
|
||
|
||
.picks { display: flex; flex-direction: column; gap: var(--space-2); }
|
||
.pick-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr auto;
|
||
gap: var(--space-2);
|
||
align-items: center;
|
||
}
|
||
.pick-select { position: relative; }
|
||
.native-select {
|
||
appearance: none;
|
||
width: 100%;
|
||
padding: 9px 32px 9px 12px;
|
||
background: var(--surface-sunken);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-primary);
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: border-color var(--dur-fast) var(--ease-standard);
|
||
}
|
||
.native-select:hover { border-color: var(--border-strong); }
|
||
.native-select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15); }
|
||
.native-select:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
.chev {
|
||
position: absolute;
|
||
right: var(--space-3);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--text-tertiary);
|
||
pointer-events: none;
|
||
font-size: var(--text-xs);
|
||
}
|
||
.row-x {
|
||
background: transparent;
|
||
color: var(--text-tertiary);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
padding: 0 14px;
|
||
height: 38px;
|
||
font-size: var(--text-lg);
|
||
cursor: pointer;
|
||
transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
|
||
}
|
||
.row-x:hover:not(:disabled) { color: var(--state-danger); border-color: rgba(255, 86, 112, 0.4); }
|
||
.row-x:disabled { opacity: 0.3; cursor: default; }
|
||
|
||
.add-row {
|
||
align-self: flex-start;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
border: 1px dashed var(--border-strong);
|
||
border-radius: var(--radius-md);
|
||
padding: 8px 14px;
|
||
margin-top: var(--space-2);
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
|
||
}
|
||
.add-row:hover { color: var(--text-primary); border-color: var(--accent-primary); }
|
||
|
||
.server-picker {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3);
|
||
background: var(--surface-sunken);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.picker-empty {
|
||
color: var(--text-tertiary);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
}
|
||
.chk {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
color: var(--text-primary);
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.chk input { accent-color: var(--accent-primary); cursor: pointer; }
|
||
|
||
|
||
.form-actions { display: flex; align-items: center; gap: var(--space-4); }
|
||
.flash { color: var(--state-danger); font-family: var(--font-mono); font-size: var(--text-xs); }
|
||
|
||
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||
.section-head { display: flex; align-items: center; gap: var(--space-3); }
|
||
.section-head h2 {
|
||
margin: 0;
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-md);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--text-primary);
|
||
}
|
||
.capitalize { text-transform: capitalize; }
|
||
|
||
.beta-rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
||
.beta-row {
|
||
display: grid;
|
||
grid-template-columns: 56px 1fr auto auto;
|
||
gap: var(--space-4);
|
||
align-items: center;
|
||
padding: var(--space-3) var(--space-4);
|
||
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
text-decoration: none;
|
||
color: var(--text-primary);
|
||
transition: background-color var(--dur-fast) var(--ease-standard);
|
||
}
|
||
.beta-row:hover { background: var(--surface-raised); }
|
||
.beta-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||
.beta-id { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-tertiary); }
|
||
.beta-script { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium); }
|
||
.beta-servers { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
|
||
|
||
@media (max-width: 720px) {
|
||
.beta-row { grid-template-columns: 1fr; gap: var(--space-2); }
|
||
}
|
||
</style>
|