jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 18:56:17 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

[Feature] Add custom meter percentages (#942)

Browse Source
This commit is contained in:
Sven van Ginkel
2025-08-02 23:58:52 +02:00
committed by GitHub
parent a0f271545a
commit df9e2dec28
4 changed files with 103 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
beszel/site/src/components/routes/settings/general.tsx
View File

@@ -11,17 +11,30 @@ import { useState } from "react"
import languages from "@/lib/languages"
import { dynamicActivate } from "@/lib/i18n"
import { useLingui } from "@lingui/react/macro"
import { Input } from "@/components/ui/input"
// import { setLang } from "@/lib/i18n"
import { Unit } from "@/lib/enums"
export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
const [isLoading, setIsLoading] = useState(false)
const { i18n } = useLingui()
// Remove all per-metric threshold state and UI
// Only keep general yellow/red threshold state and UI
const [yellow, setYellow] = useState(userSettings.meterThresholds?.yellow ?? 65)
const [red, setRed] = useState(userSettings.meterThresholds?.red ?? 90)
function handleResetThresholds() {
setYellow(65)
setRed(90)
}
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
setIsLoading(true)
const formData = new FormData(e.target as HTMLFormElement)
const data = Object.fromEntries(formData) as Partial<UserSettings>
data.meterThresholds = { yellow, red }
await saveSettings(data)
setIsLoading(false)
}
@@ -101,6 +114,45 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
</p>
</div>
<Separator />
<div className="space-y-2">
<div className="mb-4">
<h3 className="mb-1 text-lg font-medium">
<Trans>Dashboard meter thresholds</Trans>
</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
<Trans>Choose when the dashboard meters changes colors, based on percentage values.</Trans>
</p>
</div>
<div className="flex gap-4 items-end">
<div>
<Label htmlFor="yellow-threshold"><Trans>Warning threshold (%)</Trans></Label>
<Input
type="number"
id="yellow-threshold"
min={1}
max={100}
value={yellow}
onChange={e => setYellow(Number(e.target.value))}
/>
</div>
<div>
<Label htmlFor="red-threshold"><Trans>Danger threshold (%)</Trans></Label>
<Input
type="number"
id="red-threshold"
min={1}
max={100}
value={red}
onChange={e => setRed(Number(e.target.value))}
/>
</div>
<Button type="button" variant="outline" onClick={handleResetThresholds} disabled={isLoading} className="mt-4">
<Trans>Reset to default</Trans>
</Button>
</div>
</div>
<Separator />
{/* Unit preferences section fixed and wrapped in a div */}
<div className="space-y-2">
<div className="mb-4">
<h3 className="mb-1 text-lg font-medium">
@@ -133,7 +185,6 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="block" htmlFor="unitNet">
<Trans comment="Context: Bytes or bits">Network unit</Trans>
@@ -156,7 +207,6 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="block" htmlFor="unitDisk">
<Trans>Disk unit</Trans>