From 191f25f6e030ec50e428a7496414937b66fb856d Mon Sep 17 00:00:00 2001 From: henrygd Date: Fri, 20 Feb 2026 14:42:41 -0500 Subject: [PATCH] ui: refactor heartbeat settings page --- .../components/routes/settings/heartbeat.tsx | 198 ++++++++++-------- internal/site/src/locales/ar/ar.po | 1 - internal/site/src/locales/bg/bg.po | 1 - internal/site/src/locales/cs/cs.po | 1 - internal/site/src/locales/da/da.po | 1 - internal/site/src/locales/de/de.po | 1 - internal/site/src/locales/en/en.po | 1 - internal/site/src/locales/es/es.po | 1 - internal/site/src/locales/fa/fa.po | 1 - internal/site/src/locales/fr/fr.po | 1 - internal/site/src/locales/he/he.po | 1 - internal/site/src/locales/hr/hr.po | 1 - internal/site/src/locales/hu/hu.po | 1 - internal/site/src/locales/id/id.po | 1 - internal/site/src/locales/it/it.po | 1 - internal/site/src/locales/ja/ja.po | 1 - internal/site/src/locales/ko/ko.po | 1 - internal/site/src/locales/nl/nl.po | 1 - internal/site/src/locales/no/no.po | 1 - internal/site/src/locales/pl/pl.po | 1 - internal/site/src/locales/pt/pt.po | 1 - internal/site/src/locales/ru/ru.po | 1 - internal/site/src/locales/sl/sl.po | 1 - internal/site/src/locales/sr/sr.po | 1 - internal/site/src/locales/sv/sv.po | 1 - internal/site/src/locales/tr/tr.po | 1 - internal/site/src/locales/uk/uk.po | 1 - internal/site/src/locales/vi/vi.po | 1 - internal/site/src/locales/zh-CN/zh-CN.po | 1 - internal/site/src/locales/zh-HK/zh-HK.po | 1 - internal/site/src/locales/zh/zh.po | 1 - 31 files changed, 106 insertions(+), 122 deletions(-) diff --git a/internal/site/src/components/routes/settings/heartbeat.tsx b/internal/site/src/components/routes/settings/heartbeat.tsx index d012aab0..b12e2d37 100644 --- a/internal/site/src/components/routes/settings/heartbeat.tsx +++ b/internal/site/src/components/routes/settings/heartbeat.tsx @@ -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("/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 (
@@ -94,107 +92,123 @@ export default function HeartbeatSettings() {
- {isLoading ? ( -
- - Loading... -
- ) : status?.enabled ? ( -
-
- - Active - -
-
- - - -
- - - -
-

- Test heartbeat -

-

- Send a single heartbeat ping to verify your endpoint is working. -

- -
- - - -
-

- Payload format -

-

- - When using POST, each heartbeat includes a JSON payload with system status summary, list of down - systems, and triggered alerts. - -

-

- - The overall status is ok when all systems - are up, warn when alerts are triggered, - and error when any system is down. - -

-
-
+ {status?.enabled ? ( + ) : ( -
-
-

- Set the following environment variables on your Beszel hub to enable heartbeat monitoring: -

-
- - - -
-
-

- After setting the environment variables, restart your Beszel hub for changes to take effect. -

-
+ )}
) } +function EnabledState({ + status, + isTesting, + sendTestHeartbeat, +}: { + status: HeartbeatStatus + isTesting: boolean + sendTestHeartbeat: () => void +}) { + const TestIcon = isTesting ? LoaderCircleIcon : SendIcon + return ( +
+
+ + Active + +
+
+ + + +
+ + + +
+

+ Test heartbeat +

+

+ Send a single heartbeat ping to verify your endpoint is working. +

+ +
+ + + +
+

+ Payload format +

+

+ + When using POST, each heartbeat includes a JSON payload with system status summary, list of down systems, + and triggered alerts. + +

+

+ + The overall status is ok when all systems are + up, warn when alerts are triggered, and{" "} + error when any system is down. + +

+
+
+ ) +} + +function NotEnabledState({ isLoading }: { isLoading?: boolean }) { + return ( +
+
+

+ Set the following environment variables on your Beszel hub to enable heartbeat monitoring: +

+
+ + + +
+
+

+ After setting the environment variables, restart your Beszel hub for changes to take effect. +

+
+ ) +} + function ConfigItem({ label, value, mono }: { label: string; value: string; mono?: boolean }) { return (

{label}

-

{value}

+

{value}

) } function EnvVarItem({ name, description, example }: { name: string; description: string; example: string }) { return ( -
+
{name}

{description}

diff --git a/internal/site/src/locales/ar/ar.po b/internal/site/src/locales/ar/ar.po index 4b179165..775077e8 100644 --- a/internal/site/src/locales/ar/ar.po +++ b/internal/site/src/locales/ar/ar.po @@ -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 "جاري التحميل..." diff --git a/internal/site/src/locales/bg/bg.po b/internal/site/src/locales/bg/bg.po index 467bcc1f..5c6deb21 100644 --- a/internal/site/src/locales/bg/bg.po +++ b/internal/site/src/locales/bg/bg.po @@ -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 "Зареждане..." diff --git a/internal/site/src/locales/cs/cs.po b/internal/site/src/locales/cs/cs.po index 7c4648fc..d503aa2a 100644 --- a/internal/site/src/locales/cs/cs.po +++ b/internal/site/src/locales/cs/cs.po @@ -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í..." diff --git a/internal/site/src/locales/da/da.po b/internal/site/src/locales/da/da.po index 6c1ee55f..a72935b6 100644 --- a/internal/site/src/locales/da/da.po +++ b/internal/site/src/locales/da/da.po @@ -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..." diff --git a/internal/site/src/locales/de/de.po b/internal/site/src/locales/de/de.po index 76371cc5..8d30c825 100644 --- a/internal/site/src/locales/de/de.po +++ b/internal/site/src/locales/de/de.po @@ -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..." diff --git a/internal/site/src/locales/en/en.po b/internal/site/src/locales/en/en.po index 554730b7..4f6b1cd2 100644 --- a/internal/site/src/locales/en/en.po +++ b/internal/site/src/locales/en/en.po @@ -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..." diff --git a/internal/site/src/locales/es/es.po b/internal/site/src/locales/es/es.po index ffbeee99..15cb7a1a 100644 --- a/internal/site/src/locales/es/es.po +++ b/internal/site/src/locales/es/es.po @@ -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..." diff --git a/internal/site/src/locales/fa/fa.po b/internal/site/src/locales/fa/fa.po index fa61432d..7584f771 100644 --- a/internal/site/src/locales/fa/fa.po +++ b/internal/site/src/locales/fa/fa.po @@ -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 "در حال بارگذاری..." diff --git a/internal/site/src/locales/fr/fr.po b/internal/site/src/locales/fr/fr.po index 1ed908af..9c60d6d0 100644 --- a/internal/site/src/locales/fr/fr.po +++ b/internal/site/src/locales/fr/fr.po @@ -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..." diff --git a/internal/site/src/locales/he/he.po b/internal/site/src/locales/he/he.po index dedb888b..d4159c34 100644 --- a/internal/site/src/locales/he/he.po +++ b/internal/site/src/locales/he/he.po @@ -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 "טוען..." diff --git a/internal/site/src/locales/hr/hr.po b/internal/site/src/locales/hr/hr.po index df6fe99c..d2d12d43 100644 --- a/internal/site/src/locales/hr/hr.po +++ b/internal/site/src/locales/hr/hr.po @@ -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..." diff --git a/internal/site/src/locales/hu/hu.po b/internal/site/src/locales/hu/hu.po index 791e3d72..b3cc5dbc 100644 --- a/internal/site/src/locales/hu/hu.po +++ b/internal/site/src/locales/hu/hu.po @@ -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..." diff --git a/internal/site/src/locales/id/id.po b/internal/site/src/locales/id/id.po index ba6865b2..e47fa940 100644 --- a/internal/site/src/locales/id/id.po +++ b/internal/site/src/locales/id/id.po @@ -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..." diff --git a/internal/site/src/locales/it/it.po b/internal/site/src/locales/it/it.po index bc4cb2f8..e3e9ae16 100644 --- a/internal/site/src/locales/it/it.po +++ b/internal/site/src/locales/it/it.po @@ -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..." diff --git a/internal/site/src/locales/ja/ja.po b/internal/site/src/locales/ja/ja.po index 85b025fb..b0f49ff4 100644 --- a/internal/site/src/locales/ja/ja.po +++ b/internal/site/src/locales/ja/ja.po @@ -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 "読み込み中..." diff --git a/internal/site/src/locales/ko/ko.po b/internal/site/src/locales/ko/ko.po index 49626b38..b13b1128 100644 --- a/internal/site/src/locales/ko/ko.po +++ b/internal/site/src/locales/ko/ko.po @@ -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 "로딩 중..." diff --git a/internal/site/src/locales/nl/nl.po b/internal/site/src/locales/nl/nl.po index bd3661f9..571d7ae7 100644 --- a/internal/site/src/locales/nl/nl.po +++ b/internal/site/src/locales/nl/nl.po @@ -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..." diff --git a/internal/site/src/locales/no/no.po b/internal/site/src/locales/no/no.po index 8c2d07c7..e5f40bb6 100644 --- a/internal/site/src/locales/no/no.po +++ b/internal/site/src/locales/no/no.po @@ -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..." diff --git a/internal/site/src/locales/pl/pl.po b/internal/site/src/locales/pl/pl.po index e2210a08..7c1f3af1 100644 --- a/internal/site/src/locales/pl/pl.po +++ b/internal/site/src/locales/pl/pl.po @@ -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..." diff --git a/internal/site/src/locales/pt/pt.po b/internal/site/src/locales/pt/pt.po index 8b72f27b..a9177130 100644 --- a/internal/site/src/locales/pt/pt.po +++ b/internal/site/src/locales/pt/pt.po @@ -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..." diff --git a/internal/site/src/locales/ru/ru.po b/internal/site/src/locales/ru/ru.po index 16cfa823..64ce0e72 100644 --- a/internal/site/src/locales/ru/ru.po +++ b/internal/site/src/locales/ru/ru.po @@ -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 "Загрузка..." diff --git a/internal/site/src/locales/sl/sl.po b/internal/site/src/locales/sl/sl.po index 68854d2e..df9ae657 100644 --- a/internal/site/src/locales/sl/sl.po +++ b/internal/site/src/locales/sl/sl.po @@ -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..." diff --git a/internal/site/src/locales/sr/sr.po b/internal/site/src/locales/sr/sr.po index be53726f..206c7cff 100644 --- a/internal/site/src/locales/sr/sr.po +++ b/internal/site/src/locales/sr/sr.po @@ -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 "Учитавање..." diff --git a/internal/site/src/locales/sv/sv.po b/internal/site/src/locales/sv/sv.po index 82f4a0ca..986ab230 100644 --- a/internal/site/src/locales/sv/sv.po +++ b/internal/site/src/locales/sv/sv.po @@ -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..." diff --git a/internal/site/src/locales/tr/tr.po b/internal/site/src/locales/tr/tr.po index 79a578b8..fbacdf27 100644 --- a/internal/site/src/locales/tr/tr.po +++ b/internal/site/src/locales/tr/tr.po @@ -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..." diff --git a/internal/site/src/locales/uk/uk.po b/internal/site/src/locales/uk/uk.po index 627d3324..fa55703a 100644 --- a/internal/site/src/locales/uk/uk.po +++ b/internal/site/src/locales/uk/uk.po @@ -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 "Завантаження..." diff --git a/internal/site/src/locales/vi/vi.po b/internal/site/src/locales/vi/vi.po index 83cf47a2..30ca3895 100644 --- a/internal/site/src/locales/vi/vi.po +++ b/internal/site/src/locales/vi/vi.po @@ -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..." diff --git a/internal/site/src/locales/zh-CN/zh-CN.po b/internal/site/src/locales/zh-CN/zh-CN.po index 931d8ac7..5538d525 100644 --- a/internal/site/src/locales/zh-CN/zh-CN.po +++ b/internal/site/src/locales/zh-CN/zh-CN.po @@ -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 "加载中..." diff --git a/internal/site/src/locales/zh-HK/zh-HK.po b/internal/site/src/locales/zh-HK/zh-HK.po index f0a59c7c..2bd17ef1 100644 --- a/internal/site/src/locales/zh-HK/zh-HK.po +++ b/internal/site/src/locales/zh-HK/zh-HK.po @@ -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 "載入中..." diff --git a/internal/site/src/locales/zh/zh.po b/internal/site/src/locales/zh/zh.po index d09da4d5..67210cf4 100644 --- a/internal/site/src/locales/zh/zh.po +++ b/internal/site/src/locales/zh/zh.po @@ -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 "載入中..."