From 3dbcb5d7daef0fd0487e5646c7cabf2e2facec82 Mon Sep 17 00:00:00 2001
From: Augustin ROLET <augustin.rolet.pro@gmail.com>
Date: Mon, 1 Sep 2025 00:16:25 +0200
Subject: [PATCH] Minor UI changes (#1110)

* ui: add devices count from #1078

* ux: save sortMode in localStorage from #1024

* fix: reload component when system switch to "up"

* ux: move running systems to desc field
---
 beszel/site/package.json                      |  2 +-
 .../systems-table/systems-table.tsx           | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/beszel/site/package.json b/beszel/site/package.json
index 2f799dc..b6c08b0 100644
--- a/beszel/site/package.json
+++ b/beszel/site/package.json
@@ -4,7 +4,7 @@
 	"version": "0.12.6",
 	"type": "module",
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --host",
 		"build": "lingui extract --overwrite && lingui compile && vite build",
 		"preview": "vite preview",
 		"sync": "lingui extract --overwrite && lingui compile",
diff --git a/beszel/site/src/components/systems-table/systems-table.tsx b/beszel/site/src/components/systems-table/systems-table.tsx
index d6c260b..f897cab 100644
--- a/beszel/site/src/components/systems-table/systems-table.tsx
+++ b/beszel/site/src/components/systems-table/systems-table.tsx
@@ -59,7 +59,7 @@ export default function SystemsTable() {
 	const { i18n, t } = useLingui()
 	const [filter, setFilter] = useState<string>()
 	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
-	const [sorting, setSorting] = useState<SortingState>([{ id: "system", desc: false }])
+	const [sorting, setSorting] = useLocalStorage<SortingState>("sortMode",[{ id: "system", desc: false }])
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
 	const [viewMode, setViewMode] = useLocalStorage<ViewMode>(
@@ -78,6 +78,14 @@ export default function SystemsTable() {
 		return data.filter((system) => system.status === statusFilter)
 	}, [data, statusFilter])
 
+	const runningRecords = useMemo(() => {
+		return data.filter((record) => record.status === "up").length
+	}, [data])
+
+	const totalRecords = useMemo(() => {
+		return data.length
+	}, [data])
+
 	useEffect(() => {
 		if (filter !== undefined) {
 			table.getColumn("system")?.setFilterValue(filter)
@@ -121,9 +129,10 @@ export default function SystemsTable() {
 					<div className="px-2 sm:px-1">
 						<CardTitle className="mb-2.5">
 							<Trans>All Systems</Trans>
-						</CardTitle>
-						<CardDescription>
-							<Trans>Updated in real time. Click on a system to view information.</Trans>
+							</CardTitle>
+						<CardDescription className="flex">
+							<Trans>Click on a system to view information - {runningRecords} / {totalRecords}</Trans>
+							<p className={"ml-2 text-" + (runningRecords === totalRecords ? "emerald" : "red") + "-600"}>Online</p>
 						</CardDescription>
 					</div>
 
@@ -252,7 +261,7 @@ export default function SystemsTable() {
 				</div>
 			</CardHeader>
 		)
-	}, [visibleColumns.length, sorting, viewMode, locale, statusFilter])
+	}, [visibleColumns.length, sorting, viewMode, locale, statusFilter, runningRecords, totalRecords])
 
 	return (
 		<Card>