#591 - monitoring

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

@@ -0,0 +1,148 @@
+import { Server } from '@/types/server';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, MoreHorizontalIcon } from 'lucide-react';
+import React, { FormEvent, useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm, usePage } from '@inertiajs/react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import FormSuccessful from '@/components/form-successful';
+
+function DataRetention() {
+  const page = usePage<{
+    server: Server;
+    dataRetention: string;
+  }>();
+  const [open, setOpen] = useState(false);
+  const form = useForm({
+    data_retention: page.props.dataRetention || '30',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('monitoring.update', page.props.server.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+      preserveScroll: true,
+      preserveState: true,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Data retention</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Data retention</DialogTitle>
+          <DialogDescription className="sr-only">Data retention</DialogDescription>
+        </DialogHeader>
+        <Form id="data-retention-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="data_retention">Data retention (days)</Label>
+              <Select value={form.data.data_retention} onValueChange={(value) => form.setData('data_retention', value)}>
+                <SelectTrigger id="data_retention">
+                  <SelectValue placeholder="Select a period" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="7">7 Days</SelectItem>
+                    <SelectItem value="14">14 Days</SelectItem>
+                    <SelectItem value="30">30 Days</SelectItem>
+                    <SelectItem value="60">60 Days</SelectItem>
+                    <SelectItem value="90">90 Days</SelectItem>
+                    <SelectItem value="180">180 Days</SelectItem>
+                    <SelectItem value="365">365 Days</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button form="data-retention-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Reset({ server }: { server: Server }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('monitoring.destroy', { server: server.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Reset
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Reset metrics</DialogTitle>
+          <DialogDescription className="sr-only">Reset and delete metrics</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to reset metrics? This will delete all existing monitoring metrics data for server <strong>{server.name}</strong> and
+          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} />
+            Reset
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function Actions({ server }: { server: Server }) {
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontalIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DataRetention />
+        <DropdownMenuSeparator />
+        <Reset server={server} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

resources/js/pages/monitoring/components/filter.tsx

@@ -0,0 +1,100 @@
+import { MetricsFilter } from '@/types/metric';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { CheckIcon, FilterIcon } from 'lucide-react';
+import { useForm, usePage } from '@inertiajs/react';
+import { SharedData } from '@/types';
+import { useState } from 'react';
+import { Calendar } from '@/components/ui/calendar';
+import { DateRange } from 'react-day-picker';
+import { formatDateString } from '@/lib/utils';
+
+export default function Filter({ value, onValueChange }: { value?: MetricsFilter; onValueChange?: (filter: MetricsFilter) => void }) {
+  const page = usePage<SharedData>();
+  const form = useForm<MetricsFilter>(
+    value || {
+      period: '',
+      from: '',
+      to: '',
+    },
+  );
+  const [range, setRange] = useState<DateRange>();
+  const [open, setOpen] = useState(false);
+
+  const setCustomFilter = () => {
+    if (!range || !range.from || !range.to) {
+      return;
+    }
+    form.setData({
+      period: 'custom',
+      from: range.from.toISOString(),
+      to: range.to.toISOString(),
+    });
+    setOpen(false);
+    if (onValueChange) {
+      onValueChange({
+        period: 'custom',
+        from: formatDateString(range.from),
+        to: formatDateString(range.to),
+      });
+    }
+  };
+
+  const handleValueChange = (newValue: MetricsFilter) => {
+    if (newValue.period === 'custom') {
+      return;
+    }
+    form.setData(newValue);
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+    setOpen(false);
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          <span className="sr-only">Open menu</span>
+          {form.data.period ? <FilterIcon className="text-foreground fill-current" /> : <FilterIcon />}
+          <span className="hidden lg:block">Filter</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {page.props.configs.metrics_periods.map((period) => {
+          return period === 'custom' ? (
+            <DropdownMenuSub key={period}>
+              <DropdownMenuSubTrigger inset>
+                {form.data.period === period && <CheckIcon className="absolute left-3 size-4" />}
+                Custom
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent className="p-0">
+                  <Calendar mode="range" selected={range} onSelect={setRange} />
+                  <div className="p-2">
+                    <Button onClick={setCustomFilter} variant="outline" className="w-full" disabled={!range || !range.from || !range.to}>
+                      Filter
+                    </Button>
+                  </div>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          ) : (
+            <DropdownMenuCheckboxItem key={period} onSelect={() => handleValueChange({ period })} checked={form.data.period === period}>
+              {period.charAt(0).toUpperCase() + period.slice(1)}
+            </DropdownMenuCheckboxItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

resources/js/pages/monitoring/components/metrics-cards.tsx

@@ -0,0 +1,88 @@
+import { Server } from '@/types/server';
+import { useQuery } from '@tanstack/react-query';
+import { Metric, MetricsFilter } from '@/types/metric';
+import { ResourceUsageChart } from '@/pages/monitoring/components/resource-usage-chart';
+import { kbToGb, mbToGb } from '@/lib/utils';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function MetricsCards({ server, filter, metric }: { server: Server; filter?: MetricsFilter; metric?: string }) {
+  if (!filter) {
+    filter = {
+      period: '10m',
+    };
+  }
+
+  const query = useQuery<Metric[]>({
+    queryKey: ['metrics', server.id, filter.period, filter.from, filter.to],
+    queryFn: async () => {
+      const response = await fetch(route('monitoring.json', { server: server.id, ...filter }));
+      if (!response.ok) {
+        throw new Error('Failed to fetch metrics');
+      }
+      return response.json();
+    },
+    refetchInterval: 60000,
+    retry: false,
+  });
+
+  return (
+    <div className={metric ? 'grid grid-cols-1 gap-4' : 'grid grid-cols-1 gap-6 lg:grid-cols-3'}>
+      {query.isLoading && (
+        <>
+          {metric ? (
+            <Skeleton className="h-[510px] w-full rounded-xl border shadow-xs" />
+          ) : (
+            <>
+              <Skeleton className="h-[210px] w-full rounded-xl border shadow-xs" />
+              <Skeleton className="h-[210px] w-full rounded-xl border shadow-xs" />
+              <Skeleton className="h-[210px] w-full rounded-xl border shadow-xs" />
+            </>
+          )}
+        </>
+      )}
+      {query.data && (
+        <>
+          {(!metric || metric === 'load') && (
+            <ResourceUsageChart
+              title="CPU Load"
+              label="CPU load"
+              dataKey="load"
+              color="var(--color-chart-1)"
+              chartData={query.data}
+              link={route('monitoring.show', { server: server.id, metric: 'load' })}
+              single={metric !== undefined}
+            />
+          )}
+          {(!metric || metric === 'memory') && (
+            <ResourceUsageChart
+              title="Memory Usage"
+              label="Memory usage"
+              dataKey="memory_used"
+              color="var(--color-chart-2)"
+              chartData={query.data}
+              link={route('monitoring.show', { server: server.id, metric: 'memory' })}
+              formatter={(value) => {
+                return `${kbToGb(value as string)} GB`;
+              }}
+              single={metric !== undefined}
+            />
+          )}
+          {(!metric || metric === 'disk') && (
+            <ResourceUsageChart
+              title="Disk Usage"
+              label="Disk usage"
+              dataKey="disk_used"
+              color="var(--color-chart-3)"
+              chartData={query.data}
+              link={route('monitoring.show', { server: server.id, metric: 'disk' })}
+              formatter={(value) => {
+                return `${mbToGb(value as string)} GB`;
+              }}
+              single={metric !== undefined}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+}

resources/js/pages/monitoring/components/resource-usage-chart.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { Area, AreaChart, XAxis, YAxis } from 'recharts';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
+import { Metric } from '@/types/metric';
+import { Button } from '@/components/ui/button';
+import { router } from '@inertiajs/react';
+import { cn } from '@/lib/utils';
+
+interface Props {
+  title: string;
+  color: string;
+  dataKey: 'load' | 'memory_used' | 'disk_used';
+  label: string;
+  chartData: Metric[];
+  link: string;
+  formatter?: (value: unknown, name: unknown) => string | number;
+  single?: boolean;
+}
+
+export function ResourceUsageChart({ title, color, dataKey, label, chartData, link, formatter, single }: Props) {
+  const chartConfig = {
+    [dataKey]: {
+      label: label,
+      color: color,
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="overflow-hidden p-0">
+        <div className="flex items-start justify-between p-4">
+          <div className="space-y-2 py-[7px]">
+            <h2 className="text-muted-foreground text-sm">{title}</h2>
+            <span className="text-3xl font-bold">
+              {chartData.length > 0
+                ? formatter
+                  ? formatter(chartData[chartData.length - 1][dataKey], dataKey)
+                  : chartData[chartData.length - 1][dataKey].toLocaleString()
+                : 'N/A'}
+            </span>
+          </div>
+          {!single && (
+            <Button variant="ghost" onClick={() => router.visit(link)}>
+              View
+            </Button>
+          )}
+        </div>
+        <ChartContainer config={chartConfig} className={cn('aspect-auto w-full overflow-hidden rounded-b-xl', single ? 'h-[400px]' : 'h-[100px]')}>
+          <AreaChart accessibilityLayer data={chartData} margin={{ left: 0, right: 0, top: 0, bottom: 0 }}>
+            <defs>
+              <linearGradient id={`fill-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={color} stopOpacity={0.8} />
+                <stop offset="95%" stopColor={color} stopOpacity={0.1} />
+              </linearGradient>
+            </defs>
+            <YAxis dataKey={dataKey} hide />
+            <XAxis
+              hide={!single}
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleDateString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  month: 'short',
+                  day: 'numeric',
+                });
+              }}
+            />
+            <ChartTooltip
+              cursor={true}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString('en-US', {
+                      hour: '2-digit',
+                      minute: '2-digit',
+                      month: 'short',
+                      day: 'numeric',
+                    });
+                  }}
+                  formatter={formatter}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area dataKey={dataKey} type="monotone" fill={`url(#fill-${dataKey})`} stroke={color} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

resources/js/pages/monitoring/index.tsx

@@ -0,0 +1,108 @@
+import { Head, Link, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import ServerLayout from '@/layouts/server/layout';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { BookOpenIcon, TriangleAlertIcon } from 'lucide-react';
+import Container from '@/components/container';
+import MetricsCards from '@/pages/monitoring/components/metrics-cards';
+import Filter from '@/pages/monitoring/components/filter';
+import { useState } from 'react';
+import { Metric, MetricsFilter } from '@/types/metric';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { kbToGb, mbToGb } from '@/lib/utils';
+import Actions from '@/pages/monitoring/components/actions';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+export default function Monitoring() {
+  const page = usePage<{
+    server: Server;
+    lastMetric?: Metric;
+    hasMonitoringService: boolean;
+  }>();
+
+  const [filter, setFilter] = useState<MetricsFilter>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Monitoring - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Monitoring" description="Here you can see your server's metrics" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/servers/monitoring" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <Filter onValueChange={setFilter} />
+            <Actions server={page.props.server} />
+          </div>
+        </HeaderContainer>
+
+        {!page.props.hasMonitoringService && (
+          <Alert variant="destructive">
+            <TriangleAlertIcon />
+            <AlertDescription>
+              <p>
+                To monitor your server, you need to first install a{' '}
+                <Link href={route('services', { server: page.props.server })} className="font-bold underline">
+                  monitoring service
+                </Link>
+                .
+              </p>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <MetricsCards server={page.props.server} filter={filter} />
+
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Memory details</CardTitle>
+              <CardDescription className="sr-only">Memory details</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between border-b p-4">
+                <span>{page.props.lastMetric ? kbToGb(page.props.lastMetric.memory_used) + ' GB' : 'N/A'}</span>
+                <span>Used</span>
+              </div>
+              <div className="flex items-center justify-between border-b p-4">
+                <span>{page.props.lastMetric ? kbToGb(page.props.lastMetric.memory_free) + ' GB' : 'N/A'}</span>
+                <span>Free</span>
+              </div>
+              <div className="flex items-center justify-between p-4">
+                <span>{page.props.lastMetric ? kbToGb(page.props.lastMetric.memory_total) + ' GB' : 'N/A'}</span>
+                <span>Total</span>
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Disk details</CardTitle>
+              <CardDescription className="sr-only">Disk details</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between border-b p-4">
+                <span>{page.props.lastMetric ? mbToGb(page.props.lastMetric.disk_used) + ' GB' : 'N/A'}</span>
+                <span>Used</span>
+              </div>
+              <div className="flex items-center justify-between border-b p-4">
+                <span>{page.props.lastMetric ? mbToGb(page.props.lastMetric.disk_free) + ' GB' : 'N/A'}</span>
+                <span>Free</span>
+              </div>
+              <div className="flex items-center justify-between p-4">
+                <span>{page.props.lastMetric ? mbToGb(page.props.lastMetric.disk_total) + ' GB' : 'N/A'}</span>
+                <span>Total</span>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/monitoring/show.tsx

@@ -0,0 +1,47 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import ServerLayout from '@/layouts/server/layout';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { BookOpenIcon } from 'lucide-react';
+import Container from '@/components/container';
+import Filter from '@/pages/monitoring/components/filter';
+import { useState } from 'react';
+import { MetricsFilter } from '@/types/metric';
+import MetricsCards from '@/pages/monitoring/components/metrics-cards';
+
+export default function Show() {
+  const page = usePage<{
+    server: Server;
+    metric: string;
+  }>();
+
+  const [filter, setFilter] = useState<MetricsFilter>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Monitoring - ${page.props.metric} - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading
+            title={page.props.metric.charAt(0).toUpperCase() + page.props.metric.slice(1)}
+            description={`You're viewing ${page.props.metric}'s metrics`}
+          />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/servers/monitoring" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <Filter onValueChange={setFilter} />
+          </div>
+        </HeaderContainer>
+
+        <MetricsCards server={page.props.server} filter={filter} metric={page.props.metric} />
+      </Container>
+    </ServerLayout>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { Server } from '@/types/server';
-import { ClipboardCheckIcon, CloudIcon, LoaderCircleIcon, MapPinIcon, MousePointerClickIcon, SlashIcon } from 'lucide-react';
+import { CheckIcon, CloudIcon, LoaderCircleIcon, MousePointerClickIcon, SlashIcon } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import ServerActions from '@/pages/servers/components/actions';
 import { cn } from '@/lib/utils';
@@ -34,29 +34,6 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
     <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">
-                <div className="hidden lg:inline-flex">{server.name}</div>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">
-              <span className="lg:hidden">{server.name}</span>
-              <span className="hidden lg:inline-flex">Server Name</span>
-            </TooltipContent>
-          </Tooltip>
-          <SlashIcon className="size-3" />
           <Tooltip>
             <TooltipTrigger asChild>
               <div className="flex items-center space-x-1">
@@ -74,16 +51,27 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
           <SlashIcon className="size-3" />
           <Tooltip>
             <TooltipTrigger asChild>
-              <div className="flex items-center space-x-1">
-                {ipCopied ? <ClipboardCheckIcon className="text-success size-4" /> : <MapPinIcon className="size-4" />}
-                <div className="hidden cursor-pointer lg:inline-flex" onClick={() => copyIp(server.ip)}>
-                  {server.ip}
+              {ipCopied ? (
+                <CheckIcon className="text-success size-3" />
+              ) : (
+                <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="bottom">
+              <span>{server.status}</span>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="cursor-pointer lg:inline-flex" onClick={() => copyIp(server.ip)}>
+                {server.ip}
               </div>
             </TooltipTrigger>
             <TooltipContent side="bottom">
-              <span className="lg:hidden">{server.ip}</span>
-              <span className="hidden lg:inline-flex">Server IP</span>
+              <span>Server IP</span>
             </TooltipContent>
           </Tooltip>
           {['installing', 'installation_failed'].includes(server.status) && (

resources/js/pages/servers/overview.tsx

@@ -6,6 +6,7 @@ import { usePage } from '@inertiajs/react';
 import Container from '@/components/container';
 import Heading from '@/components/heading';
 import { PaginatedData } from '@/types';
+import MetricsCards from '@/pages/monitoring/components/metrics-cards';
 
 export default function ServerOverview() {
   const page = usePage<{
@@ -16,6 +17,7 @@ export default function ServerOverview() {
   return (
     <Container className="max-w-5xl">
       <Heading title="Overview" description="Here you can see an overview of your server" />
+      <MetricsCards server={page.props.server} />
       <DataTable columns={columns} paginatedData={page.props.logs} />
     </Container>
   );