mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-03 15:02:34 +00:00
#591 - workers
This commit is contained in:
Saeed Vaziry
225
resources/js/pages/workers/components/columns.tsx
Normal file
225
resources/js/pages/workers/components/columns.tsx
Normal 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
142
resources/js/pages/workers/components/form.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user