#591 - server-settings

app/Actions/Server/EditServer.php

@@ -4,6 +4,7 @@
 
 use App\Models\Server;
 use App\ValidationRules\RestrictedIPAddressesRule;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\ValidationException;
 
@@ -17,6 +18,8 @@ class EditServer
      */
     public function edit(Server $server, array $input): Server
     {
+        Validator::make($input, self::rules($server))->validate();
+
         $checkConnection = false;
         if (isset($input['name'])) {
             $server->name = $input['name'];
@@ -62,6 +65,7 @@ public static function rules(Server $server): array
                 Rule::unique('servers')->where('project_id', $server->project_id)->ignore($server->id),
             ],
             'local_ip' => [
+                'nullable',
                 'string',
                 Rule::unique('servers')->where('project_id', $server->project_id)->ignore($server->id),
             ],

app/Console/Commands/CheckServersConnectionCommand.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Enums\ServerStatus;
+use App\Models\Server;
+use Illuminate\Console\Command;
+
+class CheckServersConnectionCommand extends Command
+{
+    protected $signature = 'servers:check';
+
+    protected $description = 'Check servers connection status';
+
+    public function handle(): void
+    {
+        Server::query()->whereIn('status', [
+            ServerStatus::READY,
+            ServerStatus::DISCONNECTED,
+        ])->chunk(50, function ($servers) {
+            /** @var Server $server */
+            foreach ($servers as $server) {
+                dispatch(function () use ($server) {
+                    $server->checkConnection();
+                })->onConnection('ssh');
+            }
+        });
+    }
+}

app/Console/Kernel.php

@@ -18,6 +18,7 @@ protected function schedule(Schedule $schedule): void
         $schedule->command('backups:run "0 0 1 * *"')->monthly();
         $schedule->command('metrics:delete-older-metrics')->daily();
         $schedule->command('metrics:get')->everyMinute();
+        $schedule->command('servers:check')->everyFiveMinutes();
     }
 
     /**

app/Http/Controllers/ServerController.php

@@ -3,6 +3,9 @@
 namespace App\Http\Controllers;
 
 use App\Actions\Server\CreateServer;
+use App\Actions\Server\RebootServer;
+use App\Actions\Server\Update;
+use App\Exceptions\SSHError;
 use App\Http\Resources\ServerLogResource;
 use App\Http\Resources\ServerProviderResource;
 use App\Http\Resources\ServerResource;
@@ -120,6 +123,39 @@ public function status(Server $server): RedirectResponse
             ]));
     }
 
+    #[Post('/{server}/reboot', name: 'servers.reboot')]
+    public function reboot(Server $server): RedirectResponse
+    {
+        $this->authorize('update', $server);
+
+        app(RebootServer::class)->reboot($server);
+
+        return back()->with('success', 'Server is being rebooted.');
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Post('/{server}/check-for-updates', name: 'servers.check-for-updates')]
+    public function checkForUpdates(Server $server): RedirectResponse
+    {
+        $this->authorize('update', $server);
+
+        $server->checkForUpdates();
+
+        return back()->with('info', 'Available updates: '.$server->refresh()->available_updates);
+    }
+
+    #[Post('/{server}/update', name: 'servers.update')]
+    public function update(Server $server): RedirectResponse
+    {
+        $this->authorize('update', $server);
+
+        app(Update::class)->update($server);
+
+        return back()->with('info', 'Server is being updated. This may take a while.');
+    }
+
     #[Delete('/{server}', name: 'servers.destroy')]
     public function destroy(Server $server, Request $request): RedirectResponse
     {

app/Http/Controllers/ServerSettingController.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Server\EditServer;
+use App\Models\Server;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\RouteAttributes\Attributes\Get;
+use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Patch;
+use Spatie\RouteAttributes\Attributes\Prefix;
+
+#[Prefix('servers/{server}/settings')]
+#[Middleware(['auth', 'has-project'])]
+class ServerSettingController extends Controller
+{
+    #[Get('/', name: 'server-settings')]
+    public function index(Server $server): Response
+    {
+        $this->authorize('view', $server);
+
+        return Inertia::render('server-settings/index');
+    }
+
+    #[Patch('update', name: 'server-settings.update')]
+    public function update(Request $request, Server $server): RedirectResponse
+    {
+        $this->authorize('update', $server);
+
+        app(EditServer::class)->edit($server, $request->input());
+
+        return back()->with('success', 'Changes saved successfully.');
+    }
+}

resources/js/components/copyable-badge.tsx

@@ -2,10 +2,10 @@ 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 }) {
+export default function CopyableBadge({ text }: { text: string }) {
   const [copySuccess, setCopySuccess] = useState(false);
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(command).then(() => {
+    navigator.clipboard.writeText(text).then(() => {
       setCopySuccess(true);
       setTimeout(() => {
         setCopySuccess(false);
@@ -18,7 +18,7 @@ export default function CommandCell({ command }: { command: string }) {
       <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}
+            {text}
           </Badge>
         </div>
       </TooltipTrigger>

resources/js/layouts/app/layout.tsx

@@ -69,7 +69,7 @@ export default function Layout({
         <SidebarInset>
           <AppHeader />
           <div className="flex flex-1 flex-col">{children}</div>
-          <Toaster richColors />
+          <Toaster richColors position="bottom-center" />
         </SidebarInset>
       </SidebarProvider>
     </QueryClientProvider>

resources/js/layouts/server/layout.tsx

@@ -14,6 +14,7 @@ import {
   LogsIcon,
   MousePointerClickIcon,
   RocketIcon,
+  Settings2Icon,
   TerminalSquareIcon,
   UsersIcon,
 } from 'lucide-react';
@@ -152,11 +153,11 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
         },
       ],
     },
-    // {
-    //   title: 'Settings',
-    //   href: '#',
-    //   icon: Settings2Icon,
-    // },
+    {
+      title: 'Settings',
+      href: route('server-settings', { server: page.props.server.id }),
+      icon: Settings2Icon,
+    },
   ];
 
   return (

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

@@ -19,7 +19,7 @@ import { CronJob } from '@/types/cronjob';
 import { Badge } from '@/components/ui/badge';
 import DateTime from '@/components/date-time';
 import CronJobForm from '@/pages/cronjobs/components/form';
-import 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} />;
     },
   },
   {

resources/js/pages/server-settings/index.tsx

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

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

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

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

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

resources/js/pages/servers/components/create-server.tsx

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

resources/js/pages/servers/components/reboot-server.tsx

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

resources/js/pages/servers/components/update-server.tsx

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

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

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