#591 - workers

app/Actions/CronJob/CreateCronJob.php

@@ -13,7 +13,8 @@
 class CreateCronJob
 {
     /**
-     * @param array<string, mixed> $input
+     * @param  array<string, mixed>  $input
+     *
      * @throws SSHError
      */
     public function create(Server $server, array $input): CronJob

app/Actions/Worker/CreateWorker.php

@@ -8,6 +8,7 @@
 use App\Models\Site;
 use App\Models\Worker;
 use App\SSH\Services\ProcessManager\ProcessManager;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\ValidationException;
 
@@ -20,6 +21,8 @@ class CreateWorker
      */
     public function create(Server $server, array $input, ?Site $site = null): void
     {
+        Validator::make($input, self::rules($server, $site))->validate();
+
         $worker = new Worker([
             'server_id' => $server->id,
             'site_id' => $site?->id,

app/Actions/Worker/EditWorker.php

@@ -8,6 +8,7 @@
 use App\Models\Site;
 use App\Models\Worker;
 use App\SSH\Services\ProcessManager\ProcessManager;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\ValidationException;
 
@@ -20,6 +21,8 @@ class EditWorker
      */
     public function edit(Worker $worker, array $input): void
     {
+        Validator::make($input, self::rules($worker->server, $worker->site))->validate();
+
         $worker->fill([
             'command' => $input['command'],
             'user' => $input['user'],

app/Http/Controllers/WorkerController.php

@@ -0,0 +1,131 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Worker\CreateWorker;
+use App\Actions\Worker\DeleteWorker;
+use App\Actions\Worker\EditWorker;
+use App\Actions\Worker\GetWorkerLogs;
+use App\Actions\Worker\ManageWorker;
+use App\Http\Resources\WorkerResource;
+use App\Models\Server;
+use App\Models\Site;
+use App\Models\Worker;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+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\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+use Spatie\RouteAttributes\Attributes\Put;
+
+#[Prefix('servers/{server}')]
+#[Middleware(['auth', 'has-project'])]
+class WorkerController extends Controller
+{
+    #[Get('/workers', name: 'workers')]
+    public function index(Server $server): Response
+    {
+        $this->authorize('viewAny', [Worker::class, $server]);
+
+        return Inertia::render('workers/index', [
+            'workers' => WorkerResource::collection(
+                $server->workers()->latest()->simplePaginate(config('web.pagination_size'))
+            ),
+        ]);
+    }
+
+    #[Get('/sites/{site}/workers', name: 'sites.workers')]
+    public function site(Server $server, Site $site): Response
+    {
+        $this->authorize('viewAny', [Worker::class, $server, $site]);
+
+        return Inertia::render('workers/index', [
+            'workers' => WorkerResource::collection(
+                $site->workers()->latest()->simplePaginate(config('web.pagination_size'))
+            ),
+        ]);
+    }
+
+    #[Post('/workers/{site?}', name: 'workers.store')]
+    public function store(Request $request, Server $server, ?Site $site = null): RedirectResponse
+    {
+        $this->authorize('create', [Worker::class, $server, $site]);
+
+        app(CreateWorker::class)->create($server, $request->all(), $site);
+
+        return back()
+            ->with('info', 'Worker is being created.');
+    }
+
+    #[Put('/workers/{worker}/{site?}', name: 'workers.update')]
+    public function update(Request $request, Server $server, Worker $worker, ?Site $site = null): RedirectResponse
+    {
+        $this->authorize('update', [$worker, $server, $site]);
+
+        app(EditWorker::class)->edit($worker, $request->all());
+
+        return back()
+            ->with('info', 'Worker is being updated.');
+    }
+
+    #[Post('/workers/{worker}/start', name: 'workers.start')]
+    public function start(Server $server, Worker $worker): RedirectResponse
+    {
+        $this->authorize('update', [$worker, $server]);
+
+        app(ManageWorker::class)->start($worker);
+
+        return back()
+            ->with('info', 'Worker is being started.');
+    }
+
+    #[Post('/workers/{worker}/stop', name: 'workers.stop')]
+    public function stop(Server $server, Worker $worker): RedirectResponse
+    {
+        $this->authorize('update', [$worker, $server]);
+
+        app(ManageWorker::class)->stop($worker);
+
+        return back()
+            ->with('info', 'Worker is being stopped.');
+    }
+
+    #[Post('/workers/{worker}/restart', name: 'workers.restart')]
+    public function restart(Server $server, Worker $worker): RedirectResponse
+    {
+        $this->authorize('update', [$worker, $server]);
+
+        app(ManageWorker::class)->restart($worker);
+
+        return back()
+            ->with('info', 'Worker is being restarted.');
+    }
+
+    #[Get('/workers/{worker}/logs', name: 'workers.logs')]
+    public function logs(Server $server, Worker $worker): JsonResponse
+    {
+        $this->authorize('view', [$worker, $server]);
+
+        $logs = app(GetWorkerLogs::class)->getLogs($worker);
+
+        return response()->json([
+            'logs' => $logs,
+        ]);
+    }
+
+    #[Delete('/{worker}/{site?}', name: 'workers.destroy')]
+    public function destroy(Server $server, Worker $worker, ?Site $site = null): RedirectResponse
+    {
+        $this->authorize('delete', [$worker, $server, $site]);
+
+        app(DeleteWorker::class)->delete($worker);
+
+        return back()
+            ->with('info', 'Worker is being deleted.');
+    }
+}

app/Http/Resources/WorkerResource.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Worker;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin Worker */
+class WorkerResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'server_id' => $this->server_id,
+            'command' => $this->command,
+            'user' => $this->user,
+            'auto_start' => $this->auto_start,
+            'auto_restart' => $this->auto_restart,
+            'numprocs' => $this->numprocs,
+            'status' => $this->status,
+            'status_color' => Worker::$statusColors[$this->status] ?? 'gray',
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+        ];
+    }
+}

resources/js/components/app-header.tsx

@@ -13,7 +13,7 @@ export function AppHeader() {
   return (
     <header className="bg-background -ml-1 flex h-12 shrink-0 items-center justify-between gap-2 border-b p-4 md:-ml-2">
       <div className="flex items-center">
-        <SidebarTrigger />
+        <SidebarTrigger className="-ml-1 md:hidden" />
         <div className="flex items-center space-x-2 text-xs">
           <ProjectSwitch />
           <SlashIcon className="size-3" />

resources/js/components/command-cell.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Badge } from '@/components/ui/badge';
+
+export default function CommandCell({ command }: { command: string }) {
+  const [copySuccess, setCopySuccess] = useState(false);
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command).then(() => {
+      setCopySuccess(true);
+      setTimeout(() => {
+        setCopySuccess(false);
+      }, 2000);
+    });
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="inline-flex cursor-pointer justify-start space-x-2 truncate" onClick={copyToClipboard}>
+          <Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[150px] overflow-ellipsis">
+            {command}
+          </Badge>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <span className="flex items-center space-x-2">Copy</span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

resources/js/components/log-output.tsx

@@ -0,0 +1,45 @@
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { ReactNode, useRef, useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowDown, ClockArrowDownIcon } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function LogOutput({ children }: { children: ReactNode }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(false);
+
+  useEffect(() => {
+    if (autoScroll && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [children, autoScroll]);
+
+  const toggleAutoScroll = () => {
+    setAutoScroll(!autoScroll);
+  };
+
+  return (
+    <div className="relative">
+      <ScrollArea ref={scrollRef} className="bg-accent/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
+        {children}
+        <div ref={endRef} />
+        <ScrollBar orientation="vertical" />
+      </ScrollArea>
+      <Button
+        variant="outline"
+        size="icon"
+        className="bg-accent! absolute right-4 bottom-4"
+        onClick={toggleAutoScroll}
+        title={autoScroll ? 'Disable auto-scroll' : 'Enable auto-scroll'}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>{autoScroll ? <ClockArrowDownIcon className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />}</div>
+          </TooltipTrigger>
+          <TooltipContent>{autoScroll ? 'Turn off auto scroll' : 'Auto scroll down'}</TooltipContent>
+        </Tooltip>
+      </Button>
+    </div>
+  );
+}

resources/js/layouts/app/layout.tsx

@@ -1,7 +1,7 @@
 import { AppSidebar } from '@/components/app-sidebar';
 import { AppHeader } from '@/components/app-header';
 import { type BreadcrumbItem, NavItem, SharedData } from '@/types';
-import { type PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren } from 'react';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/react';
 import { Toaster } from '@/components/ui/sonner';
@@ -18,13 +18,13 @@ export default function Layout({
   secondNavTitle?: string;
 }>) {
   const page = usePage<SharedData>();
-  const [sidebarOpen, setSidebarOpen] = useState(
+  // const [sidebarOpen, setSidebarOpen] = useState(
-    (localStorage.getItem('sidebar') === 'true' || false) && !!(secondNavItems && secondNavItems.length > 0),
+  //   (localStorage.getItem('sidebar') === 'true' || false) && !!(secondNavItems && secondNavItems.length > 0),
-  );
+  // );
-  const sidebarOpenChange = (open: boolean) => {
+  // const sidebarOpenChange = (open: boolean) => {
-    setSidebarOpen(open);
+  //   setSidebarOpen(open);
-    localStorage.setItem('sidebar', String(open));
+  //   localStorage.setItem('sidebar', String(open));
-  };
+  // };
 
   if (page.props.flash && page.props.flash.success) toast.success(page.props.flash.success);
   if (page.props.flash && page.props.flash.error) toast.error(page.props.flash.error);
@@ -35,7 +35,7 @@ export default function Layout({
 
   return (
     <QueryClientProvider client={queryClient}>
-      <SidebarProvider open={sidebarOpen} onOpenChange={sidebarOpenChange}>
+      <SidebarProvider defaultOpen={!!(secondNavItems && secondNavItems.length > 0)}>
         <AppSidebar secondNavItems={secondNavItems} secondNavTitle={secondNavTitle} />
         <SidebarInset>
           <AppHeader />

resources/js/layouts/server/layout.tsx

@@ -6,6 +6,7 @@ import {
   DatabaseIcon,
   FlameIcon,
   HomeIcon,
+  ListEndIcon,
   MousePointerClickIcon,
   RocketIcon,
   UsersIcon,
@@ -96,11 +97,12 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
       icon: ClockIcon,
       isDisabled: isMenuDisabled,
     },
-    // {
+    {
-    //   title: 'Workers',
+      title: 'Workers',
-    //   href: '#',
+      href: route('workers', { server: page.props.server.id }),
-    //   icon: ListEndIcon,
+      icon: ListEndIcon,
-    // },
+      isDisabled: isMenuDisabled,
+    },
     // {
     //   title: 'SSH Keys',
     //   href: '#',

resources/js/pages/cronjobs/components/columns.tsx

@@ -19,7 +19,7 @@ import { CronJob } from '@/types/cronjob';
 import { Badge } from '@/components/ui/badge';
 import DateTime from '@/components/date-time';
 import CronJobForm from '@/pages/cronjobs/components/form';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import CommandCell from '@/components/command-cell';
 
 function Delete({ cronJob }: { cronJob: CronJob }) {
   const [open, setOpen] = useState(false);
@@ -60,33 +60,6 @@ function Delete({ cronJob }: { cronJob: CronJob }) {
   );
 }
 
-function CommandCell({ row }: { row: { original: CronJob } }) {
-  const [copySuccess, setCopySuccess] = useState(false);
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(row.original.command).then(() => {
-      setCopySuccess(true);
-      setTimeout(() => {
-        setCopySuccess(false);
-      }, 2000);
-    });
-  };
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div className="inline-flex cursor-pointer justify-start space-x-2 truncate" onClick={copyToClipboard}>
-          <Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[150px] overflow-ellipsis">
-            {row.original.command}
-          </Badge>
-        </div>
-      </TooltipTrigger>
-      <TooltipContent side="top">
-        <span className="flex items-center space-x-2">Copy</span>
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 export const columns: ColumnDef<CronJob>[] = [
   {
     accessorKey: 'command',
@@ -94,7 +67,7 @@ export const columns: ColumnDef<CronJob>[] = [
     enableColumnFilter: true,
     enableSorting: true,
     cell: ({ row }) => {
-      return <CommandCell row={row} />;
+      return <CommandCell command={row.original.command} />;
     },
   },
   {

resources/js/pages/cronjobs/index.tsx

@@ -29,7 +29,7 @@ export default function CronJobIndex() {
             <CronJobForm serverId={page.props.server.id}>
               <Button>
                 <PlusIcon />
-                <span className="hidden lg:block">Create rule</span>
+                <span className="hidden lg:block">Create</span>
               </Button>
             </CronJobForm>
           </div>

resources/js/pages/firewall/index.tsx

@@ -29,7 +29,7 @@ export default function Firewall() {
             <RuleForm serverId={page.props.server.id}>
               <Button>
                 <PlusIcon />
-                <span className="hidden lg:block">Create rule</span>
+                <span className="hidden lg:block">Create</span>
               </Button>
             </RuleForm>
           </div>

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

@@ -1,42 +1,33 @@
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { Button } from '@/components/ui/button';
-import { EyeIcon, LoaderCircleIcon } from 'lucide-react';
+import { EyeIcon } 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 axios from 'axios';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import DateTime from '@/components/date-time';
+import LogOutput from '@/components/log-output';
+import { useQuery } from '@tanstack/react-query';
 
 const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
   const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [content, setContent] = useState('');
 
-  const showLog = async () => {
+  const query = useQuery({
-    setLoading(true);
+    queryKey: ['server-log', row.original.id],
-    try {
+    queryFn: async () => {
       const response = await axios.get(route('logs.show', { server: row.original.server_id, log: row.original.id }));
-      setContent(response.data);
+      return response.data;
-    } catch (error: unknown) {
+    },
-      console.error(error);
+    enabled: open,
-      if (error instanceof Error) {
+    refetchInterval: 2500,
-        setContent(error.message);
+  });
-      } else {
-        setContent('An unknown error occurred.');
-      }
-    } finally {
-      setLoading(false);
-      setOpen(true);
-    }
-  };
 
   return (
     <div className="flex items-center justify-end">
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
-          <Button variant="outline" size="sm" onClick={showLog} disabled={loading}>
+          <Button variant="outline" size="sm">
-            {loading ? <LoaderCircleIcon className="animate-spin" /> : <EyeIcon />}
+            <EyeIcon />
           </Button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-5xl">
@@ -44,10 +35,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/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
+          <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
-            {content}
-            <ScrollBar orientation="vertical" />
-          </ScrollArea>
           <DialogFooter>
             <Button variant="outline">Download</Button>
           </DialogFooter>

resources/js/pages/servers/components/header.tsx

@@ -1,5 +1,5 @@
 import { Server } from '@/types/server';
-import { CloudIcon, LoaderCircleIcon, MapPinIcon, MousePointerClickIcon, SlashIcon } from 'lucide-react';
+import { ClipboardCheckIcon, CloudIcon, LoaderCircleIcon, MapPinIcon, MousePointerClickIcon, SlashIcon } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import ServerActions from '@/pages/servers/components/actions';
 import { cn } from '@/lib/utils';
@@ -7,6 +7,7 @@ import { Site } from '@/types/site';
 import { StatusRipple } from '@/components/status-ripple';
 import { Badge } from '@/components/ui/badge';
 import { useForm } from '@inertiajs/react';
+import { useState } from 'react';
 
 export default function ServerHeader({ server, site }: { server: Server; site?: Site }) {
   const statusForm = useForm();
@@ -19,6 +20,16 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
     statusForm.patch(route('servers.status', { server: server.id }));
   };
 
+  const [ipCopied, setIpCopied] = useState(false);
+  const copyIp = (ip: string) => {
+    navigator.clipboard.writeText(ip).then(() => {
+      setIpCopied(true);
+      setTimeout(() => {
+        setIpCopied(false);
+      }, 2000);
+    });
+  };
+
   return (
     <div className="flex items-center justify-between border-b px-4 py-2">
       <div className="space-y-2">
@@ -64,8 +75,10 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
           <Tooltip>
             <TooltipTrigger asChild>
               <div className="flex items-center space-x-1">
-                <MapPinIcon className="size-4" />
+                {ipCopied ? <ClipboardCheckIcon className="text-success size-4" /> : <MapPinIcon className="size-4" />}
-                <div className="hidden lg:inline-flex">{server.ip}</div>
+                <div className="hidden cursor-pointer lg:inline-flex" onClick={() => copyIp(server.ip)}>
+                  {server.ip}
+                </div>
               </div>
             </TooltipTrigger>
             <TooltipContent side="bottom">

resources/js/pages/workers/components/columns.tsx

@@ -0,0 +1,225 @@
+import { ColumnDef } from '@tanstack/react-table';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import React, { useState } from 'react';
+import { Worker } from '@/types/worker';
+import { Badge } from '@/components/ui/badge';
+import DateTime from '@/components/date-time';
+import WorkerForm from '@/pages/workers/components/form';
+import CommandCell from '@/components/command-cell';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import LogOutput from '@/components/log-output';
+
+function Delete({ worker }: { worker: Worker }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('workers.destroy', { server: worker.server_id, worker: worker }), {
+      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 worker</DialogTitle>
+          <DialogDescription className="sr-only">Delete worker</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to delete this worker? This action cannot be undone.</p>
+        <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>
+  );
+}
+
+function Action({ type, worker }: { type: 'start' | 'stop' | 'restart'; worker: Worker }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.post(route(`workers.${type}`, { server: worker.server_id, worker: worker }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>{type}</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{type} worker</DialogTitle>
+          <DialogDescription className="sr-only">{type} worker</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to {type} the worker?</p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            {type}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Logs({ worker }: { worker: Worker }) {
+  const [open, setOpen] = useState(false);
+
+  const query = useQuery({
+    queryKey: ['workerLog', worker.id],
+    queryFn: async () => {
+      const response = await axios.get(route('workers.logs', { server: worker.server_id, worker: worker.id }));
+      return response.data.logs;
+    },
+    refetchInterval: 2500,
+    enabled: open,
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Logs</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>Worker logs</DialogTitle>
+          <DialogDescription className="sr-only">View worker logs</DialogDescription>
+        </DialogHeader>
+        <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<Worker>[] = [
+  {
+    accessorKey: 'command',
+    header: 'Command',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <CommandCell command={row.original.command} />;
+    },
+  },
+  {
+    accessorKey: 'user',
+    header: 'User',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'auto_start',
+    header: 'Auto start',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.auto_start ? 'success' : 'outline'}>{row.original.auto_start ? 'Yes' : 'No'}</Badge>;
+    },
+  },
+  {
+    accessorKey: 'auto_restart',
+    header: 'Auto restart',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.auto_restart ? 'success' : 'outline'}>{row.original.auto_restart ? 'Yes' : 'No'}</Badge>;
+    },
+  },
+  {
+    accessorKey: 'numprocs',
+    header: 'Numprocs',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
+    },
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    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">
+              <WorkerForm serverId={row.original.server_id} worker={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </WorkerForm>
+              <Action type="start" worker={row.original} />
+              <Action type="stop" worker={row.original} />
+              <Action type="restart" worker={row.original} />
+              <Logs worker={row.original} />
+              <DropdownMenuSeparator />
+              <Delete worker={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/workers/components/form.tsx

@@ -0,0 +1,142 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import React, { 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 { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Worker } from '@/types/worker';
+import { SharedData } from '@/types';
+import { Server } from '@/types/server';
+import { Switch } from '@/components/ui/switch';
+
+export default function WorkerForm({ serverId, worker, children }: { serverId: number; worker?: Worker; children: ReactNode }) {
+  const page = usePage<SharedData & { server: Server }>();
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    command: string;
+    user: string;
+    auto_start: boolean;
+    auto_restart: boolean;
+    numprocs: string;
+  }>({
+    command: worker?.command || '',
+    user: worker?.user || '',
+    auto_start: worker?.auto_start || true,
+    auto_restart: worker?.auto_restart || true,
+    numprocs: worker?.numprocs.toString() || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (worker) {
+      form.put(route('workers.update', { server: serverId, worker: worker.id }), {
+        onSuccess: () => {
+          setOpen(false);
+          form.reset();
+        },
+      });
+      return;
+    }
+
+    form.post(route('workers.store', { server: serverId }), {
+      onSuccess: () => {
+        setOpen(false);
+        form.reset();
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{worker ? 'Edit' : 'Create'} worker</DialogTitle>
+          <DialogDescription className="sr-only">{worker ? 'Edit' : 'Create new'} worker</DialogDescription>
+        </DialogHeader>
+        <Form id="worker-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            {/*command*/}
+            <FormField>
+              <Label htmlFor="command">Command</Label>
+              <Input type="text" id="command" value={form.data.command} onChange={(e) => form.setData('command', e.target.value)} />
+              <InputError message={form.errors.command} />
+            </FormField>
+
+            {/*user*/}
+            <FormField>
+              <Label htmlFor="user">User</Label>
+              <Select value={form.data.user} onValueChange={(value) => form.setData('user', value)}>
+                <SelectTrigger id="user">
+                  <SelectValue placeholder="Select a user" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {page.props.server.ssh_users.map((user) => (
+                      <SelectItem key={`user-${user}`} value={user}>
+                        {user}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.user} />
+            </FormField>
+
+            {/*numprocs*/}
+            <FormField>
+              <Label htmlFor="custom_frequency">Numprocs</Label>
+              <Input
+                id="numprocs"
+                name="numprocs"
+                value={form.data.numprocs}
+                onChange={(e) => form.setData('numprocs', e.target.value)}
+                placeholder="1"
+              />
+              <InputError message={form.errors.numprocs} />
+            </FormField>
+          </FormFields>
+
+          {/*auto start*/}
+          <FormField>
+            <div className="flex items-center space-x-2">
+              <Switch id="auto_start" checked={form.data.auto_start} onCheckedChange={(value) => form.setData('auto_start', value)} />
+              <Label htmlFor="auto_start">Auto start</Label>
+              <InputError message={form.errors.auto_start} />
+            </div>
+          </FormField>
+
+          {/*auto restart*/}
+          <FormField>
+            <div className="flex items-center space-x-2">
+              <Switch id="auto_restart" checked={form.data.auto_restart} onCheckedChange={(value) => form.setData('auto_restart', value)} />
+              <Label htmlFor="auto_restart">Auto restart</Label>
+              <InputError message={form.errors.auto_restart} />
+            </div>
+          </FormField>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button form="worker-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/workers/index.tsx

@@ -0,0 +1,42 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import { PaginatedData } from '@/types';
+import ServerLayout from '@/layouts/server/layout';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { PlusIcon } from 'lucide-react';
+import Container from '@/components/container';
+import { DataTable } from '@/components/data-table';
+import { Worker } from '@/types/worker';
+import { columns } from '@/pages/workers/components/columns';
+import WorkerForm from '@/pages/workers/components/form';
+
+export default function WorkerIndex() {
+  const page = usePage<{
+    server: Server;
+    workers: PaginatedData<Worker>;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Workers - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Workers" description="Here you can manage server's workers" />
+          <div className="flex items-center gap-2">
+            <WorkerForm serverId={page.props.server.id}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </WorkerForm>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.workers} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/types/worker.d.ts

@@ -0,0 +1,13 @@
+export interface Worker {
+  id: number;
+  server_id: number;
+  command: string;
+  user: string;
+  auto_start: boolean;
+  auto_restart: boolean;
+  numprocs: number;
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+}

tests/Feature/WorkersTest.php

@@ -6,10 +6,8 @@
 use App\Facades\SSH;
 use App\Models\Site;
 use App\Models\Worker;
-use App\Web\Pages\Servers\Sites\Pages\Workers\Index;
-use App\Web\Pages\Servers\Sites\Pages\Workers\Widgets\WorkersList;
 use Illuminate\Foundation\Testing\RefreshDatabase;
-use Livewire\Livewire;
+use Inertia\Testing\AssertableInertia;
 use Tests\TestCase;
 
 class WorkersTest extends TestCase
@@ -20,19 +18,17 @@ public function test_see_workers(): void
     {
         $this->actingAs($this->user);
 
-        $worker = Worker::factory()->create([
+        Worker::factory()->create([
             'server_id' => $this->server->id,
             'site_id' => $this->site->id,
         ]);
 
-        $this->get(
+        $this->get(route('workers', [
-            Index::getUrl([
+            'server' => $this->server,
-                'server' => $this->server,
+        ]))
-                'site' => $this->site,
-            ])
-        )
             ->assertSuccessful()
-            ->assertSee($worker->command);
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('workers/index'));
+
     }
 
     public function test_delete_worker(): void
@@ -46,12 +42,11 @@ public function test_delete_worker(): void
             'site_id' => $this->site->id,
         ]);
 
-        Livewire::test(WorkersList::class, [
+        $this->delete(route('workers.destroy', [
             'server' => $this->server,
-            'site' => $this->site,
+            'worker' => $worker,
-        ])
+        ]))
-            ->callTableAction('delete', $worker->id)
+            ->assertSessionDoesntHaveErrors();
-            ->assertSuccessful();
 
         $this->assertDatabaseMissing('workers', [
             'id' => $worker->id,
@@ -64,22 +59,19 @@ public function test_create_worker(): void
 
         $this->actingAs($this->user);
 
-        Livewire::test(Index::class, [
+        $this->post(route('workers.store', [
             'server' => $this->server,
-            'site' => $this->site,
+        ]), [
+            'command' => 'php artisan worker:work',
+            'user' => 'vito',
+            'auto_start' => 1,
+            'auto_restart' => 1,
+            'numprocs' => 1,
         ])
-            ->callAction('create', [
+            ->assertSessionDoesntHaveErrors();
-                'command' => 'php artisan worker:work',
-                'user' => 'vito',
-                'auto_start' => 1,
-                'auto_restart' => 1,
-                'numprocs' => 1,
-            ])
-            ->assertSuccessful();
 
         $this->assertDatabaseHas('workers', [
             'server_id' => $this->server->id,
-            'site_id' => $this->site->id,
             'command' => 'php artisan worker:work',
             'user' => 'vito',
             'auto_start' => 1,
@@ -98,23 +90,22 @@ public function test_create_worker_as_isolated_user(): void
         $this->site->user = 'example';
         $this->site->save();
 
-        Livewire::test(Index::class, [
+        $this->post(route('workers.store', [
             'server' => $this->server,
             'site' => $this->site,
+        ]), [
+            'command' => 'php artisan worker:work',
+            'user' => 'example',
+            'auto_start' => 1,
+            'auto_restart' => 1,
+            'numprocs' => 1,
         ])
-            ->callAction('create', [
+            ->assertSessionDoesntHaveErrors();
-                'command' => 'php artisan queue:work',
-                'user' => 'example',
-                'auto_start' => 1,
-                'auto_restart' => 1,
-                'numprocs' => 1,
-            ])
-            ->assertSuccessful();
 
         $this->assertDatabaseHas('workers', [
             'server_id' => $this->server->id,
             'site_id' => $this->site->id,
-            'command' => 'php artisan queue:work',
+            'command' => 'php artisan worker:work',
             'user' => 'example',
             'auto_start' => 1,
             'auto_restart' => 1,
@@ -129,18 +120,17 @@ public function test_cannot_create_worker_as_invalid_user(): void
 
         $this->actingAs($this->user);
 
-        Livewire::test(Index::class, [
+        $this->post(route('workers.store', [
             'server' => $this->server,
             'site' => $this->site,
+        ]), [
+            'command' => 'php artisan worker:work',
+            'user' => 'example',
+            'auto_start' => 1,
+            'auto_restart' => 1,
+            'numprocs' => 1,
         ])
-            ->callAction('create', [
+            ->assertSessionHasErrors();
-                'command' => 'php artisan queue:work',
-                'user' => 'example',
-                'auto_start' => 1,
-                'auto_restart' => 1,
-                'numprocs' => 1,
-            ])
-            ->assertHasActionErrors();
 
         $this->assertDatabaseMissing('workers', [
             'server_id' => $this->server->id,
@@ -160,18 +150,17 @@ public function test_cannot_create_worker_on_another_sites_user(): void
             'user' => 'example',
         ]);
 
-        Livewire::test(Index::class, [
+        $this->post(route('workers.store', [
             'server' => $this->server,
             'site' => $this->site,
+        ]), [
+            'command' => 'php artisan worker:work',
+            'user' => 'example',
+            'auto_start' => 1,
+            'auto_restart' => 1,
+            'numprocs' => 1,
         ])
-            ->callAction('create', [
+            ->assertSessionHasErrors();
-                'command' => 'php artisan queue:work',
-                'user' => 'example',
-                'auto_start' => 1,
-                'auto_restart' => 1,
-                'numprocs' => 1,
-            ])
-            ->assertHasActionErrors();
 
         $this->assertDatabaseMissing('workers', [
             'server_id' => $this->server->id,
@@ -192,12 +181,11 @@ public function test_start_worker(): void
             'status' => WorkerStatus::STOPPED,
         ]);
 
-        Livewire::test(WorkersList::class, [
+        $this->post(route('workers.start', [
             'server' => $this->server,
-            'site' => $this->site,
+            'worker' => $worker,
-        ])
+        ]))
-            ->callTableAction('start', $worker->id)
+            ->assertSessionDoesntHaveErrors();
-            ->assertSuccessful();
 
         $this->assertDatabaseHas('workers', [
             'id' => $worker->id,
@@ -217,12 +205,11 @@ public function test_stop_worker(): void
             'status' => WorkerStatus::RUNNING,
         ]);
 
-        Livewire::test(WorkersList::class, [
+        $this->post(route('workers.stop', [
             'server' => $this->server,
-            'site' => $this->site,
+            'worker' => $worker,
-        ])
+        ]))
-            ->callTableAction('stop', $worker->id)
+            ->assertSessionDoesntHaveErrors();
-            ->assertSuccessful();
 
         $this->assertDatabaseHas('workers', [
             'id' => $worker->id,
@@ -242,12 +229,11 @@ public function test_restart_worker(): void
             'status' => WorkerStatus::RUNNING,
         ]);
 
-        Livewire::test(WorkersList::class, [
+        $this->post(route('workers.restart', [
             'server' => $this->server,
-            'site' => $this->site,
+            'worker' => $worker,
-        ])
+        ]))
-            ->callTableAction('restart', $worker->id)
+            ->assertSessionDoesntHaveErrors();
-            ->assertSuccessful();
 
         $this->assertDatabaseHas('workers', [
             'id' => $worker->id,
@@ -267,11 +253,10 @@ public function test_show_logs(): void
             'status' => WorkerStatus::RUNNING,
         ]);
 
-        Livewire::test(WorkersList::class, [
+        $this->get(route('workers.logs', [
             'server' => $this->server,
-            'site' => $this->site,
+            'worker' => $worker,
-        ])
+        ]))
-            ->callTableAction('logs', $worker->id)
             ->assertSuccessful();
     }
 }