From 5a874d493039ffe6dc84049efb13b18fe2d77eee Mon Sep 17 00:00:00 2001 From: Weilong Huang Date: Mon, 25 Nov 2024 06:40:28 +0100 Subject: [PATCH] Optimize loading and style (#2) --- eslint.config.js | 1 + src/main.tsx | 158 +++++++++---------- src/routes/alert-rule.tsx | 196 ++++++++++++------------ src/routes/cron.tsx | 246 +++++++++++++++--------------- src/routes/ddns.tsx | 195 ++++++++++++----------- src/routes/nat.tsx | 199 ++++++++++++------------ src/routes/notification-group.tsx | 186 +++++++++++----------- src/routes/notification.tsx | 208 ++++++++++++------------- src/routes/server-group.tsx | 185 +++++++++++----------- src/routes/server.tsx | 231 ++++++++++++++-------------- src/routes/service.tsx | 228 ++++++++++++++------------- src/routes/settings.tsx | 127 +++++++-------- src/routes/user.tsx | 171 +++++++++++---------- src/routes/waf.tsx | 182 +++++++++++----------- 14 files changed, 1246 insertions(+), 1267 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 092408a..2a1f800 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -23,6 +23,7 @@ export default tseslint.config( 'warn', { allowConstantExport: true }, ], + "indent": ['error', 4], }, }, ) diff --git a/src/main.tsx b/src/main.tsx index 1578333..c596307 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,8 +1,8 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { - createBrowserRouter, - RouterProvider, + createBrowserRouter, + RouterProvider, } from "react-router-dom"; import './index.css' @@ -29,85 +29,85 @@ import UserPage from './routes/user'; import WAFPage from './routes/waf'; const router = createBrowserRouter([ - { - path: "/dashboard", - element: , - errorElement: , - children: [ - { - path: "/dashboard/login", - element: , - }, - { + { path: "/dashboard", - element: , - }, - { - path: "/dashboard/service", - element: ( - - - - - - ), - }, - { - path: "/dashboard/cron", - element: ( - - - - - - ), - }, - { - path: "/dashboard/notification", - element: , - }, - { - path: "/dashboard/alert-rule", - element: , - }, - { - path: "/dashboard/ddns", - element: , - }, - { - path: "/dashboard/nat", - element: , - }, - { - path: "/dashboard/server-group", - element: , - }, - { - path: "/dashboard/notification-group", - element: , - }, - { - path: "/dashboard/terminal/:id", - element: , - }, - { - path: "/dashboard/settings", - element: , - }, - { - path: "/dashboard/settings/user", - element: , - }, - { - path: "/dashboard/settings/waf", - element: , - }, - ] - }, + element: , + errorElement: , + children: [ + { + path: "/dashboard/login", + element: , + }, + { + path: "/dashboard", + element: , + }, + { + path: "/dashboard/service", + element: ( + + + + + + ), + }, + { + path: "/dashboard/cron", + element: ( + + + + + + ), + }, + { + path: "/dashboard/notification", + element: , + }, + { + path: "/dashboard/alert-rule", + element: , + }, + { + path: "/dashboard/ddns", + element: , + }, + { + path: "/dashboard/nat", + element: , + }, + { + path: "/dashboard/server-group", + element: , + }, + { + path: "/dashboard/notification-group", + element: , + }, + { + path: "/dashboard/terminal/:id", + element: , + }, + { + path: "/dashboard/settings", + element: , + }, + { + path: "/dashboard/settings/user", + element: , + }, + { + path: "/dashboard/settings/waf", + element: , + }, + ] + }, ]); createRoot(document.getElementById('root')!).render( - - - , + + + , ) diff --git a/src/routes/alert-rule.tsx b/src/routes/alert-rule.tsx index d82f252..76f60e3 100644 --- a/src/routes/alert-rule.tsx +++ b/src/routes/alert-rule.tsx @@ -1,27 +1,36 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { useEffect } from "react" -import { ActionButtonGroup } from "@/components/action-button-group" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { Skeleton } from "@/components/ui/skeleton" -import { toast } from "sonner" -import { ModelAlertRule, triggerModes } from "@/types" -import { deleteAlertRules } from "@/api/alert-rule" -import { NotificationTab } from "@/components/notification-tab" -import { AlertRuleCard } from "@/components/alert-rule" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { useEffect } from "react"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { toast } from "sonner"; +import { ModelAlertRule, triggerModes } from "@/types"; +import { deleteAlertRules } from "@/api/alert-rule"; +import { NotificationTab } from "@/components/notification-tab"; +import { AlertRuleCard } from "@/components/alert-rule"; export default function AlertRulePage() { - const { data, mutate, error, isLoading } = useSWR("/api/v1/alert-rule", swrFetcher); + const { data, mutate, error, isLoading } = useSWR( + "/api/v1/alert-rule", + swrFetcher + ); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -30,7 +39,7 @@ export default function AlertRulePage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -49,74 +58,73 @@ export default function AlertRulePage() { { header: "ID", accessorKey: "id", - accessorFn: row => row.id, + accessorFn: (row) => row.id, }, { header: "Name", accessorKey: "name", - accessorFn: row => row.name, + accessorFn: (row) => row.name, cell: ({ row }) => { const s = row.original; - return ( -
- {s.name} -
- ) - } + return
{s.name}
; + }, }, { header: "Notifier Group", accessorKey: "ngroup", - accessorFn: row => row.notification_group_id, + accessorFn: (row) => row.notification_group_id, }, { header: "Trigger Mode", accessorKey: "trigger Mode", - accessorFn: row => triggerModes[row.trigger_mode] || '', + accessorFn: (row) => triggerModes[row.trigger_mode] || "", }, { header: "Rules", accessorKey: "rules", - accessorFn: row => JSON.stringify(row.rules), + accessorFn: (row) => JSON.stringify(row.rules), }, { header: "Tasks to trigger on alert", accessorKey: "failTriggerTasks", - accessorFn: row => row.fail_trigger_tasks, + accessorFn: (row) => row.fail_trigger_tasks, }, { header: "Tasks to trigger after recovery", accessorKey: "recoverTriggerTasks", - accessorFn: row => row.recover_trigger_tasks, + accessorFn: (row) => row.recover_trigger_tasks, }, { header: "Enable", accessorKey: "enable", - accessorFn: row => row.enable, + accessorFn: (row) => row.enable, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; @@ -124,64 +132,60 @@ export default function AlertRulePage() {
- r.original.id), - mutate: mutate, - }}> + r.original.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} + )) + ) : ( + + + No results. + + + )} + +
- ) + ); } diff --git a/src/routes/cron.tsx b/src/routes/cron.tsx index 8b07ddd..f8d4e1d 100644 --- a/src/routes/cron.tsx +++ b/src/routes/cron.tsx @@ -1,28 +1,34 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ModelCron } from "@/types" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { useEffect } from "react" -import { ActionButtonGroup } from "@/components/action-button-group" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { Skeleton } from "@/components/ui/skeleton" -import { toast } from "sonner" -import { deleteCron, runCron } from "@/api/cron" -import { CronCard } from "@/components/cron" -import { cronTypes } from "@/types" -import { IconButton } from "@/components/xui/icon-button" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ModelCron } from "@/types"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { useEffect } from "react"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { toast } from "sonner"; +import { deleteCron, runCron } from "@/api/cron"; +import { CronCard } from "@/components/cron"; +import { cronTypes } from "@/types"; +import { IconButton } from "@/components/xui/icon-button"; export default function CronPage() { - const { data, mutate, error, isLoading } = useSWR('/api/v1/cron', swrFetcher); + const { data, mutate, error, isLoading } = useSWR("/api/v1/cron", swrFetcher); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -31,7 +37,7 @@ export default function CronPage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -50,205 +56,193 @@ export default function CronPage() { { header: "ID", accessorKey: "id", - accessorFn: row => row.id, + accessorFn: (row) => row.id, }, { header: "Name", accessorKey: "name", cell: ({ row }) => { const s = row.original; - return ( -
- {s.name} -
- ) - } + return
{s.name}
; + }, }, { header: "Task Type", accessorKey: "taskType", - accessorFn: row => cronTypes[row.task_type] || '', + accessorFn: (row) => cronTypes[row.task_type] || "", }, { header: "Cron Expression", accessorKey: "scheduler", - accessorFn: row => row.scheduler, + accessorFn: (row) => row.scheduler, }, { header: "Command", accessorKey: "command", cell: ({ row }) => { const s = row.original; - return ( -
- {s.command} -
- ) - } + return
{s.command}
; + }, }, { header: "Notifier Group", accessorKey: "ngroup", - accessorFn: row => row.notification_group_id, + accessorFn: (row) => row.notification_group_id, }, { header: "Send Success Notification", accessorKey: "pushSuccessful", - accessorFn: row => row.push_successful ?? false, + accessorFn: (row) => row.push_successful ?? false, }, { header: "Coverage", accessorKey: "cover", - accessorFn: row => row.cover, + accessorFn: (row) => row.cover, cell: ({ row }) => { const s = row.original; return (
{(() => { switch (s.cover) { - case 0: { - return Ignore All - } - case 1: { - return Cover All - } - case 2: { - return On alert - } + case 0: { + return Ignore All; + } + case 1: { + return Cover All; + } + case 2: { + return On alert; + } } })()}
- ) - } + ); + }, }, { header: "Specific Servers", accessorKey: "servers", - accessorFn: row => row.servers, + accessorFn: (row) => row.servers, }, { header: "Last Execution", accessorKey: "lastExecution", - accessorFn: row => row.last_executed_at, + accessorFn: (row) => row.last_executed_at, cell: ({ row }) => { const s = row.original; - return ( -
- {s.last_executed_at} -
- ) - } + return
{s.last_executed_at}
; + }, }, { header: "Last Result", accessorKey: "lastResult", - accessorFn: row => row.last_result ?? false, + accessorFn: (row) => row.last_result ?? false, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + <> - { + { try { await runCron(s.id); } catch (e) { console.error(e); toast("Error executing task", { description: "Please see the console for details.", - }) + }); await mutate(); return; } toast("Success", { description: "The task triggered successfully.", - }) + }); await mutate(); - }} /> + }} + /> - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; return (
-

- Task -

- r.original.id), - mutate: mutate, - }}> +

Task

+ r.original.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} -
- ) + )) + ) : ( + + + No results. + + + )} + + + + ); } diff --git a/src/routes/ddns.tsx b/src/routes/ddns.tsx index 6a6603f..061de29 100644 --- a/src/routes/ddns.tsx +++ b/src/routes/ddns.tsx @@ -1,19 +1,25 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { DDNSCard } from "@/components/ddns" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ModelDDNSProfile } from "@/types" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { useEffect, useState } from "react" -import { ActionButtonGroup } from "@/components/action-button-group" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { Skeleton } from "@/components/ui/skeleton" -import { toast } from "sonner" -import { deleteDDNSProfiles, getDDNSProviders } from "@/api/ddns" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { DDNSCard } from "@/components/ddns"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ModelDDNSProfile } from "@/types"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { useEffect, useState } from "react"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { toast } from "sonner"; +import { deleteDDNSProfiles, getDDNSProviders } from "@/api/ddns"; export default function DDNSPage() { - const { data, mutate, error, isLoading } = useSWR('/api/v1/ddns', swrFetcher); + const { data, mutate, error, isLoading } = useSWR("/api/v1/ddns", swrFetcher); const [providers, setProviders] = useState([]); useEffect(() => { @@ -28,8 +34,8 @@ export default function DDNSPage() { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -38,7 +44,7 @@ export default function DDNSPage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -57,140 +63,129 @@ export default function DDNSPage() { { header: "ID", accessorKey: "id", - accessorFn: row => row.id, + accessorFn: (row) => row.id, }, { header: "Name", accessorKey: "name", - accessorFn: row => row.name, + accessorFn: (row) => row.name, cell: ({ row }) => { const s = row.original; - return ( -
- {s.name} -
- ) - } + return
{s.name}
; + }, }, { header: "IPv4 Enabled", accessorKey: "enableIPv4", - accessorFn: row => row.enable_ipv4 ?? false, + accessorFn: (row) => row.enable_ipv4 ?? false, }, { header: "IPv6 Enabled", accessorKey: "enableIPv6", - accessorFn: row => row.enable_ipv6 ?? false, + accessorFn: (row) => row.enable_ipv6 ?? false, }, { header: "DDNS Provider", accessorKey: "provider", - accessorFn: row => row.provider, + accessorFn: (row) => row.provider, }, { header: "Domains", accessorKey: "domains", - accessorFn: row => row.domains, + accessorFn: (row) => row.domains, cell: ({ row }) => { const s = row.original; - return ( -
- {s.domains} -
- ) - } + return
{s.domains}
; + }, }, { header: "Maximum retry attempts", accessorKey: "maxRetries", - accessorFn: row => row.max_retries, + accessorFn: (row) => row.max_retries, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; return (
-

- Dynamic DNS -

- r.original.id), - mutate: mutate, - }}> +

Dynamic DNS

+ r.original.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} -
- ) + )) + ) : ( + + + No results. + + + )} + + + + ); } diff --git a/src/routes/nat.tsx b/src/routes/nat.tsx index 4fdb378..d4d0efc 100644 --- a/src/routes/nat.tsx +++ b/src/routes/nat.tsx @@ -1,26 +1,32 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { NATCard } from "@/components/nat" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ModelNAT } from "@/types" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { useEffect } from "react" -import { ActionButtonGroup } from "@/components/action-button-group" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { Skeleton } from "@/components/ui/skeleton" -import { toast } from "sonner" -import { deleteNAT } from "@/api/nat" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { NATCard } from "@/components/nat"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ModelNAT } from "@/types"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { useEffect } from "react"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { toast } from "sonner"; +import { deleteNAT } from "@/api/nat"; export default function NATPage() { - const { data, mutate, error, isLoading } = useSWR('/api/v1/nat', swrFetcher); + const { data, mutate, error, isLoading } = useSWR("/api/v1/nat", swrFetcher); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -29,7 +35,7 @@ export default function NATPage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -48,138 +54,123 @@ export default function NATPage() { { header: "ID", accessorKey: "id", - accessorFn: row => row.id, + accessorFn: (row) => row.id, }, { header: "Name", accessorKey: "name", - accessorFn: row => row.name, + accessorFn: (row) => row.name, cell: ({ row }) => { const s = row.original; - return ( -
- {s.name} -
- ) - } + return
{s.name}
; + }, }, { header: "Server ID", accessorKey: "serverID", - accessorFn: row => row.server_id, + accessorFn: (row) => row.server_id, }, { header: "Local service", accessorKey: "host", - accessorFn: row => row.host, + accessorFn: (row) => row.host, cell: ({ row }) => { const s = row.original; - return ( -
- {s.host} -
- ) - } + return
{s.host}
; + }, }, { header: "Bind hostname", accessorKey: "domain", - accessorFn: row => row.domain, + accessorFn: (row) => row.domain, cell: ({ row }) => { const s = row.original; - return ( -
- {s.domain} -
- ) - } + return
{s.domain}
; + }, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; return (
-

- NAT Traversal -

- r.original.id), - mutate: mutate, - }}> +

NAT Traversal

+ r.original.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} -
- ) + )) + ) : ( + + + No results. + + + )} + + + + ); } diff --git a/src/routes/notification-group.tsx b/src/routes/notification-group.tsx index a3faf38..60ea1bc 100644 --- a/src/routes/notification-group.tsx +++ b/src/routes/notification-group.tsx @@ -1,27 +1,36 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { useEffect } from "react" -import { ActionButtonGroup } from "@/components/action-button-group" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { Skeleton } from "@/components/ui/skeleton" -import { toast } from "sonner" -import { ModelNotificationGroupResponseItem } from "@/types" -import { deleteNotificationGroups } from "@/api/notification-group" -import { GroupTab } from "@/components/group-tab" -import { NotificationGroupCard } from "@/components/notification-group" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { useEffect } from "react"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { toast } from "sonner"; +import { ModelNotificationGroupResponseItem } from "@/types"; +import { deleteNotificationGroups } from "@/api/notification-group"; +import { GroupTab } from "@/components/group-tab"; +import { NotificationGroupCard } from "@/components/notification-group"; export default function NotificationGroupPage() { - const { data, mutate, error, isLoading } = useSWR("/api/v1/notification-group", swrFetcher); + const { data, mutate, error, isLoading } = useSWR( + "/api/v1/notification-group", + swrFetcher + ); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -30,7 +39,7 @@ export default function NotificationGroupPage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -49,49 +58,48 @@ export default function NotificationGroupPage() { { header: "ID", accessorKey: "id", - accessorFn: row => row.group.id, + accessorFn: (row) => row.group.id, }, { header: "Name", accessorKey: "name", - accessorFn: row => row.group.name, + accessorFn: (row) => row.group.name, cell: ({ row }) => { const s = row.original; - return ( -
- {s.group.name} -
- ) - } + return
{s.group.name}
; + }, }, { header: "Notifiers (ID)", accessorKey: "notifications", - accessorFn: row => row.notifications, + accessorFn: (row) => row.notifications, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; @@ -99,64 +107,60 @@ export default function NotificationGroupPage() {
- r.original.group.id), - mutate: mutate - }}> + r.original.group.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} + )) + ) : ( + + + No results. + + + )} + +
- ) + ); } diff --git a/src/routes/notification.tsx b/src/routes/notification.tsx index d431eff..fedb437 100644 --- a/src/routes/notification.tsx +++ b/src/routes/notification.tsx @@ -1,29 +1,38 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { useEffect } from "react" -import { ActionButtonGroup } from "@/components/action-button-group" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { Skeleton } from "@/components/ui/skeleton" -import { toast } from "sonner" -import { ModelNotification } from "@/types" -import { deleteNotification } from "@/api/notification" -import { NotificationTab } from "@/components/notification-tab" -import { NotifierCard } from "@/components/notifier" -import { useNotification } from "@/hooks/useNotfication" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { useEffect } from "react"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { toast } from "sonner"; +import { ModelNotification } from "@/types"; +import { deleteNotification } from "@/api/notification"; +import { NotificationTab } from "@/components/notification-tab"; +import { NotifierCard } from "@/components/notifier"; +import { useNotification } from "@/hooks/useNotfication"; export default function NotificationPage() { - const { data, mutate, error, isLoading } = useSWR("/api/v1/notification", swrFetcher); + const { data, mutate, error, isLoading } = useSWR( + "/api/v1/notification", + swrFetcher + ); const { notifierGroup } = useNotification(); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -32,7 +41,7 @@ export default function NotificationPage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -51,71 +60,68 @@ export default function NotificationPage() { { header: "ID", accessorKey: "id", - accessorFn: row => row.id, + accessorFn: (row) => row.id, }, { header: "Name", accessorKey: "name", - accessorFn: row => row.name, + accessorFn: (row) => row.name, cell: ({ row }) => { const s = row.original; - return ( -
- {s.name} -
- ) - } + return
{s.name}
; + }, }, { header: "Groups", accessorKey: "groups", - accessorFn: row => { - return notifierGroup?.filter(ng => ng.notifications?.includes(row.id)) - .map(ng => ng.group.id) - || []; + accessorFn: (row) => { + return ( + notifierGroup + ?.filter((ng) => ng.notifications?.includes(row.id)) + .map((ng) => ng.group.id) || [] + ); }, }, { header: "URL", accessorKey: "url", - accessorFn: row => row.url, + accessorFn: (row) => row.url, cell: ({ row }) => { const s = row.original; - return ( -
- {s.url} -
- ) - } + return
{s.url}
; + }, }, { header: "Verify TLS", accessorKey: "verify_tls", - accessorFn: row => row.verify_tls, + accessorFn: (row) => row.verify_tls, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; @@ -123,64 +129,60 @@ export default function NotificationPage() {
- r.original.id), - mutate: mutate - }}> + r.original.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} + )) + ) : ( + + + No results. + + + )} + +
- ) + ); } diff --git a/src/routes/server-group.tsx b/src/routes/server-group.tsx index 8ac8ed0..079c6be 100644 --- a/src/routes/server-group.tsx +++ b/src/routes/server-group.tsx @@ -1,27 +1,36 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { useEffect } from "react" -import { ActionButtonGroup } from "@/components/action-button-group" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { Skeleton } from "@/components/ui/skeleton" -import { toast } from "sonner" -import { ModelServerGroupResponseItem } from "@/types" -import { deleteServerGroups } from "@/api/server-group" -import { GroupTab } from "@/components/group-tab" -import { ServerGroupCard } from "@/components/server-group" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { useEffect } from "react"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { toast } from "sonner"; +import { ModelServerGroupResponseItem } from "@/types"; +import { deleteServerGroups } from "@/api/server-group"; +import { GroupTab } from "@/components/group-tab"; +import { ServerGroupCard } from "@/components/server-group"; export default function ServerGroupPage() { - const { data, mutate, error, isLoading } = useSWR("/api/v1/server-group", swrFetcher); + const { data, mutate, error, isLoading } = useSWR( + "/api/v1/server-group", + swrFetcher + ); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -30,7 +39,7 @@ export default function ServerGroupPage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -49,49 +58,48 @@ export default function ServerGroupPage() { { header: "ID", accessorKey: "id", - accessorFn: row => row.group.id, + accessorFn: (row) => row.group.id, }, { header: "Name", accessorKey: "name", - accessorFn: row => row.group.name, + accessorFn: (row) => row.group.name, cell: ({ row }) => { const s = row.original; - return ( -
- {s.group.name} -
- ) - } + return
{s.group.name}
; + }, }, { header: "Servers (ID)", accessorKey: "servers", - accessorFn: row => row.servers, + accessorFn: (row) => row.servers, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; @@ -99,64 +107,59 @@ export default function ServerGroupPage() {
- r.original.group.id), - mutate: mutate - }}> + r.original.group.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} + )) + ) : ( + + + No results. + + + )} + +
- ) + ); } diff --git a/src/routes/server.tsx b/src/routes/server.tsx index a95c5b5..d071887 100644 --- a/src/routes/server.tsx +++ b/src/routes/server.tsx @@ -1,33 +1,39 @@ -import { swrFetcher } from "@/api/api" -import { Checkbox } from "@/components/ui/checkbox" -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" -import { ModelServer as Server, ModelForceUpdateResponse } from "@/types" -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table" -import useSWR from "swr" -import { HeaderButtonGroup } from "@/components/header-button-group" -import { deleteServer, forceUpdateServer } from "@/api/server" -import { ServerCard } from "@/components/server" -import { Skeleton } from "@/components/ui/skeleton" -import { ActionButtonGroup } from "@/components/action-button-group" -import { useEffect } from "react" -import { toast } from "sonner" -import { IconButton } from "@/components/xui/icon-button" -import { InstallCommandsMenu } from "@/components/install-commands" -import { NoteMenu } from "@/components/note-menu" -import { TerminalButton } from "@/components/terminal" -import { useServer } from "@/hooks/useServer" -import { joinIP } from "@/lib/utils" +import { swrFetcher } from "@/api/api"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { ModelServer as Server, ModelForceUpdateResponse } from "@/types"; +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import useSWR from "swr"; +import { HeaderButtonGroup } from "@/components/header-button-group"; +import { deleteServer, forceUpdateServer } from "@/api/server"; +import { ServerCard } from "@/components/server"; +import { ActionButtonGroup } from "@/components/action-button-group"; +import { useEffect } from "react"; +import { toast } from "sonner"; +import { IconButton } from "@/components/xui/icon-button"; +import { InstallCommandsMenu } from "@/components/install-commands"; +import { NoteMenu } from "@/components/note-menu"; +import { TerminalButton } from "@/components/terminal"; +import { useServer } from "@/hooks/useServer"; +import { joinIP } from "@/lib/utils"; export default function ServerPage() { - const { data, mutate, error, isLoading } = useSWR('/api/v1/server', swrFetcher); + const { data, mutate, error, isLoading } = useSWR("/api/v1/server", swrFetcher); const { serverGroups } = useServer(); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -36,7 +42,7 @@ export default function ServerPage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -55,28 +61,24 @@ export default function ServerPage() { { header: "ID", accessorKey: "id", - accessorFn: row => `${row.id}(${row.display_index})`, + accessorFn: (row) => `${row.id}(${row.display_index})`, }, { header: "Name", accessorKey: "name", - accessorFn: row => row.name, + accessorFn: (row) => row.name, cell: ({ row }) => { const s = row.original; - return ( -
- {s.name} -
- ) - } + return
{s.name}
; + }, }, { header: "Groups", accessorKey: "groups", - accessorFn: row => { - return serverGroups?.filter(sg => sg.servers?.includes(row.id)) - .map(sg => sg.group.id) - || []; + accessorFn: (row) => { + return ( + serverGroups?.filter((sg) => sg.servers?.includes(row.id)).map((sg) => sg.group.id) || [] + ); }, }, { @@ -84,27 +86,23 @@ export default function ServerPage() { header: "IP", cell: ({ row }) => { const s = row.original; - return ( -
- {joinIP(s.geoip?.ip)} -
- ) - } + return
{joinIP(s.geoip?.ip)}
; + }, }, { header: "Version", accessorKey: "host.version", - accessorFn: row => row.host.version || "Unknown", + accessorFn: (row) => row.host.version || "Unknown", }, { header: "Enable DDNS", accessorKey: "enableDDNS", - accessorFn: row => row.enable_ddns ?? false, + accessorFn: (row) => row.enable_ddns ?? false, }, { header: "Hide from Guest", accessorKey: "hideForGuest", - accessorFn: row => row.hide_for_guest ?? false, + accessorFn: (row) => row.hide_for_guest ?? false, }, { id: "installCommands", @@ -125,42 +123,47 @@ export default function ServerPage() { cell: ({ row }) => { const s = row.original; return ( - + <> - ) + ); }, }, - ] + ]; const table = useReactTable({ data: data ?? [], columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; return (
-

- Server -

- r.original.id), - mutate: mutate, - }}> - { - const id = selectedRows.map(r => r.original.id); +

Server

+ r.original.id), + mutate: mutate, + }} + > + { + const id = selectedRows.map((r) => r.original.id); if (id.length < 1) { toast("Error", { - description: "No rows are selected." + description: "No rows are selected.", }); return; } @@ -172,69 +175,63 @@ export default function ServerPage() { console.error(e); toast("Error executing task", { description: "Please see the console for details.", - }) + }); return; } toast("Task executed successfully", { description: `Result (Server ID): - ${resp.success?.length ? `Success: ${resp.success.join(",")}, ` : ''} - ${resp.failure?.length ? `Failure: ${resp.failure.join(",")}, ` : ''} - ${resp.offline?.length ? `Offline: ${resp.offline.join(",")}` : ''} - ` - }) - }} /> + ${resp.success?.length ? `Success: ${resp.success.join(",")}, ` : ""} + ${resp.failure?.length ? `Failure: ${resp.failure.join(",")}, ` : ""} + ${resp.offline?.length ? `Offline: ${resp.offline.join(",")}` : ""} + `, + }); + }} + />
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} + )) + ) : ( + + + No results. + + + )} + +
- ) + ); } diff --git a/src/routes/service.tsx b/src/routes/service.tsx index 59f4674..1b7e113 100644 --- a/src/routes/service.tsx +++ b/src/routes/service.tsx @@ -1,28 +1,37 @@ -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 { 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" +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 { 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 { toast } from "sonner"; export default function ServicePage() { - const { data, mutate, error, isLoading } = useSWR('/api/v1/service', swrFetcher); + const { data, mutate, error, isLoading } = useSWR( + "/api/v1/service", + swrFetcher + ); useEffect(() => { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); const columns: ColumnDef[] = [ { @@ -31,7 +40,7 @@ export default function ServicePage() { table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -50,105 +59,100 @@ export default function ServicePage() { { header: "ID", accessorKey: "service.id", - accessorFn: row => row.service.id, + accessorFn: (row) => row.service.id, }, { header: "Name", - accessorFn: row => row.service.name, + accessorFn: (row) => row.service.name, accessorKey: "service.name", cell: ({ row }) => { const s = row.original; - return ( -
- {s.service.name} -
- ) - } + return
{s.service.name}
; + }, }, { header: "Target", - accessorFn: row => row.service.target, + accessorFn: (row) => row.service.target, accessorKey: "service.target", cell: ({ row }) => { const s = row.original; - return ( -
- {s.service.target} -
- ) - } + return
{s.service.target}
; + }, }, { header: "Coverage", accessorKey: "service.cover", - accessorFn: row => row.service.cover, + accessorFn: (row) => row.service.cover, cell: ({ row }) => { const s = row.original.service; return (
{(() => { switch (s.cover) { - case 0: { - return Cover All - } - case 1: { - return Ignore All - } + case 0: { + return Cover All; + } + case 1: { + return Ignore All; + } } })()}
- ) - } + ); + }, }, { header: "Specific Servers", accessorKey: "service.skipServers", - accessorFn: row => Object.keys(row.service.skip_servers ?? {}), + accessorFn: (row) => Object.keys(row.service.skip_servers ?? {}), }, { header: "Type", accessorKey: "service.type", - accessorFn: row => row.service.type, - cell: ({ row }) => serviceTypes[row.original.service.type] || '', + accessorFn: (row) => row.service.type, + cell: ({ row }) => serviceTypes[row.original.service.type] || "", }, { header: "Interval", accessorKey: "service.duration", - accessorFn: row => row.service.duration, + accessorFn: (row) => row.service.duration, }, { header: "Notifier Group ID", accessorKey: "service.ngroup", - accessorFn: row => row.service.notification_group_id, + accessorFn: (row) => row.service.notification_group_id, }, { header: "On Trigger", accessorKey: "service.triggerTask", - accessorFn: row => row.service.enable_trigger_task ?? false, + accessorFn: (row) => row.service.enable_trigger_task ?? false, }, { header: "Tasks to trigger on alert", accessorKey: "service.failTriggerTasks", - accessorFn: row => row.service.fail_trigger_tasks, + accessorFn: (row) => row.service.fail_trigger_tasks, }, { header: "Tasks to trigger after recovery", accessorKey: "service.recoverTriggerTasks", - accessorFn: row => row.service.recover_trigger_tasks, + accessorFn: (row) => row.service.recover_trigger_tasks, }, { id: "actions", header: "Actions", cell: ({ row }) => { - const s = row.original + const s = row.original; return ( - + - ) + ); }, }, - ] + ]; const dataArr = useMemo(() => { return conv.recordToArr(data?.services ?? {}); @@ -158,74 +162,68 @@ export default function ServicePage() { data: dataArr, columns, getCoreRowModel: getCoreRowModel(), - }) + }); const selectedRows = table.getSelectedRowModel().rows; return (
-

- Service -

- r.original.service.id), - mutate: mutate, - }}> +

Service

+ r.original.service.id), + mutate: mutate, + }} + >
- {isLoading ? ( -
- - - -
- ) : ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} + + + {isLoading ? ( + + + Loading ... + + + ) : table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- )} -
- ) + )) + ) : ( + + + No results. + + + )} + + + + ); } diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx index 06bc805..a2a3856 100644 --- a/src/routes/settings.tsx +++ b/src/routes/settings.tsx @@ -1,11 +1,11 @@ -import { useEffect, useState } from "react" -import { toast } from "sonner" -import { ModelConfig, settingCoverageTypes, nezhaLang } from "@/types" -import { SettingsTab } from "@/components/settings-tab" -import { z } from "zod" -import { asOptionalField } from "@/lib/utils" -import { useForm } from "react-hook-form" -import { zodResolver } from "@hookform/resolvers/zod" +import { useEffect, useState } from "react"; +import { toast } from "sonner"; +import { ModelConfig, settingCoverageTypes, nezhaLang } from "@/types"; +import { SettingsTab } from "@/components/settings-tab"; +import { z } from "zod"; +import { asOptionalField } from "@/lib/utils"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; import { Form, FormControl, @@ -13,24 +13,21 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/ui/form" -import { getSettings, updateSettings } from "@/api/settings" -import { Input } from "@/components/ui/input" -import { Textarea } from "@/components/ui/textarea" -import { Checkbox } from "@/components/ui/checkbox" -import { Label } from "@/components/ui/label" -import { Button } from "@/components/ui/button" -import { - Card, - CardContent, -} from "@/components/ui/card" +} from "@/components/ui/form"; +import { getSettings, updateSettings } from "@/api/settings"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Label } from "@/components/ui/label"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" +} from "@/components/ui/select"; const settingFormSchema = z.object({ custom_nameservers: asOptionalField(z.string()), @@ -56,8 +53,8 @@ export default function SettingsPage() { if (error) toast("Error", { description: `Error fetching resource: ${error.message}.`, - }) - }, [error]) + }); + }, [error]); useEffect(() => { (async () => { @@ -67,21 +64,23 @@ export default function SettingsPage() { } catch (e) { if (e instanceof Error) setError(e); } - })() - }, []) + })(); + }, []); const form = useForm>({ resolver: zodResolver(settingFormSchema), - defaultValues: config ? config : { - ip_change_notification_group_id: 0, - cover: 1, - site_name: "", - language: "", - }, + defaultValues: config + ? config + : { + ip_change_notification_group_id: 0, + cover: 1, + site_name: "", + language: "", + }, resetOptions: { keepDefaultValues: false, - } - }) + }, + }); useEffect(() => { if (config) { @@ -101,9 +100,9 @@ export default function SettingsPage() { } finally { toast("Success", { description: "Config updated successfully.", - }) + }); } - } + }; return (
@@ -118,9 +117,7 @@ export default function SettingsPage() { Site Name - + @@ -141,7 +138,9 @@ export default function SettingsPage() { {Object.entries(nezhaLang).map(([k, v]) => ( - {v} + + {v} + ))} @@ -157,10 +156,7 @@ export default function SettingsPage() { Custom Codes (Style and Script) -