further implementing service page (#3)

src/routes/root.tsx

@@ -8,7 +8,7 @@ import { Toaster } from "@/components/ui/sonner";
 export default function Root() {
     return (
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-            <Card className="text-sm max-w-6xl mx-auto mt-5 min-h-[90%] flex flex-col justify-between">
+            <Card className="text-sm max-w-7xl mx-auto mt-5 min-h-[90%] flex flex-col justify-between">
                 <div>
                     <Header />
                     <Outlet />

src/routes/server.tsx

@@ -113,4 +113,4 @@ export default function ServerPage() {
             </TableBody>
         </Table>
     </div>
-}
+}

src/routes/service.tsx

@@ -2,11 +2,28 @@ import { swrFetcher } from "@/api/api"
 import { Checkbox } from "@/components/ui/checkbox"
 import { ServiceCard } from "@/components/service"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { ModelService as Service } from "@/types"
+import { ModelServiceResponse, ModelServiceResponseItem as Service } from "@/types"
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
 import useSWR from "swr"
+import { conv } from "@/lib/utils"
+import { useEffect, useMemo } from "react"
+import { serviceTypes } from "@/types"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { deleteService } from "@/api/service"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { Skeleton } from "@/components/ui/skeleton"
+import { toast } from "sonner"
 
 export default function ServicePage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelServiceResponse>('/api/v1/service', swrFetcher)
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: "Error fetching resource.",
+            })
+    }, [error])
+
     const columns: ColumnDef<Service>[] = [
         {
             id: "select",
@@ -32,18 +49,67 @@ export default function ServicePage() {
         },
         {
             header: "ID",
-            accessorKey: "id",
-            accessorFn: (row) => row.id,
+            accessorKey: "service.id",
+            accessorFn: row => row.service.id,
         },
         {
             header: "Name",
-            accessorKey: "name",
-            accessorFn: (row) => row.name,
+            accessorKey: "service.name",
+            accessorFn: row => row.service.name,
+        },
+        {
+            header: "Target",
+            accessorKey: "service.target",
+            accessorFn: row => row.service.target,
+        },
+        {
+            header: "Coverage",
+            accessorKey: "service.cover",
+            accessorFn: row => {
+                switch (row.service.cover) {
+                    case 0: {
+                        return "Cover All"
+                    }
+                    case 1: {
+                        return "Ignore All"
+                    }
+                }
+            }
+        },
+        {
+            header: "Specific Servers",
+            accessorKey: "service.skipServers",
+            accessorFn: row => Object.keys(row.service.skip_servers ?? {}),
         },
         {
             header: "Type",
             accessorKey: "service.type",
-            accessorFn: (row) => row.type,
+            accessorFn: row => serviceTypes[row.service.type] || '',
+        },
+        {
+            header: "Interval",
+            accessorKey: "service.duration",
+            accessorFn: row => row.service.duration,
+        },
+        {
+            header: "Notification Group ID",
+            accessorKey: "service.ngroup",
+            accessorFn: row => row.service.notification_group_id,
+        },
+        {
+            header: "Enable Trigger Task",
+            accessorKey: "service.triggerTask",
+            accessorFn: row => row.service.enable_trigger_task ?? false,
+        },
+        {
+            header: "Tasks to trigger on an alarm",
+            accessorKey: "service.failTriggerTasks",
+            accessorFn: row => row.service.fail_trigger_tasks,
+        },
+        {
+            header: "Tasks to trigger after recovery",
+            accessorKey: "service.recoverTriggerTasks",
+            accessorFn: row => row.service.recover_trigger_tasks,
         },
         {
             id: "actions",
@@ -51,68 +117,90 @@ export default function ServicePage() {
             cell: ({ row }) => {
                 const s = row.original
                 return (
-                    <>{s.id}</>
+                    <ActionButtonGroup className="flex gap-2" delete={{ fn: deleteService, id: s.service.id, mutate: mutate }}>
+                        <ServiceCard mutate={mutate} data={s.service} />
+                    </ActionButtonGroup>
                 )
             },
         },
     ]
 
-    const { data, error, isLoading } = useSWR<Service[]>('/api/v1/service', swrFetcher)
+    const dataArr = useMemo(() => {
+        return conv.recordToArr(data?.services ?? {});
+    }, [data?.services]);
 
     const table = useReactTable({
-        data: data ?? [],
+        data: dataArr,
         columns,
         getCoreRowModel: getCoreRowModel(),
     })
 
-    return <div className="px-9">
-        <div className="flex space-between mt-4 pb-4">
-            <h1 className="text-3xl font-bold tracking-tight">
-                Service
-            </h1>
-            <ServiceCard className="ml-auto" />
-        </div>
-        <Table>
-            <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => {
-                            return (
-                                <TableHead key={header.id}>
-                                    {header.isPlaceholder
-                                        ? null
-                                        : flexRender(
-                                            header.column.columnDef.header,
-                                            header.getContext()
-                                        )}
-                                </TableHead>
-                            )
-                        })}
-                    </TableRow>
-                ))}
-            </TableHeader>
-            <TableBody>
-                {table.getRowModel().rows?.length ? (
-                    table.getRowModel().rows.map((row) => (
-                        <TableRow
-                            key={row.id}
-                            data-state={row.getIsSelected() && "selected"}
-                        >
-                            {row.getVisibleCells().map((cell) => (
-                                <TableCell key={cell.id}>
-                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    const selectedRows = table.getSelectedRowModel().rows;
+
+    return (
+        <div className="px-8">
+            <div className="flex mt-6 mb-4">
+                <h1 className="flex-1 text-3xl font-bold tracking-tight">
+                    Service
+                </h1>
+                <HeaderButtonGroup className="flex-2 flex ml-auto gap-2" delete={{
+                    fn: deleteService,
+                    id: selectedRows.map(r => r.original.service.id),
+                    mutate: mutate,
+                }}>
+                    <ServiceCard mutate={mutate} />
+                </HeaderButtonGroup>
+            </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
                                 </TableCell>
-                            ))}
-                        </TableRow>
-                    ))
-                ) : (
-                    <TableRow>
-                        <TableCell colSpan={columns.length} className="h-24 text-center">
-                            No results.
-                        </TableCell>
-                    </TableRow>
-                )}
-            </TableBody>
-        </Table>
-    </div >
-}
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+        </div >
+    )
+}