jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-04-13 00:11:49 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

refactor: rm diskinfo abstraction from smart-table.tsx

Browse Source
This commit is contained in:
henrygd
2025-12-21 12:25:12 -05:00
parent 7d943633a3
commit f6ab5f2af1
1 changed files with 97 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
internal/site/src/components/routes/system/smart-table.tsx
View File

@@ -93,53 +93,15 @@ export const smartColumns: ColumnDef<SmartAttribute>[] = [
}, },
] ]
export type DiskInfo = {
id: string
system: string
device: string
model: string
capacity: string
capacityBytes: number
status: string
temperature: number
deviceType: string
powerOnHours?: number
powerCycles?: number
attributes?: SmartAttribute[]
updated: string
}
// Function to format capacity display // Function to format capacity display
function formatCapacity(bytes: number): string { function formatCapacity(bytes: number): string {
const { value, unit } = formatBytes(bytes) const { value, unit } = formatBytes(bytes)
return `${toFixedFloat(value, value >= 10 ? 1 : 2)} ${unit}` return `${toFixedFloat(value, value >= 10 ? 1 : 2)} ${unit}`
} }
// Function to convert SmartDeviceRecord to DiskInfo
function convertSmartDeviceRecordToDiskInfo(records: SmartDeviceRecord[]): DiskInfo[] {
const unknown = "Unknown"
return records.map((record) => ({
id: record.id,
system: record.system,
device: record.name || unknown,
model: record.model || unknown,
serialNumber: record.serial || unknown,
firmwareVersion: record.firmware || unknown,
capacity: record.capacity ? formatCapacity(record.capacity) : unknown,
capacityBytes: record.capacity || 0,
status: record.state || unknown,
temperature: record.temp || 0,
deviceType: record.type || unknown,
attributes: record.attributes,
updated: record.updated,
powerOnHours: record.hours,
powerCycles: record.cycles,
}))
}
const SMART_DEVICE_FIELDS = "id,system,name,model,state,capacity,temp,type,hours,cycles,updated" const SMART_DEVICE_FIELDS = "id,system,name,model,state,capacity,temp,type,hours,cycles,updated"
export const columns: ColumnDef<DiskInfo>[] = [ export const columns: ColumnDef<SmartDeviceRecord>[] = [
{ {
id: "system", id: "system",
accessorFn: (record) => record.system, accessorFn: (record) => record.system,
@@ -156,12 +118,12 @@ export const columns: ColumnDef<DiskInfo>[] = [
}, },
}, },
{ {
accessorKey: "device", accessorKey: "name",
sortingFn: (a, b) => a.original.device.localeCompare(b.original.device), sortingFn: (a, b) => a.original.name.localeCompare(b.original.name),
header: ({ column }) => <HeaderButton column={column} name={t`Device`} Icon={HardDrive} />, header: ({ column }) => <HeaderButton column={column} name={t`Device`} Icon={HardDrive} />,
cell: ({ row }) => ( cell: ({ getValue }) => (
<div className="font-medium max-w-40 truncate ms-1.5" title={row.getValue("device")}> <div className="font-medium max-w-40 truncate ms-1.5" title={getValue() as string}>
{row.getValue("device")} {getValue() as string}
</div> </div>
), ),
}, },
@@ -169,20 +131,20 @@ export const columns: ColumnDef<DiskInfo>[] = [
accessorKey: "model", accessorKey: "model",
sortingFn: (a, b) => a.original.model.localeCompare(b.original.model), sortingFn: (a, b) => a.original.model.localeCompare(b.original.model),
header: ({ column }) => <HeaderButton column={column} name={t`Model`} Icon={Box} />, header: ({ column }) => <HeaderButton column={column} name={t`Model`} Icon={Box} />,
cell: ({ row }) => ( cell: ({ getValue }) => (
<div className="max-w-48 truncate ms-1.5" title={row.getValue("model")}> <div className="max-w-48 truncate ms-1.5" title={getValue() as string}>
{row.getValue("model")} {getValue() as string}
</div> </div>
), ),
}, },
{ {
accessorKey: "capacity", accessorKey: "capacity",
sortingFn: (a, b) => a.original.capacityBytes - b.original.capacityBytes, invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Capacity`} Icon={BinaryIcon} />, header: ({ column }) => <HeaderButton column={column} name={t`Capacity`} Icon={BinaryIcon} />,
cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>, cell: ({ getValue }) => <span className="ms-1.5">{formatCapacity(getValue() as number)}</span>,
}, },
{ {
accessorKey: "status", accessorKey: "state",
header: ({ column }) => <HeaderButton column={column} name={t`Status`} Icon={Activity} />, header: ({ column }) => <HeaderButton column={column} name={t`Status`} Icon={Activity} />,
cell: ({ getValue }) => { cell: ({ getValue }) => {
const status = getValue() as string const status = getValue() as string
@@ -194,8 +156,8 @@ export const columns: ColumnDef<DiskInfo>[] = [
}, },
}, },
{ {
accessorKey: "deviceType", accessorKey: "type",
sortingFn: (a, b) => a.original.deviceType.localeCompare(b.original.deviceType), sortingFn: (a, b) => a.original.type.localeCompare(b.original.type),
header: ({ column }) => <HeaderButton column={column} name={t`Type`} Icon={ArrowLeftRightIcon} />, header: ({ column }) => <HeaderButton column={column} name={t`Type`} Icon={ArrowLeftRightIcon} />,
cell: ({ getValue }) => ( cell: ({ getValue }) => (
<div className="ms-1.5"> <div className="ms-1.5">
@@ -206,7 +168,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
), ),
}, },
{ {
accessorKey: "powerOnHours", accessorKey: "hours",
invertSorting: true, invertSorting: true,
header: ({ column }) => ( header: ({ column }) => (
<HeaderButton column={column} name={t({ message: "Power On", comment: "Power On Time" })} Icon={Clock} /> <HeaderButton column={column} name={t({ message: "Power On", comment: "Power On Time" })} Icon={Clock} />
@@ -226,7 +188,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
}, },
}, },
{ {
accessorKey: "powerCycles", accessorKey: "cycles",
invertSorting: true, invertSorting: true,
header: ({ column }) => ( header: ({ column }) => (
<HeaderButton column={column} name={t({ message: "Cycles", comment: "Power Cycles" })} Icon={RotateCwIcon} /> <HeaderButton column={column} name={t({ message: "Cycles", comment: "Power Cycles" })} Icon={RotateCwIcon} />
@@ -240,7 +202,7 @@ export const columns: ColumnDef<DiskInfo>[] = [
}, },
}, },
{ {
accessorKey: "temperature", accessorKey: "temp",
invertSorting: true, invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Temp`} Icon={ThermometerIcon} />, header: ({ column }) => <HeaderButton column={column} name={t`Temp`} Icon={ThermometerIcon} />,
cell: ({ getValue }) => { cell: ({ getValue }) => {
@@ -249,14 +211,14 @@ export const columns: ColumnDef<DiskInfo>[] = [
}, },
}, },
// { // {
// accessorKey: "serialNumber", // accessorKey: "serial",
// sortingFn: (a, b) => a.original.serialNumber.localeCompare(b.original.serialNumber), // sortingFn: (a, b) => a.original.serial.localeCompare(b.original.serial),
// header: ({ column }) => <HeaderButton column={column} name={t`Serial Number`} Icon={HashIcon} />, // header: ({ column }) => <HeaderButton column={column} name={t`Serial Number`} Icon={HashIcon} />,
// cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>, // cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>,
// }, // },
// { // {
// accessorKey: "firmwareVersion", // accessorKey: "firmware",
// sortingFn: (a, b) => a.original.firmwareVersion.localeCompare(b.original.firmwareVersion), // sortingFn: (a, b) => a.original.firmware.localeCompare(b.original.firmware),
// header: ({ column }) => <HeaderButton column={column} name={t`Firmware`} Icon={CpuIcon} />, // header: ({ column }) => <HeaderButton column={column} name={t`Firmware`} Icon={CpuIcon} />,
// cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>, // cell: ({ getValue }) => <span className="ms-1.5">{getValue() as string}</span>,
// }, // },
@@ -275,7 +237,15 @@ export const columns: ColumnDef<DiskInfo>[] = [
}, },
] ]
function HeaderButton({ column, name, Icon }: { column: Column<DiskInfo>; name: string; Icon: React.ElementType }) { function HeaderButton({
column,
name,
Icon,
}: {
column: Column<SmartDeviceRecord>
name: string
Icon: React.ElementType
}) {
const isSorted = column.getIsSorted() const isSorted = column.getIsSorted()
return ( return (
<Button <Button
@@ -293,7 +263,7 @@ function HeaderButton({ column, name, Icon }: { column: Column<DiskInfo>; name:
} }
export default function DisksTable({ systemId }: { systemId?: string }) { export default function DisksTable({ systemId }: { systemId?: string }) {
const [sorting, setSorting] = useState<SortingState>([{ id: systemId ? "device" : "system", desc: false }]) const [sorting, setSorting] = useState<SortingState>([{ id: systemId ? "name" : "system", desc: false }])
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
const [rowSelection, setRowSelection] = useState({}) const [rowSelection, setRowSelection] = useState({})
const [smartDevices, setSmartDevices] = useState<SmartDeviceRecord[] | undefined>(undefined) const [smartDevices, setSmartDevices] = useState<SmartDeviceRecord[] | undefined>(undefined)
@@ -302,96 +272,95 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
const [rowActionState, setRowActionState] = useState<{ type: "refresh" | "delete"; id: string } | null>(null) const [rowActionState, setRowActionState] = useState<{ type: "refresh" | "delete"; id: string } | null>(null)
const [globalFilter, setGlobalFilter] = useState("") const [globalFilter, setGlobalFilter] = useState("")
const openSheet = (disk: DiskInfo) => { const openSheet = (disk: SmartDeviceRecord) => {
setActiveDiskId(disk.id) setActiveDiskId(disk.id)
setSheetOpen(true) setSheetOpen(true)
} }
// Fetch smart devices from collection (without attributes to save bandwidth) // Fetch smart devices
const fetchSmartDevices = useCallback(() => { useEffect(() => {
const controller = new AbortController()
pb.collection<SmartDeviceRecord>("smart_devices") pb.collection<SmartDeviceRecord>("smart_devices")
.getFullList({ .getFullList({
filter: systemId ? pb.filter("system = {:system}", { system: systemId }) : undefined, filter: systemId ? pb.filter("system = {:system}", { system: systemId }) : undefined,
fields: SMART_DEVICE_FIELDS, fields: SMART_DEVICE_FIELDS,
signal: controller.signal,
}) })
.then((records) => { .then(setSmartDevices)
setSmartDevices(records) .catch((err) => {
if (!err.isAbort) {
setSmartDevices([])
}
}) })
.catch(() => setSmartDevices([]))
return () => controller.abort()
}, [systemId]) }, [systemId])
// Fetch smart devices when component mounts or systemId changes // Subscribe to updates
useEffect(() => {
fetchSmartDevices()
}, [fetchSmartDevices])
// Subscribe to live updates so rows add/remove without manual refresh/filtering
useEffect(() => { useEffect(() => {
let unsubscribe: (() => void) | undefined let unsubscribe: (() => void) | undefined
const pbOptions = systemId const pbOptions = systemId
? { fields: SMART_DEVICE_FIELDS, filter: pb.filter("system = {:system}", { system: systemId }) } ? { fields: SMART_DEVICE_FIELDS, filter: pb.filter("system = {:system}", { system: systemId }) }
: { fields: SMART_DEVICE_FIELDS } : { fields: SMART_DEVICE_FIELDS }
;(async () => { ; (async () => {
try { try {
unsubscribe = await pb.collection("smart_devices").subscribe( unsubscribe = await pb.collection("smart_devices").subscribe(
"*", "*",
(event) => { (event) => {
const record = event.record as SmartDeviceRecord const record = event.record as SmartDeviceRecord
setSmartDevices((currentDevices) => { setSmartDevices((currentDevices) => {
const devices = currentDevices ?? [] const devices = currentDevices ?? []
const matchesSystemScope = !systemId || record.system === systemId const matchesSystemScope = !systemId || record.system === systemId
if (event.action === "delete") { if (event.action === "delete") {
return devices.filter((device) => device.id !== record.id) return devices.filter((device) => device.id !== record.id)
} }
if (!matchesSystemScope) { if (!matchesSystemScope) {
// Record moved out of scope; ensure it disappears locally. // Record moved out of scope; ensure it disappears locally.
return devices.filter((device) => device.id !== record.id) return devices.filter((device) => device.id !== record.id)
} }
const existingIndex = devices.findIndex((device) => device.id === record.id) const existingIndex = devices.findIndex((device) => device.id === record.id)
if (existingIndex === -1) { if (existingIndex === -1) {
return [record, ...devices] return [record, ...devices]
} }
const next = [...devices] const next = [...devices]
next[existingIndex] = record next[existingIndex] = record
return next return next
}) })
}, },
pbOptions pbOptions
) )
} catch (error) { } catch (error) {
console.error("Failed to subscribe to SMART device updates:", error) console.error("Failed to subscribe to SMART device updates:", error)
} }
})() })()
return () => { return () => {
unsubscribe?.() unsubscribe?.()
} }
}, [systemId]) }, [systemId])
const handleRowRefresh = useCallback( const handleRowRefresh = useCallback(async (disk: SmartDeviceRecord) => {
async (disk: DiskInfo) => { if (!disk.system) return
if (!disk.system) return setRowActionState({ type: "refresh", id: disk.id })
setRowActionState({ type: "refresh", id: disk.id }) try {
try { await pb.send("/api/beszel/smart/refresh", {
await pb.send("/api/beszel/smart/refresh", { method: "POST",
method: "POST", query: { system: disk.system },
query: { system: disk.system }, })
}) } catch (error) {
} catch (error) { console.error("Failed to refresh SMART device:", error)
console.error("Failed to refresh SMART device:", error) } finally {
} finally { setRowActionState((state) => (state?.id === disk.id ? null : state))
setRowActionState((state) => (state?.id === disk.id ? null : state)) }
} }, [])
},
[fetchSmartDevices]
)
const handleDeleteDevice = useCallback(async (disk: DiskInfo) => { const handleDeleteDevice = useCallback(async (disk: SmartDeviceRecord) => {
setRowActionState({ type: "delete", id: disk.id }) setRowActionState({ type: "delete", id: disk.id })
try { try {
await pb.collection("smart_devices").delete(disk.id) await pb.collection("smart_devices").delete(disk.id)
@@ -403,7 +372,7 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
} }
}, []) }, [])
const actionColumn = useMemo<ColumnDef<DiskInfo>>( const actionColumn = useMemo<ColumnDef<SmartDeviceRecord>>(
() => ({ () => ({
id: "actions", id: "actions",
enableSorting: false, enableSorting: false,
@@ -471,13 +440,8 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
return [...baseColumns, actionColumn] return [...baseColumns, actionColumn]
}, [systemId, actionColumn]) }, [systemId, actionColumn])
// Convert SmartDeviceRecord to DiskInfo
const diskData = useMemo(() => {
return smartDevices ? convertSmartDeviceRecordToDiskInfo(smartDevices) : []
}, [smartDevices])
const table = useReactTable({ const table = useReactTable({
data: diskData, data: smartDevices || ([] as SmartDeviceRecord[]),
columns: tableColumns, columns: tableColumns,
onSortingChange: setSorting, onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
@@ -495,10 +459,10 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
globalFilterFn: (row, _columnId, filterValue) => { globalFilterFn: (row, _columnId, filterValue) => {
const disk = row.original const disk = row.original
const systemName = $allSystemsById.get()[disk.system]?.name ?? "" const systemName = $allSystemsById.get()[disk.system]?.name ?? ""
const device = disk.device ?? "" const device = disk.name ?? ""
const model = disk.model ?? "" const model = disk.model ?? ""
const status = disk.status ?? "" const status = disk.state ?? ""
const type = disk.deviceType ?? "" const type = disk.type ?? ""
const searchString = `${systemName} ${device} ${model} ${status} ${type}`.toLowerCase() const searchString = `${systemName} ${device} ${model} ${status} ${type}`.toLowerCase()
return (filterValue as string) return (filterValue as string)
.toLowerCase() .toLowerCase()
@@ -508,7 +472,7 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
}) })
// Hide the table on system pages if there's no data, but always show on global page // Hide the table on system pages if there's no data, but always show on global page
if (systemId && !diskData.length && !columnFilters.length) { if (systemId && !smartDevices?.length && !columnFilters.length) {
return null return null
} }