#591 - cron jobs

app/Actions/CronJob/CreateCronJob.php

@@ -3,18 +3,23 @@
 namespace App\Actions\CronJob;
 
 use App\Enums\CronjobStatus;
+use App\Exceptions\SSHError;
 use App\Models\CronJob;
 use App\Models\Server;
 use App\ValidationRules\CronRule;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 
 class CreateCronJob
 {
     /**
      * @param array<string, mixed> $input
+     * @throws SSHError
      */
     public function create(Server $server, array $input): CronJob
     {
+        Validator::make($input, self::rules($input, $server))->validate();
+
         $cronJob = new CronJob([
             'server_id' => $server->id,
             'user' => $input['user'],
@@ -33,7 +38,7 @@ public function create(Server $server, array $input): CronJob
 
     /**
      * @param  array<string, mixed>  $input
-     * @return array<string, array<mixed>>
+     * @return array<string, array<int, mixed>>
      */
     public static function rules(array $input, Server $server): array
     {

app/Actions/CronJob/DeleteCronJob.php

@@ -3,11 +3,15 @@
 namespace App\Actions\CronJob;
 
 use App\Enums\CronjobStatus;
+use App\Exceptions\SSHError;
 use App\Models\CronJob;
 use App\Models\Server;
 
 class DeleteCronJob
 {
+    /**
+     * @throws SSHError
+     */
     public function delete(Server $server, CronJob $cronJob): void
     {
         $user = $cronJob->user;

app/Actions/CronJob/DisableCronJob.php

@@ -3,11 +3,15 @@
 namespace App\Actions\CronJob;
 
 use App\Enums\CronjobStatus;
+use App\Exceptions\SSHError;
 use App\Models\CronJob;
 use App\Models\Server;
 
 class DisableCronJob
 {
+    /**
+     * @throws SSHError
+     */
     public function disable(Server $server, CronJob $cronJob): void
     {
         $cronJob->status = CronjobStatus::DISABLING;

app/Actions/CronJob/EditCronJob.php

@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Actions\CronJob;
+
+use App\Enums\CronjobStatus;
+use App\Exceptions\SSHError;
+use App\Models\CronJob;
+use App\Models\Server;
+use App\ValidationRules\CronRule;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+
+class EditCronJob
+{
+    /**
+     * @param  array<string, mixed>  $input
+     *
+     * @throws SSHError
+     */
+    public function edit(Server $server, CronJob $cronJob, array $input): CronJob
+    {
+        Validator::make($input, self::rules($input, $server))->validate();
+
+        $cronJob->update([
+            'user' => $input['user'],
+            'command' => $input['command'],
+            'frequency' => $input['frequency'] == 'custom' ? $input['custom'] : $input['frequency'],
+            'status' => CronjobStatus::UPDATING,
+        ]);
+        $cronJob->save();
+
+        $server->cron()->update($cronJob->user, CronJob::crontab($server, $cronJob->user));
+        $cronJob->status = CronjobStatus::READY;
+        $cronJob->save();
+
+        return $cronJob;
+    }
+
+    /**
+     * @param  array<string, mixed>  $input
+     * @return array<string, array<int, mixed>>
+     */
+    public static function rules(array $input, Server $server): array
+    {
+        $rules = [
+            'command' => [
+                'required',
+            ],
+            'user' => [
+                'required',
+                Rule::in($server->getSshUsers()),
+            ],
+            'frequency' => [
+                'required',
+                new CronRule(acceptCustom: true),
+            ],
+        ];
+
+        if (isset($input['frequency']) && $input['frequency'] == 'custom') {
+            $rules['custom'] = [
+                'required',
+                new CronRule,
+            ];
+        }
+
+        return $rules;
+    }
+}

app/Actions/CronJob/EnableCronJob.php

@@ -3,11 +3,15 @@
 namespace App\Actions\CronJob;
 
 use App\Enums\CronjobStatus;
+use App\Exceptions\SSHError;
 use App\Models\CronJob;
 use App\Models\Server;
 
 class EnableCronJob
 {
+    /**
+     * @throws SSHError
+     */
     public function enable(Server $server, CronJob $cronJob): void
     {
         $cronJob->status = CronjobStatus::ENABLING;

app/Enums/CronjobStatus.php

@@ -14,5 +14,7 @@ final class CronjobStatus
 
     const DISABLING = 'disabling';
 
+    const UPDATING = 'updating';
+
     const DISABLED = 'disabled';
 }

app/Http/Controllers/API/CronJobController.php

@@ -4,6 +4,7 @@
 
 use App\Actions\CronJob\CreateCronJob;
 use App\Actions\CronJob\DeleteCronJob;
+use App\Exceptions\SSHError;
 use App\Http\Controllers\Controller;
 use App\Http\Resources\CronJobResource;
 use App\Models\CronJob;
@@ -39,6 +40,9 @@ public function index(Project $project, Server $server): ResourceCollection
         return CronJobResource::collection($server->cronJobs()->simplePaginate(25));
     }
 
+    /**
+     * @throws SSHError
+     */
     #[Post('/', name: 'api.projects.servers.cron-jobs.create', middleware: 'ability:write')]
     #[Endpoint(title: 'create', description: 'Create a new cron job.')]
     #[BodyParam(name: 'command', required: true)]
@@ -51,8 +55,6 @@ public function create(Request $request, Project $project, Server $server): Cron
 
         $this->validateRoute($project, $server);
 
-        $this->validate($request, CreateCronJob::rules($request->all(), $server));
-
         $cronJob = app(CreateCronJob::class)->create($server, $request->all());
 
         return new CronJobResource($cronJob);
@@ -70,6 +72,9 @@ public function show(Project $project, Server $server, CronJob $cronJob): CronJo
         return new CronJobResource($cronJob);
     }
 
+    /**
+     * @throws SSHError
+     */
     #[Delete('{cronJob}', name: 'api.projects.servers.cron-jobs.delete', middleware: 'ability:write')]
     #[Endpoint(title: 'delete', description: 'Delete cron job.')]
     #[Response(status: 204)]

app/Http/Controllers/CronJobController.php

@@ -0,0 +1,108 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\CronJob\CreateCronJob;
+use App\Actions\CronJob\DeleteCronJob;
+use App\Actions\CronJob\DisableCronJob;
+use App\Actions\CronJob\EditCronJob;
+use App\Actions\CronJob\EnableCronJob;
+use App\Exceptions\SSHError;
+use App\Http\Resources\CronJobResource;
+use App\Models\CronJob;
+use App\Models\Server;
+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}/cronjobs')]
+#[Middleware(['auth', 'has-project'])]
+class CronJobController extends Controller
+{
+    #[Get('/', name: 'cronjobs')]
+    public function index(Server $server): Response
+    {
+        $this->authorize('viewAny', [CronJob::class, $server]);
+
+        return Inertia::render('cronjobs/index', [
+            'cronjobs' => CronJobResource::collection($server->cronJobs()->latest()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Post('/', name: 'cronjobs.store')]
+    public function store(Request $request, Server $server): RedirectResponse
+    {
+        $this->authorize('create', [CronJob::class, $server]);
+
+        app(CreateCronJob::class)->create($server, $request->all());
+
+        return back()
+            ->with('success', 'Cron job has been created.');
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Put('/{cronJob}', name: 'cronjobs.update')]
+    public function update(Request $request, Server $server, CronJob $cronJob): RedirectResponse
+    {
+        $this->authorize('update', $cronJob);
+
+        app(EditCronJob::class)->edit($server, $cronJob, $request->all());
+
+        return back()
+            ->with('success', 'Cron job has been updated.');
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Post('/{cronJob}/enable', name: 'cronjobs.enable')]
+    public function enable(Server $server, CronJob $cronJob): RedirectResponse
+    {
+        $this->authorize('update', $cronJob);
+
+        app(EnableCronJob::class)->enable($server, $cronJob);
+
+        return back()
+            ->with('success', 'Cron job has been enabled.');
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Post('/{cronJob}/disable', name: 'cronjobs.disable')]
+    public function disable(Server $server, CronJob $cronJob): RedirectResponse
+    {
+        $this->authorize('update', $cronJob);
+
+        app(DisableCronJob::class)->disable($server, $cronJob);
+
+        return back()
+            ->with('success', 'Cron job has been disabled.');
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Delete('/{cronJob}', name: 'cronjobs.destroy')]
+    public function destroy(Server $server, CronJob $cronJob): RedirectResponse
+    {
+        $this->authorize('delete', $cronJob);
+
+        app(DeleteCronJob::class)->delete($server, $cronJob);
+
+        return back()
+            ->with('success', 'Cron job has been deleted.');
+    }
+}

app/Http/Resources/CronJobResource.php

@@ -21,6 +21,7 @@ public function toArray(Request $request): array
             'user' => $this->user,
             'frequency' => $this->frequency,
             'status' => $this->status,
+            'status_color' => CronJob::$statusColors[$this->status] ?? 'gray',
             'created_at' => $this->created_at,
             'updated_at' => $this->updated_at,
         ];

app/Http/Resources/ServerResource.php

@@ -21,6 +21,7 @@ public function toArray(Request $request): array
             'provider_id' => $this->provider_id,
             'name' => $this->name,
             'ssh_user' => $this->ssh_user,
+            'ssh_users' => $this->getSshUsers(),
             'ip' => $this->ip,
             'local_ip' => $this->local_ip,
             'port' => $this->port,

app/Models/CronJob.php

@@ -63,6 +63,7 @@ public static function crontab(Server $server, string $user): string
             ->whereIn('status', [
                 CronjobStatus::READY,
                 CronjobStatus::CREATING,
+                CronjobStatus::UPDATING,
                 CronjobStatus::ENABLING,
             ])
             ->get();

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 className="-ml-1 md:hidden" />
+        <SidebarTrigger />
         <div className="flex items-center space-x-2 text-xs">
           <ProjectSwitch />
           <SlashIcon className="size-3" />

resources/js/components/app-sidebar-nested.tsx

@@ -0,0 +1,311 @@
+import { NavUser } from '@/components/nav-user';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+} from '@/components/ui/sidebar';
+import { type NavItem } from '@/types';
+import { Link, router, usePage } from '@inertiajs/react';
+import {
+  ArrowLeftIcon,
+  BellIcon,
+  BookOpen,
+  ChevronRightIcon,
+  ClockIcon,
+  CloudIcon,
+  CloudUploadIcon,
+  CodeIcon,
+  CogIcon,
+  DatabaseIcon,
+  FlameIcon,
+  Folder,
+  HomeIcon,
+  KeyIcon,
+  ListIcon,
+  MousePointerClickIcon,
+  PlugIcon,
+  RocketIcon,
+  ServerIcon,
+  TagIcon,
+  UserIcon,
+  UsersIcon,
+} from 'lucide-react';
+import AppLogo from './app-logo';
+import { Icon } from '@/components/icon';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Server } from '@/types/server';
+import { Site } from '@/types/site';
+
+export function AppSidebar() {
+  const page = usePage<{
+    server?: Server;
+    site?: Site;
+  }>();
+
+  const isServerMenuDisabled = !page.props.server || page.props.server.status !== 'ready';
+
+  const mainNavItems: NavItem[] = [
+    {
+      title: 'Servers',
+      href: route('servers'),
+      icon: ServerIcon,
+      children: [
+        {
+          title: 'Overview',
+          href: route('servers.show', { server: page.props.server?.id || 0 }),
+          onlyActivePath: route('servers.show', { server: page.props.server?.id || 0 }),
+          icon: HomeIcon,
+          isDisabled: isServerMenuDisabled,
+        },
+        {
+          title: 'Database',
+          href: route('databases', { server: page.props.server?.id || 0 }),
+          icon: DatabaseIcon,
+          isDisabled: isServerMenuDisabled,
+          children: [
+            {
+              title: 'Databases',
+              href: route('databases', { server: page.props.server?.id || 0 }),
+              onlyActivePath: route('databases', { server: page.props.server?.id || 0 }),
+              icon: DatabaseIcon,
+            },
+            {
+              title: 'Users',
+              href: route('database-users', { server: page.props.server?.id || 0 }),
+              icon: UsersIcon,
+            },
+            {
+              title: 'Backups',
+              href: route('backups', { server: page.props.server?.id || 0 }),
+              icon: CloudUploadIcon,
+            },
+          ],
+        },
+        {
+          title: 'Sites',
+          href: route('sites', { server: page.props.server?.id || 0 }),
+          icon: MousePointerClickIcon,
+          isDisabled: isServerMenuDisabled,
+          children: page.props.site
+            ? [
+                {
+                  title: 'All sites',
+                  href: route('sites', { server: page.props.server?.id || 0 }),
+                  onlyActivePath: route('sites', { server: page.props.server?.id || 0 }),
+                  icon: ArrowLeftIcon,
+                },
+                {
+                  title: 'Application',
+                  href: route('sites.show', { server: page.props.server?.id || 0, site: page.props.site?.id || 0 }),
+                  icon: RocketIcon,
+                },
+              ]
+            : [],
+        },
+        {
+          title: 'Firewall',
+          href: route('firewall', { server: page.props.server?.id || 0 }),
+          icon: FlameIcon,
+          isDisabled: isServerMenuDisabled,
+        },
+        {
+          title: 'CronJobs',
+          href: route('cronjobs', { server: page.props.server?.id || 0 }),
+          icon: ClockIcon,
+          isDisabled: isServerMenuDisabled,
+        },
+        // {
+        //   title: 'Workers',
+        //   href: '#',
+        //   icon: ListEndIcon,
+        // },
+        // {
+        //   title: 'SSH Keys',
+        //   href: '#',
+        //   icon: KeyIcon,
+        // },
+        // {
+        //   title: 'Services',
+        //   href: '#',
+        //   icon: CogIcon,
+        // },
+        // {
+        //   title: 'Metrics',
+        //   href: '#',
+        //   icon: ChartPieIcon,
+        // },
+        // {
+        //   title: 'Console',
+        //   href: '#',
+        //   icon: TerminalSquareIcon,
+        // },
+        // {
+        //   title: 'Logs',
+        //   href: '#',
+        //   icon: LogsIcon,
+        // },
+        // {
+        //   title: 'Settings',
+        //   href: '#',
+        //   icon: Settings2Icon,
+        // },
+      ],
+    },
+    {
+      title: 'Sites',
+      href: route('sites.all'),
+      icon: MousePointerClickIcon,
+    },
+    {
+      title: 'Settings',
+      href: route('settings'),
+      icon: CogIcon,
+      children: [
+        {
+          title: 'Profile',
+          href: route('profile'),
+          icon: UserIcon,
+        },
+        {
+          title: 'Users',
+          href: route('users'),
+          icon: UsersIcon,
+        },
+        {
+          title: 'Projects',
+          href: route('projects'),
+          icon: ListIcon,
+        },
+        {
+          title: 'Server Providers',
+          href: route('server-providers'),
+          icon: CloudIcon,
+        },
+        {
+          title: 'Source Controls',
+          href: route('source-controls'),
+          icon: CodeIcon,
+        },
+        {
+          title: 'Storage Providers',
+          href: route('storage-providers'),
+          icon: DatabaseIcon,
+        },
+        {
+          title: 'Notification Channels',
+          href: route('notification-channels'),
+          icon: BellIcon,
+        },
+        {
+          title: 'SSH Keys',
+          href: route('ssh-keys'),
+          icon: KeyIcon,
+        },
+        {
+          title: 'Tags',
+          href: route('tags'),
+          icon: TagIcon,
+        },
+        {
+          title: 'API Keys',
+          href: route('api-keys'),
+          icon: PlugIcon,
+        },
+      ],
+    },
+  ];
+
+  const footerNavItems: NavItem[] = [
+    {
+      title: 'Repository',
+      href: 'https://github.com/vitodeploy/vito',
+      icon: Folder,
+    },
+    {
+      title: 'Documentation',
+      href: 'https://vitodeploy.com',
+      icon: BookOpen,
+    },
+  ];
+
+  const getMenuItems = (items: NavItem[]) => {
+    return items.map((item) => {
+      const isActive = item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href);
+
+      if (item.children && item.children.length > 0) {
+        return (
+          <Collapsible key={`${item.title}-${item.href}`} defaultOpen={isActive} className="group/collapsible">
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton disabled={item.isDisabled || false}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRightIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub className="">{getMenuItems(item.children)}</SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        );
+      }
+
+      return (
+        <SidebarMenuItem key={`${item.title}-${item.href}`}>
+          <SidebarMenuButton onClick={() => router.visit(item.href)} isActive={isActive} disabled={item.isDisabled || false}>
+            {item.icon && <item.icon />}
+            <span>{item.title}</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      );
+    });
+  };
+
+  return (
+    <Sidebar collapsible="offcanvas" variant="sidebar">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="sm" asChild>
+              <Link href={route('servers')} prefetch>
+                <AppLogo />
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>{getMenuItems(mainNavItems)}</SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          {footerNavItems.map((item) => (
+            <SidebarMenuItem key={`${item.title}-${item.href}`}>
+              <SidebarMenuButton asChild tooltip={{ children: item.title, hidden: false }}>
+                <a href={item.href} target="_blank" rel="noopener noreferrer">
+                  {item.icon && <Icon iconNode={item.icon} />}
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+        <NavUser />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

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 { CSSProperties, type PropsWithChildren } from 'react';
+import { type PropsWithChildren, useState } from 'react';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/react';
 import { Toaster } from '@/components/ui/sonner';
@@ -18,6 +18,13 @@ export default function Layout({
   secondNavTitle?: string;
 }>) {
   const page = usePage<SharedData>();
+  const [sidebarOpen, setSidebarOpen] = useState(
+    (localStorage.getItem('sidebar') === 'true' || false) && !!(secondNavItems && secondNavItems.length > 0),
+  );
+  const sidebarOpenChange = (open: boolean) => {
+    setSidebarOpen(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);
@@ -28,14 +35,7 @@ export default function Layout({
 
   return (
     <QueryClientProvider client={queryClient}>
-      <SidebarProvider
+      <SidebarProvider open={sidebarOpen} onOpenChange={sidebarOpenChange}>
-        style={
-          {
-            '--sidebar-width': '300px',
-          } as CSSProperties
-        }
-        defaultOpen={!!(secondNavItems && secondNavItems.length > 0)}
-      >
         <AppSidebar secondNavItems={secondNavItems} secondNavTitle={secondNavTitle} />
         <SidebarInset>
           <AppHeader />

resources/js/layouts/server/layout.tsx

@@ -1,5 +1,15 @@
 import { type NavItem } from '@/types';
-import { ArrowLeftIcon, CloudUploadIcon, DatabaseIcon, FlameIcon, HomeIcon, MousePointerClickIcon, RocketIcon, UsersIcon } from 'lucide-react';
+import {
+  ArrowLeftIcon,
+  ClockIcon,
+  CloudUploadIcon,
+  DatabaseIcon,
+  FlameIcon,
+  HomeIcon,
+  MousePointerClickIcon,
+  RocketIcon,
+  UsersIcon,
+} from 'lucide-react';
 import { ReactNode } from 'react';
 import { Server } from '@/types/server';
 import ServerHeader from '@/pages/servers/components/header';
@@ -80,11 +90,12 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
       icon: FlameIcon,
       isDisabled: isMenuDisabled,
     },
-    // {
+    {
-    //   title: 'CronJobs',
+      title: 'CronJobs',
-    //   href: '#',
+      href: route('cronjobs', { server: page.props.server.id }),
-    //   icon: ClockIcon,
+      icon: ClockIcon,
-    // },
+      isDisabled: isMenuDisabled,
+    },
     // {
     //   title: 'Workers',
     //   href: '#',

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

@@ -0,0 +1,150 @@
+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 { 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';
+
+function Delete({ cronJob }: { cronJob: CronJob }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('cronjobs.destroy', { server: cronJob.server_id, cronJob: cronJob }), {
+      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 cronJob</DialogTitle>
+          <DialogDescription className="sr-only">Delete cronJob</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to delete this cron job? 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 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',
+    header: 'Command',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <CommandCell row={row} />;
+    },
+  },
+  {
+    accessorKey: 'frequency',
+    header: 'Frequency',
+    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">
+              <CronJobForm serverId={row.original.server_id} cronJob={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </CronJobForm>
+              <DropdownMenuSeparator />
+              <Delete cronJob={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/cronjobs/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 { CronJob } from '@/types/cronjob';
+import { SharedData } from '@/types';
+import { Server } from '@/types/server';
+
+export default function CronJobForm({ serverId, cronJob, children }: { serverId: number; cronJob?: CronJob; children: ReactNode }) {
+  const page = usePage<SharedData & { server: Server }>();
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    command: string;
+    user: string;
+    frequency: string;
+    custom: string;
+  }>({
+    command: cronJob?.command || '',
+    user: cronJob?.user || '',
+    frequency: cronJob ? (page.props.configs.cronjob_intervals[cronJob.frequency] ? cronJob.frequency : 'custom') : '',
+    custom: cronJob?.frequency || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (cronJob) {
+      form.put(route('cronjobs.update', { server: serverId, cronJob: cronJob.id }), {
+        onSuccess: () => {
+          setOpen(false);
+          form.reset();
+        },
+      });
+      return;
+    }
+
+    form.post(route('cronjobs.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>{cronJob ? 'Edit' : 'Create'} cron job</DialogTitle>
+          <DialogDescription className="sr-only">{cronJob ? 'Edit' : 'Create new'} cron job</DialogDescription>
+        </DialogHeader>
+        <Form id="cronjob-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <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>
+
+            {/*frequency*/}
+            <FormField>
+              <Label htmlFor="frequency">Frequency</Label>
+              <Select value={form.data.frequency} onValueChange={(value) => form.setData('frequency', value)}>
+                <SelectTrigger id="frequency">
+                  <SelectValue placeholder="Select a frequency" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {Object.entries(page.props.configs.cronjob_intervals).map(([key, value]) => (
+                      <SelectItem key={`frequency-${key}`} value={key}>
+                        {value}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.frequency} />
+            </FormField>
+
+            {/*custom frequency*/}
+            {form.data.frequency === 'custom' && (
+              <FormField>
+                <Label htmlFor="custom_frequency">Custom frequency (crontab)</Label>
+                <Input
+                  id="custom_frequency"
+                  name="custom_frequency"
+                  value={form.data.custom}
+                  onChange={(e) => form.setData('custom', e.target.value)}
+                  placeholder="* * * * *"
+                />
+                <InputError message={form.errors.custom} />
+              </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>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button form="cronjob-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/cronjobs/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 { CronJob } from '@/types/cronjob';
+import { columns } from '@/pages/cronjobs/components/columns';
+import CronJobForm from '@/pages/cronjobs/components/form';
+
+export default function CronJobIndex() {
+  const page = usePage<{
+    server: Server;
+    cronjobs: PaginatedData<CronJob>;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Cron jobs - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Cron jobs" description="Here you can manage server's cron jobs" />
+          <div className="flex items-center gap-2">
+            <CronJobForm serverId={page.props.server.id}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create rule</span>
+              </Button>
+            </CronJobForm>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.cronjobs} />
+      </Container>
+    </ServerLayout>
+  );
+}

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

@@ -65,7 +65,7 @@ export default function RuleForm({ serverId, firewallRule, children }: { serverI
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{firewallRule ? 'Edit' : 'Create'} firewall rule</DialogTitle>
-          <DialogDescription className="sr-only">{firewallRule ? 'Edit' : 'Create'} new firewall rule</DialogDescription>
+          <DialogDescription className="sr-only">{firewallRule ? 'Edit' : 'Create new'} firewall rule</DialogDescription>
         </DialogHeader>
         <Form id="firewall-rule-form" onSubmit={submit} className="p-4">
           <FormFields>

resources/js/types/cronjob.d.ts

@@ -0,0 +1,11 @@
+export interface CronJob {
+  id: number;
+  server_id: number;
+  command: string;
+  user: string;
+  frequency: string;
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+}

resources/js/types/server.d.ts

@@ -4,6 +4,7 @@ export interface Server {
   user_id: number;
   name: string;
   ssh_user: string;
+  ssh_users: string[];
   ip: string;
   local_ip?: string;
   port: number;

tests/Feature/CronjobTest.php

@@ -7,31 +7,29 @@
 use App\Models\CronJob;
 use App\Models\Server;
 use App\Models\Site;
-use App\Web\Pages\Servers\CronJobs\Index;
-use App\Web\Pages\Servers\CronJobs\Widgets\CronJobsList;
 use Illuminate\Foundation\Testing\RefreshDatabase;
-use Livewire\Livewire;
+use Inertia\Testing\AssertableInertia;
 use Tests\TestCase;
 
 class CronjobTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function test_see_cronjobs_list()
+    public function test_see_cronjobs_list(): void
     {
         $this->actingAs($this->user);
 
-        /** @var CronJob $cronjob */
+        CronJob::factory()->create([
-        $cronjob = CronJob::factory()->create([
             'server_id' => $this->server->id,
         ]);
 
-        $this->get(Index::getUrl(['server' => $this->server]))
+        $this->get(route('cronjobs', $this->server))
             ->assertSuccessful()
-            ->assertSeeText($cronjob->frequencyLabel());
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('cronjobs/index'));
+
     }
 
-    public function test_delete_cronjob()
+    public function test_delete_cronjob(): void
     {
         SSH::fake();
 
@@ -43,11 +41,10 @@ public function test_delete_cronjob()
             'user' => 'vito',
         ]);
 
-        Livewire::test(CronJobsList::class, [
+        $this->delete(route('cronjobs.destroy', [
             'server' => $this->server,
-        ])
+            'cronJob' => $cronjob,
-            ->callTableAction('delete', $cronjob->id)
+        ]));
-            ->assertSuccessful();
 
         $this->assertDatabaseMissing('cron_jobs', [
             'id' => $cronjob->id,
@@ -57,21 +54,18 @@ public function test_delete_cronjob()
         SSH::assertExecutedContains('sudo -u vito crontab -l');
     }
 
-    public function test_create_cronjob()
+    public function test_create_cronjob(): void
     {
         SSH::fake();
 
         $this->actingAs($this->user);
 
-        Livewire::test(Index::class, [
+        $this->post(route('cronjobs.store', ['server' => $this->server]), [
-            'server' => $this->server,
-        ])
-            ->callAction('create', [
             'command' => 'ls -la',
             'user' => 'vito',
             'frequency' => '* * * * *',
         ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('cron_jobs', [
             'server_id' => $this->server->id,
@@ -93,15 +87,12 @@ public function test_create_cronjob_for_isolated_user(): void
         $this->site->user = 'example';
         $this->site->save();
 
-        Livewire::test(Index::class, [
+        $this->post(route('cronjobs.store', ['server' => $this->server]), [
-            'server' => $this->server,
-        ])
-            ->callAction('create', [
             'command' => 'ls -la',
             'user' => 'example',
             'frequency' => '* * * * *',
         ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('cron_jobs', [
             'server_id' => $this->server->id,
@@ -117,15 +108,12 @@ public function test_cannot_create_cronjob_for_non_existing_user(): void
         SSH::fake();
         $this->actingAs($this->user);
 
-        Livewire::test(Index::class, [
+        $this->post(route('cronjobs.store', ['server' => $this->server]), [
-            'server' => $this->server,
-        ])
-            ->callAction('create', [
             'command' => 'ls -la',
             'user' => 'example',
             'frequency' => '* * * * *',
         ])
-            ->assertHasActionErrors();
+            ->assertSessionHasErrors();
 
         $this->assertDatabaseMissing('cron_jobs', [
             'server_id' => $this->server->id,
@@ -143,15 +131,12 @@ public function test_cannot_create_cronjob_for_user_on_another_server(): void
             'user' => 'example',
         ]);
 
-        Livewire::test(Index::class, [
+        $this->post(route('cronjobs.store', ['server' => $this->server]), [
-            'server' => $this->server,
-        ])
-            ->callAction('create', [
             'command' => 'ls -la',
             'user' => 'example',
             'frequency' => '* * * * *',
         ])
-            ->assertHasActionErrors();
+            ->assertSessionHasErrors();
 
         $this->assertDatabaseMissing('cron_jobs', [
             'user' => 'example',
@@ -164,16 +149,13 @@ public function test_create_custom_cronjob()
 
         $this->actingAs($this->user);
 
-        Livewire::test(Index::class, [
+        $this->post(route('cronjobs.store', ['server' => $this->server]), [
-            'server' => $this->server,
-        ])
-            ->callAction('create', [
             'command' => 'ls -la',
             'user' => 'vito',
             'frequency' => 'custom',
             'custom' => '* * * 1 1',
         ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('cron_jobs', [
             'server_id' => $this->server->id,
@@ -202,12 +184,11 @@ public function test_enable_cronjob()
             'status' => CronjobStatus::DISABLED,
         ]);
 
-        Livewire::test(CronJobsList::class, [
+        $this->post(route('cronjobs.enable', [
             'server' => $this->server,
-        ])
+            'cronJob' => $cronjob,
-            ->assertTableActionHidden('disable', $cronjob->id)
+        ]))
-            ->callTableAction('enable', $cronjob->id)
+            ->assertSessionDoesntHaveErrors();
-            ->assertSuccessful();
 
         $cronjob->refresh();
 
@@ -217,7 +198,7 @@ public function test_enable_cronjob()
         SSH::assertExecutedContains('sudo -u vito crontab -l');
     }
 
-    public function test_disable_cronjob()
+    public function test_disable_cronjob(): void
     {
         SSH::fake();
 
@@ -232,12 +213,11 @@ public function test_disable_cronjob()
             'status' => CronjobStatus::READY,
         ]);
 
-        Livewire::test(CronJobsList::class, [
+        $this->post(route('cronjobs.disable', [
             'server' => $this->server,
-        ])
+            'cronJob' => $cronjob,
-            ->assertTableActionHidden('enable', $cronjob->id)
+        ]))
-            ->callTableAction('disable', $cronjob->id)
+            ->assertSessionDoesntHaveErrors();
-            ->assertSuccessful();
 
         $cronjob->refresh();