Improve operational UX, recovery flows, and action safety
Implement the approved UX review across Fleet, Betas, Library, deployments, and Settings. Add reviewed promotion and reconciliation plans, atomic queued-removal cancellation, recoverable beta drafts and launch inputs, accessible controls, and mobile improvements. Validated with 473 tests, a clean typecheck, production build, and isolated desktop/mobile browser walkthroughs. Include the review and implementation coverage notes.
This commit is contained in:
@@ -9,11 +9,16 @@
|
||||
import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
|
||||
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||
import ListFooter from '$ui/components/primitives/ListFooter.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;
|
||||
state: 'running' | 'ready-promote' | 'promoted' | 'rolled-back';
|
||||
testOutcome: string | null;
|
||||
testReason: string | null;
|
||||
deadlineAt: string | null;
|
||||
notes: string | null;
|
||||
wait_for_health: number;
|
||||
wait_for_match: number;
|
||||
opened_at: string;
|
||||
@@ -33,10 +38,22 @@
|
||||
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())));
|
||||
let now = $state(Date.now());
|
||||
const filtered = $derived(betas.filter(b => active(b) === (tab === 'active') && ('#' + b.id + ' ' + (b.notes ?? '') + ' ' + b.scripts.map(s => s.name).join(' ')).toLowerCase().includes(search.toLowerCase())));
|
||||
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 rollout 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.';
|
||||
}
|
||||
$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 = ''; }
|
||||
try { const res = await fetch('/api/betas'); if (!res.ok) throw new Error('Could not refresh betas.'); betas = (await res.json()).betas; now=Date.now(); error = ''; }
|
||||
catch (e) { error = (e as Error).message; } finally { loading = false; }
|
||||
}
|
||||
onMount(() => {
|
||||
@@ -57,8 +74,8 @@
|
||||
{: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>
|
||||
<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={new Date(beta.opened_at).toLocaleString()}>Opened {age(beta.opened_at)}</time>{#if beta.deadlineAt && active(beta)} · Ends {new Date(beta.deadlineAt).toLocaleString()}{:else if beta.closed_at} · Finished {new Date(beta.closed_at).toLocaleString()}{/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><ListFooter total={filtered.length} bind:limit label="betas" />{/if}
|
||||
</div>
|
||||
@@ -70,4 +87,5 @@
|
||||
.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; }
|
||||
</style>
|
||||
|
||||
+152
-340
@@ -1,375 +1,187 @@
|
||||
<script lang="ts">
|
||||
import { artifactVersionLabel } from '$lib/artifact-version.js';
|
||||
import BetaTestProgress from "$ui/components/BetaTestProgress.svelte";
|
||||
import type { BetaTestView } from "$lib/beta-plan.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 { betaFlow, type ActivityEvent } from '$lib/operation-flow.js';
|
||||
import { pollVisible } from '$ui/poll.js';
|
||||
import { confirmAction } from '$ui/confirm.js';
|
||||
import BetaTestProgress from '$ui/components/BetaTestProgress.svelte';
|
||||
import ServerIdentity from '$ui/components/ServerIdentity.svelte';
|
||||
import OperationHistory from '$ui/components/OperationHistory.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';
|
||||
import Button from '$ui/components/primitives/Button.svelte';
|
||||
import Dialog from '$ui/components/primitives/Dialog.svelte';
|
||||
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||
import Breadcrumbs from '$ui/components/primitives/Breadcrumbs.svelte';
|
||||
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||
import OperationHistory from '$ui/components/OperationHistory.svelte';
|
||||
import { betaFlow, type ActivityEvent } from '$lib/operation-flow.js';
|
||||
|
||||
interface BetaRow {
|
||||
id: number; script_id: number; script_version_id: number;
|
||||
trigger_kind: string; wait_for_health: number; wait_for_match: number;
|
||||
state: 'running' | 'ready-promote' | 'promoted' | 'rolled-back';
|
||||
opened_at: string; closed_at: string | null; notes: string | null;
|
||||
}
|
||||
interface BetaServerRow {
|
||||
beta_id: number; server: string;
|
||||
had_original: number; prior_version_id: number | null;
|
||||
stage: string; error: string | null;
|
||||
deployed_at: string | null; restarted_at: string | null;
|
||||
healthy_at: string | null; match_seen_at: string | null;
|
||||
updated_at: string;
|
||||
}
|
||||
interface BetaScript {
|
||||
id: number; name: string; target_rel_path: string;
|
||||
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
||||
version: { id: number; version: number; release_version: string | null; sha256: string } | null;
|
||||
}
|
||||
|
||||
let test = $state<BetaTestView | null>(null);
|
||||
let beta = $state<BetaRow | null>(null);
|
||||
let scripts = $state<BetaScript[]>([]);
|
||||
let servers = $state<BetaServerRow[]>([]);
|
||||
interface BetaRow { id:number; state:string; opened_at:string; closed_at:string|null; wait_for_health:number; wait_for_match:number; notes?:string|null; }
|
||||
interface BetaServer { server:string; stage:string; error:string|null; deployed_at:string|null; restarted_at:string|null; healthy_at:string|null; match_seen_at:string|null; }
|
||||
interface BetaFile { id:number; name:string; kind:string; target_rel_path:string; version:{id:number; version:number; release_version:string|null; sha256:string}|null; }
|
||||
interface Promotion { id:string; pending:number; failed:number; }
|
||||
let test = $state<BetaTestView|null>(null);
|
||||
let beta = $state<BetaRow|null>(null);
|
||||
let scripts = $state<BetaFile[]>([]);
|
||||
let servers = $state<BetaServer[]>([]);
|
||||
let events = $state<ActivityEvent[]>([]);
|
||||
let loadError = $state('');
|
||||
let request = 0;
|
||||
let loading = $state(true);
|
||||
let flash = $state<string | null>(null);
|
||||
let acting = $state<string | null>(null);
|
||||
let promotion = $state<Promotion|null>(null);
|
||||
let loading = $state(true), loadError = $state(''), flash = $state(''), success = $state('');
|
||||
let acting = $state<string|null>(null), request = 0;
|
||||
let reviewOpen = $state(false), preview = $state<BetaPromotionPreview|null>(null), reviewError = $state('');
|
||||
let now = $state(Date.now());
|
||||
const id = $derived(Number($page.params.id));
|
||||
const closed = $derived(beta?.state === 'promoted' || beta?.state === 'rolled-back');
|
||||
const deadline = $derived(beta && test ? new Date(Date.parse(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 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 rollout to check activation on additional servers.' : 'Reuse these files and this plan when you are ready to test again.'
|
||||
: test?.outcome === 'inconclusive' ? 'The deadline passed without enough evidence. Roll back, then reuse this plan with a longer testing window.'
|
||||
: 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.');
|
||||
|
||||
let id = $derived(Number.parseInt($page.params.id ?? '0', 10));
|
||||
|
||||
async function load(): Promise<void> {
|
||||
const current = ++request;
|
||||
const requestedId = id;
|
||||
async function load() {
|
||||
const current = ++request, requestedId = id;
|
||||
try {
|
||||
const res = await fetch(`/api/betas/${requestedId}`);
|
||||
if (!res.ok) throw new Error(res.status === 404 ? 'Beta not found.' : 'Could not refresh beta.');
|
||||
if (!res.ok) throw new Error(res.status === 404 ? 'Beta not found.' : 'Could not refresh beta. Showing the last loaded results.');
|
||||
const body = await res.json();
|
||||
if (current !== request || requestedId !== id) return;
|
||||
test = body.test; beta = body.beta; scripts = body.scripts; servers = body.servers; events = body.events;
|
||||
loadError = '';
|
||||
} catch (err) {
|
||||
if (current === request && requestedId === id) loadError = (err as Error).message;
|
||||
} finally { if (current === request && requestedId === id) loading = false; }
|
||||
test = body.test; beta = body.beta; scripts = body.scripts; servers = body.servers; events = body.events; promotion = body.promotion ?? null;
|
||||
now = Date.now(); loadError = '';
|
||||
} catch (error) { if (current === request && requestedId === id) loadError = (error as Error).message; }
|
||||
finally { if (current === request && requestedId === id) loading = false; }
|
||||
}
|
||||
|
||||
$effect(() => { id; beta = null; loading = true; loadError = ''; void load(); });
|
||||
|
||||
$effect(() => { id; beta = null; loading = true; loadError = ''; flash = ''; success = ''; reviewOpen = false; void load(); });
|
||||
onMount(() => pollVisible(load, 5000, false));
|
||||
|
||||
async function promote(): Promise<void> {
|
||||
acting = 'promote'; flash = null;
|
||||
async function reviewPromotion() {
|
||||
reviewOpen = true; preview = null; reviewError = ''; acting = 'preview';
|
||||
try {
|
||||
const res = await fetch(`/api/betas/${id}/promote`, { method: 'POST' });
|
||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||
if (!body.ok) { flash = body.error ?? 'Promote failed'; return; }
|
||||
await load();
|
||||
} catch (error) { flash = (error as Error).message; } finally { acting = null; }
|
||||
const response = await fetch(`/api/betas/${id}/promote`), body = await response.json();
|
||||
if (!response.ok) throw new Error(body.error ?? 'Could not prepare promotion review.');
|
||||
preview = body.preview;
|
||||
} catch (error) { reviewError = (error as Error).message; }
|
||||
finally { acting = null; }
|
||||
}
|
||||
async function rollback(): Promise<void> {
|
||||
const isReject = beta?.state === 'ready-promote';
|
||||
const prompt = isReject
|
||||
? `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 (!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;
|
||||
async function promote() {
|
||||
if (!preview) return;
|
||||
acting = 'promote'; reviewError = ''; flash = ''; success = '';
|
||||
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; }
|
||||
const response = await fetch(`/api/betas/${id}/promote`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({previewToken:preview.token})});
|
||||
const body = await response.json();
|
||||
if (!response.ok || !body.ok) {
|
||||
if (body.kind === 'preview-changed' && body.details) preview = body.details;
|
||||
throw new Error(body.error ?? 'Promotion could not be started.');
|
||||
}
|
||||
reviewOpen = false;
|
||||
success = `Promotion created. ${body.result.awaitingActivation ?? 0} additional servers await activation${body.result.failedServers?.length ? `; ${body.result.failedServers.length} servers need attention` : ''}.`;
|
||||
await load();
|
||||
} catch (error) { flash = (error as Error).message; } finally { acting = null; }
|
||||
} catch (error) { reviewError = (error as Error).message; }
|
||||
finally { acting = null; }
|
||||
}
|
||||
async function retry(server: string): Promise<void> {
|
||||
acting = `retry:${server}`; flash = null;
|
||||
async function rollback() {
|
||||
const reject = beta?.state === 'ready-promote';
|
||||
const restarts = test?.plan.rollbackRestart === 'manual' ? 'Restart servers manually to load the restored files.' : 'Restarts wait for empty servers.';
|
||||
if (!await confirmAction({title:reject?'Reject beta?':'Roll back beta?',message:`Restore the original files on ${servers.length} beta servers${reject ? ' and mark these versions as test-failed' : ''}. ${restarts}`,confirmLabel:reject?'Reject beta':'Roll back',danger:true})) return;
|
||||
acting = 'rollback'; flash = ''; success = '';
|
||||
try {
|
||||
const res = await fetch(`/api/betas/${id}/retry`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ server })
|
||||
});
|
||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||
if (!body.ok) { flash = body.error ?? 'Retry failed'; return; }
|
||||
const response = await fetch(`/api/betas/${id}/rollback`,{method:'POST'}), body = await response.json();
|
||||
if (!response.ok || !body.ok) throw new Error(body.error ?? 'Rollback failed.');
|
||||
success = `Original files restored. ${restarts}`; await load();
|
||||
} catch(error) { flash = (error as Error).message; }
|
||||
finally { acting = null; }
|
||||
}
|
||||
async function retry(server:string) {
|
||||
acting = `retry:${server}`; flash = '';
|
||||
try {
|
||||
const response = await fetch(`/api/betas/${id}/retry`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({server})}), body = await response.json();
|
||||
if (!response.ok || !body.ok) throw new Error(body.error ?? 'Retry failed.');
|
||||
await load();
|
||||
} catch (error) { flash = (error as Error).message; } finally { acting = null; }
|
||||
} catch(error) { flash = (error as Error).message; }
|
||||
finally { acting = null; }
|
||||
}
|
||||
function outstanding(server:string) {
|
||||
const progress = test?.servers.find(row => row.server === server)?.progress.find(item => !item.passed);
|
||||
const requirement = test?.plan.requirements.find(item => item.id === progress?.id);
|
||||
return requirement ? requirementSummary(requirement) : 'Waiting for deployment and fresh observations.';
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Beta #{id} | Electric Cherry</title></svelte:head>
|
||||
{#if loadError}<p role="alert" class="err">{loadError} <button onclick={load}>Retry</button></p>{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="loading">Loading…</div>
|
||||
{:else if !beta}
|
||||
<EmptyState title="Beta not found" description="This beta may have been archived." />
|
||||
{:else}
|
||||
{@const b = beta}
|
||||
<div class="page">
|
||||
<SectionHeader title="Beta #{b.id}">
|
||||
{#snippet crumbs()}
|
||||
<Breadcrumbs items={[{ label: 'Betas', href: '/betas' }, { label: `#${b.id}` }]} />
|
||||
{/snippet}
|
||||
{#snippet actions()}
|
||||
<StatusBadge state={b.state} />
|
||||
{/snippet}
|
||||
</SectionHeader>
|
||||
|
||||
<Card padding="lg">
|
||||
<div class="opts">
|
||||
<div class="opt"><span class="opt-k">Started</span><span class="opt-v">{new Date(b.opened_at).toLocaleString()}</span></div>
|
||||
<div class="opt"><span class="opt-k">Finished</span><span class="opt-v">{b.closed_at ? new Date(b.closed_at).toLocaleString() : 'In progress'}</span></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<OperationHistory steps={betaFlow({ ...b, testPlan: !!test }, servers)} {events} active={b.state === 'running' || b.state === 'ready-promote'} />
|
||||
|
||||
<!-- Artifacts -->
|
||||
<Card padding="lg">
|
||||
<div class="panel-head">
|
||||
<h2>Artifacts</h2>
|
||||
<Badge variant="neutral" size="sm">{scripts.length}</Badge>
|
||||
</div>
|
||||
{#if scripts.length === 0}
|
||||
<EmptyState title="No artifacts bundled" description="This beta has no scripts, configs, or plugins." />
|
||||
{:else}
|
||||
<div class="script-list">
|
||||
{#each scripts as s (s.id)}
|
||||
<div class="script-row">
|
||||
<Badge variant="neutral" size="sm" uppercase>{s.kind}</Badge>
|
||||
<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>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
{#if test}
|
||||
<Card padding="lg"><BetaTestProgress {test} betaId={id} closed={b.state === "promoted" || b.state === "rolled-back"} onUpdate={load} /></Card>
|
||||
{:else}
|
||||
<!-- Options -->
|
||||
<Card padding="lg">
|
||||
<div class="panel-head"><h2>Options</h2></div>
|
||||
<div class="opts">
|
||||
<div class="opt">
|
||||
<span class="opt-k">Wait for health</span>
|
||||
<span class="opt-v">{b.wait_for_health ? 'Yes' : 'No'}</span>
|
||||
</div>
|
||||
<div class="opt">
|
||||
<span class="opt-k">Wait for match</span>
|
||||
<span class="opt-v">{b.wait_for_match ? 'Yes' : 'No'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/if}
|
||||
|
||||
<!-- Server progress -->
|
||||
<Card padding="lg">
|
||||
<div class="panel-head">
|
||||
<h2>Server progress</h2>
|
||||
<Badge variant="neutral" size="sm">{servers.length}</Badge>
|
||||
</div>
|
||||
<div class="srv-list">
|
||||
{#each servers as bs (bs.server)}
|
||||
<div class="srv-row">
|
||||
<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>
|
||||
<span class:on={bs.restarted_at}>Restart</span>
|
||||
{#if b.wait_for_health}<span class:on={bs.healthy_at}>Healthy</span>{/if}
|
||||
{#if b.wait_for_match}
|
||||
<span class:on={bs.match_seen_at}>Match</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if bs.error}
|
||||
<span class="err">{bs.error}</span>
|
||||
{/if}
|
||||
{#if bs.stage === 'failed' && !test}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onclick={() => retry(bs.server)}
|
||||
disabled={acting === `retry:${bs.server}`}
|
||||
loading={acting === `retry:${bs.server}`}
|
||||
>
|
||||
Retry
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Actions -->
|
||||
<Card padding="lg">
|
||||
<div class="panel-head"><h2>Actions</h2></div>
|
||||
<div class="action-row">
|
||||
<Button
|
||||
variant="primary"
|
||||
onclick={promote}
|
||||
disabled={b.state !== 'ready-promote' || acting !== null}
|
||||
loading={acting === 'promote'}
|
||||
title={b.state !== 'ready-promote' ? 'The test plan must pass before promotion' : ''}
|
||||
>
|
||||
Promote
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
onclick={rollback}
|
||||
disabled={b.state === 'promoted' || b.state === 'rolled-back' || acting !== null}
|
||||
loading={acting === 'rollback'}
|
||||
>
|
||||
{b.state === 'ready-promote' ? 'Reject' : 'Rollback'}
|
||||
</Button>
|
||||
</div>
|
||||
{#if flash}<div class="flash">{flash}</div>{/if}
|
||||
</Card>
|
||||
</div>
|
||||
{#if loadError}<div class="ui-error" role="alert">{loadError}<Button size="sm" onclick={load}>Retry</Button></div>{/if}
|
||||
{#if loading}<EmptyState title="Loading beta…" />
|
||||
{: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.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>
|
||||
<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}>{new Date(beta.opened_at).toLocaleString()}</time></span>
|
||||
{#if deadline && !closed}<strong>Ends <time datetime={deadline.toISOString()}>{deadline.toLocaleString()}</time> · {deadlineText}</strong>{/if}
|
||||
{#if beta.closed_at}<span>Finished {new Date(beta.closed_at).toLocaleString()}</span>{/if}
|
||||
</div>
|
||||
{#if !closed && test}<p class="muted">Waiting for empty servers uses this window. Pausing or retrying does not extend the deadline.</p>{/if}
|
||||
<div class="actions">
|
||||
{#if !closed}<Button variant="primary" onclick={reviewPromotion} disabled={beta.state !== 'ready-promote' || acting !== null}>Review promotion</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={`/betas/new?reuse=${id}`}>Reuse files and test plan</Button>{/if}
|
||||
{#if promotion}<Button href={`/campaigns/${encodeURIComponent(promotion.id)}`}>View rollout</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}
|
||||
{#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"><a href={`/servers/${encodeURIComponent(server.server)}`}><ServerIdentity name={server.server} /></a><StatusBadge state={server.stage} /><p>{server.error ?? outstanding(server.server)}</p><a href={server.error ? `/servers/${encodeURIComponent(server.server)}?tab=diagnostics` : '#test-results'}>{server.error ? 'Diagnose' : 'View checks'}</a></div>{/each}
|
||||
</div></section>
|
||||
{/if}
|
||||
{#if test}<div id="test-results"><Card padding="lg"><BetaTestProgress {test} betaId={id} {closed} 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={`/${file.kind === 'baseline' ? 'configs' : file.kind + 's'}/${file.id}`}>{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"><a href={`/servers/${encodeURIComponent(server.server)}`}><ServerIdentity name={server.server}/></a><StatusBadge state={server.stage}/><p>Files {server.deployed_at ? 'installed' : 'pending'} · Restart {server.restarted_at ? 'completed' : '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="ui-error">{server.error}</p>{/if}{#if server.stage === 'failed' && !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>
|
||||
<OperationHistory steps={betaFlow({...beta,testPlan:!!test},servers)} {events} active={!closed}/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Dialog bind:open={reviewOpen} title="Review promotion" description="Review the exact files and server eligibility before installing the promoted versions." busy={acting === 'promote'} wide>
|
||||
{#if acting === 'preview'}<p role="status">Preparing promotion impact…</p>{/if}
|
||||
{#if reviewError}<p class="ui-error" role="alert">{reviewError}</p>{/if}
|
||||
{#if preview}
|
||||
<p><strong>{preview.servers.filter(server => server.tested).length} tested servers</strong> and <strong>{preview.servers.filter(server => !server.tested).length} additional eligible servers</strong>.</p>
|
||||
<p>Files are installed when you confirm. Tested servers have already restarted. Additional servers restart when empty, then their health is checked. Eligibility is determined by each file's current scope.</p>
|
||||
<p class="muted">Reviewed {new Date(preview.createdAt).toLocaleString()}. If targets, versions, or composed settings change, you must review again.</p>
|
||||
{#each preview.blockers as blocker}<p class="ui-error" role="alert">{blocker}</p>{/each}
|
||||
<div class="file-list">{#each preview.files as file}<details open><summary>{file.name} · {artifactVersionLabel(file)} · {file.servers.length} servers</summary><p><code>{file.path}</code> · {file.scope} · SHA {file.sha256.slice(0,12)}</p><ul>{#each file.servers as name}<li><ServerIdentity {name}/><span>{preview.servers.find(server => server.name === name)?.tested ? 'Already tested' : 'Additional target · restart when empty'}</span></li>{/each}</ul></details>{/each}</div>
|
||||
{#if preview.configWrites.length}<details><summary>Composed configuration files ({preview.configWrites.length})</summary>{#each preview.configWrites as write}<p>{write.server} · {write.path} · {write.sha256?.slice(0,12) ?? write.error}</p>{/each}</details>{/if}
|
||||
{:else if acting !== 'preview'}<Button onclick={reviewPromotion}>Retry preview</Button>{/if}
|
||||
{#snippet actions()}<Button onclick={() => reviewOpen = false} disabled={acting === 'promote'}>Cancel</Button>{#if preview}<Button onclick={reviewPromotion} disabled={acting !== null}>Refresh review</Button><Button variant="primary" onclick={promote} loading={acting === 'promote'} disabled={acting !== null || !!preview.blockers.length}>Promote to {preview.servers.length} servers</Button>{/if}{/snippet}
|
||||
</Dialog>
|
||||
|
||||
<style>
|
||||
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||
.loading { text-align: center; padding: var(--space-16); color: var(--text-tertiary); }
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.panel-head h2 {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Artifacts */
|
||||
.script-list { display: flex; flex-direction: column; gap: var(--space-1); }
|
||||
.script-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(160px, 220px) 1fr 80px 100px;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.s-name { color: var(--text-primary); text-decoration: none; font-weight: var(--weight-semibold); }
|
||||
.s-name:hover { color: var(--accent-primary-hover); text-decoration: underline; }
|
||||
.s-target { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all; }
|
||||
.s-ver, .s-sha { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||
|
||||
/* Options */
|
||||
.opts { display: flex; gap: var(--space-6); flex-wrap: wrap; }
|
||||
.opt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
min-width: 200px;
|
||||
}
|
||||
.opt-k {
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-label);
|
||||
color: var(--text-tertiary);
|
||||
font-weight: var(--weight-semibold);
|
||||
}
|
||||
.opt-v { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--weight-semibold); }
|
||||
|
||||
/* Server progress */
|
||||
.srv-list { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.srv-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 220px) auto 1fr auto auto;
|
||||
gap: var(--space-3);
|
||||
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);
|
||||
}
|
||||
.srv-name { color: var(--text-primary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
|
||||
.srv-name:hover { color: var(--accent-primary-hover); }
|
||||
|
||||
/* Pipeline ticks */
|
||||
.ticks {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.ticks span { position: relative; padding-left: 14px; }
|
||||
.ticks span::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--text-quaternary);
|
||||
background: transparent;
|
||||
transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
.ticks span.on { color: var(--text-primary); }
|
||||
.ticks span.on::before {
|
||||
background: var(--state-online);
|
||||
border-color: var(--state-online);
|
||||
box-shadow: 0 0 5px rgba(124, 212, 255, 0.45);
|
||||
}
|
||||
.err {
|
||||
color: var(--state-danger);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.action-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
|
||||
.flash {
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: rgba(255, 86, 112, 0.06);
|
||||
border: 1px solid rgba(255, 86, 112, 0.28);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--state-danger);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.script-row, .srv-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
}
|
||||
.page { display:grid; gap:24px; }
|
||||
h2 { margin:0; font-size:18px; } p { line-height:1.6; overflow-wrap:anywhere; }
|
||||
.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); }
|
||||
.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; } }
|
||||
</style>
|
||||
|
||||
+203
-400
@@ -1,422 +1,225 @@
|
||||
<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 { beforeNavigate, goto } from '$app/navigation';
|
||||
import { defaultPlan, parseBetaPlan, betaPlanIssues, type BetaPlan } from '$lib/beta-plan.js';
|
||||
import { betaDraftKey, readBetaDraft, compatibleBetaServers, type BetaDraft } from '$lib/beta-draft.js';
|
||||
import { coverageSummary, requirementSummary } from '$lib/beta-plan-summary.js';
|
||||
import { artifactVersionLabel } from '$lib/artifact-version.js';
|
||||
import { goto } from '$app/navigation';
|
||||
import { parseBetaSelection, mapLabel } from '$lib/script-library.js';
|
||||
import { fleetIdentity, freshServer } from '$lib/fleet-overview.js';
|
||||
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 { serverTimeNow } from '$ui/stores/servers.js';
|
||||
import { confirmAction } from '$ui/confirm.js';
|
||||
import BetaPlanBuilder from '$ui/components/BetaPlanBuilder.svelte';
|
||||
import ServerIdentity from '$ui/components/ServerIdentity.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[]>([]);
|
||||
interface FileRow { id:number; name:string; kind:string; target_rel_path:string; scope_type:'game'|'map'|null; scope_value:string|null; current_version_id:number|null; latestVersion:{id:number}|null; runningBetaId:number|null; }
|
||||
interface Version { id:number; version:number; release_version:string|null; sha256:string; state:string; }
|
||||
interface FileDetail { script:FileRow; versions:Version[]; matchedServers:string[]; runningBetaId?:number|null; }
|
||||
interface Pick { key:number; scriptId:number|null; versionId:number|null; }
|
||||
let scripts = $state<FileRow[]>([]), detailById = $state<Record<number,FileDetail>>({}), nextKey=0;
|
||||
let picks = $state<Pick[]>([{key:nextKey++,scriptId:null,versionId:null}]);
|
||||
let pickedServers = $state<Set<string>>(new Set()), testPlan = $state<BetaPlan>(defaultPlan());
|
||||
let step = $state(0), stepHeading = $state<HTMLHeadingElement>(), planBuilder = $state<BetaPlanBuilder>();
|
||||
let loading = $state(true), openingBeta = $state(false), flash = $state(''), notice = $state('');
|
||||
let availableDraft = $state<BetaDraft|null>(null), draftReady = $state(false), storageUnavailable = $state(false), allowLeave = false;
|
||||
let hasLinkedSetup = $state(false);
|
||||
let loadingVersions = $state<Set<number>>(new Set());
|
||||
const rowRequests = new Map<number, number>();
|
||||
let versionRequest = 0;
|
||||
let betaLabel = $state('');
|
||||
let search = $state(''), serverGame = $state(''), availability = $state(''), now = $state(Date.now());
|
||||
const steps = ['Files','Servers','Test plan','Review'];
|
||||
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 eligibleFiles = $derived(scripts.filter(file=>file.runningBetaId===null && file.latestVersion!==null));
|
||||
const filesReady = $derived(picks.length>0 && picks.every(p=>p.scriptId!==null && p.versionId!==null && versionsFor(p).some(v=>v.id===p.versionId)));
|
||||
const dirty = $derived(!!betaLabel.trim() || picks.some(p=>p.scriptId!==null) || pickedServers.size>0 || JSON.stringify(testPlan)!==JSON.stringify(defaultPlan()));
|
||||
const candidateServers = $derived.by(()=>{
|
||||
const scopes=picks.map(p=>p.scriptId===null?null:detailById[p.scriptId]?.script).filter((file):file is FileRow=>!!file);
|
||||
return scopes.length ? fleetServers.filter(server=>scopes.every(file=>!file.scope_type || (file.scope_type==='game'?server.game:server.map)===file.scope_value)).map(server=>server.name) : [];
|
||||
});
|
||||
const visibleServers = $derived(fleetServers.filter(server=>candidateServers.includes(server.name)).filter(server=>{
|
||||
const identity=fleetIdentity(server), fresh=freshServer(server,now);
|
||||
return (!serverGame || identity.game===serverGame) && (!availability || (availability==='empty' ? fresh&&server.last_players===0 : availability==='occupied' ? fresh&&(server.last_players??0)>0 : !fresh))
|
||||
&& `${server.name} ${identity.title} ${identity.map} ${identity.game}`.toLowerCase().includes(search.toLowerCase());
|
||||
}));
|
||||
const groups = $derived([...new Set(visibleServers.map(server=>fleetIdentity(server).group))].map(group=>({key:group,servers:visibleServers.filter(server=>fleetIdentity(server).group===group)})));
|
||||
const forwardReason = $derived(step>0 && $fleetError ? 'Server eligibility could not be verified. Retry servers before continuing; your selections are preserved.' : step===0 ? !filesReady ? 'Choose an available file and exact version in every row.' : '' : step===1 ? !pickedServers.size ? 'Select at least one compatible test server.' : '' : step===2 ? !testPlan.requirements.length ? 'Add at least one requirement to continue.' : '' : !filesReady || !pickedServers.size || [...pickedServers].some(name=>!candidateServers.includes(name)) ? 'Recheck the selected files and servers before starting.' : '');
|
||||
|
||||
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;
|
||||
}
|
||||
function versionsFor(pick:Pick) { return pick.scriptId===null ? [] : (detailById[pick.scriptId]?.versions??[]).filter(v=>v.id!==detailById[pick.scriptId!]?.script.current_version_id); }
|
||||
function eligibleFor(index:number) { return eligibleFiles.filter(file=>!picks.some((p,i)=>i!==index&&p.scriptId===file.id)); }
|
||||
function scopeText(file:FileRow) { return !file.scope_type ? 'Any registered server' : file.scope_type==='map' ? `Map: ${mapLabel(file.scope_value??'')}` : `Game: ${file.scope_value==='t5'?'Black Ops I':file.scope_value==='t6'?'Black Ops II':file.scope_value}`; }
|
||||
function scopeCount(file:FileRow) { return fleetServers.filter(server=>!file.scope_type || (file.scope_type==='game'?server.game:server.map)===file.scope_value).length; }
|
||||
function reconcileSelection() {
|
||||
// Failed refreshes can leave an empty or retained snapshot; neither is
|
||||
// authoritative enough to remove selections from the saved draft.
|
||||
if($fleetError || picks.every(p=>p.scriptId===null) || picks.some(p=>p.scriptId!==null && !detailById[p.scriptId]))return;
|
||||
const result=compatibleBetaServers(pickedServers,candidateServers);
|
||||
if(result.removed.length) { pickedServers=result.kept; notice=`Kept ${result.kept.size} compatible selections. Removed ${result.removed.length} servers that no longer match every file: ${result.removed.join(', ')}.`; }
|
||||
}
|
||||
async function loadSelections(selections:BetaDraft['picks']) {
|
||||
const warnings:string[]=[];
|
||||
picks=await Promise.all(selections.map(async selection=>{
|
||||
const pick={key:nextKey++,...selection};
|
||||
if(pick.scriptId===null)return pick;
|
||||
const listed=scripts.find(file=>file.id===pick.scriptId);
|
||||
if(!listed || listed.runningBetaId!==null) { warnings.push(`File #${pick.scriptId} is unavailable or in another beta. Choose a replacement.`); return {...pick,scriptId:null,versionId:null}; }
|
||||
try {
|
||||
const response=await fetch(`/api/scripts/${pick.scriptId}`);
|
||||
if(!response.ok)throw Error();
|
||||
const detail=await response.json() as FileDetail;
|
||||
detailById[pick.scriptId]=detail;
|
||||
if(detail.runningBetaId!=null) { warnings.push(`${listed.name} is in beta #${detail.runningBetaId}. Choose a replacement.`); return {...pick,scriptId:null,versionId:null}; }
|
||||
if(!detail.versions.some(v=>v.id===pick.versionId) || detail.script.current_version_id===pick.versionId) { warnings.push(`${listed.name}: saved version ${pick.versionId??''} is unavailable or already promoted. Select an unpromoted version; no newer version was substituted.`); pick.versionId=null; }
|
||||
return pick;
|
||||
} catch { warnings.push(`${listed.name}: versions could not be loaded. Choose the file again to retry.`); return {...pick,versionId:null}; }
|
||||
}));
|
||||
if(warnings.length) { flash=warnings.join(' '); step=0; }
|
||||
}
|
||||
async function initialize(ignoreDraft = false) {
|
||||
loading=true; flash=''; draftReady=false;
|
||||
try {
|
||||
const response=await fetch('/api/scripts');
|
||||
if(!response.ok)throw new Error('Could not load files for beta setup. Retry to continue.');
|
||||
scripts=(await response.json()).scripts;
|
||||
await refreshFleet();
|
||||
const query=new URLSearchParams(window.location.search), selections=parseBetaSelection(query), reuse=Number(query.get('reuse'));
|
||||
hasLinkedSetup=selections.length>0 || reuse>0;
|
||||
// Returning from a file detail retains the original selection URL. A
|
||||
// stored draft must be offered before that URL can seed a fresh setup.
|
||||
if(!ignoreDraft) {
|
||||
try { availableDraft=readBetaDraft(localStorage.getItem(betaDraftKey)); } catch { storageUnavailable=true; }
|
||||
if(availableDraft) {
|
||||
if(hasLinkedSetup)notice='An unfinished draft is saved. Resume it, or discard it to start from the linked files and exact versions.';
|
||||
return;
|
||||
}
|
||||
}
|
||||
if(reuse>0) {
|
||||
const response=await fetch(`/api/betas/${reuse}`);
|
||||
if(!response.ok)throw new Error('The beta to reuse is unavailable. Choose files below.');
|
||||
const source=await response.json();
|
||||
if(!['promoted','rolled-back'].includes(source.beta.state))throw new Error('Roll back or promote the original beta before reusing its files.');
|
||||
if(source.test?.plan)testPlan=parseBetaPlan(source.test.plan);
|
||||
betaLabel=source.beta.notes ?? '';
|
||||
pickedServers=new Set(source.servers.map((s:{server:string})=>s.server));
|
||||
await loadSelections(source.scripts.map((file:{id:number;version:{id:number}|null})=>({scriptId:file.id,versionId:file.version?.id??null})));
|
||||
reconcileSelection(); notice='Copied the exact file versions and test plan. Review availability, server selection, and the testing window before starting.'; draftReady=true;
|
||||
} else if(selections.length) { await loadSelections(selections); draftReady=true; }
|
||||
else draftReady=true;
|
||||
} catch(error) { flash=(error as Error).message; draftReady=true; }
|
||||
finally { loading=false; }
|
||||
}
|
||||
async function resumeDraft() {
|
||||
if(!availableDraft)return;
|
||||
const draft=availableDraft; loading=true; flash=''; notice='';
|
||||
try { testPlan=draft.testPlan; betaLabel=typeof draft.label==='string'?draft.label:''; step=draft.step; pickedServers=new Set(draft.servers); await loadSelections(draft.picks); reconcileSelection(); notice=notice || 'Draft resumed. Exact file versions and compatible servers were rechecked.'; }
|
||||
finally { availableDraft=null; loading=false; draftReady=true; }
|
||||
}
|
||||
function discardDraft() {
|
||||
const useLinked=!!availableDraft && hasLinkedSetup;
|
||||
availableDraft=null; picks=[{key:nextKey++,scriptId:null,versionId:null}]; pickedServers=new Set(); testPlan=defaultPlan(); betaLabel=''; step=0; notice='Draft discarded.';
|
||||
try{localStorage.removeItem(betaDraftKey);}catch{storageUnavailable=true;}
|
||||
draftReady=true;
|
||||
if(useLinked)void initialize(true);
|
||||
}
|
||||
$effect(()=>{
|
||||
if(!draftReady || loading || openingBeta)return;
|
||||
const draft:BetaDraft={version:1,savedAt:new Date().toISOString(),step,label:betaLabel,picks:picks.map(({scriptId,versionId})=>({scriptId,versionId})),servers:[...pickedServers],testPlan:JSON.parse(JSON.stringify(testPlan))};
|
||||
if(dirty) { try{localStorage.setItem(betaDraftKey,JSON.stringify(draft));storageUnavailable=false;}catch{storageUnavailable=true;} }
|
||||
});
|
||||
$effect(()=>{ if(draftReady && !loading && !loadingVersions.size) { candidateServers; reconcileSelection(); } });
|
||||
beforeNavigate(navigation=>{
|
||||
if(!dirty || !storageUnavailable || allowLeave || openingBeta)return;
|
||||
if(navigation.willUnload){navigation.cancel();return;}
|
||||
if(navigation.to){navigation.cancel();void confirmAction({title:'Leave unfinished beta?',message:'This browser cannot save the draft. Leaving will discard your unfinished setup.',confirmLabel:'Leave setup',danger:true}).then(confirmed=>{if(confirmed){allowLeave=true;void goto(navigation.to!.url);}});}
|
||||
});
|
||||
onMount(()=>{void initialize();const timer=setInterval(()=>now=serverTimeNow(),10000);const unload=(event:BeforeUnloadEvent)=>{if(dirty&&storageUnavailable&&!allowLeave&&!openingBeta){event.preventDefault();event.returnValue='';}};window.addEventListener('beforeunload',unload);return()=>{clearInterval(timer);window.removeEventListener('beforeunload',unload);};});
|
||||
async function onPickFile(index:number) {
|
||||
const pick=picks[index], scriptId=pick.scriptId, current=++versionRequest; rowRequests.set(pick.key,current); pick.versionId=null; flash='';
|
||||
if(scriptId===null){loadingVersions=new Set([...loadingVersions].filter(key=>key!==pick.key));reconcileSelection();return;}
|
||||
loadingVersions=new Set([...loadingVersions,pick.key]);
|
||||
try {
|
||||
const response=await fetch(`/api/scripts/${scriptId}`);
|
||||
if(!response.ok)throw new Error('Could not load versions. Choose the file again to retry.');
|
||||
const detail=await response.json() as FileDetail;
|
||||
if(rowRequests.get(pick.key)!==current || pick.scriptId!==scriptId || !picks.some(p=>p.key===pick.key))return;
|
||||
detailById[scriptId]=detail;
|
||||
pick.versionId=versionsFor(pick)[0]?.id??null; picks=[...picks]; reconcileSelection();
|
||||
}catch(error){if(rowRequests.get(pick.key)===current)flash=(error as Error).message;}
|
||||
finally{if(rowRequests.get(pick.key)===current)loadingVersions=new Set([...loadingVersions].filter(key=>key!==pick.key));}
|
||||
}
|
||||
function toggleServer(name:string) { const next=new Set(pickedServers);next.has(name)?next.delete(name):next.add(name);pickedServers=next; }
|
||||
function selectVisible(select:boolean) { const next=new Set(pickedServers);for(const server of visibleServers)select?next.add(server.name):next.delete(server.name);pickedServers=next; }
|
||||
async function move(next:number) {
|
||||
flash='';
|
||||
if(next>step && step===2) { if(!await planBuilder?.validate())return;try{parseBetaPlan(testPlan);}catch(error){flash=(error as Error).message;return;} }
|
||||
step=next;await tick();stepHeading?.focus();
|
||||
}
|
||||
async function openBeta(event:Event) {
|
||||
event.preventDefault();if(step!==3||forwardReason||openingBeta)return;
|
||||
if(betaPlanIssues(testPlan,pickedServers.size).length){await move(2);await planBuilder?.validate();return;}
|
||||
openingBeta=true;flash='';
|
||||
try {
|
||||
const response=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),notes:betaLabel.trim()||undefined,waitForHealth:true,waitForMatch:false})}), body=await response.json();
|
||||
if(!response.ok||!body.ok)throw new Error(body.error??'Could not start beta. Review the selected versions and servers.');
|
||||
draftReady=false;try{localStorage.removeItem(betaDraftKey);}catch{}allowLeave=true;
|
||||
await goto(`/betas/${body.result.betaId}`);
|
||||
}catch(error){flash=(error as Error).message;}finally{openingBeta=false;}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head><title>New beta | Electric Cherry</title></svelte:head>
|
||||
<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}
|
||||
<SectionHeader title="New beta" subtitle="Choose exact file versions 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 !scripts.length}<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." />
|
||||
{#if notice}<p role="status" class="notice">{notice}</p>{/if}
|
||||
{#if loading}<EmptyState title="Loading beta setup…"/>
|
||||
{:else if availableDraft}<section class="ui-panel draft"><h2>Resume unfinished beta?</h2><p>Saved {new Date(availableDraft.savedAt).toLocaleString()} · {availableDraft.picks.filter(p=>p.scriptId!==null).length} files · {availableDraft.servers.length} selected servers. Versions and eligibility will be rechecked.</p><div class="actions"><Button variant="primary" onclick={resumeDraft}>Resume draft</Button><Button onclick={discardDraft}>{hasLinkedSetup ? 'Discard draft and use linked files' : 'Discard draft'}</Button></div></section>
|
||||
{:else if !eligibleFiles.length && !flash}<EmptyState title="No files ready to test" description="Upload a file version or finish its active beta, then return here."/><Button href="/scripts">Open Library</Button>
|
||||
{: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>
|
||||
<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>
|
||||
<div class="draft-status">{#if storageUnavailable}<span role="alert">Draft saving is unavailable in this browser. Keep this page open to preserve your work.</span>{:else}<span>Unfinished changes save in this browser.</span>{/if}{#if dirty}<Button variant="ghost" size="sm" onclick={async()=>{if(await confirmAction({title:'Discard beta draft?',message:'Clear the selected files, servers, and custom test plan?',confirmLabel:'Discard draft',danger:true}))discardDraft();}}>Discard draft</Button>{/if}</div>
|
||||
<form onsubmit={openBeta} class="beta-form">
|
||||
<h2 bind:this={stepHeading} tabindex="-1">{steps[step]}</h2>
|
||||
{#if step===0}
|
||||
<label>Beta label (optional)<input bind:value={betaLabel} maxlength="120" placeholder="For example, Town balance update"/><span class="muted">Shown in the beta list so others can identify this test.</span></label>
|
||||
<div class="picks">{#each picks as pick,index(pick.key)}<section class="pick-row">
|
||||
<label>File {index+1}<select bind:value={pick.scriptId} onchange={()=>onPickFile(index)}><option value={null}>Choose a file</option>{#each eligibleFor(index) as file}<option value={file.id}>[{file.kind}] {file.name}</option>{/each}</select></label>
|
||||
<label>Exact version<select bind:value={pick.versionId} disabled={pick.scriptId===null||loadingVersions.has(pick.key)}><option value={null}>{loadingVersions.has(pick.key)?'Loading versions…':'Choose a version'}</option>{#each versionsFor(pick) as version}<option value={version.id}>{artifactVersionLabel(version)} · {version.sha256.slice(0,8)} · {version.state.replaceAll('-',' ')}</option>{/each}</select></label>
|
||||
<Button ariaLabel={`Remove file ${index+1}`} disabled={picks.length===1} onclick={()=>{picks=picks.filter(p=>p.key!==pick.key);reconcileSelection();}}>Remove</Button>
|
||||
{#if pick.scriptId!==null}{@const file=detailById[pick.scriptId]?.script}{#if file}<p class="scope">{scopeText(file)} · {scopeCount(file)} eligible servers · <a href={`/${file.kind==='baseline'?'configs':file.kind+'s'}/${file.id}`}>Inspect file and versions</a>{#if !loadingVersions.has(pick.key)&&!versionsFor(pick).length}<br/>No unpromoted versions. Upload a new version from the file page.{/if}</p>{/if}{/if}
|
||||
</section>{/each}</div>
|
||||
<Button onclick={()=>picks=[...picks,{key:nextKey++,scriptId:null,versionId:null}]} disabled={picks.length>=eligibleFiles.length}>Add file</Button>
|
||||
<p class="muted">Test servers must match every file's scope. Changing a file retains compatible server selections.</p>
|
||||
{:else if step===1}
|
||||
<p><strong>{pickedServers.size} selected</strong> · {candidateServers.length} compatible servers. Restarts wait for confirmed empty lobbies.</p>
|
||||
<details><summary>Selected file scopes</summary><ul>{#each picks as pick}{#if pick.scriptId!==null}{@const file=detailById[pick.scriptId]?.script}{#if file}<li>{file.name}: {scopeText(file)} · {scopeCount(file)} eligible servers</li>{/if}{/if}{/each}</ul></details>
|
||||
{#if !candidateServers.length}<div class="ui-error">The selected file scopes have no servers in common. Review the scopes above, then go Back to replace or remove a conflicting file.</div>
|
||||
{:else}
|
||||
<div class="filters"><label>Find servers<input type="search" bind:value={search} placeholder="Name, map, lobby…"/></label><label>Game<select bind:value={serverGame}><option value="">All games</option>{#each [...new Set(fleetServers.map(s=>s.game).filter(Boolean))] as game}<option value={game}>{game==='t5'?'Black Ops I':game==='t6'?'Black Ops II':game}</option>{/each}</select></label><label>Availability<select bind:value={availability}><option value="">All servers</option><option value="empty">Confirmed empty</option><option value="occupied">Occupied</option><option value="unknown">Unknown / stale / offline</option></select></label></div>
|
||||
<div class="actions"><span>{visibleServers.length} visible</span><Button size="sm" onclick={()=>selectVisible(true)} disabled={!visibleServers.length}>Select visible</Button><Button size="sm" onclick={()=>selectVisible(false)} disabled={!visibleServers.some(s=>pickedServers.has(s.name))}>Deselect visible</Button></div>
|
||||
{#each groups as group}<fieldset><legend>{fleetIdentity(group.servers[0]).map} · {group.servers[0].game==='t5'?'Black Ops I':'Black Ops II'}</legend><div class="server-picker">{#each group.servers as server}<label class="server-choice"><input type="checkbox" checked={pickedServers.has(server.name)} onchange={()=>toggleServer(server.name)}/><span><ServerIdentity name={server.name}/><small>{freshServer(server,now)&&server.last_players!==null ? `${server.last_players} players · ${server.last_players===0?'Confirmed empty':'Occupied'}` : `Players unknown · ${server.health}`}{#if server.held.length} · In beta #{server.held[0].betaId}{/if}</small></span></label>{/each}</div></fieldset>{/each}
|
||||
{#if !visibleServers.length}<p>No servers match these filters. <button type="button" class="text-action" onclick={()=>{search='';serverGame='';availability='';}}>Clear filters</button></p>{/if}
|
||||
{/if}
|
||||
{:else if step===2}<BetaPlanBuilder bind:this={planBuilder} bind:plan={testPlan} serverCount={pickedServers.size}/>
|
||||
{:else}<section class="ui-panel review"><div class="review-heading"><h3>Files and exact versions</h3><Button size="sm" onclick={()=>move(0)}>Edit files</Button></div><ul>{#each picks as pick}<li><strong>{scripts.find(file=>file.id===pick.scriptId)?.name}</strong> · {artifactVersionLabel(versionsFor(pick).find(v=>v.id===pick.versionId))} · {versionsFor(pick).find(v=>v.id===pick.versionId)?.sha256.slice(0,12)}</li>{/each}</ul><div class="review-heading"><h3>Test servers ({pickedServers.size})</h3><Button size="sm" onclick={()=>move(1)}>Edit servers</Button></div><ul>{#each [...pickedServers] as name}<li><ServerIdentity {name}/></li>{/each}</ul><div class="review-heading"><h3>Pass criteria</h3><Button size="sm" onclick={()=>move(2)}>Edit plan</Button></div><p>{coverageSummary(testPlan)} · {testPlan.timeoutHours}-hour window, starting when this beta opens.</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 automatic rollback.':testPlan.failureAction==='pause'?'Failed checks pause testing.':'Failed checks hold the beta for review.'} {testPlan.rollbackRestart==='when-empty'?'Rollback restarts wait for empty servers.':'Rollback restores files; restart servers manually.'}</p><p>Starting installs the selected versions and restarts test servers when empty. Waiting, pausing, and retrying use the original testing window. Promotion is a separate reviewed action after testing.</p></section>{/if}
|
||||
<div class="ui-sticky-actions"><p id="beta-forward-help" class="muted">{forwardReason}</p><Button onclick={()=>move(step-1)} disabled={step===0||openingBeta}>Back</Button>{#if step<3}<Button variant="primary" onclick={()=>move(step+1)} disabled={!!forwardReason}>Continue</Button>{:else}<Button type="submit" variant="primary" disabled={!!forwardReason||openingBeta} loading={openingBeta}>Start beta on {pickedServers.size} servers</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; }
|
||||
}
|
||||
.beta-form input:not([type='checkbox']), .beta-form select { border-color:var(--border-control); }
|
||||
.page,.beta-form { display:grid; gap:24px; } h2,h3,p { margin:0; } h2 { font-size:20px; } h3 { font-size:16px; } p,li { font-size:14px; line-height:1.6; } .muted,.draft-status { color:var(--text-secondary); font-size:13px; }
|
||||
.steps { display:flex; list-style:none; gap:16px; padding:0; margin:0; flex-wrap:wrap; } .steps li { display:flex; align-items:center; gap:8px; color:var(--text-secondary); } .steps li span { border:1px solid var(--border-strong); border-radius:50%; padding:3px 9px; } .steps .current { color:var(--text-primary); font-weight:600; } .steps .current span { background:var(--accent-primary); color:var(--text-on-accent); }
|
||||
.picks { display:grid; gap:16px; } .pick-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:end; padding:16px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); } .scope { grid-column:1/-1; font-size:13px; color:var(--text-secondary); }
|
||||
label { display:grid; gap:6px; font-size:13px; color:var(--text-secondary); min-width:0; } input:not([type='checkbox']),select { width:100%; min-height:40px; padding:9px 12px; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:6px; color:var(--text-primary); background:var(--surface-sunken); font:inherit; } a,.text-action { color:var(--accent-primary-hover); } .text-action { background:none; border:0; text-decoration:underline; cursor:pointer; }
|
||||
.filters,.actions,.draft-status,.review-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .filters { align-items:end; } .filters label { flex:1 1 180px; } .draft-status,.review-heading { justify-content:space-between; } .draft { display:grid; gap:16px; }
|
||||
fieldset { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:16px; min-width:0; } legend { font-size:14px; padding:0 8px; } .server-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:12px; } .server-choice { display:flex; align-items:center; min-height:48px; gap:10px; color:var(--text-primary); cursor:pointer; } .server-choice small { display:block; color:var(--text-secondary); font-size:12px; margin-top:4px; } .server-choice input { accent-color:var(--accent-primary); width:18px; height:18px; flex-shrink:0; }
|
||||
.review { display:grid; gap:16px; } .review ul { margin:0; } .review li { margin-bottom:8px; } .notice { padding:12px; border:1px solid var(--border-strong); border-radius:var(--radius-md); } .ui-sticky-actions p { margin-right:auto; flex:1 1 200px; }
|
||||
@media(max-width:700px) { .pick-row { grid-template-columns:minmax(0,1fr) auto; } .pick-row label:first-child { grid-column:1/-1; } .steps { gap:10px; } .steps li { font-size:12px; } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user