Unify UI workflows and streamline fleet management
This commit is contained in:
+42
-490
@@ -1,17 +1,14 @@
|
||||
<script lang="ts">
|
||||
import BetaPlanBuilder from "$ui/components/BetaPlanBuilder.svelte";
|
||||
import { defaultPlan, parseBetaPlan } from "$lib/beta-plan.js";
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { artifactVersionLabel } from '$lib/artifact-version.js';
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { parseBetaSelection } from '$lib/script-library.js';
|
||||
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 { pollVisible } from '$ui/poll.js';
|
||||
import { artifactVersionLabel } from '$lib/artifact-version.js';
|
||||
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 EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||
import Field from '$ui/components/primitives/Field.svelte';
|
||||
|
||||
import ListFooter from '$ui/components/primitives/ListFooter.svelte';
|
||||
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
||||
interface BetaListRow {
|
||||
id: number;
|
||||
@@ -27,495 +24,50 @@
|
||||
}>;
|
||||
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; release_version: string | null; 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')
|
||||
]);
|
||||
if (!betasRes.ok || !scriptsRes.ok || !serversRes.ok) throw new Error('Could not load beta setup. Refresh to try again.');
|
||||
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;
|
||||
}
|
||||
let error = $state('');
|
||||
let tab = $state('active');
|
||||
let search = $state('');
|
||||
let limit = $state(25);
|
||||
const active = (beta: BetaListRow) => beta.state === 'running' || beta.state === 'ready-promote';
|
||||
const tabs = $derived([{id:'active',label:'Active',badge:betas.filter(active).length},{id:'history',label:'History',badge:betas.filter(b => !active(b)).length}]);
|
||||
const filtered = $derived(betas.filter(b => active(b) === (tab === 'active') && ('#' + b.id + ' ' + b.scripts.map(s => s.name).join(' ')).toLowerCase().includes(search.toLowerCase())));
|
||||
$effect(() => { search; tab; limit = 25; });
|
||||
async function load() {
|
||||
try { const res = await fetch('/api/betas'); if (!res.ok) throw new Error('Could not refresh betas.'); betas = (await res.json()).betas; error = ''; }
|
||||
catch (e) { error = (e as Error).message; } finally { 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(() => {
|
||||
void load().then(seedSelection).catch(error => { flash = (error as Error).message; }).finally(() => { loading = false; });
|
||||
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
|
||||
|| picks.some(p => p.scriptId === s.id && p.versionId !== null && p.versionId !== 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 seedSelection(): Promise<void> {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
const selections = parseBetaSelection(query);
|
||||
if (!selections.length) return;
|
||||
// Validate all selections before populating; never substitute a newer upload.
|
||||
const details = await Promise.all(selections.map(async ({ scriptId, versionId }) => {
|
||||
const res = await fetch(`/api/scripts/${scriptId}`);
|
||||
if (!res.ok) throw new Error('A selected artifact is no longer available. Choose artifacts below.');
|
||||
const detail = await res.json() as ScriptDetail & { runningBetaId: number | null };
|
||||
if (detail.runningBetaId !== null || detail.script.current_version_id === versionId
|
||||
|| !detail.versions.some(v => v.id === versionId)) {
|
||||
throw new Error(`${detail.script.name}: the selected version is already promoted, unavailable, or in an active beta. Review your selection below.`);
|
||||
}
|
||||
return detail;
|
||||
}));
|
||||
for (const detail of details) {
|
||||
detailById[detail.script.id] = detail;
|
||||
}
|
||||
picks = selections.map(s => ({ key: nextKey++, ...s }));
|
||||
pickedServers = new Set();
|
||||
}
|
||||
|
||||
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)));
|
||||
if (query.has('artifact') || query.has('pluginId')) { void goto('/betas/new' + window.location.search, {replaceState:true}); return; }
|
||||
return pollVisible(load, 5000);
|
||||
});
|
||||
|
||||
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} · ${artifactVersionLabel(s.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 flash}<p class="flash" role="alert">{flash}</p>{/if}
|
||||
|
||||
{#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}>{artifactVersionLabel(v)} · {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>
|
||||
</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}
|
||||
<SectionHeader title="Betas" subtitle="Test selected versions before promoting them to the fleet.">
|
||||
{#snippet actions()}<Button variant="primary" href="/betas/new">New beta</Button>{/snippet}
|
||||
</SectionHeader>
|
||||
<Tabs {tabs} bind:value={tab} idPrefix="beta-tabs" panelId="beta-list" ariaLabel="Beta views" />
|
||||
<div class="ui-toolbar"><input type="search" bind:value={search} aria-label="Search betas" placeholder="Search betas or files…" /></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 !filtered.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 filtered.slice(0,limit) as beta (beta.id)}
|
||||
<a href={'/betas/' + beta.id} class="row">
|
||||
<div><strong>Beta #{beta.id}</strong><span class="files">{beta.scripts.map(s => s.name + ' · ' + artifactVersionLabel(s.version)).join(', ')}</span></div>
|
||||
<div class="meta"><StatusBadge state={beta.state} />{#if beta.testOutcome && beta.testOutcome !== 'active'}<StatusBadge state={beta.testOutcome} />{/if}<span>{beta.servers.length} servers</span></div>
|
||||
</a>
|
||||
{/each}</div><ListFooter total={filtered.length} bind:limit label="betas" />{/if}
|
||||
</div>
|
||||
</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: minmax(0, 1fr) minmax(0, 1fr) auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
.pick-select { position: relative; min-width: 0; }
|
||||
.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; flex-wrap: wrap; 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); }
|
||||
.pick-row { grid-template-columns: minmax(0, 1fr) 44px; }
|
||||
.pick-select:first-child { grid-column: 1 / -1; }
|
||||
.chk { min-height: 44px; min-width: 0; }
|
||||
.chk input { flex-shrink: 0; }
|
||||
}
|
||||
.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); }
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
import { artifactVersionLabel } from '$lib/artifact-version.js';
|
||||
import BetaTestProgress from "$ui/components/BetaTestProgress.svelte";
|
||||
import type { BetaTestView } from "$lib/beta-plan.js";
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { pollVisible } from '$ui/poll.js';
|
||||
import { confirmAction } from '$ui/confirm.js';
|
||||
import ServerIdentity from '$ui/components/ServerIdentity.svelte';
|
||||
import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import Card from '$ui/components/primitives/Card.svelte';
|
||||
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||
@@ -63,11 +67,7 @@
|
||||
|
||||
$effect(() => { id; beta = null; loading = true; loadError = ''; void load(); });
|
||||
|
||||
let poll: ReturnType<typeof setInterval> | null = null;
|
||||
onMount(() => {
|
||||
poll = setInterval(load, 5000);
|
||||
});
|
||||
onDestroy(() => { if (poll) clearInterval(poll); });
|
||||
onMount(() => pollVisible(load, 5000, false));
|
||||
|
||||
async function promote(): Promise<void> {
|
||||
acting = 'promote'; flash = null;
|
||||
@@ -76,7 +76,7 @@
|
||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||
if (!body.ok) { flash = body.error ?? 'Promote failed'; return; }
|
||||
await load();
|
||||
} finally { acting = null; }
|
||||
} catch (error) { flash = (error as Error).message; } finally { acting = null; }
|
||||
}
|
||||
async function rollback(): Promise<void> {
|
||||
const isReject = beta?.state === 'ready-promote';
|
||||
@@ -84,14 +84,14 @@
|
||||
? `Reject beta #${id}? This restores original files on every beta server and marks the version as test-failed.`
|
||||
: `Rollback beta #${id}? This restores original files on every beta server.`;
|
||||
const restart = test ? test.plan.rollbackRestart === 'when-empty' ? ' Restarts will roll out when servers are empty.' : ' Restart servers manually to load the restored files.' : '';
|
||||
if (!confirm(prompt + restart)) return;
|
||||
if (!await confirmAction({title:isReject ? 'Reject beta?' : 'Roll back beta?',message:prompt + restart,confirmLabel:isReject ? 'Reject beta' : 'Roll back',danger:true})) return;
|
||||
acting = 'rollback'; flash = null;
|
||||
try {
|
||||
const res = await fetch(`/api/betas/${id}/rollback`, { method: 'POST' });
|
||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||
if (!body.ok) { flash = body.error ?? 'Rollback failed'; return; }
|
||||
await load();
|
||||
} finally { acting = null; }
|
||||
} catch (error) { flash = (error as Error).message; } finally { acting = null; }
|
||||
}
|
||||
async function retry(server: string): Promise<void> {
|
||||
acting = `retry:${server}`; flash = null;
|
||||
@@ -104,21 +104,7 @@
|
||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||
if (!body.ok) { flash = body.error ?? 'Retry failed'; return; }
|
||||
await load();
|
||||
} finally { acting = null; }
|
||||
}
|
||||
|
||||
function betaStateVariant(s: string): 'online' | 'warning' | 'info' | 'neutral' {
|
||||
return s === 'ready-promote' ? 'online' :
|
||||
s === 'running' ? 'warning' :
|
||||
s === 'promoted' ? 'info' :
|
||||
'neutral';
|
||||
}
|
||||
function stageVariant(s: string): 'online' | 'warning' | 'danger' | 'neutral' {
|
||||
return s === 'ready' ? 'online' :
|
||||
s === 'failed' ? 'danger' :
|
||||
s === 'awaiting-empty' || s === 'restarting' || s === 'awaiting-health' || s === 'awaiting-match' || s === 'deploying'
|
||||
? 'warning' :
|
||||
'neutral';
|
||||
} catch (error) { flash = (error as Error).message; } finally { acting = null; }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -137,7 +123,7 @@
|
||||
<Breadcrumbs items={[{ label: 'Betas', href: '/betas' }, { label: `#${b.id}` }]} />
|
||||
{/snippet}
|
||||
{#snippet actions()}
|
||||
<Badge variant={betaStateVariant(b.state)} size="md" uppercase>{b.state}</Badge>
|
||||
<StatusBadge state={b.state} />
|
||||
{/snippet}
|
||||
</SectionHeader>
|
||||
|
||||
@@ -163,7 +149,7 @@
|
||||
{#each scripts as s (s.id)}
|
||||
<div class="script-row">
|
||||
<Badge variant="neutral" size="sm" uppercase>{s.kind}</Badge>
|
||||
<a class="s-name" href="/scripts/{s.id}">{s.name}</a>
|
||||
<a class="s-name" href={"/" + (s.kind === "baseline" ? "configs" : s.kind + "s") + "/" + s.id}>{s.name}</a>
|
||||
<span class="s-target">{s.target_rel_path}</span>
|
||||
<span class="s-ver">{artifactVersionLabel(s.version)}</span>
|
||||
<span class="s-sha">{s.version?.sha256.slice(0, 8) ?? ''}</span>
|
||||
@@ -202,8 +188,8 @@
|
||||
<div class="srv-list">
|
||||
{#each servers as bs (bs.server)}
|
||||
<div class="srv-row">
|
||||
<a class="srv-name" href="/servers/{bs.server}">{bs.server}</a>
|
||||
<Badge variant={stageVariant(bs.stage)} size="sm" uppercase>{bs.stage}</Badge>
|
||||
<a class="srv-name" href="/servers/{bs.server}"><ServerIdentity name={bs.server} /></a>
|
||||
<StatusBadge state={bs.stage} />
|
||||
<div class="ticks" aria-label="pipeline progress">
|
||||
<span class:on={bs.deployed_at}>Deploy</span>
|
||||
<span class:on={bs.restarted_at || bs.stage === 'restarting'}>Empty</span>
|
||||
|
||||
@@ -0,0 +1,422 @@
|
||||
<script lang="ts">
|
||||
import BetaPlanBuilder from "$ui/components/BetaPlanBuilder.svelte";
|
||||
import { defaultPlan, parseBetaPlan } from "$lib/beta-plan.js";
|
||||
import { onMount, tick } from 'svelte';
|
||||
import ServerIdentity from '$ui/components/ServerIdentity.svelte';
|
||||
import { coverageSummary, requirementSummary } from '$lib/beta-plan-summary.js';
|
||||
import { artifactVersionLabel } from '$lib/artifact-version.js';
|
||||
import { goto } from '$app/navigation';
|
||||
import { fleetServers as sharedFleet, fleetError, refreshFleet } from '$ui/stores/fleet.js';
|
||||
import { parseBetaSelection } from '$lib/script-library.js';
|
||||
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 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; release_version: string | null; 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 loading = $state(true);
|
||||
let scripts = $state<ScriptListRow[]>([]);
|
||||
const fleetServers = $derived($sharedFleet);
|
||||
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 scriptsRes = await fetch('/api/scripts');
|
||||
if (!scriptsRes.ok) throw new Error('Could not load beta setup. Refresh to try again.');
|
||||
if (scriptsRes.ok) {
|
||||
const sBody = (await scriptsRes.json()) as { scripts: ScriptListRow[] };
|
||||
scripts = sBody.scripts;
|
||||
}
|
||||
}
|
||||
async function initialize() {
|
||||
loading = true; flash = null;
|
||||
try { await load(); await seedSelection(); }
|
||||
catch (error) { flash = (error as Error).message; }
|
||||
finally { loading = false; }
|
||||
}
|
||||
onMount(() => { void initialize(); });
|
||||
const steps = ['Files', 'Servers', 'Test plan', 'Review'];
|
||||
let step = $state(0);
|
||||
let stepHeading = $state<HTMLHeadingElement>();
|
||||
const filesReady = $derived(picks.length > 0 && picks.every(p => p.scriptId !== null && p.versionId !== null));
|
||||
async function move(next: number) {
|
||||
flash = null;
|
||||
if (next > step && step === 2) {
|
||||
try { parseBetaPlan(testPlan); } catch (error) { flash = (error as Error).message; return; }
|
||||
}
|
||||
step = next; await tick(); stepHeading?.focus();
|
||||
}
|
||||
|
||||
const eligibleScripts = $derived(
|
||||
scripts.filter(
|
||||
(s) => s.runningBetaId === null && s.latestVersion !== null && (s.latestVersion.id !== s.current_version_id
|
||||
|| picks.some(p => p.scriptId === s.id && p.versionId !== null && p.versionId !== 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 seedSelection(): Promise<void> {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
const selections = parseBetaSelection(query);
|
||||
if (!selections.length) return;
|
||||
// Validate all selections before populating; never substitute a newer upload.
|
||||
const details = await Promise.all(selections.map(async ({ scriptId, versionId }) => {
|
||||
const res = await fetch(`/api/scripts/${scriptId}`);
|
||||
if (!res.ok) throw new Error('A selected artifact is no longer available. Choose artifacts below.');
|
||||
const detail = await res.json() as ScriptDetail & { runningBetaId: number | null };
|
||||
if (detail.runningBetaId !== null || detail.script.current_version_id === versionId
|
||||
|| !detail.versions.some(v => v.id === versionId)) {
|
||||
throw new Error(`${detail.script.name}: the selected version is already promoted, unavailable, or in an active beta. Review your selection below.`);
|
||||
}
|
||||
return detail;
|
||||
}));
|
||||
for (const detail of details) {
|
||||
detailById[detail.script.id] = detail;
|
||||
}
|
||||
picks = selections.map(s => ({ key: nextKey++, ...s }));
|
||||
pickedServers = new Set();
|
||||
}
|
||||
|
||||
async function onPickScript(rowIdx: number): Promise<void> {
|
||||
flash = null;
|
||||
const pick = picks[rowIdx];
|
||||
const scriptId = pick.scriptId;
|
||||
pickedServers = new Set();
|
||||
pick.versionId = null;
|
||||
picks = [...picks];
|
||||
if (scriptId === null) return;
|
||||
if (!detailById[scriptId]) {
|
||||
const res = await fetch(`/api/scripts/${scriptId}`).catch(() => null);
|
||||
if (!res?.ok) { flash = 'Could not load file versions. Choose the file again to retry.'; return; }
|
||||
const body = (await res.json()) as ScriptDetail;
|
||||
detailById = { ...detailById, [scriptId]: body };
|
||||
}
|
||||
if (pick.scriptId !== scriptId) return;
|
||||
const detail = detailById[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 (step !== 3 || !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;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<SectionHeader title="New beta" subtitle="Choose files and test servers, then review before starting.">
|
||||
{#snippet actions()}<Button href="/betas" variant="ghost">Back to betas</Button>{/snippet}
|
||||
</SectionHeader>
|
||||
{#if flash}<div class="ui-error" role="alert">{flash}{#if loading === false && scripts.length === 0}<Button size="sm" onclick={initialize}>Retry</Button>{/if}</div>{/if}
|
||||
{#if $fleetError}<div class="ui-error" role="alert">{$fleetError}<Button size="sm" onclick={refreshFleet}>Retry servers</Button></div>{/if}
|
||||
{#if loading}<EmptyState title="Loading beta setup…" />
|
||||
{:else if eligibleScripts.length === 0 && !flash}<EmptyState title="No versions ready to test" description="Upload a new version in the Library to start a beta." />
|
||||
{:else if scripts.length}
|
||||
<ol class="steps" aria-label="Beta setup progress">
|
||||
{#each steps as label, index}<li aria-current={step === index ? 'step' : undefined} class:current={step === index}><span>{index + 1}</span>{label}</li>{/each}
|
||||
</ol>
|
||||
<form onsubmit={openNewBeta} class="beta-form">
|
||||
<h2 bind:this={stepHeading} tabindex="-1">{steps[step]}</h2>
|
||||
{#if step === 0} <Field label="Files">
|
||||
<div class="picks">
|
||||
{#each picks as row, idx (row.key)}
|
||||
<div class="pick-row">
|
||||
<div class="pick-select">
|
||||
<select
|
||||
class="native-select"
|
||||
aria-label={`File ${idx + 1}`}
|
||||
bind:value={row.scriptId}
|
||||
onchange={() => onPickScript(idx)}
|
||||
>
|
||||
<option value={null}>— Pick an file —</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"
|
||||
aria-label={`Version for file ${idx + 1}`}
|
||||
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}>{artifactVersionLabel(v)} · {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 file"
|
||||
>×</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button type="button" class="add-row" onclick={addRow}>+ Add file</button>
|
||||
</Field>
|
||||
|
||||
{:else if step === 1} <Field label="Test servers" hint="Choose servers that match every selected file.">
|
||||
<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)}
|
||||
/>
|
||||
<ServerIdentity {name} />
|
||||
</label>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
{:else if step === 2}<BetaPlanBuilder bind:plan={testPlan} />
|
||||
{:else}
|
||||
<div class="ui-panel review">
|
||||
<h3>Files and versions</h3>
|
||||
<ul>{#each picks as pick}<li><strong>{scripts.find(s => s.id === pick.scriptId)?.name}</strong> · {artifactVersionLabel(versionsForRow(pick).find(v => v.id === pick.versionId))}</li>{/each}</ul>
|
||||
<h3>Test servers ({pickedServers.size})</h3>
|
||||
<ul>{#each [...pickedServers] as name}<li><ServerIdentity {name} /></li>{/each}</ul>
|
||||
<h3>Pass criteria</h3><p>{coverageSummary(testPlan)} · {testPlan.timeoutHours}-hour testing window</p>
|
||||
<ul>{#each testPlan.requirements as requirement}<li>{requirementSummary(requirement)}</li>{/each}</ul>
|
||||
<h3>Rollout and failure handling</h3>
|
||||
<p>{testPlan.waveSize ? `${testPlan.waveSize} servers per wave.` : 'Deploy to all selected servers.'} {testPlan.failureAction === 'rollback' ? 'Failed checks trigger an automatic rollback.' : testPlan.failureAction === 'pause' ? 'Failed checks pause testing for investigation.' : 'Failed checks hold the beta for review.'} {testPlan.rollbackRestart === 'when-empty' ? 'Rollback restarts wait for empty servers.' : 'Rollback restores files; restart the servers manually.'}</p>
|
||||
<p class="ui-muted">Starting installs these versions and restarts the selected servers. Promotion to the rest of the fleet is a separate action after testing.</p>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="ui-sticky-actions">
|
||||
<Button onclick={() => move(step - 1)} disabled={step === 0 || openingBeta}>Back</Button>
|
||||
{#if step < 3}<Button variant="primary" onclick={() => move(step + 1)} disabled={step === 0 ? !filesReady : step === 1 ? pickedServers.size === 0 : testPlan.requirements.length === 0}>Continue</Button>
|
||||
{:else}<Button type="submit" variant="primary" disabled={!canSubmit} loading={openingBeta}>Start beta</Button>{/if}
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
<style>
|
||||
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||
|
||||
.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: minmax(0, 1fr) minmax(0, 1fr) auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
.pick-select { position: relative; min-width: 0; }
|
||||
.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; }
|
||||
|
||||
h2 { margin: 0; font-size: var(--text-lg); }
|
||||
.steps { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; flex-wrap: wrap; }
|
||||
.steps li { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; }
|
||||
.steps li span { border: 1px solid var(--border-subtle); border-radius: 50%; padding: 4px 8px; }
|
||||
.steps li.current { color: var(--text-primary); font-weight: 600; }
|
||||
.steps li.current span { background: var(--accent-primary); color: var(--text-on-accent); }
|
||||
.review { display: grid; gap: 16px; }
|
||||
.review h3,.review p,.review ul { margin: 0; }
|
||||
.review li { margin-bottom: 8px; }
|
||||
@media (max-width: 720px) {
|
||||
.pick-row { grid-template-columns: minmax(0,1fr) 44px; }
|
||||
.pick-select:first-child { grid-column: 1 / -1; }
|
||||
.chk { min-height: 44px; }
|
||||
.server-picker { flex-direction: column; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user