server table updates

site/src/components/routes/home.tsx

@@ -30,9 +30,9 @@ export function Home() {
 
 	return (
 		<>
-			<h1>Dashboard</h1>
+			<h1 class="my-5">Dashboard</h1>
 			{systems.length && <DataTable data={systems} />}
-			<pre>{JSON.stringify(systems, null, 2)}</pre>
+			{/* <pre>{JSON.stringify(systems, null, 2)}</pre> */}
 		</>
 	)
 }

site/src/components/server-table/data-table.tsx

@@ -1,9 +1,14 @@
 import {
 	CellContext,
 	ColumnDef,
+	ColumnFiltersState,
+	getFilteredRowModel,
+	SortingState,
+	getSortedRowModel,
 	flexRender,
 	getCoreRowModel,
 	useReactTable,
+	Column,
 } from '@tanstack/react-table'
 
 import {
@@ -15,7 +20,22 @@ import {
 	TableRow,
 } from '@/components/ui/table'
 
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
 import { SystemRecord } from '@/types'
+import { MoreHorizontal, ArrowUpDown } from 'lucide-react'
+import { Link } from 'wouter-preact'
+import { useState } from 'preact/hooks'
 
 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	const val = info.getValue() as number
@@ -38,74 +58,141 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	)
 }
 
+function sortableHeader(column: Column<SystemRecord, unknown>, name: string) {
+	return (
+		<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
+			{name}
+			<ArrowUpDown className="ml-2 h-4 w-4" />
+		</Button>
+	)
+}
+
 export function DataTable({ data }: { data: SystemRecord[] }) {
-	// console.log('data', data)
 	const columns: ColumnDef<SystemRecord>[] = [
 		{
-			header: 'Node',
+			size: 40,
 			accessorKey: 'name',
+			cell: (info) => <strong>{info.getValue() as string}</strong>,
+			header: ({ column }) => sortableHeader(column, 'Node'),
 		},
 		{
-			header: 'CPU Load',
 			accessorKey: 'stats.cpu',
 			cell: CellFormatter,
+			header: ({ column }) => sortableHeader(column, 'CPU'),
 		},
 		{
-			header: 'RAM',
 			accessorKey: 'stats.memPct',
 			cell: CellFormatter,
+			header: ({ column }) => sortableHeader(column, 'Memory'),
 		},
 		{
-			header: 'Disk Usage',
 			accessorKey: 'stats.diskPct',
 			cell: CellFormatter,
+			header: ({ column }) => sortableHeader(column, 'Disk'),
+		},
+		{
+			id: 'actions',
+			size: 32,
+			maxSize: 32,
+			cell: ({ row }) => {
+				const system = row.original
+
+				return (
+					<div class={'flex justify-end'}>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="ghost" className="h-8 w-8 p-0">
+									<span className="sr-only">Open menu</span>
+									<MoreHorizontal className="h-4 w-4" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end">
+								<DropdownMenuLabel>Actions</DropdownMenuLabel>
+								<DropdownMenuItem>
+									<Link class="w-full" href={`/server/${system.name}`}>
+										View details
+									</Link>
+								</DropdownMenuItem>
+								<DropdownMenuItem onClick={() => navigator.clipboard.writeText(system.id)}>
+									Copy IP address
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem>Delete node</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+				)
+			},
 		},
 	]
 
+	const [sorting, setSorting] = useState<SortingState>([])
+
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
 	const table = useReactTable({
 		data,
 		columns,
 		getCoreRowModel: getCoreRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		getFilteredRowModel: getFilteredRowModel(),
+		state: {
+			sorting,
+			columnFilters,
+		},
 	})
 
 	return (
-		<div className="rounded-md border tabular-nums">
+		<>
-			<Table>
+			<div className="flex items-center py-4">
-				<TableHeader>
+				<Input
-					{table.getHeaderGroups().map((headerGroup) => (
+					// @ts-ignore
-						<TableRow key={headerGroup.id}>
+					placeholder="Filter nodes..."
-							{headerGroup.headers.map((header) => {
+					value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-								return (
+					onChange={(event: Event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-									<TableHead key={header.id}>
+					className="max-w-sm"
-										{header.isPlaceholder
+				/>
-											? null
+			</div>
-											: flexRender(header.column.columnDef.header, header.getContext())}
+			<div className="rounded-md border tabular-nums">
-									</TableHead>
+				<Table>
-								)
+					<TableHeader>
-							})}
+						{table.getHeaderGroups().map((headerGroup) => (
-						</TableRow>
+							<TableRow key={headerGroup.id}>
-					))}
+								{headerGroup.headers.map((header) => {
-				</TableHeader>
+									return (
-				<TableBody>
+										<TableHead className="px-2" key={header.id}>
-					{table.getRowModel().rows?.length ? (
+											{header.isPlaceholder
-						table.getRowModel().rows.map((row) => (
+												? null
-							<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+												: flexRender(header.column.columnDef.header, header.getContext())}
-								{row.getVisibleCells().map((cell) => (
+										</TableHead>
-									<TableCell key={cell.id}>
+									)
-										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+								})}
-									</TableCell>
-								))}
 							</TableRow>
-						))
+						))}
-					) : (
+					</TableHeader>
-						<TableRow>
+					<TableBody>
-							<TableCell colSpan={columns.length} className="h-24 text-center">
+						{table.getRowModel().rows?.length ? (
-								No results.
+							table.getRowModel().rows.map((row) => (
-							</TableCell>
+								<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-						</TableRow>
+									{row.getVisibleCells().map((cell) => (
-					)}
+										<TableCell key={cell.id} style={{ width: `${cell.column.getSize()}px` }}>
-				</TableBody>
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
-			</Table>
+										</TableCell>
-		</div>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell colSpan={columns.length} className="h-24 text-center">
+									No results.
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+		</>
 	)
 }