tweaks to custom meter percentages

beszel/site/src/components/routes/settings/general.tsx

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

beszel/site/src/components/routes/settings/layout.tsx

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

beszel/site/src/components/systems-table/systems-table-columns.tsx

@@ -279,8 +279,11 @@ function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
 		</Button>
 	)
 }
+
 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
+	const userSettings = useStore($userSettings)
 	const val = Number(info.getValue()) || 0
+	const { colorWarn = 65, colorCrit = 90 } = userSettings
 	return (
 		<div className="flex gap-2 items-center tabular-nums tracking-tight">
 			<span className="min-w-8">{decimalString(val, val >= 10 ? 1 : 2)}%</span>
@@ -289,8 +292,8 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 					className={cn(
 						"absolute inset-0 w-full h-full origin-left",
 						(info.row.original.status !== "up" && "bg-primary/30") ||
-							(val < 65 && "bg-green-500") ||
-							(val < 90 && "bg-yellow-500") ||
+							(val < colorWarn && "bg-green-500") ||
+							(val < colorCrit && "bg-yellow-500") ||
 							"bg-red-600"
 					)}
 					style={{

beszel/site/src/components/systems-table/systems-table.tsx

@@ -51,49 +51,6 @@ import AlertButton from "../alerts/alert-button"
 
 type ViewMode = "table" | "grid"
 
-function CellFormatter(info: CellContext<SystemRecord, unknown>) {
-	const val = (info.getValue() as number) || 0
-	const userSettings = useStore($userSettings)
-	const yellow = userSettings?.meterThresholds?.yellow ?? 65
-	const red = userSettings?.meterThresholds?.red ?? 90
-	return (
-		<div className="flex gap-2 items-center tabular-nums tracking-tight">
-			<span className="min-w-8">{decimalString(val, 1)}%</span>
-			<span className="grow min-w-8 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
-				<span
-					className={cn(
-						"absolute inset-0 w-full h-full origin-left",
-						(info.row.original.status !== "up" && "bg-primary/30") ||
-						(val < yellow! && "bg-green-500") ||
-						(val < red! && "bg-yellow-500") ||
-						"bg-red-600"
-					)}
-					style={{
-						transform: `scalex(${val / 100})`,
-					}}
-				></span>
-			</span>
-		</div>
-	)
-}
-
-function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
-	const { column } = context
-	// @ts-ignore
-	const { Icon, hideSort, name }: { Icon: React.ElementType; name: () => string; hideSort: boolean } = column.columnDef
-	return (
-		<Button
-			variant="ghost"
-			className="h-9 px-3 flex"
-			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-		>
-			{Icon && <Icon className="me-2 size-4" />}
-			{name()}
-			{hideSort || <ArrowUpDownIcon className="ms-2 size-4" />}
-		</Button>
-	)
-}
-
 export default function SystemsTable() {
 	const data = useStore($systems)
 	const { i18n, t } = useLingui()