From 0f5b1b5157dd73a719a2a20d331638eede2a74d9 Mon Sep 17 00:00:00 2001 From: henrygd Date: Sat, 23 Aug 2025 20:35:18 -0400 Subject: [PATCH] refactor: replace status strings with systemstatus enum - also small style changes after tailwind update --- beszel/site/src/components/add-system.tsx | 3 +- beszel/site/src/components/routes/system.tsx | 16 ++++---- .../systems-table/systems-table-columns.tsx | 40 +++++++++---------- .../systems-table/systems-table.tsx | 5 ++- .../site/src/components/ui/dropdown-menu.tsx | 6 +-- beszel/site/src/index.css | 39 ++---------------- beszel/site/src/lib/enums.ts | 8 ++++ beszel/site/src/main.tsx | 5 ++- 8 files changed, 50 insertions(+), 72 deletions(-) diff --git a/beszel/site/src/components/add-system.tsx b/beszel/site/src/components/add-system.tsx index c90ea62..b836442 100644 --- a/beszel/site/src/components/add-system.tsx +++ b/beszel/site/src/components/add-system.tsx @@ -20,6 +20,7 @@ import { ChevronDownIcon, ExternalLinkIcon, PlusIcon } from "lucide-react" import { memo, useEffect, useRef, useState } from "react" import { $router, basePath, Link, navigate } from "./router" import { SystemRecord } from "@/types" +import { SystemStatus } from "@/lib/enums" import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "./ui/icons" import { InputCopy } from "./ui/input-copy" import { getPagePath } from "@nanostores/router" @@ -105,7 +106,7 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) => try { setOpen(false) if (system) { - await pb.collection("systems").update(system.id, { ...data, status: "pending" }) + await pb.collection("systems").update(system.id, { ...data, status: SystemStatus.Pending }) } else { const createdSystem = await pb.collection("systems").create(data) await pb.collection("fingerprints").create({ diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index 39c9969..d3635fe 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -11,7 +11,7 @@ import { $temperatureFilter, } from "@/lib/stores" import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types" -import { ChartType, Unit, Os } from "@/lib/enums" +import { ChartType, Unit, Os, SystemStatus } from "@/lib/enums" import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react" import { Card, CardHeader, CardTitle, CardDescription } from "../ui/card" import { useStore } from "@nanostores/react" @@ -382,9 +382,9 @@ export default function SystemDetail({ name }: { name: string }) { const hasGpuPowerData = lastGpuVals.some((gpu) => gpu.p !== undefined) let translatedStatus: string = system.status - if (system.status === "up") { + if (system.status === SystemStatus.Up) { translatedStatus = t({ message: "Up", comment: "Context: System is up" }) - } else if (system.status === "down") { + } else if (system.status === SystemStatus.Down) { translatedStatus = t({ message: "Down", comment: "Context: System is down" }) } @@ -399,7 +399,7 @@ export default function SystemDetail({ name }: { name: string }) {
- {system.status === "up" && ( + {system.status === SystemStatus.Up && ( diff --git a/beszel/site/src/components/systems-table/systems-table-columns.tsx b/beszel/site/src/components/systems-table/systems-table-columns.tsx index 3dfdb29..3b554c8 100644 --- a/beszel/site/src/components/systems-table/systems-table-columns.tsx +++ b/beszel/site/src/components/systems-table/systems-table-columns.tsx @@ -54,15 +54,15 @@ import { } from "../ui/alert-dialog" import { buttonVariants } from "../ui/button" import { t } from "@lingui/core/macro" -import { MeterState } from "@/lib/enums" +import { MeterState, SystemStatus } from "@/lib/enums" import { $router, Link } from "../router" import { getPagePath } from "@nanostores/router" const STATUS_COLORS = { - up: "bg-green-500", - down: "bg-red-500", - paused: "bg-primary/40", - pending: "bg-yellow-500", + [SystemStatus.Up]: "bg-green-500", + [SystemStatus.Down]: "bg-red-500", + [SystemStatus.Paused]: "bg-primary/40", + [SystemStatus.Pending]: "bg-yellow-500", } as const /** @@ -82,9 +82,9 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD let filterInputLower = "" const nameCache = new Map() const statusTranslations = { - up: t`Up`.toLowerCase(), - down: t`Down`.toLowerCase(), - paused: t`Paused`.toLowerCase(), + [SystemStatus.Up]: t`Up`.toLowerCase(), + [SystemStatus.Down]: t`Down`.toLowerCase(), + [SystemStatus.Paused]: t`Paused`.toLowerCase(), } as const // match filter value against name or translated status @@ -186,7 +186,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD } const max = Math.max(...loadAverages) - if (max === 0 && (status === "paused" || minor < 12)) { + if (max === 0 && (status === SystemStatus.Paused || minor < 12)) { return null } @@ -197,10 +197,10 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
{loadAverages?.map((la, i) => ( @@ -220,7 +220,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD cell(info) { const sys = info.row.original const userSettings = useStore($userSettings, { keys: ["unitNet"] }) - if (sys.status === "paused") { + if (sys.status === SystemStatus.Paused) { return null } const { value, unit } = formatBytes(info.getValue() as number, true, userSettings.unitNet, false) @@ -273,9 +273,9 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD {info.getValue() as string} @@ -325,7 +325,7 @@ function TableCellWithMeter(info: CellContext) { { className={cn(isReadOnlyUser() && "hidden")} onClick={() => { pb.collection("systems").update(id, { - status: status === "paused" ? "pending" : "paused", + status: status === SystemStatus.Paused ? SystemStatus.Pending : SystemStatus.Paused, }) }} > - {status === "paused" ? ( + {status === SystemStatus.Paused ? ( <> Resume diff --git a/beszel/site/src/components/systems-table/systems-table.tsx b/beszel/site/src/components/systems-table/systems-table.tsx index 0f135fb..bebca9b 100644 --- a/beszel/site/src/components/systems-table/systems-table.tsx +++ b/beszel/site/src/components/systems-table/systems-table.tsx @@ -48,6 +48,7 @@ import { Input } from "../ui/input" import { getPagePath } from "@nanostores/router" import SystemsTableColumns, { ActionsButton, IndicatorDot } from "./systems-table-columns" import AlertButton from "../alerts/alert-button" +import { SystemStatus } from "@/lib/enums" type ViewMode = "table" | "grid" @@ -292,7 +293,7 @@ const SystemTableRow = memo( {row.getVisibleCells().map((cell) => ( @@ -324,7 +325,7 @@ const SystemCard = memo( className={cn( "cursor-pointer hover:shadow-md transition-all bg-transparent w-full dark:border-border duration-200 relative", { - "opacity-50": system.status === "paused", + "opacity-50": system.status === SystemStatus.Paused, } )} > diff --git a/beszel/site/src/components/ui/dropdown-menu.tsx b/beszel/site/src/components/ui/dropdown-menu.tsx index 7ab4a0e..cce0bbf 100644 --- a/beszel/site/src/components/ui/dropdown-menu.tsx +++ b/beszel/site/src/components/ui/dropdown-menu.tsx @@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef< import('./components/routes/system.tsx')) const LoginPage = lazy(() => import("./components/login/login.tsx")) @@ -50,10 +51,10 @@ const App = memo(() => { } else { let up = false for (const system of systems) { - if (system.status === "down") { + if (system.status === SystemStatus.Down) { updateFavicon("favicon-red.svg") return - } else if (system.status === "up") { + } else if (system.status === SystemStatus.Up) { up = true } }