#591 - server-logs

app/Actions/ServerLog/CreateLog.php

@@ -1,11 +1,12 @@
 <?php
 
-namespace App\Actions\Server;
+namespace App\Actions\ServerLog;
 
 use App\Models\Server;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\ValidationException;
 
-class CreateServerLog
+class CreateLog
 {
     /**
      * @param  array<string, mixed>  $input
@@ -14,6 +15,8 @@ class CreateServerLog
      */
     public function create(Server $server, array $input): void
     {
+        Validator::make($input, self::rules())->validate();
+
         $server->logs()->create([
             'is_remote' => true,
             'name' => $input['path'],

app/Actions/ServerLog/UpdateLog.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Actions\ServerLog;
+
+use App\Models\ServerLog;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\ValidationException;
+
+class UpdateLog
+{
+    /**
+     * @param  array<string, mixed>  $input
+     *
+     * @throws ValidationException
+     */
+    public function update(ServerLog $serverLog, array $input): void
+    {
+        Validator::make($input, self::rules())->validate();
+
+        $serverLog->update([
+            'name' => $input['path'],
+        ]);
+    }
+
+    /**
+     * @return array<string, string>
+     */
+    public static function rules(): array
+    {
+        return [
+            'path' => 'required',
+        ];
+    }
+}

app/Exceptions/Handler.php

@@ -54,6 +54,14 @@ public function render($request, Throwable $e): Response
             abort(404, class_basename($e->getModel()).' not found.');
         }
 
+        if ($e instanceof SSHError) {
+            if ($request->header('X-Inertia')) {
+                return back()->with('error', $e->getLog()?->getContent(30) ?? $e->getMessage());
+            }
+
+            return response()->json(['error' => $e->getLog()?->getContent(30) ?? $e->getMessage()], 500);
+        }
+
         return parent::render($request, $e);
     }
 }

app/Http/Controllers/ServerLogController.php

@@ -2,19 +2,53 @@
 
 namespace App\Http\Controllers;
 
+use App\Actions\ServerLog\CreateLog;
+use App\Actions\ServerLog\UpdateLog;
 use App\Http\Resources\ServerLogResource;
 use App\Models\Server;
 use App\Models\ServerLog;
 use App\Models\Site;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\RouteAttributes\Attributes\Delete;
 use Spatie\RouteAttributes\Attributes\Get;
 use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Patch;
+use Spatie\RouteAttributes\Attributes\Post;
 use Spatie\RouteAttributes\Attributes\Prefix;
+use Symfony\Component\HttpFoundation\StreamedResponse;
+use Throwable;
 
 #[Prefix('servers/{server}/logs')]
 #[Middleware(['auth', 'has-project'])]
 class ServerLogController extends Controller
 {
+    #[Get('/', name: 'logs')]
+    public function index(Server $server): Response
+    {
+        $this->authorize('viewAny', [ServerLog::class, $server]);
+
+        return Inertia::render('server-logs/index', [
+            'title' => 'Server logs',
+            'logs' => ServerLogResource::collection($server->logs()->where('is_remote', 0)->latest()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Get('/remote', name: 'logs.remote')]
+    public function remote(Server $server): Response
+    {
+        $this->authorize('viewAny', [ServerLog::class, $server]);
+
+        return Inertia::render('server-logs/index', [
+            'title' => 'Remote logs',
+            'logs' => ServerLogResource::collection($server->logs()->where('is_remote', 1)->latest()->simplePaginate(config('web.pagination_size'))),
+            'remote' => true,
+        ]);
+    }
+
     #[Get('/json/{site?}', name: 'logs.json')]
     public function json(Server $server, ?Site $site = null): ResourceCollection
     {
@@ -35,4 +69,45 @@ public function show(Server $server, ServerLog $log): string
 
         return $log->getContent();
     }
+
+    /**
+     * @throws Throwable
+     */
+    #[Get('/{log}/download', name: 'logs.download')]
+    public function download(Server $server, ServerLog $log): StreamedResponse
+    {
+        $this->authorize('view', $log);
+
+        return $log->download();
+    }
+
+    #[Post('/', name: 'logs.store')]
+    public function store(Request $request, Server $server): RedirectResponse
+    {
+        $this->authorize('create', [ServerLog::class, $server]);
+
+        app(CreateLog::class)->create($server, $request->input());
+
+        return back()->with('success', 'Log created successfully');
+    }
+
+    #[Patch('{log}', name: 'logs.update')]
+    public function update(Request $request, Server $server, ServerLog $log): RedirectResponse
+    {
+        $this->authorize('update', $log);
+
+        app(UpdateLog::class)->update($log, $request->input());
+
+        return back()->with('success', 'Log updated successfully');
+    }
+
+    #[Delete('{log}', name: 'logs.destroy')]
+    public function destroy(Server $server, ServerLog $log): RedirectResponse
+    {
+        $this->authorize('delete', $log);
+
+        $log->delete();
+
+        return back()->with('success', 'Log deleted successfully');
+    }
 }

resources/js/components/log-output.tsx

@@ -26,7 +26,7 @@ export default function LogOutput({ children }: { children: ReactNode }) {
         className="bg-accent/50 text-accent-foreground relative h-[500px] w-full overflow-auto p-4 font-mono text-sm break-all whitespace-pre-wrap"
       >
         <div>{children}</div>
-        <div ref={endRef} />
+        <div ref={endRef} className="h-20" />
         <ScrollBar orientation="vertical" />
       </ScrollArea>
       <Button

resources/js/layouts/server/layout.tsx

@@ -2,6 +2,7 @@ import { type NavItem } from '@/types';
 import {
   ArrowLeftIcon,
   ClockIcon,
+  CloudIcon,
   CloudUploadIcon,
   CogIcon,
   DatabaseIcon,
@@ -9,6 +10,7 @@ import {
   HomeIcon,
   KeyIcon,
   ListEndIcon,
+  LogsIcon,
   MousePointerClickIcon,
   RocketIcon,
   UsersIcon,
@@ -127,11 +129,25 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
     //   href: '#',
     //   icon: TerminalSquareIcon,
     // },
-    // {
-    //   title: 'Logs',
-    //   href: '#',
-    //   icon: LogsIcon,
-    // },
+    {
+      title: 'Logs',
+      href: route('logs', { server: page.props.server.id }),
+      icon: LogsIcon,
+      children: [
+        {
+          title: 'Server logs',
+          href: route('logs', { server: page.props.server.id }),
+          onlyActivePath: route('logs', { server: page.props.server.id }),
+          icon: LogsIcon,
+        },
+        {
+          title: 'Remote logs',
+          href: route('logs.remote', { server: page.props.server.id }),
+          onlyActivePath: route('logs.remote', { server: page.props.server.id }),
+          icon: CloudIcon,
+        },
+      ],
+    },
     // {
     //   title: 'Settings',
     //   href: '#',

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>
+  );
+}

tests/Feature/LogsTest.php

@@ -3,31 +3,28 @@
 namespace Tests\Feature;
 
 use App\Models\ServerLog;
-use App\Web\Pages\Servers\Logs\Index;
-use App\Web\Pages\Servers\Logs\RemoteLogs;
 use Illuminate\Foundation\Testing\RefreshDatabase;
-use Livewire\Livewire;
+use Inertia\Testing\AssertableInertia;
 use Tests\TestCase;
 
 class LogsTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_see_logs()
+    public function test_see_logs(): void
     {
         $this->actingAs($this->user);
 
-        /** @var ServerLog $log */
-        $log = ServerLog::factory()->create([
+        ServerLog::factory()->create([
             'server_id' => $this->server->id,
         ]);
 
-        $this->get(Index::getUrl(['server' => $this->server]))
+        $this->get(route('logs', $this->server))
             ->assertSuccessful()
-            ->assertSee($log->name);
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('server-logs/index'));
     }
 
-    public function test_see_logs_remote()
+    public function test_see_logs_remote(): void
     {
         $this->actingAs($this->user);
 
@@ -38,20 +35,19 @@ public function test_see_logs_remote()
             'name' => 'see-remote-log',
         ]);
 
-        $this->get(RemoteLogs::getUrl(['server' => $this->server]))
+        $this->get(route('logs.remote', $this->server))
             ->assertSuccessful()
-            ->assertSee('see-remote-log');
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('server-logs/index'));
     }
 
-    public function test_create_remote_log()
+    public function test_create_remote_log(): void
     {
         $this->actingAs($this->user);
 
-        Livewire::test(RemoteLogs::class, ['server' => $this->server])
-            ->callAction('create', [
-                'path' => 'test-path',
-            ])
-            ->assertSuccessful();
+        $this->post(route('logs.store', $this->server), [
+            'path' => 'test-path',
+        ])
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('server_logs', [
             'is_remote' => true,