fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: display peak GPU usage in dashboard

Browse Source
This commit is contained in:
henrygd
2025-02-08 19:22:00 -05:00
parent e6054058b9
commit 3afab00937
4 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -9,7 +9,7 @@ import {
VisibilityState,
getCoreRowModel,
useReactTable,
Column,
HeaderContext,
} from "@tanstack/react-table"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -66,7 +66,7 @@ import { useStore } from "@nanostores/react"
import { cn, copyToClipboard, decimalString, isReadOnlyUser, useLocalStorage } from "@/lib/utils"
import AlertsButton from "../alerts/alert-button"
import { $router, Link, navigate } from "../router"
import { EthernetIcon, ThermometerIcon } from "../ui/icons"
import { EthernetIcon, GpuIcon, ThermometerIcon } from "../ui/icons"
import { Trans, t } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
@@ -77,10 +77,10 @@ import { getPagePath } from "@nanostores/router"
type ViewMode = "table" | "grid"
function CellFormatter(info: CellContext<SystemRecord, unknown>) {
const val = info.getValue() as number
const val = (info.getValue() as number) || 0
return (
<div className="flex gap-2 items-center tabular-nums tracking-tight">
<span className="min-w-[3.5em]">{decimalString(val, 1)}%</span>
<span className="min-w-[3.3em]">{decimalString(val, 1)}%</span>
<span className="grow min-w-10 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
<span
className={cn(
@@ -99,7 +99,8 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
)
}
function sortableHeader(column: Column<SystemRecord, unknown>, hideSortIcon = false) {
function sortableHeader(context: HeaderContext<SystemRecord, unknown>, hideSortIcon = false) {
const { column } = context
return (
<Button
variant="ghost"
@@ -154,7 +155,7 @@ export default function SystemsTable() {
</Button>
</span>
),
header: ({ column }) => sortableHeader(column),
header: sortableHeader,
},
{
accessorKey: "info.cpu",
@@ -162,7 +163,7 @@ export default function SystemsTable() {
invertSorting: true,
cell: CellFormatter,
icon: CpuIcon,
header: ({ column }) => sortableHeader(column),
header: sortableHeader,
},
{
accessorKey: "info.mp",
@@ -170,7 +171,7 @@ export default function SystemsTable() {
invertSorting: true,
cell: CellFormatter,
icon: MemoryStickIcon,
header: ({ column }) => sortableHeader(column),
header: sortableHeader,
},
{
accessorKey: "info.dp",
@@ -178,16 +179,25 @@ export default function SystemsTable() {
invertSorting: true,
cell: CellFormatter,
icon: HardDriveIcon,
header: ({ column }) => sortableHeader(column),
header: sortableHeader,
},
{
accessorKey: "info.g",
id: "GPU",
invertSorting: true,
sortUndefined: -1,
cell: CellFormatter,
icon: GpuIcon,
header: sortableHeader,
},
{
accessorKey: "info.ht",
id: t`Temp`,
invertSorting: true,
sortUndefined: 0,
sortUndefined: -1,
size: 50,
icon: ThermometerIcon,
header: ({ column }) => sortableHeader(column),
header: sortableHeader,
cell(info) {
const val = info.getValue() as number
if (!val) {
@@ -208,9 +218,9 @@ export default function SystemsTable() {
accessorFn: (originalRow) => originalRow.info.b || 0,
id: t`Net`,
invertSorting: true,
size: 115,
size: 100,
icon: EthernetIcon,
header: ({ column }) => sortableHeader(column),
header: sortableHeader,
cell(info) {
const val = info.getValue() as number
return (
@@ -230,7 +240,7 @@ export default function SystemsTable() {
invertSorting: true,
size: 50,
icon: WifiIcon,
header: ({ column }) => sortableHeader(column, true),
header: sortableHeader,
cell(info) {
const version = info.getValue() as string
if (!version || !hubVersion) {

10
beszel/site/src/components/ui/icons.tsx
View File

@@ -63,3 +63,13 @@ export function ThermometerIcon(props: SVGProps<SVGSVGElement>) {
</svg>
)
}
// Huge icons (MIT)
export function GpuIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" {...props} stroke="currentColor" fill="none" strokeWidth="2">
<path d="M4 21V4.1a1.5 1.5 0 0 0-1.1-1L2 3m2 2h13c2.4 0 3.5 0 4.3.7s.7 2 .7 4.3v4.5c0 2.4 0 3.5-.7 4.3-.8.7-2 .7-4.3.7h-4.9a1.8 1.8 0 0 1-1.6-1c-.3-.6-1-1-1.6-1H4" />
<path d="M19 11.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-11.5-3h2m-2 3h2m-2 3h2" />
</svg>
)
}