From b464fa5b3f69b906b752ae06c33cd7d44f3ae118 Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Sat, 12 Oct 2024 16:37:09 -0400
Subject: [PATCH] add net column to systems table

---
 .../systems-table/systems-table.tsx           | 19 ++++++++++++++++---
 beszel/site/src/components/ui/icons.tsx       | 16 ++++++++++++++++
 beszel/site/src/types.d.ts                    |  4 ++++
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/beszel/site/src/components/systems-table/systems-table.tsx b/beszel/site/src/components/systems-table/systems-table.tsx
index 310d326..43a7881 100644
--- a/beszel/site/src/components/systems-table/systems-table.tsx
+++ b/beszel/site/src/components/systems-table/systems-table.tsx
@@ -59,15 +59,16 @@ import {
 import { useEffect, useMemo, useState } from 'react'
 import { $hubVersion, $systems, pb } from '@/lib/stores'
 import { useStore } from '@nanostores/react'
-import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
+import { cn, copyToClipboard, decimalString, isReadOnlyUser } from '@/lib/utils'
 import AlertsButton from '../table-alerts'
 import { navigate } from '../router'
+import { EthernetIcon } from '../ui/icons'
 
 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	const val = info.getValue() as number
 	return (
 		<div className="flex gap-1 items-center tabular-nums tracking-tight">
-			<span className="min-w-[3.5em]">{val.toFixed(1)}%</span>
+			<span className="min-w-[3.5em]">{decimalString(val, 1)}%</span>
 			<span className="grow min-w-10 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
 				<span
 					className={cn(
@@ -161,9 +162,22 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 				cell: CellFormatter,
 				header: ({ column }) => sortableHeader(column, 'Disk', HardDrive),
 			},
+			{
+				accessorKey: 'info.b',
+				size: 80,
+				header: ({ column }) => sortableHeader(column, 'Net', EthernetIcon),
+				cell: (info) => {
+					return (
+						<span className="tabular-nums whitespace-nowrap pl-1">
+							{decimalString((info.getValue() as number) || 0, 2)} MB/s
+						</span>
+					)
+				},
+			},
 			{
 				accessorKey: 'info.v',
 				size: 50,
+				header: ({ column }) => sortableHeader(column, 'Agent', WifiIcon, true),
 				cell: (info) => {
 					const version = info.getValue() as string
 					if (!version || !hubVersion) {
@@ -182,7 +196,6 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 						</span>
 					)
 				},
-				header: ({ column }) => sortableHeader(column, 'Agent', WifiIcon, true),
 			},
 			{
 				id: 'actions',
diff --git a/beszel/site/src/components/ui/icons.tsx b/beszel/site/src/components/ui/icons.tsx
index 3d3942f..e3e5664 100644
--- a/beszel/site/src/components/ui/icons.tsx
+++ b/beszel/site/src/components/ui/icons.tsx
@@ -45,3 +45,19 @@ export function ChartMax(props: SVGProps<SVGSVGElement>) {
 		</svg>
 	)
 }
+
+// Lucide https://github.com/lucide-icons/lucide (not in package for some reason)
+export function EthernetIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			fill="none"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeWidth="2"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path d="m15 20 3-3h2a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2l3 3zM6 8v1m4-1v1m4-1v1m4-1v1" />
+		</svg>
+	)
+}
diff --git a/beszel/site/src/types.d.ts b/beszel/site/src/types.d.ts
index 67f4a51..18fe6c3 100644
--- a/beszel/site/src/types.d.ts
+++ b/beszel/site/src/types.d.ts
@@ -30,6 +30,10 @@ export interface SystemInfo {
 	mp: number
 	/** disk percent */
 	dp: number
+	/** bandwidth (mb) */
+	b: number
+	/** agent version */
+	v: string
 }
 
 export interface SystemStats {