direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-01 05:56:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

#591 - workers

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-29 20:05:13 +02:00
parent 984c1f3a8e
commit 8b6f65db97
20 changed files with 777 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/Actions/CronJob/CreateCronJob.php
View File

@ -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

3
app/Actions/Worker/CreateWorker.php
View File

@ -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,

3
app/Actions/Worker/EditWorker.php
View File

@ -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'],

131
app/Http/Controllers/WorkerController.php Normal file
View File

@ -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.');
}
}

31
app/Http/Resources/WorkerResource.php Normal file
View File

@ -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,
];
}
}

2
resources/js/components/app-header.tsx
View File

@ -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" />

30
resources/js/components/command-cell.tsx Normal file
View File

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

45
resources/js/components/log-output.tsx Normal file
View File

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

18
resources/js/layouts/app/layout.tsx
View File

@ -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(
(localStorage.getItem('sidebar') === 'true' || false) && !!(secondNavItems && secondNavItems.length > 0),
);
const sidebarOpenChange = (open: boolean) => {
setSidebarOpen(open);
localStorage.setItem('sidebar', String(open));
};
// 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);
@ -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 />

12
resources/js/layouts/server/layout.tsx
View File

@ -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',
// href: '#',
// icon: ListEndIcon,
// },
{
title: 'Workers',
href: route('workers', { server: page.props.server.id }),
icon: ListEndIcon,
isDisabled: isMenuDisabled,
},
// {
// title: 'SSH Keys',
// href: '#',

31
resources/js/pages/cronjobs/components/columns.tsx
View File

@ -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} />;
},
},
{

2
resources/js/pages/cronjobs/index.tsx
View File

@ -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>

2
resources/js/pages/firewall/index.tsx
View File

@ -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>

40
resources/js/pages/server-logs/components/columns.tsx
View File

@ -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 () => {
setLoading(true);
try {
const query = useQuery({
queryKey: ['server-log', row.original.id],
queryFn: async () => {
const response = await axios.get(route('logs.show', { server: row.original.server_id, log: row.original.id }));
setContent(response.data);
} catch (error: unknown) {
console.error(error);
if (error instanceof Error) {
setContent(error.message);
} else {
setContent('An unknown error occurred.');
}
} finally {
setLoading(false);
setOpen(true);
}
};
return response.data;
},
enabled: open,
refetchInterval: 2500,
});
return (
<div className="flex items-center justify-end">
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm" onClick={showLog} disabled={loading}>
{loading ? <LoaderCircleIcon className="animate-spin" /> : <EyeIcon />}
<Button variant="outline" size="sm">
<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">
{content}
<ScrollBar orientation="vertical" />
</ScrollArea>
<LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
<DialogFooter>
<Button variant="outline">Download</Button>
</DialogFooter>

19
resources/js/pages/servers/components/header.tsx
View File

@ -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" />
<div className="hidden lg:inline-flex">{server.ip}</div>
{ipCopied ? <ClipboardCheckIcon className="text-success size-4" /> : <MapPinIcon className="size-4" />}
<div className="hidden cursor-pointer lg:inline-flex" onClick={() => copyIp(server.ip)}>
{server.ip}
</div>
</div>
</TooltipTrigger>
<TooltipContent side="bottom">

225
resources/js/pages/workers/components/columns.tsx Normal file
View File

@ -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>
);
},
},
];

142
resources/js/pages/workers/components/form.tsx Normal file
View File

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

42
resources/js/pages/workers/index.tsx Normal file
View File

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

13
resources/js/types/worker.d.ts vendored Normal file
View File

@ -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;
}

133
tests/Feature/WorkersTest.php
View File

@ -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(
Index::getUrl([
'server' => $this->server,
'site' => $this->site,
])
)
$this->get(route('workers', [
'server' => $this->server,
]))
->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,
])
->callTableAction('delete', $worker->id)
->assertSuccessful();
'worker' => $worker,
]))
->assertSessionDoesntHaveErrors();
$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', [
'command' => 'php artisan worker:work',
'user' => 'vito',
'auto_start' => 1,
'auto_restart' => 1,
'numprocs' => 1,
])
->assertSuccessful();
->assertSessionDoesntHaveErrors();
$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', [
'command' => 'php artisan queue:work',
'user' => 'example',
'auto_start' => 1,
'auto_restart' => 1,
'numprocs' => 1,
])
->assertSuccessful();
->assertSessionDoesntHaveErrors();
$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', [
'command' => 'php artisan queue:work',
'user' => 'example',
'auto_start' => 1,
'auto_restart' => 1,
'numprocs' => 1,
])
->assertHasActionErrors();
->assertSessionHasErrors();
$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', [
'command' => 'php artisan queue:work',
'user' => 'example',
'auto_start' => 1,
'auto_restart' => 1,
'numprocs' => 1,
])
->assertHasActionErrors();
->assertSessionHasErrors();
$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,
])
->callTableAction('start', $worker->id)
->assertSuccessful();
'worker' => $worker,
]))
->assertSessionDoesntHaveErrors();
$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,
])
->callTableAction('stop', $worker->id)
->assertSuccessful();
'worker' => $worker,
]))
->assertSessionDoesntHaveErrors();
$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,
])
->callTableAction('restart', $worker->id)
->assertSuccessful();
'worker' => $worker,
]))
->assertSessionDoesntHaveErrors();
$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,
])
->callTableAction('logs', $worker->id)
'worker' => $worker,
]))
->assertSuccessful();
}
}