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

tweaks to custom meter percentages

Browse Source
This commit is contained in:
henrygd
2025-08-02 20:53:49 -04:00
parent df9e2dec28
commit 5f7950b474
7 changed files with 65 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,29 +12,17 @@ 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)
}
@@ -114,45 +102,6 @@ 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">
@@ -232,6 +181,47 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
</div>
</div>
<Separator />
<div className="space-y-2">
<div className="mb-4">
<h3 className="mb-1 text-lg font-medium">
<Trans>Warning thresholds</Trans>
</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
<Trans>Set percentage thresholds for meter colors.</Trans>
</p>
</div>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4 items-end">
<div className="space-y-1">
<Label htmlFor="colorWarn">
<Trans>Warning (%)</Trans>
</Label>
<Input
id="colorWarn"
name="colorWarn"
type="number"
min={1}
max={100}
className="min-w-24"
defaultValue={userSettings.colorWarn ?? 65}
/>
</div>
<div className="space-y-1">
<Label htmlFor="colorCrit">
<Trans>Critical (%)</Trans>
</Label>
<Input
id="colorCrit"
name="colorCrit"
type="number"
min={1}
max={100}
className="min-w-24"
defaultValue={userSettings.colorCrit ?? 90}
/>
</div>
</div>
</div>
<Separator />
<Button type="submit" className="flex items-center gap-1.5 disabled:opacity-100" disabled={isLoading}>
{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
<Trans>Save Settings</Trans>

2
beszel/site/src/components/routes/settings/layout.tsx
View File

@@ -10,7 +10,7 @@ import { getPagePath, redirectPage } from "@nanostores/router"
import { BellIcon, FileSlidersIcon, FingerprintIcon, SettingsIcon, AlertOctagonIcon } from "lucide-react"
import { $userSettings, pb } from "@/lib/stores.ts"
import { toast } from "@/components/ui/use-toast.ts"
import { UserSettings } from "@/types.js"
import { UserSettings } from "@/types"
import General from "./general.tsx"
import Notifications from "./notifications.tsx"
import ConfigYaml from "./config-yaml.tsx"