#591 - server-logs

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

@@ -1,49 +1,127 @@
-import { ColumnDef, Row } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
 import { Button } from '@/components/ui/button';
-import { EyeIcon } from 'lucide-react';
+import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
 import type { ServerLog } from '@/types/server-log';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { ReactNode, useState } from 'react';
 import axios from 'axios';
 import DateTime from '@/components/date-time';
 import LogOutput from '@/components/log-output';
 import { useQuery } from '@tanstack/react-query';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { useForm } from '@inertiajs/react';
+import FormSuccessful from '@/components/form-successful';
 
-const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
+function View({ serverLog }: { serverLog: ServerLog }) {
   const [open, setOpen] = useState(false);
 
   const query = useQuery({
-    queryKey: ['server-log', row.original.id],
+    queryKey: ['server-log', serverLog.id],
     queryFn: async () => {
-      const response = await axios.get(route('logs.show', { server: row.original.server_id, log: row.original.id }));
-      return response.data;
+      try {
+        const response = await axios.get(route('logs.show', { server: serverLog.server_id, log: serverLog.id }));
+        return response.data;
+      } catch (error: unknown) {
+        if (axios.isAxiosError(error)) {
+          throw new Error(error.response?.data?.error || 'An error occurred while fetching the log');
+        }
+        throw new Error('Unknown error occurred');
+      }
     },
     enabled: open,
-    refetchInterval: 2500,
+    retry: false,
+    refetchInterval: (query) => {
+      if (query.state.status === 'error') return false;
+      return 2500;
+    },
   });
 
   return (
-    <div className="flex items-center justify-end">
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <Button variant="outline" size="sm">
-            <EyeIcon />
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-5xl">
-          <DialogHeader>
-            <DialogTitle>View Log</DialogTitle>
-            <DialogDescription className="sr-only">This is all content of the log</DialogDescription>
-          </DialogHeader>
-          <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
-          <DialogFooter>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>View Log</DialogTitle>
+          <DialogDescription className="sr-only">This is all content of the log</DialogDescription>
+        </DialogHeader>
+        <LogOutput>
+          <>
+            {query.isLoading && 'Loading...'}
+            {query.isError && <div className="text-red-500">Error: {query.error.message}</div>}
+            {query.data && !query.isError && query.data}
+          </>
+        </LogOutput>
+        <DialogFooter>
+          <Download serverLog={serverLog}>
             <Button variant="outline">Download</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+          </Download>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
-};
+}
+
+function Download({ serverLog, children }: { serverLog: ServerLog; children: ReactNode }) {
+  return (
+    <a href={route('logs.download', { server: serverLog.server_id, log: serverLog.id })} target="_blank">
+      {children}
+    </a>
+  );
+}
+
+function Delete({ serverLog }: { serverLog: ServerLog }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('logs.destroy', { server: serverLog.server_id, log: serverLog.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Delete
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete {serverLog.name}</DialogTitle>
+          <DialogDescription className="sr-only">Delete log</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>
+            Are you sure you want to delete <strong>{serverLog.name}</strong>?
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
 
 export const columns: ColumnDef<ServerLog>[] = [
   {
@@ -63,6 +141,27 @@ export const columns: ColumnDef<ServerLog>[] = [
     id: 'actions',
     enableColumnFilter: false,
     enableSorting: false,
-    cell: ({ row }) => <LogActionCell row={row} />,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end">
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreVerticalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <View serverLog={row.original} />
+              <Download serverLog={row.original}>
+                <DropdownMenuItem>Download</DropdownMenuItem>
+              </Download>
+              <DropdownMenuSeparator />
+              <Delete serverLog={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
   },
 ];

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

@@ -0,0 +1,79 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { FormEvent, ReactNode, useState } from 'react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { useForm, usePage } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { ServerLog } from '@/types/server-log';
+import { Server } from '@/types/server';
+
+export default function LogForm({ serverLog, children }: { serverLog?: ServerLog; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const page = usePage<{ server: Server }>();
+  const form = useForm<{
+    path: string;
+  }>({
+    path: serverLog?.name || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (serverLog) {
+      form.put(route('logs.update', { server: page.props.server.id, serverLog: serverLog.id }), {
+        onSuccess: () => {
+          setOpen(false);
+          form.reset();
+        },
+      });
+      return;
+    }
+
+    form.post(route('logs.store', { server: page.props.server.id }), {
+      onSuccess: () => {
+        setOpen(false);
+        form.reset();
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{serverLog ? 'Edit' : 'Create'} remote log</DialogTitle>
+          <DialogDescription className="sr-only">{serverLog ? 'Edit' : 'Create new'} remote log</DialogDescription>
+        </DialogHeader>
+        <Form id="remote-log-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="path">Path</Label>
+              <Input type="text" id="path" value={form.data.path} onChange={(e) => form.setData('path', e.target.value)} />
+              <InputError message={form.errors.path} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button form="remote-log-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { Head, usePage } from '@inertiajs/react';
+import { PaginatedData } from '@/types';
+import { ServerLog } from '@/types/server-log';
+import { Server } from '@/types/server';
+import ServerLayout from '@/layouts/server/layout';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/server-logs/components/columns';
+import { Button } from '@/components/ui/button';
+import { BookOpenIcon, PlusIcon } from 'lucide-react';
+import LogForm from '@/pages/server-logs/components/form';
+
+export default function ServerLogs() {
+  const page = usePage<{
+    title: string;
+    server: Server;
+    logs: PaginatedData<ServerLog>;
+    remote: boolean;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`${page.props.title} - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title={page.props.title} description="Here you can see all logs" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/servers/firewall" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            {page.props.remote && (
+              <LogForm>
+                <Button>
+                  <PlusIcon />
+                  <span className="hidden lg:block">Create</span>
+                </Button>
+              </LogForm>
+            )}
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.logs} />
+      </Container>
+    </ServerLayout>
+  );
+}