#591 - monitoring

resources/css/base.css

@@ -1,4 +1,5 @@
 :root {
+  --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -12,12 +13,11 @@ :root {
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.145 0 0);
+  --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.87 0 0);
+  --ring: oklch(0.708 0 0);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -30,7 +30,7 @@ :root {
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.87 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 
   --brand: oklch(58.5% 0.233 277.117);
   --success: var(--color-lime-500);
@@ -43,9 +43,9 @@ :root {
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
+  --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(51.1% 0.262 276.966);
   --primary-foreground: oklch(0.985 0 0);
@@ -55,11 +55,10 @@ .dark {
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -67,12 +66,12 @@ .dark {
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme {

resources/js/components/ui/alert.tsx

@@ -8,8 +8,8 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground',
-        destructive: 'text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80',
+        default: 'bg-card text-card-foreground',
+        destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
     },
     defaultVariants: {

resources/js/components/ui/calendar.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row gap-2',
+        month: 'flex flex-col gap-4',
+        caption: 'flex justify-center pt-1 relative items-center w-full',
+        caption_label: 'text-sm font-medium',
+        nav: 'flex items-center gap-1',
+        nav_button: cn(buttonVariants({ variant: 'outline' }), 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100'),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-x-1',
+        head_row: 'flex',
+        head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: cn(
+          '[&:has([aria-selected])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md',
+        ),
+        day: cn(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100'),
+        day_range_start: 'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
+        day_range_end: 'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => <ChevronLeft className={cn('size-4', className)} {...props} />,
+        IconRight: ({ className, ...props }) => <ChevronRight className={cn('size-4', className)} {...props} />,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };

resources/js/components/ui/chart.tsx

@@ -0,0 +1,272 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '@/lib/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === 'string' ? config[label as keyof typeof config]?.label || label : itemConfig?.label;
+
+    if (labelFormatter) {
+      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>;
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center',
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                          'h-2.5 w-2.5': indicator === 'dot',
+                          'w-1': indicator === 'line',
+                          'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                          'my-0.5': nestLabel && indicator === 'dashed',
+                        })}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}>
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                    </div>
+                    {item.value && <span className="text-foreground font-mono font-medium tabular-nums">{item.value.toLocaleString()}</span>}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div key={item.value} className={cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3')}>
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string') {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };

resources/js/components/ui/table.tsx

@@ -11,7 +11,7 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
+  return <thead data-slot="table-header" className={cn('bg-card [&_tr]:border-b', className)} {...props} />;
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {

resources/js/layouts/app/layout.tsx

@@ -7,6 +7,7 @@ import { usePage } from '@inertiajs/react';
 import { Toaster } from '@/components/ui/sonner';
 import { toast } from 'sonner';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CheckCircle2Icon, CircleXIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react';
 
 export default function Layout({
   children,
@@ -26,10 +27,38 @@ export default function Layout({
   //   localStorage.setItem('sidebar', String(open));
   // };
 
-  if (page.props.flash && page.props.flash.success) toast.success(page.props.flash.success);
-  if (page.props.flash && page.props.flash.error) toast.error(page.props.flash.error);
-  if (page.props.flash && page.props.flash.info) toast.info(page.props.flash.info);
-  if (page.props.flash && page.props.flash.warning) toast.error(page.props.flash.warning);
+  if (page.props.flash && page.props.flash.success) {
+    toast(
+      <div className="flex items-center gap-2">
+        <CheckCircle2Icon className="text-success size-5" />
+        {page.props.flash.success}
+      </div>,
+    );
+  }
+  if (page.props.flash && page.props.flash.error) {
+    toast(
+      <div className="flex items-center gap-2">
+        <CircleXIcon className="text-destructive size-5" />
+        {page.props.flash.error}
+      </div>,
+    );
+  }
+  if (page.props.flash && page.props.flash.warning) {
+    toast(
+      <div className="flex items-center gap-2">
+        <TriangleAlertIcon className="text-warning size-5" />
+        {page.props.flash.warning}
+      </div>,
+    );
+  }
+  if (page.props.flash && page.props.flash.info) {
+    toast(
+      <div className="flex items-center gap-2">
+        <InfoIcon className="text-info size-5" />
+        {page.props.flash.info}
+      </div>,
+    );
+  }
 
   const queryClient = new QueryClient();
 

resources/js/layouts/server/layout.tsx

@@ -1,6 +1,7 @@
 import { type NavItem } from '@/types';
 import {
   ArrowLeftIcon,
+  ChartPieIcon,
   ClockIcon,
   CloudIcon,
   CloudUploadIcon,
@@ -119,11 +120,12 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
       icon: CogIcon,
       isDisabled: isMenuDisabled,
     },
-    // {
-    //   title: 'Metrics',
-    //   href: '#',
-    //   icon: ChartPieIcon,
-    // },
+    {
+      title: 'Monitoring',
+      href: route('monitoring', { server: page.props.server.id }),
+      icon: ChartPieIcon,
+      isDisabled: isMenuDisabled,
+    },
     // {
     //   title: 'Console',
     //   href: '#',

resources/js/lib/utils.ts

@@ -4,3 +4,30 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+// convert kb to gb
+export function kbToGb(kb: number | string): number {
+  if (typeof kb === 'string') {
+    kb = parseFloat(kb);
+  }
+  return Math.round((kb / 1024 / 1024) * 100) / 100;
+}
+
+// convert mb to gb
+export function mbToGb(mb: number | string): number {
+  if (typeof mb === 'string') {
+    mb = parseFloat(mb);
+  }
+  return Math.round((mb / 1024) * 100) / 100;
+}
+
+export function formatDateString(dateString: string | Date): string {
+  const date = new Date(dateString);
+
+  const year = date.toLocaleString('default', { year: 'numeric' });
+  const month = date.toLocaleString('default', { month: '2-digit' });
+  const day = date.toLocaleString('default', { day: '2-digit' });
+
+  // Generate yyyy-mm-dd date string
+  return year + '-' + month + '-' + day;
+}

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>
   );

resources/js/types/index.d.ts

@@ -67,6 +67,7 @@ export interface Configs {
   cronjob_intervals: {
     [key: string]: string;
   };
+  metrics_periods: string[];
 
   [key: string]: unknown;
 }

resources/js/types/metric.d.ts

@@ -0,0 +1,20 @@
+export interface Metric {
+  date: string;
+  load: number;
+  memory_total: number;
+  memory_used: number;
+  memory_free: number;
+  disk_total: number;
+  disk_used: number;
+  disk_free: number;
+  date_interval: string;
+
+  [key: string]: number | string;
+}
+
+export interface MetricsFilter {
+  period: string;
+  from?: string;
+  to?: string;
+  [key: string]: number | string;
+}