Make UI language, timestamps and live feedback consistent
This commit is contained in:
@@ -7,6 +7,7 @@
|
||||
import Button from '$ui/components/primitives/Button.svelte';
|
||||
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||
import PolicyCard from '$ui/components/autoscaling/PolicyCard.svelte';
|
||||
import Freshness from '$ui/components/Freshness.svelte';
|
||||
import { zombieMaps, zombieMapBySlug } from '$lib/map-aliases.js';
|
||||
import type { ScalingSettings, ScalingPolicy, ScalingReport } from '$lib/autoscaling.js';
|
||||
let { data }: { data: import('./$types').PageData } = $props();
|
||||
@@ -18,7 +19,10 @@
|
||||
let editing = $state<ScalingPolicy | null>(null);
|
||||
let editorOpen = $state(false);
|
||||
let busy = $state(false), actionError = $state(''), refreshError = $state(''), notice = $state('');
|
||||
let updatedAt = $state(Date.now());
|
||||
let refreshing = $state(false);
|
||||
let generation = 0;
|
||||
let pendingRefreshes = 0;
|
||||
$effect(() => {
|
||||
if (!notice) return;
|
||||
const timer = setTimeout(() => notice = '', 6000);
|
||||
@@ -26,12 +30,14 @@
|
||||
});
|
||||
async function refresh(signal?: AbortSignal) {
|
||||
const version = ++generation;
|
||||
pendingRefreshes++; refreshing = true;
|
||||
try {
|
||||
const response = await fetch('/api/autoscaling', { signal });
|
||||
if (!response.ok) throw new Error('Could not refresh policies. The last successful report is shown.');
|
||||
const result = await response.json();
|
||||
if (version === generation && !signal?.aborted) { snapshot = result; refreshError = ''; }
|
||||
} catch (error) { if (version === generation && !signal?.aborted) refreshError = (error as Error).message; }
|
||||
if (version === generation && !signal?.aborted) { snapshot = result; refreshError = ''; updatedAt = Date.now(); }
|
||||
} catch (error) { if (version === generation && !signal?.aborted) refreshError = (error as Error).message; return false; }
|
||||
finally { refreshing = --pendingRefreshes > 0; }
|
||||
}
|
||||
onMount(() => pollVisible(refresh, 15_000, false));
|
||||
function edit(policy: ScalingPolicy | null) {
|
||||
@@ -86,8 +92,9 @@
|
||||
<svelte:head><title>Autoscaling | Electric Cherry</title></svelte:head>
|
||||
<div class="page">
|
||||
<SectionHeader title="Autoscaling" subtitle="Keep empty lobbies available for new groups, within the limits you choose.">
|
||||
{#snippet actions()}<Button onclick={() => refresh()}>Refresh</Button>{#if canOperate && report.policies.length}<Button disabled={busy} onclick={pauseAll}>{report.globalPaused ? 'Resume autoscaling' : 'Pause all'}</Button><Button variant="primary" disabled={busy} onclick={() => edit(null)}>Add policy</Button>{/if}{/snippet}
|
||||
{#snippet actions()}{#if canOperate && report.policies.length}<Button disabled={busy} onclick={pauseAll}>{report.globalPaused ? 'Resume autoscaling' : 'Pause all'}</Button><Button variant="primary" disabled={busy} onclick={() => edit(null)}>Add policy</Button>{/if}{/snippet}
|
||||
</SectionHeader>
|
||||
<Freshness {updatedAt} error={refreshError ? 'Policy updates interrupted.' : ''} intervalLabel="Updates every 15 seconds" onRetry={() => void refresh()} retryDisabled={refreshing || busy} />
|
||||
{#if report.globalPaused}<p class="banner">Autoscaling is paused globally. Outstanding jobs are still tracked and may finish.</p>{/if}
|
||||
{#if refreshError}<p role="alert">{refreshError}</p>{/if}
|
||||
{#if actionError}<p role="alert">{actionError}</p>{/if}
|
||||
|
||||
Reference in New Issue
Block a user