jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-03-21 21:26:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

ui: refactor heartbeat settings page

Browse Source
This commit is contained in:
henrygd
2026-02-20 14:42:41 -05:00
parent aa8b3711d7
commit 191f25f6e0
31 changed files with 106 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
internal/site/src/components/routes/settings/heartbeat.tsx
View File

@@ -1,7 +1,6 @@
import { t } from "@lingui/core/macro"
import { Trans } from "@lingui/react/macro"
import { redirectPage } from "@nanostores/router"
import clsx from "clsx"
import { LoaderCircleIcon, SendIcon } from "lucide-react"
import { useEffect, useState } from "react"
import { $router } from "@/components/router"
@@ -10,6 +9,7 @@ import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { toast } from "@/components/ui/use-toast"
import { isAdmin, pb } from "@/lib/api"
import { cn } from "@/lib/utils"
interface HeartbeatStatus {
enabled: boolean
@@ -37,10 +37,10 @@ export default function HeartbeatSettings() {
setIsLoading(true)
const res = await pb.send<HeartbeatStatus>("/api/beszel/heartbeat-status", {})
setStatus(res)
} catch (error: any) {
} catch (error: unknown) {
toast({
title: t`Error`,
description: error.message,
description: (error as Error).message,
variant: "destructive",
})
} finally {
@@ -66,10 +66,10 @@ export default function HeartbeatSettings() {
variant: "destructive",
})
}
} catch (error: any) {
} catch (error: unknown) {
toast({
title: t`Error`,
description: error.message,
description: (error as Error).message,
variant: "destructive",
})
} finally {
@@ -77,8 +77,6 @@ export default function HeartbeatSettings() {
}
}
const TestIcon = isTesting ? LoaderCircleIcon : SendIcon
return (
<div>
<div>
@@ -94,107 +92,123 @@ export default function HeartbeatSettings() {
</div>
<Separator className="my-4" />
{isLoading ? (
<div className="flex items-center gap-2 text-muted-foreground py-4">
<LoaderCircleIcon className="h-4 w-4 animate-spin" />
<Trans>Loading...</Trans>
</div>
) : status?.enabled ? (
<div className="space-y-5">
<div className="flex items-center gap-2">
<Badge variant="success">
<Trans>Active</Trans>
</Badge>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<ConfigItem label={t`Endpoint URL`} value={status.url ?? ""} mono />
<ConfigItem label={t`Interval`} value={`${status.interval}s`} />
<ConfigItem label={t`HTTP Method`} value={status.method ?? "POST"} />
</div>
<Separator />
<div>
<h4 className="text-base font-medium mb-1">
<Trans>Test heartbeat</Trans>
</h4>
<p className="text-sm text-muted-foreground leading-relaxed mb-3">
<Trans>Send a single heartbeat ping to verify your endpoint is working.</Trans>
</p>
<Button
type="button"
variant="outline"
className="flex items-center gap-1.5"
onClick={sendTestHeartbeat}
disabled={isTesting}
>
<TestIcon className={clsx("h-4 w-4", isTesting && "animate-spin")} />
<Trans>Send test heartbeat</Trans>
</Button>
</div>
<Separator />
<div>
<h4 className="text-base font-medium mb-2">
<Trans>Payload format</Trans>
</h4>
<p className="text-sm text-muted-foreground leading-relaxed mb-2">
<Trans>
When using POST, each heartbeat includes a JSON payload with system status summary, list of down
systems, and triggered alerts.
</Trans>
</p>
<p className="text-sm text-muted-foreground leading-relaxed">
<Trans>
The overall status is <code className="bg-muted rounded-sm px-1 text-primary">ok</code> when all systems
are up, <code className="bg-muted rounded-sm px-1 text-primary">warn</code> when alerts are triggered,
and <code className="bg-muted rounded-sm px-1 text-primary">error</code> when any system is down.
</Trans>
</p>
</div>
</div>
{status?.enabled ? (
<EnabledState status={status} isTesting={isTesting} sendTestHeartbeat={sendTestHeartbeat} />
) : (
<div className="grid gap-4">
<div>
<p className="text-sm text-muted-foreground leading-relaxed mb-3">
<Trans>Set the following environment variables on your Beszel hub to enable heartbeat monitoring:</Trans>
</p>
<div className="grid gap-2.5">
<EnvVarItem
name="HEARTBEAT_URL"
description={t`Endpoint URL to ping (required)`}
example="https://uptime.betterstack.com/api/v1/heartbeat/xxxx"
/>
<EnvVarItem name="HEARTBEAT_INTERVAL" description={t`Seconds between pings (default: 60)`} example="60" />
<EnvVarItem
name="HEARTBEAT_METHOD"
description={t`HTTP method: POST, GET, or HEAD (default: POST)`}
example="POST"
/>
</div>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
<Trans>After setting the environment variables, restart your Beszel hub for changes to take effect.</Trans>
</p>
</div>
<NotEnabledState isLoading={isLoading} />
)}
</div>
)
}
function EnabledState({
status,
isTesting,
sendTestHeartbeat,
}: {
status: HeartbeatStatus
isTesting: boolean
sendTestHeartbeat: () => void
}) {
const TestIcon = isTesting ? LoaderCircleIcon : SendIcon
return (
<div className="space-y-5">
<div className="flex items-center gap-2">
<Badge variant="success">
<Trans>Active</Trans>
</Badge>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<ConfigItem label={t`Endpoint URL`} value={status.url ?? ""} mono />
<ConfigItem label={t`Interval`} value={`${status.interval}s`} />
<ConfigItem label={t`HTTP Method`} value={status.method ?? "POST"} />
</div>
<Separator />
<div>
<h4 className="text-base font-medium mb-1">
<Trans>Test heartbeat</Trans>
</h4>
<p className="text-sm text-muted-foreground leading-relaxed mb-3">
<Trans>Send a single heartbeat ping to verify your endpoint is working.</Trans>
</p>
<Button
type="button"
variant="outline"
className="flex items-center gap-1.5"
onClick={sendTestHeartbeat}
disabled={isTesting}
>
<TestIcon className={cn("size-4", isTesting && "animate-spin")} />
<Trans>Send test heartbeat</Trans>
</Button>
</div>
<Separator />
<div>
<h4 className="text-base font-medium mb-2">
<Trans>Payload format</Trans>
</h4>
<p className="text-sm text-muted-foreground leading-relaxed mb-2">
<Trans>
When using POST, each heartbeat includes a JSON payload with system status summary, list of down systems,
and triggered alerts.
</Trans>
</p>
<p className="text-sm text-muted-foreground leading-relaxed">
<Trans>
The overall status is <code className="bg-muted rounded-sm px-1 text-primary">ok</code> when all systems are
up, <code className="bg-muted rounded-sm px-1 text-primary">warn</code> when alerts are triggered, and{" "}
<code className="bg-muted rounded-sm px-1 text-primary">error</code> when any system is down.
</Trans>
</p>
</div>
</div>
)
}
function NotEnabledState({ isLoading }: { isLoading?: boolean }) {
return (
<div className={cn("grid gap-4", isLoading && "animate-pulse")}>
<div>
<p className="text-sm text-muted-foreground leading-relaxed mb-3">
<Trans>Set the following environment variables on your Beszel hub to enable heartbeat monitoring:</Trans>
</p>
<div className="grid gap-2.5">
<EnvVarItem
name="HEARTBEAT_URL"
description={t`Endpoint URL to ping (required)`}
example="https://uptime.betterstack.com/api/v1/heartbeat/xxxx"
/>
<EnvVarItem name="HEARTBEAT_INTERVAL" description={t`Seconds between pings (default: 60)`} example="60" />
<EnvVarItem
name="HEARTBEAT_METHOD"
description={t`HTTP method: POST, GET, or HEAD (default: POST)`}
example="POST"
/>
</div>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
<Trans>After setting the environment variables, restart your Beszel hub for changes to take effect.</Trans>
</p>
</div>
)
}
function ConfigItem({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
return (
<div>
<p className="text-sm font-medium mb-0.5">{label}</p>
<p className={clsx("text-sm text-muted-foreground break-all", mono && "font-mono")}>{value}</p>
<p className={cn("text-sm text-muted-foreground break-all", mono && "font-mono")}>{value}</p>
</div>
)
}
function EnvVarItem({ name, description, example }: { name: string; description: string; example: string }) {
return (
<div className="bg-muted/50 rounded-md px-3 py-2 grid gap-1.5">
<div className="bg-muted/50 rounded-md px-3 py-2.5 grid gap-1.5">
<code className="text-sm font-mono text-primary font-medium leading-tight">{name}</code>
<p className="text-sm text-muted-foreground">{description}</p>
<p className="text-xs text-muted-foreground">

1
internal/site/src/locales/ar/ar.po
View File

@@ -937,7 +937,6 @@ msgstr "متوسط التحميل"
msgid "Load state"
msgstr "حالة التحميل"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "جاري التحميل..."

1
internal/site/src/locales/bg/bg.po
View File

@@ -937,7 +937,6 @@ msgstr "Средно натоварване"
msgid "Load state"
msgstr "Състояние на зареждане"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Зареждане..."

1
internal/site/src/locales/cs/cs.po
View File

@@ -937,7 +937,6 @@ msgstr "Prům. zatížení"
msgid "Load state"
msgstr "Stav načtení"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Načítání..."

1
internal/site/src/locales/da/da.po
View File

@@ -937,7 +937,6 @@ msgstr "Belastning gns."
msgid "Load state"
msgstr "Indlæsningstilstand"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Indlæser..."

1
internal/site/src/locales/de/de.po
View File

@@ -937,7 +937,6 @@ msgstr "Systemlast"
msgid "Load state"
msgstr "Ladezustand"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Lädt..."

1
internal/site/src/locales/en/en.po
View File

@@ -932,7 +932,6 @@ msgstr "Load Avg"
msgid "Load state"
msgstr "Load state"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Loading..."

1
internal/site/src/locales/es/es.po
View File

@@ -937,7 +937,6 @@ msgstr "Carga media"
msgid "Load state"
msgstr "Estado de carga"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Cargando..."

1
internal/site/src/locales/fa/fa.po
View File

@@ -937,7 +937,6 @@ msgstr "میانگین بار"
msgid "Load state"
msgstr "وضعیت بارگذاری"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "در حال بارگذاری..."

1
internal/site/src/locales/fr/fr.po
View File

@@ -937,7 +937,6 @@ msgstr "Charge moy."
msgid "Load state"
msgstr "État de charge"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Chargement..."

1
internal/site/src/locales/he/he.po
View File

@@ -937,7 +937,6 @@ msgstr "ממוצע עומס"
msgid "Load state"
msgstr "מצב עומס"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "טוען..."

1
internal/site/src/locales/hr/hr.po
View File

@@ -937,7 +937,6 @@ msgstr "Prosječno Opterećenje"
msgid "Load state"
msgstr "Stanje učitavanja"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Učitavanje..."

1
internal/site/src/locales/hu/hu.po
View File

@@ -937,7 +937,6 @@ msgstr "Terhelési átlag"
msgid "Load state"
msgstr "Betöltési állapot"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Betöltés..."

1
internal/site/src/locales/id/id.po
View File

@@ -937,7 +937,6 @@ msgstr "Rata-rata Beban"
msgid "Load state"
msgstr "Beban saat ini"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Memuat..."

1
internal/site/src/locales/it/it.po
View File

@@ -937,7 +937,6 @@ msgstr "Carico Medio"
msgid "Load state"
msgstr "Stato di caricamento"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Caricamento..."

1
internal/site/src/locales/ja/ja.po
View File

@@ -937,7 +937,6 @@ msgstr "負荷平均"
msgid "Load state"
msgstr "ロード状態"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "読み込み中..."

1
internal/site/src/locales/ko/ko.po
View File

@@ -937,7 +937,6 @@ msgstr "부하 평균"
msgid "Load state"
msgstr "로드 상태"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "로딩 중..."

1
internal/site/src/locales/nl/nl.po
View File

@@ -937,7 +937,6 @@ msgstr "Gem. Belasting"
msgid "Load state"
msgstr "Laadstatus"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Laden..."

1
internal/site/src/locales/no/no.po
View File

@@ -937,7 +937,6 @@ msgstr "Snittbelastning"
msgid "Load state"
msgstr "Lastetilstand"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Laster..."

1
internal/site/src/locales/pl/pl.po
View File

@@ -937,7 +937,6 @@ msgstr "Śr. obciążenie"
msgid "Load state"
msgstr "Stan obciążenia"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Ładowanie..."

1
internal/site/src/locales/pt/pt.po
View File

@@ -937,7 +937,6 @@ msgstr "Carga Média"
msgid "Load state"
msgstr "Estado de carga"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Carregando..."

1
internal/site/src/locales/ru/ru.po
View File

@@ -937,7 +937,6 @@ msgstr "Ср. загрузка"
msgid "Load state"
msgstr "Состояние загрузки"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Загрузка..."

1
internal/site/src/locales/sl/sl.po
View File

@@ -937,7 +937,6 @@ msgstr "Povpr. obrem."
msgid "Load state"
msgstr "Stanje nalaganja"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Nalaganje..."

1
internal/site/src/locales/sr/sr.po
View File

@@ -937,7 +937,6 @@ msgstr "Просечно опт."
msgid "Load state"
msgstr "Стање учитавања"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Учитавање..."

1
internal/site/src/locales/sv/sv.po
View File

@@ -937,7 +937,6 @@ msgstr "Belastning"
msgid "Load state"
msgstr "Laddningstillstånd"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Laddar..."

1
internal/site/src/locales/tr/tr.po
View File

@@ -937,7 +937,6 @@ msgstr "Yük Ort."
msgid "Load state"
msgstr "Yükleme durumu"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Yükleniyor..."

1
internal/site/src/locales/uk/uk.po
View File

@@ -937,7 +937,6 @@ msgstr "Сер. навантаження"
msgid "Load state"
msgstr "Стан завантаження"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Завантаження..."

1
internal/site/src/locales/vi/vi.po
View File

@@ -937,7 +937,6 @@ msgstr "Tải TB"
msgid "Load state"
msgstr "Trạng thái tải"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "Đang tải..."

1
internal/site/src/locales/zh-CN/zh-CN.po
View File

@@ -937,7 +937,6 @@ msgstr "负载"
msgid "Load state"
msgstr "加载状态"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "加载中..."

1
internal/site/src/locales/zh-HK/zh-HK.po
View File

@@ -937,7 +937,6 @@ msgstr "平均負載"
msgid "Load state"
msgstr "載入狀態"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "載入中..."

1
internal/site/src/locales/zh/zh.po
View File

@@ -937,7 +937,6 @@ msgstr "平均負載"
msgid "Load state"
msgstr "載入狀態"
#: src/components/routes/settings/heartbeat.tsx
#: src/components/systemd-table/systemd-table.tsx
msgid "Loading..."
msgstr "載入中..."