feat: allow x min downtime before alerting (#595, #625)

- splits alerts package into three files. status alerts were not
modified aside from updating to slices.Delete method

beszel/site/src/components/alerts/alerts-system.tsx

@@ -160,13 +160,11 @@ export function SystemAlertGlobal({
 function AlertContent({ data }: { data: AlertData }) {
 	const { key } = data
 
-	const hasSliders = !("single" in data.alert)
+	const singleDescription = data.alert.singleDesc?.()
 
 	const [checked, setChecked] = useState(data.checked || false)
-	const [min, setMin] = useState(data.min || (hasSliders ? 10 : 0))
-	const [value, setValue] = useState(data.val || (hasSliders ? 80 : 0))
-
-	const showSliders = checked && hasSliders
+	const [min, setMin] = useState(data.min || 10)
+	const [value, setValue] = useState(data.val || (singleDescription ? 0 : 80))
 
 	const newMin = useRef(min)
 	const newValue = useRef(value)
@@ -180,14 +178,14 @@ function AlertContent({ data }: { data: AlertData }) {
 			<label
 				htmlFor={`s${key}`}
 				className={cn("flex flex-row items-center justify-between gap-4 cursor-pointer p-4", {
-					"pb-0": showSliders,
+					"pb-0": checked,
 				})}
 			>
 				<div className="grid gap-1 select-none">
 					<p className="font-semibold flex gap-3 items-center">
 						<Icon className="h-4 w-4 opacity-85" /> {data.alert.name()}
 					</p>
-					{!showSliders && <span className="block text-sm text-muted-foreground">{data.alert.desc()}</span>}
+					{!checked && <span className="block text-sm text-muted-foreground">{data.alert.desc()}</span>}
 				</div>
 				<Switch
 					id={`s${key}`}
@@ -198,9 +196,10 @@ function AlertContent({ data }: { data: AlertData }) {
 					}}
 				/>
 			</label>
-			{showSliders && (
+			{checked && (
 				<div className="grid sm:grid-cols-2 mt-1.5 gap-5 px-4 pb-5 tabular-nums text-muted-foreground">
 					<Suspense fallback={<div className="h-10" />}>
+					{!singleDescription && (
 						<div>
 							<p id={`v${key}`} className="text-sm block h-8">
 								<Trans>
@@ -222,8 +221,12 @@ function AlertContent({ data }: { data: AlertData }) {
 								/>
 							</div>
 						</div>
-						<div>
-							<p id={`t${key}`} className="text-sm block h-8">
+					)}
+						<div className={cn(singleDescription && "col-span-full lowercase")}>
+							<p id={`t${key}`} className="text-sm block h-8 first-letter:uppercase">
+								{singleDescription && (
+									<>{singleDescription}{` `}</>
+								)}
 								<Trans>
 									For <strong className="text-foreground">{min}</strong>{" "}
 									<Plural value={min} one=" minute" other=" minutes" />

beszel/site/src/components/routes/system.tsx

@@ -302,6 +302,13 @@ export default function SystemDetail({ name }: { name: string }) {
 	const hasGpuData = lastGpuVals.length > 0
 	const hasGpuPowerData = lastGpuVals.some((gpu) => gpu.p !== undefined)
 
+	let translatedStatus: string = system.status
+	if (system.status === "up") {
+		translatedStatus = t({ message: "Up", comment: "Context: System is up" })
+	} else if (system.status === "down") {
+		translatedStatus = t({ message: "Down", comment: "Context: System is down" })
+	}
+
 	return (
 		<>
 			<div id="chartwrap" className="grid gap-4 mb-10 overflow-x-clip">
@@ -328,7 +335,7 @@ export default function SystemDetail({ name }: { name: string }) {
 											})}
 										></span>
 									</span>
-									{system.status}
+									{translatedStatus}
 								</div>
 								{systemInfo.map(({ value, label, Icon, hide }, i) => {
 									if (hide || !value) {

beszel/site/src/lib/utils.ts

@@ -302,7 +302,8 @@ export const alertInfo: Record<string, AlertInfo> = {
 		unit: "",
 		icon: ServerIcon,
 		desc: () => t`Triggers when status switches between up and down`,
-		single: true,
+		/** "for x minutes" is appended to desc when only one value */
+		singleDesc: () => t`System` + " " + t`Down`,
 	},
 	CPU: {
 		name: () => t`CPU Usage`,

beszel/site/src/types.d.ts

@@ -200,6 +200,7 @@ interface AlertInfo {
 	unit: string
 	icon: any
 	desc: () => string
-	single?: boolean
 	max?: number
+	/** Single value description (when there's only one value, like status) */
+	singleDesc?: () => string
 }