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

refactor(site): move package updates to own tab and tweak table

Browse Source 
- show package updates in a separate Updates tab in the tabbed layout
- sort major version changes first in the change column
- use text-sm for version numbers
This commit is contained in:
henrygd
2026-09-27 11:39:23 -04:00
parent 8613cfe548
commit 81fd571169
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
internal/site/src/components/routes/system.tsx
View File

@@ -23,7 +23,7 @@ import {
LazyZfsTable,
} from "./system/lazy-tables"
import { LoadAverageChart } from "./system/charts/load-average-chart"
import { ContainerIcon, CpuIcon, HardDriveIcon, NetworkIcon, TerminalSquareIcon } from "lucide-react"
import { ContainerIcon, CpuIcon, HardDriveIcon, NetworkIcon, PackageIcon, TerminalSquareIcon } from "lucide-react"
import { GpuIcon } from "../ui/icons"
import SystemdTable from "../systemd-table/systemd-table"
import ContainersTable from "../containers-table/containers-table"
@@ -83,6 +83,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
if (hasGpu) tabs.push("gpu")
if (hasContainers) tabs.push("containers")
if (hasSystemd) tabs.push("services")
if (packageUpdates) tabs.push("updates")
tabsRef.current = tabs
// shared chart props
@@ -208,6 +209,12 @@ export default memo(function SystemDetail({ id }: { id: string }) {
<Trans>Services</Trans>
</TabsTrigger>
)}
{packageUpdates && (
<TabsTrigger value="updates" className="w-full flex items-center gap-2">
<PackageIcon className="size-3.5" />
<Trans>Updates</Trans>
</TabsTrigger>
)}
</TabsList>
<TabsContent value="core" forceMount className={activeTab === "core" ? "contents" : "hidden"}>
@@ -221,7 +228,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
<BatteryChart system={system} {...coreProps} />
{pageBottomExtraMargin > 0 && <div style={{ marginBottom: pageBottomExtraMargin }}></div>}
</div>
{packageUpdates && <LazyPackageUpdatesTable systemId={system.id} counts={packageUpdates} />}
</TabsContent>
<TabsContent value="network" forceMount className={activeTab === "network" ? "contents" : "hidden"}>
@@ -302,6 +308,12 @@ export default memo(function SystemDetail({ id }: { id: string }) {
{mountedTabs.has("services") && <SystemdTable systemId={system.id} />}
</TabsContent>
)}
{packageUpdates && (
<TabsContent value="updates" forceMount className={activeTab === "updates" ? "contents" : "hidden"}>
{mountedTabs.has("updates") && <LazyPackageUpdatesTable systemId={system.id} counts={packageUpdates} />}
</TabsContent>
)}
</Tabs>
)
}

8
internal/site/src/components/routes/system/package-updates-table.tsx
View File

@@ -35,8 +35,8 @@ interface PackageUpdateRow extends PackageUpdate {
change: VersionChange
}
/** Sort order of version changes, largest first. */
const changeRank: Record<VersionChange, number> = { major: 4, minor: 3, patch: 2, revision: 1, other: 0 }
/** Sort order of version changes, so ascending puts major first. */
const changeRank: Record<VersionChange, number> = { major: 0, minor: 1, patch: 2, revision: 3, other: 4 }
const changeVariant: Record<VersionChange, BadgeProps["variant"]> = {
major: "danger",
@@ -107,7 +107,7 @@ function getColumns(securityKnown: boolean): ColumnDef<PackageUpdateRow>[] {
</span>
),
cell: ({ getValue }) => (
<span className="ms-1.5 block font-mono text-xs text-muted-foreground">{(getValue() as string) || "-"}</span>
<span className="ms-1.5 block font-mono text-sm text-muted-foreground">{(getValue() as string) || "-"}</span>
),
},
{
@@ -120,7 +120,7 @@ function getColumns(securityKnown: boolean): ColumnDef<PackageUpdateRow>[] {
<Trans context="Package version available to install">Available</Trans>
</span>
),
cell: ({ getValue }) => <span className="ms-1.5 block font-mono text-xs">{getValue() as string}</span>,
cell: ({ getValue }) => <span className="ms-1.5 block font-mono text-sm">{getValue() as string}</span>,
},
{
id: "change",