#591 - sites [wip]

resources/js/pages/server-logs/components/columns.tsx

@@ -44,7 +44,7 @@ const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
             <DialogTitle>View Log</DialogTitle>
             <DialogDescription className="sr-only">This is all content of the log</DialogDescription>
           </DialogHeader>
-          <ScrollArea className="bg-accent text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
+          <ScrollArea className="bg-accent/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
             {content}
             <ScrollBar orientation="vertical" />
           </ScrollArea>

resources/js/pages/server-logs/components/logs.tsx

@@ -0,0 +1,41 @@
+import { Server } from '@/types/server';
+import { Site } from '@/types/site';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import React, { useState } from 'react';
+import { TableSkeleton } from '@/components/table-skeleton';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/server-logs/components/columns';
+
+export default function Logs({ server, site }: { server: Server; site?: Site }) {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const query = useQuery({
+    queryKey: ['serverLogs', currentPage],
+    queryFn: async () => {
+      return (
+        await axios.get(route('logs.json', { server: server.id, site: site?.id }), {
+          params: { page: currentPage },
+        })
+      ).data;
+    },
+    placeholderData: (prev) => prev,
+    refetchInterval: 5000,
+  });
+
+  return (
+    <>
+      {query.isLoading ? (
+        <TableSkeleton rows={5} cells={3} />
+      ) : (
+        <DataTable
+          columns={columns}
+          paginatedData={query.data}
+          onPageChange={setCurrentPage}
+          isFetching={query.isFetching}
+          isLoading={query.isLoading}
+        />
+      )}
+    </>
+  );
+}