Redesign UI with new token system, primitives, and motion
Restraint-first design language: neutral gray surfaces + one blue accent (cyan/amber/red reserved for state), 8pt spacing, softer radii, one ambient + one raised shadow, standardized motion tokens. Alfa Slab One demoted to BrandMark only; Inter carries all page copy. New primitives (Button, Card, Badge, Stat, SectionHeader, Skeleton, EmptyState, Tabs, Breadcrumbs, StatusPip, Field, Input, Select, Textarea) plus motion utilities (tweenNumber, viewTransition) and a global toast system. All eight route surfaces rewritten on top: Fleet gains an overview hero, Server detail restructures into tabs, Deployments gets a collapsible drift summary + per-server pipeline visual, and the scripts/configs/plugins/betas flows adopt the new form primitives. Sticky translucent nav with backdrop blur, view-transition cross-fades between routes, staggered card entrance on Fleet, breathing status pip halo, tabular-numeric player counts. Gmail-style g-key nav shortcuts. Mobile stacks below 720px; prefers-reduced-motion neutralizes durations. Legacy tokens preserved as aliases so any un-migrated code still renders.
This commit is contained in:
+282
-255
@@ -1,6 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Card from '$ui/components/primitives/Card.svelte';
|
||||
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||
import Button from '$ui/components/primitives/Button.svelte';
|
||||
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||
import Field from '$ui/components/primitives/Field.svelte';
|
||||
|
||||
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
||||
interface BetaListRow {
|
||||
@@ -11,62 +17,31 @@
|
||||
opened_at: string;
|
||||
closed_at: string | null;
|
||||
scripts: Array<{
|
||||
id: number;
|
||||
name: string;
|
||||
target_rel_path: string;
|
||||
kind: ArtifactKind;
|
||||
id: number; name: string; target_rel_path: string; kind: ArtifactKind;
|
||||
version: { id: number; version: number; sha256: string } | null;
|
||||
}>;
|
||||
servers: Array<{ server: string; stage: string; error: string | null }>;
|
||||
}
|
||||
|
||||
interface ScriptListRow {
|
||||
id: number;
|
||||
name: string;
|
||||
target_rel_path: string;
|
||||
scope_type: 'game' | 'map' | null;
|
||||
scope_value: string | null;
|
||||
current_version_id: number | null;
|
||||
kind: ArtifactKind;
|
||||
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;
|
||||
id: number; version: number; sha256: string;
|
||||
state: 'untested' | 'tested' | 'test-failed';
|
||||
} | null;
|
||||
runningBetaId: number | null;
|
||||
}
|
||||
interface Version {
|
||||
id: number;
|
||||
version: number;
|
||||
sha256: string;
|
||||
size: number;
|
||||
state: 'untested' | 'tested' | 'test-failed';
|
||||
}
|
||||
interface ServerRow { name: string; game: string | null; map: string | null }
|
||||
|
||||
interface ScriptDetail {
|
||||
script: ScriptListRow;
|
||||
versions: Version[];
|
||||
matchedServers: string[];
|
||||
}
|
||||
|
||||
// One row in the multi-script picker.
|
||||
interface Pick {
|
||||
key: number; // stable key for keyed each block
|
||||
scriptId: number | null;
|
||||
versionId: number | null;
|
||||
}
|
||||
interface Version { id: number; version: number; sha256: string; size: number; state: 'untested' | 'tested' | 'test-failed'; }
|
||||
interface ServerRow { name: string; game: string | null; map: string | null; }
|
||||
interface ScriptDetail { script: ScriptListRow; versions: Version[]; matchedServers: string[]; }
|
||||
interface Pick { key: number; scriptId: number | null; versionId: number | null; }
|
||||
|
||||
let betas = $state<BetaListRow[]>([]);
|
||||
let loading = $state(true);
|
||||
|
||||
let scripts = $state<ScriptListRow[]>([]);
|
||||
let fleetServers = $state<ServerRow[]>([]);
|
||||
// Cache script detail (versions + matched servers) per picked scriptId so
|
||||
// switching versions doesn't refetch.
|
||||
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());
|
||||
@@ -109,25 +84,15 @@
|
||||
if (poll) clearInterval(poll);
|
||||
});
|
||||
|
||||
// Scripts eligible for a new beta: has an unpromoted version and isn't in
|
||||
// a running beta already.
|
||||
const eligibleScripts = $derived(
|
||||
scripts.filter(
|
||||
(s) =>
|
||||
s.runningBetaId === null &&
|
||||
s.latestVersion !== null &&
|
||||
s.latestVersion.id !== s.current_version_id
|
||||
(s) => s.runningBetaId === null && s.latestVersion !== null && s.latestVersion.id !== s.current_version_id
|
||||
)
|
||||
);
|
||||
|
||||
// Scripts eligible for a specific picker row: eligible AND not already
|
||||
// chosen in a different row. Keeps the dropdown from letting you double-
|
||||
// add the same script.
|
||||
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)
|
||||
picks.map((p, i) => (i === rowIdx ? null : p.scriptId)).filter((id): id is number => id !== null)
|
||||
);
|
||||
return eligibleScripts.filter((s) => !takenIds.has(s.id));
|
||||
}
|
||||
@@ -140,16 +105,14 @@
|
||||
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; }
|
||||
if (!res.ok) { flash = 'Failed to load script detail'; return; }
|
||||
const body = (await res.json()) as ScriptDetail;
|
||||
detailById = { ...detailById, [pick.scriptId]: body };
|
||||
}
|
||||
// Default: latest non-current version.
|
||||
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];
|
||||
// Reset server selection to the recomputed candidate set.
|
||||
pickedServers = new Set(candidateServers);
|
||||
}
|
||||
|
||||
@@ -166,32 +129,23 @@
|
||||
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);
|
||||
}
|
||||
|
||||
// Servers each pick would land on if promoted alone. Scoped scripts →
|
||||
// matched servers; unscoped scripts → whole fleet.
|
||||
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);
|
||||
return detail.script.scope_type ? detail.matchedServers : fleetServers.map((s) => s.name);
|
||||
}
|
||||
|
||||
// Intersection of every picked script's candidate set. A beta with two
|
||||
// scripts must run on servers that are in-scope for BOTH.
|
||||
const candidateServers = $derived.by(() => {
|
||||
const perPick: string[][] = [];
|
||||
for (const p of picks) {
|
||||
const c = candidatesFor(p);
|
||||
if (c === null) continue; // row not yet picked — don't constrain
|
||||
if (c === null) continue;
|
||||
perPick.push(c);
|
||||
}
|
||||
if (perPick.length === 0) return [] as string[];
|
||||
@@ -199,8 +153,6 @@
|
||||
return first.filter((name) => rest.every((set) => set.includes(name)));
|
||||
});
|
||||
|
||||
// Ready to submit when every row has a script + version and at least one
|
||||
// server is picked from the intersection.
|
||||
const canSubmit = $derived(
|
||||
!openingBeta &&
|
||||
picks.length > 0 &&
|
||||
@@ -225,11 +177,7 @@
|
||||
waitForMatch
|
||||
})
|
||||
});
|
||||
const body = (await res.json()) as {
|
||||
ok: boolean;
|
||||
error?: string;
|
||||
result?: { betaId: number };
|
||||
};
|
||||
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;
|
||||
@@ -255,214 +203,293 @@
|
||||
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>
|
||||
|
||||
<h1>Betas</h1>
|
||||
<div class="page">
|
||||
<SectionHeader
|
||||
title="Betas"
|
||||
subtitle="Test unpromoted versions on selected servers before rolling them out."
|
||||
/>
|
||||
|
||||
{#if loading}
|
||||
<p class="empty">loading…</p>
|
||||
{:else}
|
||||
<section class="panel">
|
||||
<h2>Open a beta</h2>
|
||||
{#if eligibleScripts.length === 0}
|
||||
<p class="empty">no artifacts with untested versions — upload a new version from a scripts / configs / plugins page</p>
|
||||
{:else}
|
||||
<form onsubmit={openNewBeta} class="new-beta-form">
|
||||
<div class="picks">
|
||||
{#each picks as row, idx (row.key)}
|
||||
<div class="pick-row">
|
||||
<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>
|
||||
<select bind:value={row.versionId} disabled={row.scriptId === null}>
|
||||
{#if row.scriptId === null}
|
||||
<option value={null}>—</option>
|
||||
{:else}
|
||||
{#each versionsForRow(row) as v (v.id)}
|
||||
<option value={v.id}>v{v.version} · {v.sha256.slice(0, 8)} · {v.state}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<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'}
|
||||
>×</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button type="button" class="add-row" onclick={addRow}>+ add artifact</button>
|
||||
|
||||
<label>
|
||||
<span class="k">test servers</span>
|
||||
<div class="server-picker">
|
||||
{#if candidateServers.length === 0}
|
||||
<span class="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)}
|
||||
/>
|
||||
{name}
|
||||
</label>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="opts">
|
||||
<label class="chk">
|
||||
<input type="checkbox" bind:checked={waitForHealth} />
|
||||
wait for server start healthy
|
||||
</label>
|
||||
<label class="chk">
|
||||
<input type="checkbox" bind:checked={waitForMatch} />
|
||||
wait for server match
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="primary" disabled={!canSubmit}>
|
||||
{openingBeta ? 'opening…' : 'open beta'}
|
||||
</button>
|
||||
</form>
|
||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#if betas.length === 0}
|
||||
<p class="empty">no betas yet — open one above</p>
|
||||
{#if loading}
|
||||
<div class="loading">Loading…</div>
|
||||
{:else}
|
||||
{#each grouped as g (g.state)}
|
||||
{#if g.rows.length > 0}
|
||||
<section class="panel">
|
||||
<h2>{g.state.replace('-', ' ')} · {g.rows.length}</h2>
|
||||
<div class="rows">
|
||||
{#each g.rows as b (b.id)}
|
||||
<a class="row" href="/betas/{b.id}">
|
||||
<span class="id">#{b.id}</span>
|
||||
<span class="script">{summarizeScripts(b)}</span>
|
||||
<span class="tag state-{b.state}">{b.state}</span>
|
||||
<span class="servers mono">{b.servers.length} server{b.servers.length === 1 ? '' : 's'}</span>
|
||||
</a>
|
||||
{/each}
|
||||
<Card padding="lg">
|
||||
<h2 class="panel-title">Open a beta</h2>
|
||||
|
||||
{#if eligibleScripts.length === 0}
|
||||
<EmptyState
|
||||
title="No artifacts with untested versions"
|
||||
description="Upload a new version from scripts / configs / plugins to open a beta."
|
||||
/>
|
||||
{:else}
|
||||
<form onsubmit={openNewBeta} class="beta-form">
|
||||
<Field label="Artifacts">
|
||||
<div class="picks">
|
||||
{#each picks as row, idx (row.key)}
|
||||
<div class="pick-row">
|
||||
<div class="pick-select">
|
||||
<select
|
||||
class="native-select"
|
||||
bind:value={row.scriptId}
|
||||
onchange={() => onPickScript(idx)}
|
||||
>
|
||||
<option value={null}>— Pick an artifact —</option>
|
||||
{#each eligibleForRow(idx) as s (s.id)}
|
||||
<option value={s.id}>[{s.kind}] {s.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="chev">▾</span>
|
||||
</div>
|
||||
<div class="pick-select">
|
||||
<select
|
||||
class="native-select"
|
||||
bind:value={row.versionId}
|
||||
disabled={row.scriptId === null}
|
||||
>
|
||||
{#if row.scriptId === null}
|
||||
<option value={null}>—</option>
|
||||
{:else}
|
||||
{#each versionsForRow(row) as v (v.id)}
|
||||
<option value={v.id}>v{v.version} · {v.sha256.slice(0, 8)} · {v.state}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<span class="chev">▾</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="row-x"
|
||||
onclick={() => removeRow(idx)}
|
||||
disabled={picks.length === 1}
|
||||
title={picks.length === 1 ? 'Need at least one script' : 'Remove this script'}
|
||||
aria-label="Remove artifact"
|
||||
>×</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button type="button" class="add-row" onclick={addRow}>+ Add artifact</button>
|
||||
</Field>
|
||||
|
||||
<Field label="Test servers" hint="Intersection of scopes across all picked artifacts.">
|
||||
<div class="server-picker">
|
||||
{#if candidateServers.length === 0}
|
||||
<span class="picker-empty">No server satisfies all selected scopes — pick different scripts.</span>
|
||||
{:else}
|
||||
{#each candidateServers as name (name)}
|
||||
<label class="chk">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={pickedServers.has(name)}
|
||||
onchange={() => toggleServer(name)}
|
||||
/>
|
||||
<span>{name}</span>
|
||||
</label>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<Field label="Options">
|
||||
<div class="opts">
|
||||
<label class="chk">
|
||||
<input type="checkbox" bind:checked={waitForHealth} />
|
||||
<span>Wait for server start healthy</span>
|
||||
</label>
|
||||
<label class="chk">
|
||||
<input type="checkbox" bind:checked={waitForMatch} />
|
||||
<span>Wait for server match</span>
|
||||
</label>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<div class="form-actions">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={!canSubmit}
|
||||
loading={openingBeta}
|
||||
>
|
||||
Open beta
|
||||
</Button>
|
||||
{#if flash}<span class="flash">{flash}</span>{/if}
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
{/if}
|
||||
{/each}
|
||||
</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.state}</Badge>
|
||||
<span class="beta-servers">{b.servers.length} server{b.servers.length === 1 ? '' : 's'}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-display); margin: 0 0 28px; }
|
||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-base); margin: 0; }
|
||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
||||
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||
.loading { text-align: center; padding: var(--space-12); color: var(--text-tertiary); }
|
||||
|
||||
.new-beta-form { display: flex; flex-direction: column; gap: 14px; }
|
||||
.new-beta-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
|
||||
.new-beta-form .k { color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; }
|
||||
|
||||
.picks { display: flex; flex-direction: column; gap: 8px; }
|
||||
.pick-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
|
||||
.pick-row select {
|
||||
background: var(--bg-page);
|
||||
color: var(--ink-100);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono);
|
||||
}
|
||||
.row-x {
|
||||
background: var(--bg-card);
|
||||
color: var(--ink-500);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 0 14px;
|
||||
.panel-title {
|
||||
margin: 0 0 var(--space-4);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-md);
|
||||
cursor: pointer;
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.row-x:hover:not(:disabled) { color: var(--danger-500); border-color: rgba(255, 48, 80, 0.4); }
|
||||
.row-x:disabled { opacity: 0.4; cursor: default; }
|
||||
.add-row {
|
||||
align-self: flex-start;
|
||||
background: transparent;
|
||||
color: var(--ink-300);
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 8px 14px;
|
||||
|
||||
.beta-form { display: flex; flex-direction: column; gap: var(--space-5); }
|
||||
|
||||
.picks { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.pick-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
.pick-select { position: relative; }
|
||||
.native-select {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
padding: 9px 32px 9px 12px;
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.add-row:hover { color: var(--cream); border-color: var(--accent); }
|
||||
.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: 10px;
|
||||
padding: 12px;
|
||||
background: var(--bg-page);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
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 {
|
||||
color: var(--ink-100);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono);
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.opts { display: flex; gap: 24px; }
|
||||
.primary {
|
||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
||||
border: 1px solid var(--blue-400);
|
||||
color: var(--cream);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 12px 20px;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
user-select: none;
|
||||
}
|
||||
.primary:disabled { opacity: 0.4; cursor: default; }
|
||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 12px 0 0; }
|
||||
.chk input { accent-color: var(--accent-primary); cursor: pointer; }
|
||||
|
||||
.rows { display: flex; flex-direction: column; gap: 6px; }
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 130px 120px;
|
||||
gap: 14px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
color: var(--ink-100);
|
||||
text-decoration: none;
|
||||
font-size: var(--text-mono);
|
||||
align-items: center;
|
||||
.opts { display: flex; flex-wrap: wrap; gap: var(--space-6); }
|
||||
|
||||
.form-actions { display: flex; align-items: center; gap: var(--space-4); }
|
||||
.flash { color: var(--state-danger); font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||
|
||||
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||
.section-head { display: flex; align-items: center; gap: var(--space-3); }
|
||||
.section-head h2 {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.capitalize { text-transform: capitalize; }
|
||||
|
||||
.beta-rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.beta-row {
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr auto auto;
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
transition: background-color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.beta-row:hover { background: var(--surface-raised); }
|
||||
.beta-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.beta-id { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-tertiary); }
|
||||
.beta-script { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium); }
|
||||
.beta-servers { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.beta-row { grid-template-columns: 1fr; gap: var(--space-2); }
|
||||
}
|
||||
.row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
||||
.id { color: var(--ink-500); font-family: var(--font-mono); }
|
||||
.script { color: var(--cream); font-weight: 600; font-family: var(--font-body); }
|
||||
.servers { color: var(--ink-500); }
|
||||
.tag { padding: 3px 10px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; border: 1px solid transparent; text-align: center; }
|
||||
.state-running { background: rgba(255, 176, 32, 0.15); border-color: rgba(255, 176, 32, 0.4); color: var(--amber-500); }
|
||||
.state-ready-promote { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
||||
.state-promoted { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.28); color: var(--cream); }
|
||||
.state-rolled-back { background: var(--bg-nav); border-color: var(--border); color: var(--ink-500); }
|
||||
.mono { font-family: var(--font-mono); }
|
||||
</style>
|
||||
|
||||
+262
-174
@@ -1,37 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import Card from '$ui/components/primitives/Card.svelte';
|
||||
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||
import Button from '$ui/components/primitives/Button.svelte';
|
||||
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||
import Breadcrumbs from '$ui/components/primitives/Breadcrumbs.svelte';
|
||||
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||
|
||||
interface BetaRow {
|
||||
id: number;
|
||||
script_id: number;
|
||||
script_version_id: number;
|
||||
trigger_kind: string;
|
||||
wait_for_health: number;
|
||||
wait_for_match: number;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
id: number; name: string; target_rel_path: string;
|
||||
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
||||
version: { id: number; version: number; sha256: string } | null;
|
||||
}
|
||||
@@ -48,11 +40,7 @@
|
||||
async function load(): Promise<void> {
|
||||
const res = await fetch(`/api/betas/${id}`);
|
||||
if (!res.ok) { loading = false; return; }
|
||||
const body = (await res.json()) as {
|
||||
beta: BetaRow;
|
||||
scripts: BetaScript[];
|
||||
servers: BetaServerRow[];
|
||||
};
|
||||
const body = (await res.json()) as { beta: BetaRow; scripts: BetaScript[]; servers: BetaServerRow[]; };
|
||||
beta = body.beta;
|
||||
scripts = body.scripts;
|
||||
servers = body.servers;
|
||||
@@ -67,12 +55,11 @@
|
||||
onDestroy(() => { if (poll) clearInterval(poll); });
|
||||
|
||||
async function promote(): Promise<void> {
|
||||
acting = 'promote';
|
||||
flash = null;
|
||||
acting = 'promote'; flash = null;
|
||||
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; }
|
||||
if (!body.ok) { flash = body.error ?? 'Promote failed'; return; }
|
||||
await load();
|
||||
} finally { acting = null; }
|
||||
}
|
||||
@@ -82,18 +69,16 @@
|
||||
? `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.`;
|
||||
if (!confirm(prompt)) return;
|
||||
acting = 'rollback';
|
||||
flash = null;
|
||||
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; }
|
||||
if (!body.ok) { flash = body.error ?? 'Rollback failed'; return; }
|
||||
await load();
|
||||
} finally { acting = null; }
|
||||
}
|
||||
async function retry(server: string): Promise<void> {
|
||||
acting = `retry:${server}`;
|
||||
flash = null;
|
||||
acting = `retry:${server}`; flash = null;
|
||||
try {
|
||||
const res = await fetch(`/api/betas/${id}/retry`, {
|
||||
method: 'POST',
|
||||
@@ -101,168 +86,271 @@
|
||||
body: JSON.stringify({ server })
|
||||
});
|
||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||
if (!body.ok) { flash = body.error ?? 'retry failed'; return; }
|
||||
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';
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<p class="empty">loading…</p>
|
||||
<div class="loading">Loading…</div>
|
||||
{:else if !beta}
|
||||
<p class="empty">beta not found</p>
|
||||
<EmptyState title="Beta not found" description="This beta may have been archived." />
|
||||
{:else}
|
||||
<a class="back" href="/betas">← all betas</a>
|
||||
<div class="head-row">
|
||||
<h1>Beta #{beta.id}</h1>
|
||||
<span class="tag state-{beta.state}">{beta.state}</span>
|
||||
</div>
|
||||
{@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()}
|
||||
<Badge variant={betaStateVariant(b.state)} size="md" uppercase>{b.state}</Badge>
|
||||
{/snippet}
|
||||
</SectionHeader>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Artifacts · {scripts.length}</h2>
|
||||
{#if scripts.length === 0}
|
||||
<p class="empty">no artifacts bundled in this beta</p>
|
||||
{:else}
|
||||
<div class="script-list">
|
||||
{#each scripts as s (s.id)}
|
||||
<div class="script-row">
|
||||
<span class="s-kind mono">[{s.kind}]</span>
|
||||
<a class="s-name" href="/scripts/{s.id}">{s.name}</a>
|
||||
<span class="s-target mono">{s.target_rel_path}</span>
|
||||
<span class="s-ver mono">v{s.version?.version ?? '?'}</span>
|
||||
<span class="s-sha mono">{s.version?.sha256.slice(0, 8) ?? ''}</span>
|
||||
<!-- 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="/scripts/{s.id}">{s.name}</a>
|
||||
<span class="s-target">{s.target_rel_path}</span>
|
||||
<span class="s-ver">v{s.version?.version ?? '?'}</span>
|
||||
<span class="s-sha">{s.version?.sha256.slice(0, 8) ?? ''}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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}">{bs.server}</a>
|
||||
<Badge variant={stageVariant(bs.stage)} size="sm" uppercase>{bs.stage}</Badge>
|
||||
<div class="ticks" aria-label="pipeline progress">
|
||||
<span class:on={bs.deployed_at}>Deploy</span>
|
||||
<span class:on={bs.stage !== 'awaiting-empty' && bs.stage !== 'deploying'}>Empty</span>
|
||||
<span class:on={bs.restarted_at}>Restart</span>
|
||||
<span class:on={bs.healthy_at}>Healthy</span>
|
||||
{#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'}
|
||||
<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>
|
||||
{/if}
|
||||
</section>
|
||||
</Card>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Options</h2>
|
||||
<div class="opts mono">
|
||||
<span>wait for health: <strong>{beta.wait_for_health ? 'yes' : 'no'}</strong></span>
|
||||
<span>wait for match: <strong>{beta.wait_for_match ? 'yes' : 'no'}</strong></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Server progress</h2>
|
||||
<div class="rows">
|
||||
{#each servers as bs (bs.server)}
|
||||
<div class="srv-row srv-{bs.stage}">
|
||||
<span class="srv-name mono">{bs.server}</span>
|
||||
<span class="tag stage-{bs.stage}">{bs.stage}</span>
|
||||
<div class="ticks mono">
|
||||
<span class:on={bs.deployed_at}>deploy</span>
|
||||
<span class:on={bs.stage !== 'awaiting-empty' && bs.stage !== 'deploying'}>empty</span>
|
||||
<span class:on={bs.restarted_at}>restart</span>
|
||||
<span class:on={bs.healthy_at}>healthy</span>
|
||||
{#if beta.wait_for_match}
|
||||
<span class:on={bs.match_seen_at}>match</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if bs.error}
|
||||
<span class="err mono">{bs.error}</span>
|
||||
{/if}
|
||||
{#if bs.stage === 'failed'}
|
||||
<button class="mini" onclick={() => retry(bs.server)} disabled={acting === `retry:${bs.server}`}>
|
||||
{acting === `retry:${bs.server}` ? 'retrying…' : 'retry'}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Actions</h2>
|
||||
<div class="action-row">
|
||||
<button
|
||||
class="primary"
|
||||
onclick={promote}
|
||||
disabled={beta.state !== 'ready-promote' || acting !== null}
|
||||
title={beta.state !== 'ready-promote' ? 'all servers must reach ready first' : ''}
|
||||
>
|
||||
{acting === 'promote' ? 'promoting…' : 'promote'}
|
||||
</button>
|
||||
<button
|
||||
class="danger"
|
||||
onclick={rollback}
|
||||
disabled={beta.state === 'promoted' || beta.state === 'rolled-back' || acting !== null}
|
||||
>
|
||||
{#if acting === 'rollback'}
|
||||
{beta.state === 'ready-promote' ? 'rejecting…' : 'rolling back…'}
|
||||
{:else if beta.state === 'ready-promote'}
|
||||
reject
|
||||
{:else}
|
||||
rollback
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
||||
<!-- 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' ? 'All servers must reach ready first' : ''}
|
||||
>
|
||||
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}
|
||||
|
||||
<style>
|
||||
.back { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono-sm); text-decoration: none; }
|
||||
.back:hover { color: var(--ink-100); }
|
||||
.head-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
|
||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 1.5px; margin: 0; }
|
||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); }
|
||||
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||
.loading { text-align: center; padding: var(--space-16); color: var(--text-tertiary); }
|
||||
|
||||
.script-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.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: 220px 1fr 80px 100px;
|
||||
gap: 14px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
grid-template-columns: auto minmax(160px, 220px) 1fr 80px 100px;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
font-size: var(--text-mono);
|
||||
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(--spark-500); text-decoration: none; font-weight: 600; font-family: var(--font-body); }
|
||||
.s-name:hover { text-decoration: underline; }
|
||||
.s-target { color: var(--ink-300); word-break: break-all; }
|
||||
.s-ver, .s-sha { color: var(--ink-500); }
|
||||
.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); }
|
||||
|
||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
||||
/* 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); }
|
||||
|
||||
.tag { padding: 3px 10px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; border: 1px solid transparent; }
|
||||
.state-running { background: rgba(255, 176, 32, 0.15); border-color: rgba(255, 176, 32, 0.4); color: var(--amber-500); }
|
||||
.state-ready-promote { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
||||
.state-promoted { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.28); color: var(--cream); }
|
||||
.state-rolled-back { background: var(--bg-card); border-color: var(--border); color: var(--ink-500); }
|
||||
/* 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); }
|
||||
|
||||
.opts { display: flex; flex-direction: column; gap: 6px; color: var(--ink-100); font-size: var(--text-mono); }
|
||||
.opts strong { color: var(--cream); }
|
||||
|
||||
.rows { display: flex; flex-direction: column; gap: 8px; }
|
||||
.srv-row { display: grid; grid-template-columns: 220px 130px 1fr auto auto; gap: 14px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); align-items: center; }
|
||||
.srv-ready { border-left: 3px solid var(--spark-500); }
|
||||
.srv-failed { border-left: 3px solid var(--danger-500); }
|
||||
.srv-awaiting-empty, .srv-restarting, .srv-awaiting-health, .srv-awaiting-match, .srv-deploying { border-left: 3px solid var(--amber-500); }
|
||||
|
||||
.srv-name { color: var(--cream); font-size: var(--text-md); }
|
||||
.stage-deploying, .stage-awaiting-empty, .stage-restarting, .stage-awaiting-health, .stage-awaiting-match { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.3); color: var(--amber-500); }
|
||||
.stage-ready { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
||||
.stage-failed { background: rgba(255, 48, 80, 0.15); border-color: rgba(255, 48, 80, 0.4); color: var(--danger-500); }
|
||||
.ticks { display: flex; gap: 14px; font-size: var(--text-mono-sm); color: var(--ink-500); }
|
||||
/* 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; color: var(--ink-500); }
|
||||
.ticks span.on { color: var(--cream); }
|
||||
.ticks span.on::before { content: '●'; color: var(--spark-500); }
|
||||
.err { color: var(--danger-500); font-size: var(--text-mono-sm); word-break: break-word; }
|
||||
.mini { background: var(--bg-nav); color: var(--cream); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; font-family: var(--font-body); font-size: var(--text-xs); cursor: pointer; }
|
||||
.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;
|
||||
}
|
||||
|
||||
.action-row { display: flex; gap: 12px; }
|
||||
.primary { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); border: 1px solid var(--blue-400); color: var(--cream); border-radius: var(--r-sm); padding: 12px 20px; font-family: var(--font-body); font-weight: 600; cursor: pointer; }
|
||||
.primary:disabled { opacity: 0.4; cursor: default; }
|
||||
.danger { background: var(--bg-nav); border: 1px solid rgba(255, 48, 80, 0.4); color: var(--danger-500); border-radius: var(--r-sm); padding: 12px 20px; font-family: var(--font-body); cursor: pointer; }
|
||||
.danger:disabled { opacity: 0.4; cursor: default; }
|
||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
||||
.mono { font-family: var(--font-mono); }
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user