#591 - scripts

resources/js/pages/application/components/load-balancer.tsx

@@ -7,13 +7,12 @@ import HeaderContainer from '@/components/header-container';
 import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { BookOpenIcon, LoaderCircleIcon } from 'lucide-react';
-import React, { FormEvent } from 'react';
+import { FormEvent } from 'react';
 import { LoadBalancerServer } from '@/types/load-balancer-server';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import type { Project } from '@/types/project';
 import InputError from '@/components/ui/input-error';
 import FormSuccessful from '@/components/form-successful';
 

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

@@ -0,0 +1,106 @@
+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 { Link, useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, MoreVerticalIcon, PlayIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { useState } from 'react';
+import { Script } from '@/types/script';
+import Execute from '@/pages/scripts/components/execute';
+import ScriptForm from './form';
+
+function Delete({ script }: { script: Script }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('scripts.destroy', { server: script.server_id, site: script.site_id, script: script.id }), {
+      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 script</DialogTitle>
+          <DialogDescription className="sr-only">Delete script</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to this script?</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>
+  );
+}
+
+export const columns: ColumnDef<Script>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end gap-1">
+          <Execute script={row.original}>
+            <Button variant="outline" className="size-8">
+              <PlayIcon className="size-3" />
+            </Button>
+          </Execute>
+          <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">
+              <ScriptForm script={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </ScriptForm>
+              <Link
+                href={route('scripts.show', {
+                  script: row.original.id,
+                })}
+              >
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Executions</DropdownMenuItem>
+              </Link>
+              <DropdownMenuSeparator />
+              <Delete script={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/scripts/components/execute.tsx

@@ -0,0 +1,105 @@
+import React, { ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { Script } from '@/types/script';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import ServerSelect from '@/pages/servers/components/server-select';
+import { Server } from '@/types/server';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+export default function Execute({ script, children }: { script: Script; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [server, setServer] = useState<Server>();
+  const form = useForm<Record<string, string>>({
+    server: '',
+    user: '',
+  });
+
+  const submit = () => {
+    form.post(route('scripts.execute', { script: script.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Execute</DialogTitle>
+          <DialogDescription className="sr-only">Execute script</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to run this script?</p>
+          <Form id="execute-script-form" onSubmit={submit}>
+            <FormFields>
+              <FormField>
+                <Label htmlFor="server">Server</Label>
+                <ServerSelect
+                  value={form.data.server}
+                  onValueChange={(value) => {
+                    form.setData('server', value.id.toString());
+                    setServer(value);
+                  }}
+                />
+                <InputError message={form.errors.server} />
+              </FormField>
+              <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>
+                      {server?.ssh_users.map((user) => (
+                        <SelectItem key={`user-${user}`} value={user}>
+                          {user}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <InputError message={form.errors.user} />
+              </FormField>
+              {script.variables.map((variable: string) => (
+                <FormField key={`variable-${variable}`}>
+                  <Label htmlFor={variable}>{variable}</Label>
+                  <Input id={variable} name={variable} value={form.data[variable] || ''} onChange={(e) => form.setData(variable, e.target.value)} />
+                  <InputError message={form.errors[variable as keyof typeof form.errors]} />
+                </FormField>
+              ))}
+            </FormFields>
+          </Form>
+        </div>
+        <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} />
+            Execute
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/scripts/components/execution-columns.tsx

@@ -0,0 +1,69 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Button } from '@/components/ui/button';
+import { MoreVerticalIcon } from 'lucide-react';
+import DateTime from '@/components/date-time';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { ScriptExecution } from '@/types/script-execution';
+import { Badge } from '@/components/ui/badge';
+import { Download, View } from '@/pages/server-logs/components/columns';
+import { Link } from '@inertiajs/react';
+
+export const columns: ColumnDef<ScriptExecution>[] = [
+  {
+    accessorKey: 'created_at',
+    header: 'Deployed At',
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    accessorKey: 'server',
+    header: 'Server',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return row.original.server ? (
+        <Link href={route('servers.show', { server: row.original.server_id })} className="hover:underline">
+          {row.original.server.name} ({row.original.server.ip})
+        </Link>
+      ) : (
+        '-'
+      );
+    },
+  },
+  {
+    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">
+              <View serverLog={row.original.log} />
+              <Download serverLog={row.original.log}>
+                <DropdownMenuItem>Download</DropdownMenuItem>
+              </Download>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

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

@@ -0,0 +1,99 @@
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { Input } from '@/components/ui/input';
+import { registerBashLanguage } from '@/lib/editor';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { useAppearance } from '@/hooks/use-appearance';
+import { Script } from '@/types/script';
+
+export default function ScriptForm({ script, children }: { script?: Script; children: ReactNode }) {
+  const { getActualAppearance } = useAppearance();
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<{
+    name: string;
+    content: string;
+  }>({
+    name: script?.name ?? '',
+    content: script?.script ?? '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    const url = script ? route('scripts.update', { script: script.id }) : route('scripts.store');
+    form.post(url, {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  registerBashLanguage(useMonaco());
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>{script ? 'Edit' : 'Create'} script</SheetTitle>
+          <SheetDescription className="sr-only">{script ? 'Edit' : 'Create'} script</SheetDescription>
+        </SheetHeader>
+        <Form id="script-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+
+            <FormField>
+              <Label htmlFor="script">Script</Label>
+              <div className="overflow-hidden rounded-md border">
+                <Editor
+                  defaultLanguage="bash"
+                  defaultValue={form.data.content}
+                  theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
+                  className="h-[500px]"
+                  onChange={(value) => form.setData('content', value ?? '')}
+                  options={{
+                    fontSize: 15,
+                    minimap: {
+                      enabled: false,
+                    },
+                    lineNumbers: 'off',
+                    padding: {
+                      top: 10,
+                      bottom: 10,
+                    },
+                  }}
+                />
+              </div>
+              <p className="text-muted-foreground text-sm">
+                You can use variables like {'${VARIABLE_NAME}'} in the script. The variables will be asked when executing the script
+              </p>
+              <InputError message={form.errors.content} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="script-form" type="button" onClick={submit} disabled={form.processing}>
+              {form.processing && <LoaderCircle className="animate-spin" />}
+              {script ? 'Save' : 'Create'}
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/scripts/index.tsx

@@ -0,0 +1,44 @@
+import { Head, 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 { PlusIcon } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/scripts/components/columns';
+import { PaginatedData } from '@/types';
+import { Script } from '@/types/script';
+import { Site } from '@/types/site';
+import Layout from '@/layouts/app/layout';
+import ScriptForm from '@/pages/scripts/components/form';
+
+export default function Scripts() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    scripts: PaginatedData<Script>;
+  }>();
+
+  return (
+    <Layout>
+      <Head title={`Scripts`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Scripts" description="These are the scripts that you can run on your site's location" />
+          <div className="flex items-center gap-2">
+            <ScriptForm>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </ScriptForm>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.scripts} />
+      </Container>
+    </Layout>
+  );
+}

resources/js/pages/scripts/show.tsx

@@ -0,0 +1,35 @@
+import { Head, 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 { DataTable } from '@/components/data-table';
+import { PaginatedData } from '@/types';
+import { columns } from '@/pages/scripts/components/execution-columns';
+import { Site } from '@/types/site';
+import { ScriptExecution } from '@/types/script-execution';
+import Layout from '@/layouts/app/layout';
+
+type Page = {
+  server: Server;
+  site: Site;
+  executions: PaginatedData<ScriptExecution>;
+};
+
+export default function Show() {
+  const page = usePage<Page>();
+
+  return (
+    <Layout>
+      <Head title={`Executions`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title={`Script executions`} description="Here you can see the script executions" />
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.executions} />
+      </Container>
+    </Layout>
+  );
+}