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