#591 - firewall

2025-07-02 22:46:16 +00:00 · 2025-05-27 00:30:29 +02:00
parent f5fdbae4ac
commit 6032bd1098
17 changed files with 514 additions and 65 deletions
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@ -16,7 +16,7 @@ createInertiaApp({
    root.render(<App {...props} />);
  },
  progress: {
-    color: '#4B5563',
+    color: '#5a5bc5',
  },
 });

--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@ -13,7 +13,7 @@ import {
  SidebarMenuSubItem,
 } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
-import { Link } from '@inertiajs/react';
+import { Link, router } from '@inertiajs/react';
 import { BookOpen, ChevronRightIcon, CogIcon, Folder, MousePointerClickIcon, ServerIcon } from 'lucide-react';
 import AppLogo from './app-logo';
 import { Icon } from '@/components/icon';
@ -129,7 +129,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
                        <Collapsible key={`${item.title}-${item.href}`} defaultOpen={isActive} className="group/collapsible">
                          <SidebarMenuItem>
                            <CollapsibleTrigger asChild>
-                              <SidebarMenuButton>
+                              <SidebarMenuButton disabled={item.isDisabled || false}>
                                {item.icon && <item.icon />}
                                <span>{item.title}</span>
                                <ChevronRightIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
@ -163,11 +163,9 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?

                    return (
                      <SidebarMenuItem key={`${item.title}-${item.href}`}>
-                        <SidebarMenuButton asChild isActive={isActive}>
-                          <Link href={item.href} prefetch>
-                            {item.icon && <item.icon />}
-                            <span>{item.title}</span>
-                          </Link>
+                        <SidebarMenuButton onClick={() => router.visit(item.href)} isActive={isActive} disabled={item.isDisabled || false}>
+                          {item.icon && <item.icon />}
+                          <span>{item.title}</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    );
--- a/resources/js/layouts/server/layout.tsx
+++ b/resources/js/layouts/server/layout.tsx
@ -1,5 +1,5 @@
 import { type NavItem } from '@/types';
-import { ArrowLeftIcon, CloudUploadIcon, DatabaseIcon, HomeIcon, MousePointerClickIcon, RocketIcon, UsersIcon } from 'lucide-react';
+import { ArrowLeftIcon, CloudUploadIcon, DatabaseIcon, FlameIcon, HomeIcon, MousePointerClickIcon, RocketIcon, UsersIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Server } from '@/types/server';
 import ServerHeader from '@/pages/servers/components/header';
@ -20,6 +20,8 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
    return null;
  }

+  const isMenuDisabled = page.props.server.status !== 'ready';
+
  const sidebarNavItems: NavItem[] = [
    {
      title: 'Overview',
@ -31,6 +33,7 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
      title: 'Database',
      href: route('databases', { server: page.props.server.id }),
      icon: DatabaseIcon,
+      isDisabled: isMenuDisabled,
      children: [
        {
          title: 'Databases',
@ -54,6 +57,7 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
      title: 'Sites',
      href: route('sites', { server: page.props.server.id }),
      icon: MousePointerClickIcon,
+      isDisabled: isMenuDisabled,
      children: page.props.site
        ? [
            {
@ -70,11 +74,12 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
          ]
        : [],
    },
-    // {
-    //   title: 'Firewall',
-    //   href: '#',
-    //   icon: FlameIcon,
-    // },
+    {
+      title: 'Firewall',
+      href: route('firewall', { server: page.props.server.id }),
+      icon: FlameIcon,
+      isDisabled: isMenuDisabled,
+    },
    // {
    //   title: 'CronJobs',
    //   href: '#',
--- a/resources/js/pages/firewall/components/columns.tsx
+++ b/resources/js/pages/firewall/components/columns.tsx
@ -0,0 +1,138 @@
+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 { useState } from 'react';
+import { FirewallRule } from '@/types/firewall';
+import { Badge } from '@/components/ui/badge';
+import RuleForm from '@/pages/firewall/components/form';
+
+function Delete({ firewallRule }: { firewallRule: FirewallRule }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('firewall.destroy', { server: firewallRule.server_id, firewallRule: firewallRule }), {
+      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 firewallRule [{firewallRule.name}]</DialogTitle>
+          <DialogDescription className="sr-only">Delete firewallRule</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to delete rule <strong>{firewallRule.name}</strong>? 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>
+  );
+}
+
+export const columns: ColumnDef<FirewallRule>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <span className="uppercase">{row.original.type}</span>;
+    },
+  },
+  {
+    accessorKey: 'source',
+    header: 'Source',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <span>{row.original.source ?? 'any'}</span>;
+    },
+  },
+  {
+    accessorKey: 'protocol',
+    header: 'Protocol',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <span className="uppercase">{row.original.protocol}</span>;
+    },
+  },
+  {
+    accessorKey: 'port',
+    header: 'Port',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    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">
+              <RuleForm serverId={row.original.server_id} firewallRule={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </RuleForm>
+              <DropdownMenuSeparator />
+              <Delete firewallRule={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];
--- a/resources/js/pages/firewall/components/form.tsx
+++ b/resources/js/pages/firewall/components/form.tsx
@ -0,0 +1,152 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { FormEvent, ReactNode, useState } from 'react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { useForm } 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 { Checkbox } from '@/components/ui/checkbox';
+import { FirewallRule } from '@/types/firewall';
+
+export default function RuleForm({ serverId, firewallRule, children }: { serverId: number; firewallRule?: FirewallRule; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    name: string;
+    type: string;
+    protocol: string;
+    port: string;
+    source_any: boolean;
+    source: string;
+    mask: string;
+  }>({
+    name: firewallRule?.name || '',
+    type: firewallRule?.type || '',
+    protocol: firewallRule?.protocol || '',
+    port: firewallRule?.port?.toString() || '',
+    source_any: !firewallRule?.source,
+    source: firewallRule?.source || '',
+    mask: firewallRule?.mask?.toString() || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (firewallRule) {
+      form.put(route('firewall.update', { server: serverId, firewallRule: firewallRule.id }), {
+        onSuccess: () => {
+          setOpen(false);
+          form.reset();
+        },
+      });
+      return;
+    }
+
+    form.post(route('firewall.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>{firewallRule ? 'Edit' : 'Create'} firewall rule</DialogTitle>
+          <DialogDescription className="sr-only">{firewallRule ? 'Edit' : 'Create'} new firewall rule</DialogDescription>
+        </DialogHeader>
+        <Form id="firewall-rule-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+
+            <FormField>
+              <Label htmlFor="type">Type</Label>
+              <Select onValueChange={(value) => form.setData('type', value)} value={form.data.type}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="allow">Allow</SelectItem>
+                    <SelectItem value="deny">Deny</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.type} />
+            </FormField>
+
+            <FormField>
+              <Label htmlFor="protocol">Protocol</Label>
+              <Select onValueChange={(value) => form.setData('protocol', value)} value={form.data.protocol}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select protocol" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="tcp">TCP</SelectItem>
+                    <SelectItem value="udp">UDP</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.protocol} />
+            </FormField>
+
+            <FormField>
+              <Label htmlFor="port">Port</Label>
+              <Input type="text" id="port" value={form.data.port} onChange={(e) => form.setData('port', e.target.value)} />
+              <InputError message={form.errors.port} />
+            </FormField>
+
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox id="source_any" checked={form.data.source_any} onClick={() => form.setData('source_any', !form.data.source_any)} />
+                <Label htmlFor="source_any">Any source</Label>
+              </div>
+            </FormField>
+
+            {!form.data.source_any && (
+              <>
+                <FormField>
+                  <Label htmlFor="source">Source</Label>
+                  <Input type="text" id="source" value={form.data.source} onChange={(e) => form.setData('source', e.target.value)} />
+                  <InputError message={form.errors.source} />
+                </FormField>
+
+                <FormField>
+                  <Label htmlFor="mask">Mask</Label>
+                  <Input type="text" id="mask" value={form.data.mask} onChange={(e) => form.setData('mask', e.target.value)} />
+                  <InputError message={form.errors.mask} />
+                </FormField>
+              </>
+            )}
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button form="firewall-rule-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/resources/js/pages/firewall/index.tsx
+++ b/resources/js/pages/firewall/index.tsx
@ -0,0 +1,42 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import { PaginatedData } from '@/types';
+import { FirewallRule } from '@/types/firewall';
+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 { columns } from '@/pages/firewall/components/columns';
+import RuleForm from '@/pages/firewall/components/form';
+
+export default function Firewall() {
+  const page = usePage<{
+    server: Server;
+    rules: PaginatedData<FirewallRule>;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Firewall - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Firewall" description="Here you can manage server's firewall rules" />
+          <div className="flex items-center gap-2">
+            <RuleForm serverId={page.props.server.id}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create rule</span>
+              </Button>
+            </RuleForm>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.rules} />
+      </Container>
+    </ServerLayout>
+  );
+}
--- a/resources/js/pages/servers/components/header.tsx
+++ b/resources/js/pages/servers/components/header.tsx
@ -6,16 +6,37 @@ import { cn } from '@/lib/utils';
 import { Site } from '@/types/site';
 import { StatusRipple } from '@/components/status-ripple';
 import { Badge } from '@/components/ui/badge';
+import { useForm } from '@inertiajs/react';

 export default function ServerHeader({ server, site }: { server: Server; site?: Site }) {
+  const statusForm = useForm();
+
+  const checkStatus = () => {
+    if (['installing', 'installation_failed'].includes(server.status)) {
+      return;
+    }
+
+    statusForm.patch(route('servers.status', { server: server.id }));
+  };
+
  return (
    <div className="flex items-center justify-between border-b px-4 py-2">
      <div className="space-y-2">
        <div className="flex items-center space-x-2 text-xs">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div>
+                {statusForm.processing && <LoaderCircleIcon className="size-3 animate-spin" />}
+                {!statusForm.processing && <StatusRipple className="cursor-pointer" onClick={checkStatus} variant={server.status_color} />}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              <span>{server.status}</span>
+            </TooltipContent>
+          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="flex items-center space-x-2">
-                <StatusRipple variant={server.status_color} />
                <div className="hidden lg:inline-flex">{server.name}</div>
              </div>
            </TooltipTrigger>
--- a/resources/js/types/firewall.d.ts
+++ b/resources/js/types/firewall.d.ts
@ -0,0 +1,15 @@
+export interface FirewallRule {
+  id: number;
+  name: string;
+  server_id: number;
+  type: string;
+  protocol: string;
+  port: number;
+  source: string;
+  mask: number;
+  note: string;
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+}
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@ -28,6 +28,7 @@ export interface NavItem {
  onlyActivePath?: string;
  icon?: LucideIcon | null;
  isActive?: boolean;
+  isDisabled?: boolean;
  children?: NavItem[];
 }