jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-09-25 19:07:47 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

feat(ui): simplify Services column in systems table (#2399)

Browse Source 
Co-authored-by: hank <hank@henrygd.me>
This commit is contained in:
Sven van Ginkel
2026-09-24 18:05:26 +02:00
committed by GitHub
parent e4b84b72ab
commit 0be9882b34
1 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
internal/site/src/components/systems-table/systems-table-columns.tsx
View File

@@ -1,5 +1,5 @@
/** biome-ignore-all lint/correctness/useHookAtTopLevel: Hooks live inside memoized column definitions */ /** biome-ignore-all lint/correctness/useHookAtTopLevel: Hooks live inside memoized column definitions */
import { t } from "@lingui/core/macro" import { plural, t } from "@lingui/core/macro"
import { Trans, useLingui } from "@lingui/react/macro" import { Trans, useLingui } from "@lingui/react/macro"
import { useStore } from "@nanostores/react" import { useStore } from "@nanostores/react"
import { getPagePath } from "@nanostores/router" import { getPagePath } from "@nanostores/router"
@@ -345,11 +345,13 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
header: sortableHeader, header: sortableHeader,
hideSort: true, hideSort: true,
sortingFn: (a, b) => { sortingFn: (a, b) => {
// sort priorities: 1) failed services, 2) total services // sort priorities: 1) has failed services (dot color), 2) total services
const [totalCountA, numFailedA] = a.original.info.sv ?? [0, 0] const [totalCountA, numFailedA] = a.original.info.sv ?? [0, 0]
const [totalCountB, numFailedB] = b.original.info.sv ?? [0, 0] const [totalCountB, numFailedB] = b.original.info.sv ?? [0, 0]
if (numFailedA !== numFailedB) { const hasFailedA = numFailedA > 0 ? 1 : 0
return numFailedA - numFailedB const hasFailedB = numFailedB > 0 ? 1 : 0
if (hasFailedA !== hasFailedB) {
return hasFailedA - hasFailedB
} }
return totalCountA - totalCountB return totalCountA - totalCountB
}, },
@@ -359,20 +361,36 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
if (sys.status !== SystemStatus.Up || totalCount === 0) { if (sys.status !== SystemStatus.Up || totalCount === 0) {
return null return null
} }
return ( const content = (
<span className="tabular-nums whitespace-nowrap flex gap-1.5 items-center"> <span className="tabular-nums whitespace-nowrap flex gap-1.5 items-center">
<span <span
className={cn("block size-2 rounded-full", { className={cn("block size-2 rounded-full", {
[STATUS_COLORS[SystemStatus.Down]]: numFailed > 0, [STATUS_COLORS.pending]: numFailed > 0,
[STATUS_COLORS[SystemStatus.Up]]: numFailed === 0, [STATUS_COLORS.up]: numFailed === 0,
})} })}
/> />
{totalCount}{" "} {plural(totalCount, { one: "# service", other: "# services" })}
<span className="text-muted-foreground text-sm -ms-0.5">
({t`Failed`.toLowerCase()}: {numFailed})
</span>
</span> </span>
) )
if (numFailed === 0) {
return content
}
return (
<Tooltip>
<TooltipTrigger asChild>
<Link
href={getPagePath($router, "system", { id: sys.id })}
tabIndex={-1}
className="relative z-10 w-fit block"
>
{content}
</Link>
</TooltipTrigger>
<TooltipContent>
{plural(numFailed, { one: "# failed service", other: "# failed services" })}
</TooltipContent>
</Tooltip>
)
}, },
}, },
{ {