#591 - firewall

2025-07-01 05:56: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/app/Actions/FirewallRule/ManageRule.php
+++ b/app/Actions/FirewallRule/ManageRule.php
@ -8,6 +8,7 @@
 use App\Models\Service;
 use App\SSH\Services\Firewall\Firewall;
 use Exception;
+use Illuminate\Support\Facades\Validator;

 class ManageRule
 {
@ -17,6 +18,8 @@ class ManageRule
     */
    public function create(Server $server, array $input): FirewallRule
    {
+        Validator::make($input, self::rules($input))->validate();
+
        $sourceAny = $input['source_any'] ?? empty($input['source'] ?? null);
        $rule = new FirewallRule([
            'name' => $input['name'],
@ -42,6 +45,8 @@ public function create(Server $server, array $input): FirewallRule
     */
    public function update(FirewallRule $rule, array $input): FirewallRule
    {
+        Validator::make($input, self::rules($input))->validate();
+
        $sourceAny = $input['source_any'] ?? empty($input['source'] ?? null);
        $rule->update([
            'name' => $input['name'],
@ -93,11 +98,12 @@ protected function applyRule(FirewallRule $rule): void
    }

    /**
+     * @param  array<string, mixed>  $input
     * @return array<string, array<string>>
     */
-    public static function rules(): array
+    public static function rules(array $input): array
    {
-        return [
+        $rules = [
            'name' => [
                'required',
                'string',
@ -117,16 +123,13 @@ public static function rules(): array
                'min:1',
                'max:65535',
            ],
-            'source' => [
-                'nullable',
-                'ip',
-            ],
-            'mask' => [
-                'nullable',
-                'numeric',
-                'min:1',
-                'max:32',
-            ],
        ];
+
+        if (! ($input['source_any'] ?? false)) {
+            $rules['source'] = ['required', 'ip'];
+            $rules['mask'] = ['required', 'numeric', 'min:1', 'max:32'];
+        }
+
+        return $rules;
    }
 }
--- a/app/Http/Controllers/API/FirewallRuleController.php
+++ b/app/Http/Controllers/API/FirewallRuleController.php
@ -54,8 +54,6 @@ public function create(Request $request, Project $project, Server $server): Fire

        $this->validateRoute($project, $server);

-        $this->validate($request, ManageRule::rules());
-
        $firewallRule = app(ManageRule::class)->create($server, $request->all());

        return new FirewallRuleResource($firewallRule);
@ -76,8 +74,6 @@ public function edit(Request $request, Project $project, Server $server, Firewal

        $this->validateRoute($project, $server);

-        $this->validate($request, ManageRule::rules());
-
        $firewallRule = app(ManageRule::class)->update($firewallRule, $request->all());

        return new FirewallRuleResource($firewallRule);
--- a/app/Http/Controllers/FirewallController.php
+++ b/app/Http/Controllers/FirewallController.php
@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\FirewallRule\ManageRule;
+use App\Http\Resources\FirewallRuleResource;
+use App\Models\FirewallRule;
+use App\Models\Server;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\RouteAttributes\Attributes\Delete;
+use Spatie\RouteAttributes\Attributes\Get;
+use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+use Spatie\RouteAttributes\Attributes\Put;
+
+#[Prefix('servers/{server}/firewall')]
+#[Middleware(['auth', 'has-project'])]
+class FirewallController extends Controller
+{
+    #[Get('/', name: 'firewall')]
+    public function index(Server $server): Response
+    {
+        $this->authorize('viewAny', [FirewallRule::class, $server]);
+
+        return Inertia::render('firewall/index', [
+            'rules' => FirewallRuleResource::collection($server->firewallRules()->latest()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Post('/', name: 'firewall.store')]
+    public function store(Request $request, Server $server): RedirectResponse
+    {
+        $this->authorize('create', [FirewallRule::class, $server]);
+
+        app(ManageRule::class)->create($server, $request->all());
+
+        return back()
+            ->with('info', 'Firewall rule is being created.');
+    }
+
+    #[Put('/{firewallRule}', name: 'firewall.update')]
+    public function update(Request $request, Server $server, FirewallRule $firewallRule): RedirectResponse
+    {
+        $this->authorize('update', $firewallRule);
+
+        app(ManageRule::class)->update($firewallRule, $request->all());
+
+        return back()
+            ->with('info', 'Firewall rule is being updated.');
+    }
+
+    #[Delete('/{firewallRule}', name: 'firewall.destroy')]
+    public function destroy(Server $server, FirewallRule $firewallRule): RedirectResponse
+    {
+        $this->authorize('delete', $firewallRule);
+
+        app(ManageRule::class)->delete($firewallRule);
+
+        return back()
+            ->with('info', 'Firewall rule is being deleted.');
+    }
+}
--- a/app/Http/Controllers/ServerController.php
+++ b/app/Http/Controllers/ServerController.php
@ -18,6 +18,7 @@
 use Spatie\RouteAttributes\Attributes\Delete;
 use Spatie\RouteAttributes\Attributes\Get;
 use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Patch;
 use Spatie\RouteAttributes\Attributes\Post;
 use Spatie\RouteAttributes\Attributes\Prefix;

@ -104,6 +105,21 @@ public function switch(Server $server): RedirectResponse
        return redirect()->route('servers.show', ['server' => $server->id]);
    }

+    #[Patch('/{server}/status', name: 'servers.status')]
+    public function status(Server $server): RedirectResponse
+    {
+        $this->authorize('view', $server);
+
+        $server->checkConnection();
+
+        $server->refresh();
+
+        return back()
+            ->with($server->getStatusColor(), __('Server status is :status', [
+                'status' => $server->status,
+            ]));
+    }
+
    #[Delete('/{server}', name: 'servers.destroy')]
    public function destroy(Server $server, Request $request): RedirectResponse
    {
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@ -93,8 +93,10 @@ public function share(Request $request): array
            'flash' => [
                'success' => fn () => $request->session()->get('success'),
                'error' => fn () => $request->session()->get('error'),
+                'danger' => fn () => $request->session()->get('danger'),
                'warning' => fn () => $request->session()->get('warning'),
                'info' => fn () => $request->session()->get('info'),
+                'gray' => fn () => $request->session()->get('gray'),
                'data' => fn () => $request->session()->get('data'),
            ],
        ];
--- a/app/Http/Resources/FirewallRuleResource.php
+++ b/app/Http/Resources/FirewallRuleResource.php
@ -25,6 +25,7 @@ public function toArray(Request $request): array
            'mask' => $this->mask,
            'note' => $this->note,
            'status' => $this->status,
+            'status_color' => FirewallRule::$statusColors[$this->status] ?? 'gray',
            'created_at' => $this->created_at,
            'updated_at' => $this->updated_at,
        ];
--- a/app/Models/FirewallRule.php
+++ b/app/Models/FirewallRule.php
@ -3,6 +3,7 @@
 namespace App\Models;

 use App\Enums\FirewallRuleStatus;
+use Database\Factories\FirewallRuleFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;

@ -20,7 +21,7 @@
 */
 class FirewallRule extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\FirewallRuleFactory> */
+    /** @use HasFactory<FirewallRuleFactory> */
    use HasFactory;

    protected $fillable = [
@ -40,17 +41,16 @@ class FirewallRule extends AbstractModel
        'port' => 'integer',
    ];

-    public function getStatusColor(): string
-    {
-        return match ($this->status) {
-            FirewallRuleStatus::CREATING,
-            FirewallRuleStatus::UPDATING,
-            FirewallRuleStatus::DELETING => 'warning',
-            FirewallRuleStatus::READY => 'success',
-            FirewallRuleStatus::FAILED => 'danger',
-            default => 'secondary',
-        };
-    }
+    /**
+     * @var array<string, string>
+     */
+    public static array $statusColors = [
+        FirewallRuleStatus::CREATING => 'info',
+        FirewallRuleStatus::UPDATING => 'warning',
+        FirewallRuleStatus::DELETING => 'danger',
+        FirewallRuleStatus::READY => 'success',
+        FirewallRuleStatus::FAILED => 'danger',
+    ];

    /**
     * @return BelongsTo<Server, covariant $this>
--- 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[];
 }

--- a/tests/Feature/FirewallTest.php
+++ b/tests/Feature/FirewallTest.php
@ -5,10 +5,8 @@
 use App\Enums\FirewallRuleStatus;
 use App\Facades\SSH;
 use App\Models\FirewallRule;
-use App\Web\Pages\Servers\Firewall\Index;
-use App\Web\Pages\Servers\Firewall\Widgets\RulesList;
 use Illuminate\Foundation\Testing\RefreshDatabase;
-use Livewire\Livewire;
+use Inertia\Testing\AssertableInertia;
 use Tests\TestCase;

 class FirewallTest extends TestCase
@ -21,18 +19,15 @@ public function test_create_firewall_rule(): void

        $this->actingAs($this->user);

-        Livewire::test(Index::class, [
-            'server' => $this->server,
+        $this->post(route('firewall.store', ['server' => $this->server]), [
+            'name' => 'Test',
+            'type' => 'allow',
+            'protocol' => 'tcp',
+            'port' => '1234',
+            'source' => '0.0.0.0',
+            'mask' => '1',
        ])
-            ->callAction('create', [
-                'name' => 'Test',
-                'type' => 'allow',
-                'protocol' => 'tcp',
-                'port' => '1234',
-                'source' => '0.0.0.0',
-                'mask' => '0',
-            ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();

        $this->assertDatabaseHas('firewall_rules', [
            'port' => '1234',
@ -44,14 +39,13 @@ public function test_see_firewall_rules(): void
    {
        $this->actingAs($this->user);

-        $rule = FirewallRule::factory()->create([
+        FirewallRule::factory()->create([
            'server_id' => $this->server->id,
        ]);

-        $this->get(Index::getUrl(['server' => $this->server]))
+        $this->get(route('firewall', $this->server))
            ->assertSuccessful()
-            ->assertSee($rule->source)
-            ->assertSee($rule->port);
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('firewall/index'));
    }

    public function test_delete_firewall_rule(): void
@ -64,11 +58,10 @@ public function test_delete_firewall_rule(): void
            'server_id' => $this->server->id,
        ]);

-        Livewire::test(RulesList::class, [
+        $this->delete(route('firewall.destroy', [
            'server' => $this->server,
-        ])
-            ->callTableAction('delete', $rule->id)
-            ->assertSuccessful();
+            'firewallRule' => $rule,
+        ]))->assertSessionDoesntHaveErrors();

        $this->assertDatabaseMissing('firewall_rules', [
            'id' => $rule->id,