denozord/EvoBGP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 131 Wiki Activity

web(ui): migrate dashboard, schedule, monitoring to ui patterns

Browse Source 
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Denozordec
2026-05-19 12:01:11 +07:00
co-authored by Cursor
parent b992301c99
commit 57dcf306f3
3 changed files with 40 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/+page.svelte
+8 -13
View File
@@ -17,6 +17,7 @@ const resolve = (path: string) => path as any;
import Clock from '@lucide/svelte/icons/clock';
import ArrowRight from '@lucide/svelte/icons/arrow-right';
import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard';
import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
let healthy = $state<boolean | null>(null);
let modules = $state(0);
@@ -133,19 +134,13 @@ const resolve = (path: string) => path as any;
]);
</script>
<div class="space-y-6">
<div class="flex items-start gap-3">
<div
class="bg-primary/10 text-primary flex size-11 shrink-0 items-center justify-center rounded-xl"
aria-hidden="true"
>
<LayoutDashboard class="size-6" />
</div>
<div class="min-w-0">
<h1 class="text-2xl font-semibold tracking-tight">Обзор</h1>
<p class="text-muted-foreground mt-1 text-sm">Состояние панели управления EvoBGP.</p>
</div>
</div>
<div class="flex flex-col gap-6">
<PageHeader
title="Обзор"
description="Состояние панели управления EvoBGP."
icon={LayoutDashboard}
iconClass="bg-primary/10 text-primary"
/>
<!-- Health -->
<Card>
web/src/routes/monitoring/+page.svelte
+17 -26
View File
@@ -12,6 +12,7 @@
import Server from '@lucide/svelte/icons/server';
import Hash from '@lucide/svelte/icons/hash';
import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
type ReadyStatus = { status: string; checks?: Record<string, unknown> };
type VersionInfo = { version?: string; git_sha?: string; build_time?: string; [k: string]: unknown };
@@ -136,32 +137,22 @@
onMount(load);
</script>
<div class="space-y-6">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-0 items-start gap-3">
<div
class="bg-info/15 text-info flex size-11 shrink-0 items-center justify-center rounded-xl"
aria-hidden="true"
>
<Gauge class="size-6" />
</div>
<div class="min-w-0">
<h1 class="text-2xl font-semibold tracking-tight">Мониторинг</h1>
<p class="text-muted-foreground mt-1 text-sm">
Состояние API, BGP и задач для быстрой диагностики инцидентов.
</p>
{#if lastUpdated}
<p class="text-muted-foreground mt-1 text-xs">
Обновлено: {lastUpdated.toLocaleTimeString('ru-RU')}
</p>
{/if}
</div>
</div>
<Button variant="outline" size="sm" onclick={load} disabled={loading}>
<RefreshCw class={loading ? 'animate-spin' : ''} />
Обновить
</Button>
</div>
<div class="flex flex-col gap-6">
<PageHeader
title="Мониторинг"
description={lastUpdated
? `Состояние API, BGP и задач. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
: 'Состояние API, BGP и задач для быстрой диагностики инцидентов.'}
icon={Gauge}
iconClass="bg-info/15 text-info"
>
{#snippet actions()}
<Button variant="outline" size="sm" onclick={load} disabled={loading}>
<RefreshCw class={loading ? 'animate-spin' : ''} />
Обновить
</Button>
{/snippet}
</PageHeader>
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
<Card class="border-l-4 border-l-chart-1 bg-chart-1/5 shadow-sm">
web/src/routes/schedule/+page.svelte
+15 -19
View File
@@ -16,6 +16,7 @@
import { toast } from 'svelte-sonner';
import RefreshCw from '@lucide/svelte/icons/refresh-cw';
import CalendarClock from '@lucide/svelte/icons/calendar-clock';
import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
import { jobStatusRu, moduleTypeRu } from '$lib/ui-labels.js';
import { jobKindTitle } from '$lib/operations/job-kind-label.js';
@@ -80,25 +81,20 @@
const failedJobsCount = $derived(jobs.filter((j) => j.status === 'failed').length);
</script>
<div class="space-y-6">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-0 items-start gap-3">
<div
class="bg-chart-4/15 text-chart-4 flex size-11 shrink-0 items-center justify-center rounded-xl"
aria-hidden="true"
>
<CalendarClock class="size-6" />
</div>
<div class="min-w-0">
<h1 class="text-2xl font-semibold tracking-tight">Расписание и задачи</h1>
<p class="text-muted-foreground mt-1 text-sm">Интервалы обновления модулей и ручной запуск обновления.</p>
</div>
</div>
<Button variant="outline" size="sm" onclick={load} disabled={loading}>
<RefreshCw class={loading ? 'animate-spin' : ''} />
Обновить
</Button>
</div>
<div class="flex flex-col gap-6">
<PageHeader
title="Расписание и задачи"
description="Интервалы обновления модулей и ручной запуск обновления."
icon={CalendarClock}
iconClass="bg-chart-4/15 text-chart-4"
>
{#snippet actions()}
<Button variant="outline" size="sm" onclick={load} disabled={loading}>
<RefreshCw class={loading ? 'animate-spin' : ''} />
Обновить
</Button>
{/snippet}
</PageHeader>
<div class="grid gap-3 sm:grid-cols-3">
<Card class="p-4">