Compare commits

...

4 Commits

Author SHA1 Message Date
henrygd
ac79860d4a dev: update biome schema and disable assist/source/organizeImports 2026-02-20 15:50:44 -05:00
henrygd
e13a99fdac ui: add fallback to display language code if no emoji / flag 2026-02-20 15:46:24 -05:00
henrygd
4cfb2a86ad 0.18.4 release 2026-02-20 15:00:15 -05:00
henrygd
191f25f6e0 ui: refactor heartbeat settings page 2026-02-20 14:48:59 -05:00
38 changed files with 140 additions and 134 deletions

View File

@@ -6,7 +6,7 @@ import "github.com/blang/semver"
const (
// Version is the current version of the application.
Version = "0.18.3"
Version = "0.18.4"
// AppName is the name of the application.
AppName = "beszel"
)

View File

@@ -1,5 +1,5 @@
{
"$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
@@ -12,7 +12,7 @@
"lineWidth": 120,
"formatWithErrors": true
},
"assist": { "actions": { "source": { "organizeImports": "on" } } },
"assist": { "actions": { "source": { "organizeImports": "off" } } },
"linter": {
"enabled": true,
"rules": {

View File

@@ -1,7 +1,7 @@
{
"name": "beszel",
"private": true,
"version": "0.18.3",
"version": "0.18.4",
"type": "module",
"scripts": {
"dev": "vite --host",

View File

@@ -32,7 +32,10 @@ export function LangToggle() {
className={cn("px-2.5 flex gap-2.5 cursor-pointer", lang === i18n.locale && "bg-accent/70 font-medium")}
onClick={() => dynamicActivate(lang)}
>
<span>{e}</span> {label}
<span>
{e || <code className="font-mono bg-muted text-[.65em] w-5 h-4 grid place-items-center">{lang}</code>}
</span>{" "}
{label}
</DropdownMenuItem>
))}
</DropdownMenuContent>

View File

@@ -70,7 +70,16 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
<SelectContent>
{languages.map(([lang, label, e]) => (
<SelectItem key={lang} value={lang}>
<span className="me-2.5">{e}</span>
<span className="me-2.5">
{e || (
<code
aria-hidden="true"
className="font-mono bg-muted text-[.65em] w-5 h-4 inline-grid place-items-center"
>
{lang}
</code>
)}
</span>
{label}
</SelectItem>
))}

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">

View File

@@ -8,7 +8,7 @@ export default [
["es", "Español", "🇪🇸"],
["fa", "فارسی", "🇮🇷"],
["fr", "Français", "🇫🇷"],
["he", "עברית", "🕎"],
["he", "עברית", ""],
["hr", "Hrvatski", "🇭🇷"],
["hu", "Magyar", "🇭🇺"],
["id", "Indonesia", "🇮🇩"],

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 "جاري التحميل..."

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 "Зареждане..."

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í..."

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..."

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..."

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..."

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..."

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 "در حال بارگذاری..."

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..."

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 "טוען..."

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..."

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..."

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..."

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..."

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 "読み込み中..."

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 "로딩 중..."

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..."

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..."

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..."

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..."

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 "Загрузка..."

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..."

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 "Учитавање..."

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..."

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..."

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 "Завантаження..."

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..."

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 "加载中..."

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 "載入中..."

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 "載入中..."

View File

@@ -1,10 +1,10 @@
## Unreleased
## 0.18.4
- Add outbound heartbeat monitoring to external services (BetterStack, Uptime Kuma, Healthchecks.io, etc.) with system status summary payload. Configured via `BESZEL_HUB_HEARTBEAT_URL`, `BESZEL_HUB_HEARTBEAT_INTERVAL`, and `BESZEL_HUB_HEARTBEAT_METHOD` environment variables.
- Add outbound heartbeat monitoring to external services (#1729)
- Add GPU monitoring for Apple Silicon. (#1747, #1746)
- Add experimental GPU monitoring for Apple Silicon. (#1747, #1746)
- Add `nvtop` integration for expanded GPU compatibility.
- Add `nvtop` integration for GPU monitoring. (#1508)
- Add `GPU_COLLECTOR` environment variable to manually specify the GPU collector(s).
@@ -16,11 +16,21 @@
- Add `fingerprint` command to the agent. (#1726)
- Add precise value entry for alerts via text input. (#1718)
- Include GTT memory in AMD GPU metrics and improve device name lookup. (#1569)
- Improve multiplexed logs detection for Podman. (#1755)
- Harden against Docker API path traversal.
- Fix issue where the agent could report incorrect root disk I/O when running in Docker. (#1737)
- Update Go to 1.26.
- Retry Docker check on non-200 HTTP response. (#1754)
- Fix race issue with meter threshold colors.
- Update Go version and dependencies.
- Add `InstallMethod` parameter to Windows install script.