Add fleet action dialog with server selection
This commit is contained in:
@@ -211,10 +211,10 @@
|
||||
</section>
|
||||
|
||||
{#if preview.removals.length}<section class="removals" aria-label="Servers to remove">
|
||||
<h3>Remove {preview.removals.length} server{preview.removals.length === 1 ? '' : 's'}</h3>
|
||||
<h3>Destroy {preview.removals.length} server{preview.removals.length === 1 ? '' : 's'}</h3>
|
||||
<p>Containers, files, and registrations will be removed. Occupied or unreachable servers wait for a fresh empty-player check; unstarted creations are cancelled.</p>
|
||||
<ul>{#each preview.removals as server}<li><strong>{serverTitle(server.name)}</strong><code>{server.name}</code><span>{server.reason}</span></li>{/each}</ul>
|
||||
<label class="confirmation"><input type="checkbox" bind:checked={confirmRemovals} disabled={launching || unconfirmedLaunch || !currentReady} />Remove the {preview.removals.length} listed servers and apply this collection.</label>
|
||||
<label class="confirmation"><input type="checkbox" bind:checked={confirmRemovals} disabled={launching || unconfirmedLaunch || !currentReady} />Destroy the {preview.removals.length} listed servers and apply this collection.</label>
|
||||
</section>{/if}
|
||||
|
||||
<details class="details">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
try {
|
||||
const res = await fetch(`/api/servers/${encodeURIComponent(name)}`, { method: 'DELETE' });
|
||||
const body = await res.json();
|
||||
if (!res.ok || !body.ok || !body.deploymentId) throw new Error(body.error ?? 'Could not queue server removal. Please retry.');
|
||||
if (!res.ok || !body.ok || !body.deploymentId) throw new Error(body.error ?? 'Could not queue server destruction. Please retry.');
|
||||
await goto(`/provisioning/${encodeURIComponent(body.deploymentId)}`);
|
||||
open = false;
|
||||
} catch (err) { error = (err as Error).message; }
|
||||
@@ -27,17 +27,17 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog bind:open title={`Remove ${serverTitle(name)}?`} busy={submitting}>
|
||||
<Dialog bind:open title={`Destroy ${serverTitle(name)}?`} busy={submitting}>
|
||||
<div class="fields">
|
||||
<p class="notice">{lifecycleImpact('destroy', players, round)}</p>
|
||||
<p>This stops and removes the container, its writable server files, and registration. Shared game libraries, recorded history, and the saved server key are retained.</p>
|
||||
<p>Follow progress or cancel the waiting request on the provisioning page.</p>
|
||||
<p class="irreversible">You can cancel while waiting. Once removal begins, it cannot be undone.</p>
|
||||
<p class="irreversible">You can cancel while waiting. Once destruction begins, it cannot be undone.</p>
|
||||
{#if error}<p role="alert" class="error">{error}</p>{/if}
|
||||
</div>
|
||||
{#snippet actions()}
|
||||
<Button disabled={submitting} onclick={() => open = false}>Cancel</Button>
|
||||
<Button variant="danger" disabled={submitting} loading={submitting} onclick={destroy}>Remove server when empty</Button>
|
||||
<Button variant="danger" disabled={submitting} loading={submitting} onclick={destroy}>Destroy server when empty</Button>
|
||||
{/snippet}
|
||||
</Dialog>
|
||||
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { currentRound, freshServer, type FleetServer } from '$lib/fleet-overview.js';
|
||||
import { actionLabels } from '$lib/provisioning.js';
|
||||
import { fleetActions, fleetActionAvailable, queueFleetAction, type FleetAction, type FleetActionFailure } from '$ui/fleet-actions.js';
|
||||
import { lifecycleImpact } from '$ui/lifecycle-actions.js';
|
||||
import { serverHealth } from '$ui/server-health.js';
|
||||
import { serverTitle } from '$ui/server-labels.js';
|
||||
import { serverTimeNow, syncServerTime, uiNow } from '$ui/stores/servers.js';
|
||||
import Button from './primitives/Button.svelte';
|
||||
import Dialog from './primitives/Dialog.svelte';
|
||||
|
||||
let { open = $bindable(false), onqueued }: { open?: boolean; onqueued: (count: number, action: FleetAction) => void } = $props();
|
||||
let servers = $state<FleetServer[]>([]);
|
||||
let action = $state<FleetAction>('restart');
|
||||
let selected = $state<string[]>([]);
|
||||
let queued = $state<string[]>([]);
|
||||
let failures = $state<FleetActionFailure[]>([]);
|
||||
let loading = $state(false);
|
||||
let busy = $state(false);
|
||||
let error = $state('');
|
||||
let confirmed = $state(false);
|
||||
let refresh = $state(0);
|
||||
const descriptions: Record<FleetAction, string> = {
|
||||
start: 'Start the selected servers and verify their health.',
|
||||
restart: 'Restart the selected servers once they are empty, then verify their health.',
|
||||
stop: 'Stop the selected servers once they are empty. Their files, keys, and registrations are kept.',
|
||||
rebuild: 'Rebuild the selected servers from the latest promoted setup once they are empty. Their writable files are permanently deleted.',
|
||||
destroy: 'Destroy the selected servers once they are empty. Their containers, writable files, and registrations are permanently deleted.'
|
||||
};
|
||||
const destructive = $derived(action === 'rebuild' || action === 'destroy');
|
||||
const eligible = $derived(servers.filter(server => !queued.includes(server.name) && fleetActionAvailable(server, action, $uiNow)));
|
||||
const targets = $derived(eligible.filter(server => selected.includes(server.name)));
|
||||
const allSelected = $derived(eligible.length > 0 && targets.length === eligible.length);
|
||||
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
untrack(() => { action = 'restart'; selected = []; queued = []; failures = []; confirmed = false; });
|
||||
});
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
refresh;
|
||||
const controller = new AbortController();
|
||||
untrack(() => { void load(controller.signal); });
|
||||
return () => controller.abort();
|
||||
});
|
||||
async function load(signal: AbortSignal) {
|
||||
loading = true; error = '';
|
||||
try {
|
||||
const response = await fetch('/api/servers', { signal, cache: 'no-store' });
|
||||
if (!response.ok) throw new Error('Could not load servers.');
|
||||
const body = await response.json();
|
||||
if (signal.aborted) return;
|
||||
servers = body.servers.sort((a: FleetServer, b: FleetServer) => serverTitle(a.name).localeCompare(serverTitle(b.name)));
|
||||
syncServerTime(body.serverNow);
|
||||
} catch (cause) { if (!signal.aborted) error = cause instanceof Error ? cause.message : 'Could not load servers.'; }
|
||||
finally { if (!signal.aborted) loading = false; }
|
||||
}
|
||||
function chooseAction() { selected = []; confirmed = false; failures = []; }
|
||||
function toggle(name: string, checked: boolean) {
|
||||
selected = checked ? [...selected, name] : selected.filter(value => value !== name);
|
||||
confirmed = false;
|
||||
}
|
||||
function selectAll(checked: boolean) { selected = checked ? eligible.map(server => server.name) : []; confirmed = false; }
|
||||
async function submit() {
|
||||
if (busy || loading || error || (destructive && !confirmed)) return;
|
||||
const names = targets.filter(server => fleetActionAvailable(server, action, serverTimeNow())).map(server => server.name);
|
||||
if (!names.length) return;
|
||||
busy = true; failures = [];
|
||||
try {
|
||||
const result = await queueFleetAction(action, names);
|
||||
queued = [...queued, ...result.queued.map(item => item.server)];
|
||||
selected = selected.filter(name => !queued.includes(name));
|
||||
failures = result.failed;
|
||||
confirmed = false;
|
||||
if (result.queued.length) onqueued(result.queued.length, action);
|
||||
if (!result.failed.length) open = false;
|
||||
} finally { busy = false; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog bind:open title="Fleet actions" description="Choose an action, then select the servers to apply it to." {busy} wide>
|
||||
<div class="fields">
|
||||
<label class="action">Action<select bind:value={action} disabled={busy} onchange={chooseAction}>
|
||||
{#each fleetActions as value}<option value={value}>{actionLabels[value]}</option>{/each}
|
||||
</select></label>
|
||||
<p>{descriptions[action]}</p>
|
||||
{#if error}<p class="ui-error" role="alert">{error}</p>{/if}
|
||||
{#if loading}<p role="status">Loading the latest server status…</p>
|
||||
{:else}
|
||||
<div class="selection-tools">
|
||||
<label class="check"><input type="checkbox" checked={allSelected} indeterminate={targets.length > 0 && !allSelected} disabled={busy || !!error || !eligible.length} onchange={event => selectAll(event.currentTarget.checked)} />Select all eligible</label>
|
||||
<span>{targets.length} selected · {eligible.length} eligible</span>
|
||||
<Button size="sm" disabled={busy} onclick={() => refresh++}>Refresh servers</Button>
|
||||
</div>
|
||||
{#if servers.length}
|
||||
<fieldset disabled={busy || !!error} class="servers">
|
||||
<legend>Servers</legend>
|
||||
{#each servers as server (server.name)}
|
||||
{@const available = eligible.some(item => item.name === server.name)}
|
||||
{@const health = serverHealth(server, $uiNow)}
|
||||
<label class="server" class:unavailable={!available}>
|
||||
<input type="checkbox" checked={available && selected.includes(server.name)} disabled={!available} onchange={event => toggle(server.name, event.currentTarget.checked)} />
|
||||
<span><strong>{serverTitle(server.name)}</strong><span class="metadata">{server.host?.name ?? 'Host unavailable'} · {health.label}</span>
|
||||
{#if queued.includes(server.name)}<span class="metadata">Job queued</span>
|
||||
{:else if !available}<span class="metadata">{actionLabels[action]} unavailable for the current server status.</span>
|
||||
{:else}<span class="metadata">{lifecycleImpact(action, health.state === 'online' && freshServer(server, $uiNow) ? server.last_players : null, currentRound(server, server.telemetry, $uiNow))}</span>{/if}
|
||||
</span>
|
||||
</label>
|
||||
{/each}
|
||||
</fieldset>
|
||||
{:else if !error}<p>No servers are available.</p>{/if}
|
||||
{/if}
|
||||
{#if action !== 'start'}<p>Each server waits for a live check confirming it is empty. Follow progress or cancel waiting jobs in Provisioning.</p>{/if}
|
||||
{#if destructive}<p>Shared game libraries, recorded history, saved keys, and collections are retained.</p>{/if}
|
||||
{#if destructive}<label class="check"><input type="checkbox" bind:checked={confirmed} disabled={busy || !targets.length} />I understand that the selected servers’ writable files and data will be permanently deleted.</label>{/if}
|
||||
{#if failures.length}<div role="alert"><p class="ui-error">Some requests could not be queued:</p><ul>{#each failures as failure}<li><strong>{serverTitle(failure.server)}:</strong> {failure.error}</li>{/each}</ul></div>{/if}
|
||||
{#if busy}<p role="status">Queuing {actionLabels[action].toLowerCase()} for the selected servers…</p>{/if}
|
||||
</div>
|
||||
{#snippet actions()}
|
||||
<Button disabled={busy} onclick={() => open = false}>Close</Button>
|
||||
<Button variant={destructive ? 'danger' : 'primary'} disabled={busy || loading || !!error || !targets.length || (destructive && !confirmed)} loading={busy} onclick={submit}>{actionLabels[action]} {targets.length} server{targets.length === 1 ? '' : 's'}{action !== 'start' ? ' when empty' : ''}</Button>
|
||||
{/snippet}
|
||||
</Dialog>
|
||||
|
||||
<style>
|
||||
.fields, .action { display: grid; gap: var(--space-4); }
|
||||
.action { gap: var(--space-2); }
|
||||
select { width: 100%; min-height: 40px; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font: inherit; }
|
||||
p, ul { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
|
||||
.check, .selection-tools { display: flex; align-items: center; gap: var(--space-3); }
|
||||
.check { line-height: 1.5; }
|
||||
input[type='checkbox'] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent-primary); }
|
||||
.selection-tools { flex-wrap: wrap; justify-content: space-between; font-size: var(--text-sm); }
|
||||
.servers { min-width: 0; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); max-height: 360px; overflow-y: auto; }
|
||||
legend { margin-left: var(--space-3); padding: 0 var(--space-2); }
|
||||
.server { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); cursor: pointer; }
|
||||
.server + .server { border-top: 1px solid var(--border-subtle); }
|
||||
.server > span { min-width: 0; overflow-wrap: anywhere; }
|
||||
.metadata { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }
|
||||
.unavailable { cursor: default; }
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { serverTitle } from '$ui/server-labels.js';
|
||||
import { isDialogBackdrop } from '$ui/dialog.js';
|
||||
import Button from './primitives/Button.svelte';
|
||||
|
||||
let { open = $bindable(false), onqueued }: { open?: boolean; onqueued: (count: number) => void } = $props();
|
||||
let dialog: HTMLDialogElement | undefined = $state();
|
||||
let servers = $state<string[] | null>(null);
|
||||
let busy = $state(false);
|
||||
let error = $state('');
|
||||
let wasOpen = false;
|
||||
|
||||
$effect(() => {
|
||||
if (!dialog) return;
|
||||
if (open && !wasOpen) { wasOpen = true; dialog.showModal(); void review(); }
|
||||
else if (!open && wasOpen) { wasOpen = false; dialog.close(); }
|
||||
});
|
||||
|
||||
async function review() {
|
||||
busy = true; error = ''; servers = null;
|
||||
try {
|
||||
const res = await fetch('/api/provisioning/house-party');
|
||||
if (!res.ok) throw new Error('Could not load the fleet.');
|
||||
servers = (await res.json()).servers;
|
||||
} catch (err) { error = (err as Error).message; }
|
||||
finally { busy = false; }
|
||||
}
|
||||
|
||||
async function launch() {
|
||||
if (busy || !servers?.length) return;
|
||||
busy = true; error = '';
|
||||
try {
|
||||
const res = await fetch('/api/provisioning/house-party', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ servers })
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok) {
|
||||
if (res.status === 409) servers = null;
|
||||
throw new Error(body.error ?? 'Could not queue server removal.');
|
||||
}
|
||||
open = false;
|
||||
onqueued(body.deployments.length);
|
||||
} catch (err) { error = (err as Error).message; }
|
||||
finally { busy = false; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog bind:this={dialog} aria-label="Remove fleet servers" onclick={event => { if (isDialogBackdrop(event, dialog) && !busy) open = false; }} oncancel={event => { if (busy) event.preventDefault(); }} onclose={() => open = false}>
|
||||
<div class="content">
|
||||
<header><h2>Remove fleet servers?</h2></header>
|
||||
<p>Queue removal of every server, including servers being created. Each waits until a fresh player count confirms it is empty. Unreachable servers stay queued.</p>
|
||||
<p>Removal deletes containers, server files, and fleet registrations. Saved keys and collections are kept.</p>
|
||||
<p>In Provisioning’s Active tab, cancel individual waiting requests or all waiting removals. Once a server begins removal, that removal cannot be cancelled or undone.</p>
|
||||
{#if error}<p class="error" role="alert">{error}</p>{/if}
|
||||
{#if servers}
|
||||
<strong>{servers.length ? `${servers.length} server${servers.length === 1 ? '' : 's'} to remove` : 'No servers to remove.'}</strong>
|
||||
{#if servers.length}<ul>{#each servers as server}<li>{serverTitle(server)}</li>{/each}</ul><p class="caption">Existing removal requests are reused. Servers added after this request are not included.</p>{/if}
|
||||
{:else}<p>{busy ? 'Reviewing the fleet…' : 'Refresh the preview to review the current fleet.'}</p>{/if}
|
||||
<div class="actions">
|
||||
<Button variant="ghost" disabled={busy} onclick={() => open = false}>Cancel</Button>
|
||||
{#if !servers}<Button disabled={busy} onclick={review}>Refresh preview</Button>
|
||||
{:else}<Button variant="danger" loading={busy} disabled={busy || !servers.length} onclick={launch}>Remove {servers.length} server{servers.length === 1 ? '' : 's'}</Button>{/if}
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-primary); }
|
||||
dialog::backdrop { background: rgb(0 0 0 / .7); backdrop-filter: blur(5px); }
|
||||
.content { display: grid; gap: 20px; padding: 28px; } h2, p { margin: 0; } h2 { font-size: var(--text-xl); }
|
||||
p { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; } .error { color: var(--state-danger); } .caption { font-size: var(--text-xs); }
|
||||
ul { margin: 0; padding: 12px 12px 12px 30px; max-height: 220px; overflow: auto; background: var(--surface-sunken); border-radius: var(--radius-md); }
|
||||
li { padding: 5px 0; font-family: var(--font-body); font-size: var(--text-xs); overflow-wrap: anywhere; }
|
||||
.actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
|
||||
</style>
|
||||
@@ -27,7 +27,7 @@
|
||||
const impactPlayers = $derived(initialServer ? players : selected && health?.state === 'online' && freshServer(selected, $uiNow) ? selected.last_players : null);
|
||||
const impactRound = $derived(initialServer ? round : selected ? currentRound(selected, selected.telemetry, $uiNow) : null);
|
||||
const title = $derived(initialServer ? `${actionLabels[action]} ${serverTitle(initialServer)}?` : 'Manage server');
|
||||
const submitLabel = $derived(action === 'start' ? 'Start server' : action === 'destroy' ? 'Remove server when empty' : `${actionLabels[action]} when empty`);
|
||||
const submitLabel = $derived(action === 'start' ? 'Start server' : action === 'destroy' ? 'Destroy server when empty' : `${actionLabels[action]} when empty`);
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
const fixedServer = initialServer;
|
||||
@@ -92,7 +92,7 @@
|
||||
{#if !server}<option value="start">Choose a server first</option>{/if}
|
||||
{#if server && !applicable}<option value={action} disabled>{actionLabels[action]} unavailable</option>{/if}
|
||||
{#each available as value}<option value={value}>{actionLabels[value]}</option>{/each}
|
||||
{#if server}<option value="destroy">Remove server</option>{/if}
|
||||
{#if server}<option value="destroy">Destroy server</option>{/if}
|
||||
</select></label>
|
||||
{/if}
|
||||
{#if loading}<p role="status">Checking the latest server status…</p>
|
||||
|
||||
Reference in New Issue
Block a user