#591 - sites [wip]

2025-07-03 06:56:15 +00:00 · 2025-05-25 22:17:19 +02:00
parent ff11fb44e0
commit f5fdbae4ac
77 changed files with 2156 additions and 414 deletions
--- a/resources/js/pages/servers/components/header.tsx
+++ b/resources/js/pages/servers/components/header.tsx
@ -1,19 +1,21 @@
 import { Server } from '@/types/server';
-import { CloudIcon, IdCardIcon, LoaderCircleIcon, MapPinIcon, SlashIcon } from 'lucide-react';
+import { CloudIcon, LoaderCircleIcon, MapPinIcon, MousePointerClickIcon, SlashIcon } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import ServerStatus from '@/pages/servers/components/status';
 import ServerActions from '@/pages/servers/components/actions';
 import { cn } from '@/lib/utils';
+import { Site } from '@/types/site';
+import { StatusRipple } from '@/components/status-ripple';
+import { Badge } from '@/components/ui/badge';

-export default function ServerHeader({ server }: { server: Server }) {
+export default function ServerHeader({ server, site }: { server: Server; site?: Site }) {
  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 className="flex items-center space-x-1">
-                <IdCardIcon className="size-4" />
+              <div className="flex items-center space-x-2">
+                <StatusRipple variant={server.status_color} />
                <div className="hidden lg:inline-flex">{server.name}</div>
              </div>
            </TooltipTrigger>
@ -58,16 +60,55 @@ export default function ServerHeader({ server }: { server: Server }) {
                  <div className="flex items-center space-x-1">
                    <LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
                    <div>%{parseInt(server.progress || '0')}</div>
+                    {server.status === 'installation_failed' && (
+                      <Badge className="ml-1" variant={server.status_color}>
+                        {server.status}
+                      </Badge>
+                    )}
                  </div>
                </TooltipTrigger>
-                <TooltipContent side="bottom">Installation Progress</TooltipContent>
+                <TooltipContent side="bottom">Status</TooltipContent>
+              </Tooltip>
+            </>
+          )}
+          {site && (
+            <>
+              <SlashIcon className="size-3" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <a href={site.url} target="_blank" className="flex items-center space-x-1 truncate">
+                    <MousePointerClickIcon className="size-4" />
+                    <div className="hidden max-w-[150px] overflow-x-hidden overflow-ellipsis lg:block">{site.domain}</div>
+                  </a>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <span>{site.domain}</span>
+                </TooltipContent>
+              </Tooltip>
+            </>
+          )}
+          {site && ['installing', 'installation_failed'].includes(site.status) && (
+            <>
+              <SlashIcon className="size-3" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center space-x-1">
+                    <LoaderCircleIcon className={cn('size-4', site.status === 'installing' ? 'animate-spin' : '')} />
+                    <div>%{parseInt(site.progress.toString() || '0')}</div>
+                    {site.status === 'installation_failed' && (
+                      <Badge className="ml-1" variant={site.status_color}>
+                        {site.status}
+                      </Badge>
+                    )}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">Status</TooltipContent>
              </Tooltip>
            </>
          )}
        </div>
      </div>
      <div className="flex items-center space-x-1">
-        <ServerStatus server={server} />
        <ServerActions server={server} />
      </div>
    </div>
--- a/resources/js/pages/servers/components/server-select.tsx
+++ b/resources/js/pages/servers/components/server-select.tsx
@ -0,0 +1,93 @@
+import { Server } from '@/types/server';
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
+import { cn } from '@/lib/utils';
+import axios from 'axios';
+
+export default function ServerSelect({ value, onValueChange }: { value: string; onValueChange: (selectedServer: Server) => void }) {
+  const [query, setQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<string>(value);
+
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  const {
+    data: servers = [],
+    isFetching,
+    refetch,
+  } = useQuery<Server[]>({
+    queryKey: ['servers', query],
+    queryFn: async () => {
+      const response = await axios.get(route('servers.json', { query: query }));
+      return response.data;
+    },
+    enabled: false,
+  });
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (open) {
+      refetch();
+    }
+  };
+
+  useEffect(() => {
+    if (open && query !== '') {
+      const timeoutId = setTimeout(() => {
+        refetch();
+      }, 300); // Debounce search
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [query, open, refetch]);
+
+  const selectedServer = servers.find((server) => server.id === parseInt(selected));
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
+          {selectedServer ? selectedServer.name : 'Select server...'}
+          <ChevronsUpDownIcon className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput placeholder="Search server..." value={query} onValueChange={setQuery} />
+          <CommandList>
+            <CommandEmpty>{isFetching ? 'Searching...' : query === '' ? 'Start typing to search servers' : 'No servers found.'}</CommandEmpty>
+            <CommandGroup>
+              {servers.map((server) => (
+                <CommandItem
+                  key={`server-select-${server.id}`}
+                  value={server.id.toString()}
+                  onSelect={(currentValue) => {
+                    const newSelected = currentValue === selected ? '' : currentValue;
+                    setSelected(newSelected);
+                    setOpen(false);
+                    if (newSelected) {
+                      const server = servers.find((s) => s.id.toString() === newSelected);
+                      if (server) {
+                        onValueChange(server);
+                      }
+                    }
+                  }}
+                  className="truncate"
+                >
+                  {server.name} ({server.ip})
+                  <CheckIcon className={cn('ml-auto', selected && parseInt(selected) === server.id ? 'opacity-100' : 'opacity-0')} />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/resources/js/pages/servers/index.tsx
+++ b/resources/js/pages/servers/index.tsx
@ -1,6 +1,6 @@
 import { Head, usePage } from '@inertiajs/react';

-import { type Configs } from '@/types';
+import { PaginatedData, type Configs } from '@/types';

 import { DataTable } from '@/components/data-table';
 import { columns } from '@/pages/servers/components/columns';
@ -13,16 +13,14 @@ import React from 'react';
 import Layout from '@/layouts/app/layout';
 import { PlusIcon } from 'lucide-react';

-type Response = {
-  servers: {
-    data: Server[];
-  };
+type Page = {
+  servers: PaginatedData<Server>;
  public_key: string;
  configs: Configs;
 };

 export default function Servers() {
-  const page = usePage<Response>();
+  const page = usePage<Page>();
  return (
    <Layout>
      <Head title="Servers" />
@ -39,7 +37,7 @@ export default function Servers() {
            </CreateServer>
          </div>
        </div>
-        <DataTable columns={columns} data={page.props.servers.data} />
+        <DataTable columns={columns} paginatedData={page.props.servers} />
      </Container>
    </Layout>
  );
--- a/resources/js/pages/servers/installing.tsx
+++ b/resources/js/pages/servers/installing.tsx
@ -5,19 +5,18 @@ import { DataTable } from '@/components/data-table';
 import { columns } from '@/pages/server-logs/components/columns';
 import { usePage } from '@inertiajs/react';
 import Heading from '@/components/heading';
+import { PaginatedData } from '@/types';

 export default function InstallingServer() {
  const page = usePage<{
    server: Server;
-    logs: {
-      data: ServerLog[];
-    };
+    logs: PaginatedData<ServerLog>;
  }>();

  return (
    <Container className="max-w-5xl">
      <Heading title="Installing" description="Here you can see the installation logs" />
-      <DataTable columns={columns} data={page.props.logs.data} />{' '}
+      <DataTable columns={columns} paginatedData={page.props.logs} />{' '}
    </Container>
  );
 }
--- a/resources/js/pages/servers/overview.tsx
+++ b/resources/js/pages/servers/overview.tsx
@ -5,19 +5,18 @@ import { columns } from '@/pages/server-logs/components/columns';
 import { usePage } from '@inertiajs/react';
 import Container from '@/components/container';
 import Heading from '@/components/heading';
+import { PaginatedData } from '@/types';

 export default function ServerOverview() {
  const page = usePage<{
    server: Server;
-    logs: {
-      data: ServerLog[];
-    };
+    logs: PaginatedData<ServerLog>;
  }>();

  return (
    <Container className="max-w-5xl">
      <Heading title="Overview" description="Here you can see an overview of your server" />
-      <DataTable columns={columns} data={page.props.logs.data} />
+      <DataTable columns={columns} paginatedData={page.props.logs} />
    </Container>
  );
 }
--- a/resources/js/pages/servers/show.tsx
+++ b/resources/js/pages/servers/show.tsx
@ -23,7 +23,7 @@ type Response = {
 export default function ShowServer() {
  const page = usePage<Response>();
  return (
-    <ServerLayout server={page.props.server}>
+    <ServerLayout>
      <Head title={`Overview - ${page.props.server.name}`} />

      {['installing', 'installation_failed'].includes(page.props.server.status) ? <InstallingServer /> : <ServerOverview />}