mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-04 15:32:35 +00:00
#591 - server-settings
This commit is contained in:
Saeed Vaziry
@ -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 CommandCell from '@/components/command-cell';
|
||||
import CopyableBadge from '@/components/copyable-badge';
|
||||
|
||||
function Delete({ cronJob }: { cronJob: CronJob }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
@ -67,7 +67,7 @@ export const columns: ColumnDef<CronJob>[] = [
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => {
|
||||
return <CommandCell command={row.original.command} />;
|
||||
return <CopyableBadge text={row.original.command} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
214
resources/js/pages/server-settings/index.tsx
Normal file
214
resources/js/pages/server-settings/index.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import { Head, useForm, usePage } from '@inertiajs/react';
|
||||
import { Server } from '@/types/server';
|
||||
import Container from '@/components/container';
|
||||
import HeaderContainer from '@/components/header-container';
|
||||
import Heading from '@/components/heading';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import ServerLayout from '@/layouts/server/layout';
|
||||
import { BookOpenIcon, LoaderCircleIcon } from 'lucide-react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import ServerStatus from '@/pages/servers/components/status';
|
||||
import DateTime from '@/components/date-time';
|
||||
import CopyableBadge from '@/components/copyable-badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function Databases() {
|
||||
const page = usePage<{
|
||||
server: Server;
|
||||
}>();
|
||||
|
||||
const [editMode, setEditMode] = useState<string | undefined>();
|
||||
|
||||
const form = useForm<{
|
||||
name: string;
|
||||
ip: string;
|
||||
port: string;
|
||||
local_ip?: string;
|
||||
}>({
|
||||
name: page.props.server.name,
|
||||
ip: page.props.server.ip,
|
||||
port: page.props.server.port.toString(),
|
||||
local_ip: page.props.server.local_ip,
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.patch(route('server-settings.update', { server: page.props.server.id }), {
|
||||
onSuccess: () => {
|
||||
setEditMode(undefined);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ServerLayout>
|
||||
<Head title={`Settings - ${page.props.server.name}`} />
|
||||
|
||||
<Container className="max-w-5xl">
|
||||
<HeaderContainer>
|
||||
<Heading title="Settings" description="Here you can manage your server's settings" />
|
||||
<div className="flex items-center gap-2">
|
||||
<a href="https://vitodeploy.com/docs/servers/settings" target="_blank">
|
||||
<Button variant="outline">
|
||||
<BookOpenIcon />
|
||||
<span className="hidden lg:block">Docs</span>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</HeaderContainer>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex-row items-center justify-between gap-2">
|
||||
<div className="space-y-2">
|
||||
<CardTitle>Server details</CardTitle>
|
||||
<CardDescription>Update server details</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{form.isDirty && (
|
||||
<Button onClick={submit}>
|
||||
{form.processing && <LoaderCircleIcon className="animate-spin" />}
|
||||
Save changes
|
||||
</Button>
|
||||
)}
|
||||
{(editMode || form.isDirty) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setEditMode(undefined);
|
||||
form.reset();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>ID</span>
|
||||
<span className="text-muted-foreground">{page.props.server.id}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Name</span>
|
||||
{editMode === 'name' ? (
|
||||
<Input
|
||||
id="name"
|
||||
className="h-6 max-w-48"
|
||||
value={form.data.name}
|
||||
onChange={(e) => form.setData('name', e.target.value)}
|
||||
onKeyDown={handleEnterKey}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span className="text-muted-foreground cursor-pointer underline" onClick={() => setEditMode('name')}>
|
||||
{form.data.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Status</span>
|
||||
<ServerStatus server={page.props.server} />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>IP</span>
|
||||
{editMode === 'ip' ? (
|
||||
<Input
|
||||
id="ip"
|
||||
className="h-6 max-w-48"
|
||||
value={form.data.ip}
|
||||
onChange={(e) => form.setData('ip', e.target.value)}
|
||||
onKeyDown={handleEnterKey}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span className="text-muted-foreground cursor-pointer underline" onClick={() => setEditMode('ip')}>
|
||||
{form.data.ip}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>SSH Port</span>
|
||||
{editMode === 'port' ? (
|
||||
<Input
|
||||
id="port"
|
||||
className="h-6 max-w-48"
|
||||
value={form.data.port}
|
||||
onChange={(e) => form.setData('port', e.target.value)}
|
||||
onKeyDown={handleEnterKey}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span className="text-muted-foreground cursor-pointer underline" onClick={() => setEditMode('port')}>
|
||||
{form.data.port}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Local IP</span>
|
||||
{editMode === 'local_ip' ? (
|
||||
<Input
|
||||
id="local_ip"
|
||||
className="h-6 max-w-48"
|
||||
value={form.data.local_ip ?? ''}
|
||||
onChange={(e) => form.setData('local_ip', e.target.value)}
|
||||
onKeyDown={handleEnterKey}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span className="text-muted-foreground cursor-pointer underline" onClick={() => setEditMode('local_ip')}>
|
||||
{form.data.local_ip ? form.data.local_ip : 'Click to set'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Created at</span>
|
||||
<span className="text-muted-foreground">
|
||||
<DateTime date={page.props.server.created_at} />
|
||||
</span>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Last update check</span>
|
||||
<span className="text-muted-foreground">
|
||||
{page.props.server.last_update_check ? <DateTime date={page.props.server.last_update_check} /> : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Available updates</span>
|
||||
<span className="text-muted-foreground">
|
||||
<span className="text-muted-foreground">{page.props.server.available_updates ?? '-'}</span>
|
||||
</span>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Provider</span>
|
||||
<span className="text-muted-foreground">
|
||||
<span className="text-muted-foreground">{page.props.server.provider}</span>
|
||||
</span>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<span>Public key</span>
|
||||
<CopyableBadge text={page.props.server.public_key} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Container>
|
||||
</ServerLayout>
|
||||
);
|
||||
}
|
||||
@ -1,8 +1,53 @@
|
||||
import { Server } from '@/types/server';
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MoreVerticalIcon } from 'lucide-react';
|
||||
import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
|
||||
import DeleteServer from '@/pages/servers/components/delete-server';
|
||||
import RebootServer from '@/pages/servers/components/reboot-server';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import UpdateServer from '@/pages/servers/components/update-server';
|
||||
|
||||
function CheckForUpdates({ server }: { server: Server }) {
|
||||
const form = useForm();
|
||||
|
||||
const submit = () => {
|
||||
form.post(route('servers.check-for-updates', server.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
className="w-40"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}}
|
||||
>
|
||||
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
|
||||
Check for updates
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckConnection({ server }: { server: Server }) {
|
||||
const form = useForm();
|
||||
|
||||
const submit = () => {
|
||||
form.patch(route('servers.status', server.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
className="w-40"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}}
|
||||
>
|
||||
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
|
||||
Check connection
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ServerActions({ server }: { server: Server }) {
|
||||
return (
|
||||
@ -14,7 +59,16 @@ export default function ServerActions({ server }: { server: Server }) {
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>Copy payment ID</DropdownMenuItem>
|
||||
<CheckConnection server={server} />
|
||||
<RebootServer server={server}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Reboot</DropdownMenuItem>
|
||||
</RebootServer>
|
||||
<CheckForUpdates server={server} />
|
||||
<UpdateServer server={server}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={server.available_updates == 0}>
|
||||
Update
|
||||
</DropdownMenuItem>
|
||||
</UpdateServer>
|
||||
<DropdownMenuSeparator />
|
||||
<DeleteServer server={server}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
|
||||
|
||||
@ -19,6 +19,13 @@ export const columns: ColumnDef<Server>[] = [
|
||||
header: 'Name',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<Link className="hover:underline" href={route('servers.show', { server: row.original.id })} prefetch>
|
||||
{row.original.name}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'ip',
|
||||
|
||||
@ -212,7 +212,7 @@ export default function CreateServer({ children }: { children: React.ReactNode }
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<FormField>
|
||||
<Label htmlFor="public_key">Public Key</Label>
|
||||
<Label htmlFor="public_key">Public Key command</Label>
|
||||
<Button
|
||||
onClick={copyToClipboard}
|
||||
variant="outline"
|
||||
|
||||
53
resources/js/pages/servers/components/reboot-server.tsx
Normal file
53
resources/js/pages/servers/components/reboot-server.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { Server } from '@/types/server';
|
||||
import { ReactNode, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { LoaderCircleIcon } from 'lucide-react';
|
||||
|
||||
export default function RebootServer({ server, children }: { server: Server; children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const form = useForm();
|
||||
|
||||
const submit = () => {
|
||||
form.post(route('servers.reboot', server.id), {
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Reboot {server.name}</DialogTitle>
|
||||
<DialogDescription className="sr-only">Reboot server</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<p className="p-4">Are you sure you want to reboot the server?</p>
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
|
||||
<Button onClick={submit} disabled={form.processing}>
|
||||
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
|
||||
Reboot
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
55
resources/js/pages/servers/components/update-server.tsx
Normal file
55
resources/js/pages/servers/components/update-server.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import { Server } from '@/types/server';
|
||||
import { ReactNode, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { LoaderCircleIcon } from 'lucide-react';
|
||||
|
||||
export default function UpdateServer({ server, children }: { server: Server; children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const form = useForm();
|
||||
|
||||
const submit = () => {
|
||||
form.post(route('servers.update', server.id), {
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Update {server.name}</DialogTitle>
|
||||
<DialogDescription className="sr-only">Update server</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<p className="p-4">
|
||||
Are you sure you want to update the server? There are <b>{server.available_updates}</b> available updates
|
||||
</p>
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
|
||||
<Button onClick={submit} disabled={form.processing}>
|
||||
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
|
||||
Update
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@ -19,7 +19,7 @@ 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 CopyableBadge from '@/components/copyable-badge';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import axios from 'axios';
|
||||
import LogOutput from '@/components/log-output';
|
||||
@ -145,7 +145,7 @@ export const columns: ColumnDef<Worker>[] = [
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => {
|
||||
return <CommandCell command={row.original.command} />;
|
||||
return <CopyableBadge text={row.original.command} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user