555 lines
34 KiB
Svelte
555 lines
34 KiB
Svelte
<script lang="ts">
|
|
import { tick } from 'svelte';
|
|
import { instanceActivity } from '$ui/server-activity.js';
|
|
import { timeFormat } from '$ui/stores/time-zone.js';
|
|
import { freshTelemetry } from '$lib/server-observation.js';
|
|
import { freshStatusTimestamp } from '$lib/server-freshness.js';
|
|
import { serverSection, serverSectionAnchor } from '$lib/server-sections.js';
|
|
import { contextHref } from '$lib/navigation-context.js';
|
|
import BackLink from '$ui/components/BackLink.svelte';
|
|
let { data }: { data: import('./$types').PageData } = $props();
|
|
import RuntimeVersion from '$ui/components/RuntimeVersion.svelte';
|
|
import MatchHistory from '$ui/components/MatchHistory.svelte';
|
|
import TelemetryDiagnostics from '$ui/components/TelemetryDiagnostics.svelte';
|
|
import { pollVisible } from '$ui/poll.js';
|
|
import { fetchCampaigns } from '$ui/campaigns.js';
|
|
import { createFleetStore } from '$ui/stores/fleet.js';
|
|
import { freshServer, fleetIdentity } from '$lib/fleet-overview.js';
|
|
import { serverTitle } from '$ui/server-labels.js';
|
|
import CopyValue from '$ui/components/CopyValue.svelte';
|
|
import ConfigInspector from '$ui/components/ConfigInspector.svelte';
|
|
import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
|
|
import ListFooter from '$ui/components/primitives/ListFooter.svelte';
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import LifecycleDialog from '$ui/components/LifecycleDialog.svelte';
|
|
import { runtimeActions, actionLabels, type RuntimeAction } from '$lib/provisioning.js';
|
|
let lifecycleOpen = $state(false);
|
|
let lifecycleAction = $state<RuntimeAction>('start');
|
|
import DestroyServerModal from '$ui/components/DestroyServerModal.svelte';
|
|
import { telemetryByServer, uiNow } from '$ui/stores/servers.js';
|
|
import type { RosterPlayer, Health, RconEndpoint, RconFailure } from '$ui/stores/servers.js';
|
|
import { elapsedSince } from '$ui/duration.js';
|
|
import PlayerScoreboard from '$ui/components/PlayerScoreboard.svelte';
|
|
import LogPanel from '$ui/components/LogPanel.svelte';
|
|
import ChatPanel from '$ui/components/ChatPanel.svelte';
|
|
import { decodeRconError, rconFixHint } from '$ui/rconError.js';
|
|
|
|
import Card from '$ui/components/primitives/Card.svelte';
|
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
|
import Button from '$ui/components/primitives/Button.svelte';
|
|
import Tabs from '$ui/components/primitives/Tabs.svelte';
|
|
import StatusPip from '$ui/components/primitives/StatusPip.svelte';
|
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
|
|
|
interface RconProbeResult {
|
|
ok: boolean;
|
|
endpoint?: { host: string; port: number } | null;
|
|
reason?: RconFailure;
|
|
detail?: string;
|
|
rawReply?: string;
|
|
status?: { players: number; map: string | null; gametype: string | null; roster: RosterPlayer[] };
|
|
}
|
|
interface Server {
|
|
plutonium?: import('$lib/plutonium.js').PlutoniumVersion;
|
|
telemetry_after?: string | null;
|
|
status_source?: 'telemetry' | 'rcon' | null;
|
|
rcon_status?: import('$lib/server-observation.js').GameObservation;
|
|
telemetry?: import('$lib/telemetry.js').GameTelemetry;
|
|
name: string;
|
|
native_instance_id?: string | null; host_id?: string | null; instance_generation?: number | null; game_library_id?: string | null;
|
|
host?: import('$lib/hosts.js').Host | null;
|
|
network?: { bindAddress: string; localPort: number; publicAddress: string | null; publicPort: number | null } | null;
|
|
game_port: number | null; rcon_host: string | null;
|
|
game: string | null; map: string | null;
|
|
last_players: number | null; last_checked_at: string | null;
|
|
last_map: string | null; last_gametype: string | null;
|
|
last_seen_at: string | null; last_error: string | null;
|
|
roster: RosterPlayer[] | null;
|
|
health: Health; endpoint: RconEndpoint | null; replySnippet: string | null;
|
|
held: Array<{ target: string; betaId: number }>;
|
|
active_since: string | null; inactive_since: string | null;
|
|
game_started_at: string | null; game_ended_at: string | null;
|
|
}
|
|
interface InventoryEntry {
|
|
relPath: string; kind?: string; scriptVersionId: number | null;
|
|
artifactId?: number | null; version?: number | null; releaseVersion?: string | null;
|
|
sha256: string; size: number; updatedAt: string; source: string | null;
|
|
}
|
|
interface DeploymentRow {
|
|
id: string; action: string; started_at: string; finished_at: string | null;
|
|
servers: Array<{ server: string; restart_state: string; players: number | null; error: string | null; files_changed: number }>;
|
|
}
|
|
|
|
let name = $derived($page.params.name ?? '');
|
|
const detail = $derived(createFleetStore(name));
|
|
const { fleet, fleetServers, fleetError, refreshFleet } = $derived(detail);
|
|
$effect(() => {
|
|
detail.hydrateFleet(data.serverSnapshot);
|
|
return detail.startFleetMonitor();
|
|
});
|
|
const snapshot = $derived($fleet.receivedAt ? $fleet : data.serverSnapshot);
|
|
const visibleFleet = $derived($fleet.receivedAt ? $fleetServers : data.serverSnapshot.servers);
|
|
let server = $derived((visibleFleet.find(s => s.name === name) as Server | undefined) ?? null);
|
|
const native = $derived(!!server?.native_instance_id);
|
|
let telemetryOpen = $state(false);
|
|
let history = $state<DeploymentRow[]>([]);
|
|
let inventory = $state<InventoryEntry[]>([]);
|
|
let rconProbe = $state<RconProbeResult | null>(null);
|
|
let probingRcon = $state(false);
|
|
let destroyOpen = $state(false);
|
|
const sectionIds = ['live', 'scoreboard', 'matches', 'chat', 'logs', 'configuration', 'config', 'inventory', 'diagnostics', 'history'];
|
|
const activeTab = $derived(sectionIds.includes($page.url.searchParams.get('tab') ?? '') ? $page.url.searchParams.get('tab')! : 'live');
|
|
const activeSection = $derived(serverSection(activeTab));
|
|
const loadedServerName = $derived(server?.name);
|
|
$effect(() => {
|
|
const anchor = serverSectionAnchor(activeTab);
|
|
const currentName = loadedServerName;
|
|
if (!anchor || !currentName) return;
|
|
let cancelled = false;
|
|
void tick().then(() => { if (!cancelled) document.getElementById(anchor)?.scrollIntoView({ block: 'start' }); });
|
|
return () => { cancelled = true; };
|
|
});
|
|
function changeTab(tab: string) {
|
|
const url = new URL($page.url);
|
|
url.searchParams.set('tab', tab);
|
|
url.hash = '';
|
|
void goto(url, { noScroll: true, keepFocus: true });
|
|
}
|
|
let tabLoading = $state(false);
|
|
let tabError = $state('');
|
|
let historyLimit = $state(25);
|
|
let historyTotal = $state(0);
|
|
let inventoryLimit = $state(25);
|
|
const operations = $derived(snapshot.operations.filter(op => op.server === name));
|
|
|
|
const activity = $derived(instanceActivity(name, operations, history));
|
|
|
|
let tabSequence = 0;
|
|
async function loadTab(currentName: string, tab: string, signal?: AbortSignal) {
|
|
if (tab !== 'history' && tab !== 'configuration') return;
|
|
const sequence = ++tabSequence;
|
|
try {
|
|
if (tab === 'history') {
|
|
const body = await fetchCampaigns<DeploymentRow>({ server: currentName }, historyLimit, signal);
|
|
if (sequence !== tabSequence || name !== currentName || activeSection !== tab || signal?.aborted) return;
|
|
history = body.deployments; historyTotal = body.total;
|
|
} else {
|
|
const response = await fetch('/api/servers/' + encodeURIComponent(currentName) + '/scripts', { signal });
|
|
if (!response.ok) throw new Error('Could not refresh inventory.');
|
|
const body = await response.json();
|
|
if (sequence !== tabSequence || name !== currentName || activeSection !== tab || signal?.aborted) return;
|
|
inventory = body.scripts;
|
|
}
|
|
tabError = '';
|
|
return true;
|
|
} catch (error) {
|
|
if (sequence === tabSequence && name === currentName && activeSection === tab && !signal?.aborted) tabError = (error as Error).message;
|
|
return false;
|
|
} finally { if (sequence === tabSequence && name === currentName && activeSection === tab && !signal?.aborted) tabLoading = false; }
|
|
}
|
|
$effect(() => {
|
|
const currentName = name;
|
|
const tab = activeSection;
|
|
tabError = ''; history = []; inventory = []; historyLimit = 25; inventoryLimit = 25;
|
|
tabLoading = tab === 'history' || tab === 'configuration';
|
|
return pollVisible(signal => loadTab(currentName, tab, signal), 10000);
|
|
});
|
|
$effect(() => { name; rconProbe = null; });
|
|
const fresh = $derived(server ? freshServer(server, $uiNow) : false);
|
|
|
|
let effectivePlayers = $derived(fresh ? server?.last_players ?? null : null);
|
|
const scoreboard = $derived(server?.telemetry ?? $telemetryByServer.get(name));
|
|
let effectiveHealth = $derived<Health>(server?.health === 'online' && !fresh ? 'stale' : server?.health ?? 'offline');
|
|
let effectiveSeen = $derived(server?.last_seen_at ?? null);
|
|
let effectiveErr = $derived(effectiveHealth === 'starting' || effectiveHealth === 'provisioning'
|
|
? null : server?.rcon_status?.last_error ?? server?.last_error ?? null);
|
|
let effectiveEndpoint = $derived<RconEndpoint | null>(server?.endpoint ?? null);
|
|
let decoded = $derived(decodeRconError(effectiveErr));
|
|
let effectiveReason = $derived<RconFailure | null>(decoded?.reason ?? null);
|
|
let errorDetail = $derived(decoded?.detail ?? effectiveErr ?? '');
|
|
let effectiveSnippet = $derived<string | null>(
|
|
rconProbe?.rawReply ?? server?.replySnippet ?? null
|
|
);
|
|
let effectiveActiveSince = $derived<string | null>(server?.active_since ?? null);
|
|
let effectiveInactiveSince = $derived<string | null>(server?.inactive_since ?? null);
|
|
let effectiveGameStartedAt = $derived<string | null>(server?.game_started_at ?? null);
|
|
let effectiveGameEndedAt = $derived<string | null>(server?.game_ended_at ?? null);
|
|
let resetElapsed = $derived(fresh && effectiveGameEndedAt && server?.last_players !== 0 ? elapsedSince(effectiveGameEndedAt, $uiNow) : null);
|
|
let activeElapsed = $derived(fresh && effectiveActiveSince ? elapsedSince(effectiveActiveSince, $uiNow) : null);
|
|
let inactiveElapsed = $derived(fresh && effectiveInactiveSince ? elapsedSince(effectiveInactiveSince, $uiNow) : null);
|
|
let gameInProgress = $derived(!!effectiveGameStartedAt && !effectiveGameEndedAt && !!effectiveActiveSince);
|
|
let gameElapsed = $derived(fresh && gameInProgress ? elapsedSince(effectiveGameStartedAt, $uiNow) : null);
|
|
|
|
let hasDiagnosticIssue = $derived(effectiveHealth !== 'online' && effectiveHealth !== 'starting' && effectiveHealth !== 'provisioning');
|
|
|
|
function ago(iso: string | null, now: number): string {
|
|
if (!iso) return 'never';
|
|
const d = now - new Date(iso).getTime();
|
|
if (d < 60_000) return `${Math.max(1, Math.floor(d / 1000))}s ago`;
|
|
if (d < 3_600_000) return `${Math.floor(d / 60_000)}m ago`;
|
|
if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h ago`;
|
|
return `${Math.floor(d / 86_400_000)}d ago`;
|
|
}
|
|
async function probeRcon(): Promise<void> {
|
|
if (probingRcon || !name) return;
|
|
const currentName = name;
|
|
probingRcon = true; rconProbe = null;
|
|
try {
|
|
const res = await fetch(`/api/servers/${encodeURIComponent(currentName)}/probe-rcon`, { method: 'POST' });
|
|
const body = await res.json().catch(() => null);
|
|
if (!body || typeof body.ok !== 'boolean') throw new Error(`HTTP ${res.status}: Expected a JSON connection result.`);
|
|
if (name !== currentName) return;
|
|
rconProbe = body as RconProbeResult;
|
|
await refreshFleet();
|
|
} catch (err) {
|
|
if (name === currentName) rconProbe = { ok: false, reason: 'send-error', detail: (err as Error).message };
|
|
} finally { probingRcon = false; }
|
|
}
|
|
// Tab config — Diagnostics gets a warning badge when there's an issue.
|
|
let tabs = $derived([
|
|
{ id: 'live', label: 'Live' },
|
|
{ id: 'matches', label: 'Matches' },
|
|
{ id: 'configuration', label: 'Configuration' },
|
|
{ id: 'diagnostics', label: 'Diagnostics', badge: hasDiagnosticIssue || effectiveErr ? '!' : null },
|
|
{ id: 'history', label: 'History' }
|
|
]);
|
|
</script>
|
|
|
|
<svelte:head><title>{serverTitle(name)} · {activeTab.charAt(0).toUpperCase() + activeTab.slice(1)} · Electric Cherry</title></svelte:head>
|
|
<LifecycleDialog bind:open={lifecycleOpen} initialServer={name} initialAction={lifecycleAction} />
|
|
<DestroyServerModal bind:open={destroyOpen} {name} players={effectivePlayers} />
|
|
|
|
{#if server}
|
|
<div class="server-page" style="view-transition-name: server-{name.replace(/[^a-z0-9_-]/gi, '-')};">
|
|
<header class="instance-header">
|
|
<BackLink fallback="/" />
|
|
<SectionHeader title={serverTitle(server.name)}>
|
|
{#snippet actions()}
|
|
<details class="server-actions"><summary>Instance actions</summary><div class="action-menu">{#each runtimeActions as action}<Button onclick={() => { lifecycleAction = action; lifecycleOpen = true; }}>{actionLabels[action]}</Button>{/each}<Button variant="danger" onclick={() => destroyOpen = true}>Queue instance removal</Button></div></details>
|
|
{/snippet}
|
|
</SectionHeader>
|
|
<div class="instance-meta">
|
|
<span class="health"><StatusPip health={effectiveHealth} size="md" />{effectiveHealth === 'online' ? 'Online' : effectiveHealth === 'starting' ? 'Starting' : effectiveHealth === 'provisioning' ? 'Provisioning' : effectiveHealth === 'stale' ? 'Stale' : 'Offline'}</span>
|
|
{#if server.host_id}<a href={contextHref(`/hosts/${server.host_id}`, $page.url)}>{server.host?.name ?? server.host_id}</a>{/if}
|
|
<details><summary>Details</summary><div class="instance-details"><CopyValue value={name} label="Instance ID" /><RuntimeVersion {name} version={server.plutonium} after={server.telemetry_after} ready={effectiveHealth === 'online'} /></div></details>
|
|
</div>
|
|
</header>
|
|
|
|
{#if $fleetError}<div class="ui-error" role="alert">{$fleetError}<Button size="sm" onclick={() => refreshFleet(true)}>Retry</Button></div>{/if}
|
|
{#if hasDiagnosticIssue}
|
|
<section class="connection-issue" aria-label="Server connection issue">
|
|
<div><strong>{effectiveHealth === 'stale' ? 'Server report is outdated' : 'Server is not responding'}</strong><p>Player count is unknown. {effectiveSeen ? `Last successful report ${ago(effectiveSeen, $uiNow)}.` : 'No successful report has been received.'} {native && !server.host?.connected ? 'The host agent is offline; the game may still be running.' : ''}</p></div>
|
|
<div class="issue-actions"><Button size="sm" onclick={() => changeTab('diagnostics')}>Diagnose connection</Button><Button size="sm" variant="ghost" onclick={() => changeTab('logs')}>Open logs</Button>{#if native && server.host_id}<Button size="sm" href={contextHref(`/hosts/${server.host_id}`, $page.url)}>Check host</Button>{:else}<Button size="sm" href="/settings">Check system setup</Button>{/if}</div>
|
|
</section>
|
|
{/if}
|
|
<div class="tabs-row">
|
|
<Tabs {tabs} value={activeSection} onchange={changeTab} ariaLabel="Server sections" idPrefix="server-tabs" panelId="server-panel" />
|
|
</div>
|
|
|
|
<div class="tab-panel" class:diagnostics={activeSection === 'diagnostics'} class:history-panel={activeSection === 'history'} role="tabpanel" id="server-panel" aria-labelledby={"server-tabs-" + activeSection}>
|
|
{#if tabError}<div class="ui-error" role="alert">{tabError}<Button size="sm" onclick={() => loadTab(name, activeSection)}>Retry</Button></div>{/if}
|
|
{#if activeSection === 'live'}
|
|
<section id="scoreboard" aria-label="Scoreboard">
|
|
{#if !scoreboard || !fresh || !freshTelemetry(scoreboard, $uiNow, server.telemetry_after)}<p class="live-context">Players: {effectivePlayers ?? '—'} · {fleetIdentity(server).map}{#if !fresh} · Current count unavailable{/if}</p>{/if}
|
|
<Card padding="lg">
|
|
{#key name}<PlayerScoreboard matchElapsed={gameElapsed} activity={resetElapsed ? `Resetting · ${resetElapsed}` : activeElapsed ? `Players present for ${activeElapsed}` : inactiveElapsed ? `Empty for ${inactiveElapsed}` : undefined} current={fresh} after={server?.telemetry_after ?? null} report={scoreboard} mapLabel={scoreboard ? fleetIdentity({ ...server, last_map: scoreboard.map }).map : undefined} />{/key}
|
|
</Card>
|
|
</section>
|
|
<section id="chat" aria-label="Chat">
|
|
<Card>
|
|
{#key name}<ChatPanel server={name} />{/key}
|
|
</Card>
|
|
</section>
|
|
{:else if activeSection === 'configuration'}
|
|
<section id="config" aria-label="Config">
|
|
{#key name}<ConfigInspector fixedServer={name} />{/key}
|
|
</section>
|
|
<section id="inventory" aria-label="Inventory">
|
|
<Card padding="lg">
|
|
<div class="panel-head">
|
|
<h2>Installed files</h2>
|
|
<span class="panel-count">{inventory.length}</span>
|
|
</div>
|
|
{#if tabLoading}<EmptyState title="Loading inventory…" />{:else if inventory.length === 0 && !tabError}
|
|
<EmptyState
|
|
title="No files tracked yet"
|
|
description="Files appear here after scripts, configs, or plugins are deployed to this server."
|
|
/>
|
|
{:else}
|
|
<div class="table-scroll"><table class="detail-table"><thead><tr><th>File</th><th>Type</th><th>Recorded version</th><th>Details</th></tr></thead><tbody>
|
|
{#each inventory.slice(0, inventoryLimit) as f}
|
|
<tr><td>{#if f.artifactId}<a href={contextHref(`/${f.kind === 'plugin' ? 'plugins' : f.kind === 'config' || f.kind === 'baseline' ? 'configs' : 'scripts'}/${f.artifactId}`, $page.url)}>{f.relPath}</a>{:else}{f.relPath}{/if}</td><td>{f.kind ?? 'file'}</td><td>{f.releaseVersion ?? (f.version ? `v${f.version}` : '—')}</td><td><details><summary><span class="sr-only">{f.relPath} </span>Details</summary><dl class="file-details"><dt>Size</dt><dd>{new Intl.NumberFormat().format(f.size)} B</dd><dt>SHA-256</dt><dd><code>{f.sha256}</code></dd><dt>Recorded</dt><dd>{$timeFormat.dateTime(f.updatedAt)}</dd><dt>Source</dt><dd>{#if f.source?.startsWith('promote:') || f.source?.startsWith('rollback:')}<a href={contextHref(`/campaigns/${f.source.slice(f.source.indexOf(':') + 1)}`, $page.url)}>View campaign</a>{:else}{f.source === 'native-create' ? 'Instance creation' : f.source ?? 'Unknown'}{/if}</dd></dl></details></td></tr>
|
|
{/each}
|
|
</tbody></table></div>
|
|
{/if}
|
|
</Card>
|
|
<ListFooter total={inventory.length} bind:limit={inventoryLimit} label="files" />
|
|
</section>
|
|
{:else if activeSection === 'diagnostics'}
|
|
<section id="connection" aria-label="Connection health">
|
|
<Card padding="lg">
|
|
<div class="panel-head">
|
|
<h2>Connection health</h2>
|
|
</div>
|
|
<div class="connection-status">
|
|
{#if native}<div><strong>Host agent</strong><span>{server.host?.connected && freshStatusTimestamp(server.host.lastHeartbeat, $uiNow) ? 'Online' : 'Unavailable'}</span><small>{server.host?.lastHeartbeat ? `Last heartbeat ${ago(server.host.lastHeartbeat, $uiNow)}` : 'No heartbeat received'}</small>{#if server.host_id}<a href={contextHref(`/hosts/${server.host_id}`, $page.url)}>Inspect host</a>{/if}</div>{/if}
|
|
<div><strong>Game connection · RCON</strong><span>{effectiveReason ? 'Issue' : server.rcon_status?.last_seen_at && freshStatusTimestamp(server.rcon_status.last_seen_at, $uiNow) ? 'Responding' : 'No fresh response'}</span><small>{server.rcon_status?.last_seen_at ? `Last response ${ago(server.rcon_status.last_seen_at, $uiNow)}` : 'No response received'}</small>{#if effectiveEndpoint || native}<Button size="sm" variant="ghost" onclick={probeRcon} disabled={probingRcon} loading={probingRcon}>Test connection</Button>{/if}</div>
|
|
<div><strong>Game telemetry</strong><span>{fresh && freshTelemetry(scoreboard, $uiNow, server.telemetry_after) ? 'Reporting' : scoreboard ? 'Last report outdated' : 'No report'}</span><small>{scoreboard ? `Last report ${ago(scoreboard.receivedAt, $uiNow)}` : 'Waiting for game data'}</small><button class="text-button" onclick={() => telemetryOpen = !telemetryOpen} aria-expanded={telemetryOpen}>Inspect requests</button></div>
|
|
</div>
|
|
<p class="sub">Player count source: {fresh ? server.status_source === 'telemetry' ? 'game telemetry' : server.status_source === 'rcon' ? 'RCON' : 'unavailable' : 'unavailable'}.</p>
|
|
{#if effectiveReason}
|
|
<div class="alert alert-danger">
|
|
<Badge variant="danger" uppercase>{effectiveReason}</Badge>
|
|
<span class="alert-detail">{errorDetail}</span>
|
|
</div>
|
|
<div class="hint">{native ? 'Inspect the host agent connection and game logs. RCON is sent locally by the agent; public game-port forwarding does not affect this check.' : rconFixHint(effectiveReason)}</div>
|
|
{:else if effectiveErr}
|
|
<div class="alert alert-danger">
|
|
<Badge variant="neutral" uppercase>Error</Badge>
|
|
<span class="alert-detail">{effectiveErr}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if effectiveSnippet}
|
|
<details class="snippet-details" open={effectiveReason === 'bad-reply'}>
|
|
<summary>Raw reply ({effectiveSnippet.split('\n').length - 1} lines)</summary>
|
|
<pre class="snippet">{effectiveSnippet}</pre>
|
|
</details>
|
|
{/if}
|
|
|
|
{#if rconProbe?.ok}
|
|
<div class="alert alert-ok">
|
|
<Badge variant="online" uppercase>Connected</Badge>
|
|
<span class="alert-detail">
|
|
RCON: {rconProbe.status?.players ?? '?'} players
|
|
{#if rconProbe.status?.map} · map <strong>{rconProbe.status.map}</strong>{/if}
|
|
{#if rconProbe.status?.gametype} · {rconProbe.status.gametype}{/if}
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if rconProbe && !rconProbe.ok}<div class="ui-error" role="alert">Connection test failed. <details><summary>Technical details</summary>{rconProbe.detail ?? rconProbe.reason}</details></div>{/if}
|
|
<details class="connection-details"><summary>Connection details</summary>
|
|
<div class="diag-grid">
|
|
{#if native}<div class="kv"><span class="k">Host</span><span class="v"><a href={contextHref(`/hosts/${server.host_id}`, $page.url)}>{server.host?.name ?? server.host_id}</a></span></div><div class="kv"><span class="k">Instance</span><span class="v mono">{server.native_instance_id}</span></div><div class="kv"><span class="k">Generation</span><span class="v mono">{server.instance_generation}</span></div><div class="kv"><span class="k">Game-file version</span><span class="v mono"><a href="/game-files">{server.game_library_id}</a></span></div>{#if server.network}<div class="kv"><span class="k">Local UDP binding</span><span class="v mono">{server.network.bindAddress}:{server.network.localPort}</span></div><div class="kv"><span class="k">Public / NAT endpoint</span><span class="v mono">{server.network.publicAddress || server.host?.publicAddress || server.host?.hostname || 'Not configured'}:{server.network.publicPort ?? server.network.localPort}</span></div>{/if}
|
|
{/if}
|
|
<div class="kv"><span class="k">Game port</span><span class="v mono">{server.game_port ?? '(unresolved)'}</span></div>
|
|
<div class="kv"><span class="k">Game</span><span class="v mono">{server.game ?? '(unset)'}</span></div>
|
|
<div class="kv"><span class="k">Map</span><span class="v mono">{server.map ?? '(unset)'}</span></div>
|
|
{#if server.held.length > 0}
|
|
<div class="kv"><span class="k">Held by beta</span><span class="v mono">{server.held.map((h) => `${h.target} (beta ${h.betaId})`).join(', ')}</span></div>
|
|
{/if}
|
|
</div>
|
|
</details>
|
|
</Card>
|
|
<details class="telemetry-inspector" bind:open={telemetryOpen}><summary>Telemetry requests</summary>{#if telemetryOpen}<div id="telemetry">{#key name}<TelemetryDiagnostics server={name} />{/key}</div>{/if}</details>
|
|
</section>
|
|
<section id="logs" aria-label="Logs">
|
|
<Card padding="lg">
|
|
<LogPanel
|
|
server={server.name}
|
|
tabs={[
|
|
{ key: 'console', label: 'console.log' },
|
|
server.game === 't6' ? { key: 'games_zm', label: 'games_zm.log' } : { key: 'games_sp', label: 'games_sp.log' }
|
|
]}
|
|
/>
|
|
</Card>
|
|
</section>
|
|
{:else if activeSection === 'matches'}
|
|
{#key name}<MatchHistory server={name} />{/key}
|
|
{:else if activeSection === 'history'}
|
|
<div class="history-links"><a href={contextHref(`/provisioning?view=history&server=${encodeURIComponent(name)}`, $page.url)}>Provisioning history</a><a href={contextHref(`/hosts/operations?server=${encodeURIComponent(name)}`, $page.url)}>Host operation history</a></div>
|
|
<Card>
|
|
<div class="panel-head"><h2>Activity</h2></div><p class="sub">Recent operations and campaign history</p>
|
|
{#if tabLoading}<p class="sub">Loading campaign history…</p>{/if}
|
|
{#if activity.length}<div class="table-scroll"><table class="detail-table"><thead><tr><th>Time</th><th>Activity</th><th>Result</th><th>Source</th></tr></thead><tbody>
|
|
{#each activity as item (item.key)}<tr><td><time datetime={item.at} title={$timeFormat.dateTime(item.at)}>{ago(item.at, $uiNow)}</time></td><td>{item.label}{#if item.detail}<div class="ui-error">{item.detail}</div>{/if}</td><td><StatusBadge state={item.state} /></td><td><a href={contextHref(item.href, $page.url)}>{item.source}</a></td></tr>{/each}
|
|
</tbody></table></div>{:else if !tabLoading && !tabError}<EmptyState title="No activity recorded" />{/if}
|
|
</Card>
|
|
<ListFooter total={historyTotal} bind:limit={historyLimit} onchange={() => loadTab(name, 'history')} label="campaigns" />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{:else if $fleetError}
|
|
<div class="ui-error" role="alert">{$fleetError}<Button onclick={() => refreshFleet(true)}>Retry</Button></div>
|
|
{:else if $fleet.receivedAt || data.serverSnapshot}
|
|
<EmptyState title="Server not found" description="This server may have been removed from the fleet." />
|
|
{:else}
|
|
<div class="loading">Loading…</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.tab-panel > section { display:grid; gap:16px; min-width:0; scroll-margin-top:80px; }
|
|
.history-links { display:flex; flex-wrap:wrap; gap:12px; }
|
|
.server-actions { text-align: right; }
|
|
.server-actions summary { cursor: pointer; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-sm); }
|
|
.server-actions[open] summary { margin-bottom: 10px; }
|
|
.connection-issue { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px; border: 1px solid var(--state-warning); border-radius: var(--radius-md); background: var(--surface); }
|
|
.connection-issue p { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
|
|
.issue-actions { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.server-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
}
|
|
.loading {
|
|
text-align: center;
|
|
padding: var(--space-16);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.sub {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Tabs row */
|
|
.tab-panel {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: var(--space-6);
|
|
}
|
|
.tabs-row {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* Panel headers */
|
|
.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);
|
|
letter-spacing: var(--tracking-tight);
|
|
}
|
|
.panel-count {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Diagnostics KV grid */
|
|
.diag-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-2);
|
|
}
|
|
.kv {
|
|
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);
|
|
}
|
|
.kv .k {
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-label);
|
|
color: var(--text-tertiary);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.kv .v {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-primary);
|
|
word-break: break-word;
|
|
}
|
|
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
|
|
/* Inline alerts */
|
|
.alert {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-4);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid transparent;
|
|
}
|
|
.alert-danger { background: rgba(255, 86, 112, 0.06); border-color: rgba(255, 86, 112, 0.2); }
|
|
.alert-ok { background: rgba(124, 212, 255, 0.06); border-color: rgba(124, 212, 255, 0.2); }
|
|
.alert-detail {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.alert-detail strong { color: var(--state-online); }
|
|
|
|
.hint {
|
|
margin-top: var(--space-2);
|
|
padding: var(--space-3) var(--space-4);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
background: var(--surface-sunken);
|
|
border-left: 2px solid var(--accent-primary);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
|
|
/* Snippet details */
|
|
.snippet-details {
|
|
margin-top: var(--space-3);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.snippet-details summary {
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
padding: var(--space-2) 0;
|
|
}
|
|
.snippet-details summary:hover { color: var(--text-primary); }
|
|
.snippet {
|
|
margin: var(--space-2) 0 0;
|
|
padding: var(--space-4);
|
|
background: var(--surface-sunken);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
line-height: var(--leading-mono);
|
|
max-height: 440px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.live-context { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
|
|
.instance-header { display: grid; gap: 12px; }
|
|
.instance-meta, .health { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: var(--text-sm); }
|
|
.health { gap: 8px; }
|
|
.instance-details { display: grid; gap: 8px; padding: 12px 0; }
|
|
details > summary { cursor: pointer; color: var(--text-secondary); font-size: var(--text-sm); }
|
|
.server-actions { position: relative; }
|
|
.action-menu { position: absolute; z-index: 5; right: 0; min-width: 220px; display: grid; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
|
|
.table-scroll { overflow-x: auto; }
|
|
.detail-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
|
|
.detail-table th, .detail-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
|
|
.detail-table th { color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }
|
|
.detail-table td { overflow-wrap: anywhere; }
|
|
.file-details { max-width: 360px; font-size: var(--text-xs); }
|
|
.file-details dt { color: var(--text-secondary); margin-top: 8px; }
|
|
.file-details dd { margin: 4px 0; overflow-wrap: anywhere; }
|
|
.connection-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
|
.connection-status > div { display: flex; flex-direction: column; align-items: start; gap: 8px; font-size: var(--text-sm); }
|
|
.connection-status small { color: var(--text-secondary); }
|
|
.connection-details { margin-top: 20px; }
|
|
.text-button { padding: 0; border: 0; color: var(--accent-primary); background: none; font: inherit; cursor: pointer; }
|
|
.telemetry-inspector > summary { margin-bottom: 12px; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
|
@media (max-width: 640px) { .panel-head, .alert { flex-wrap: wrap; } }
|
|
</style>
|