mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-02 06:26:16 +00:00
#591 - monitoring
This commit is contained in:
Saeed Vaziry
148
resources/js/pages/monitoring/components/actions.tsx
Normal file
148
resources/js/pages/monitoring/components/actions.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
100
resources/js/pages/monitoring/components/filter.tsx
Normal file
100
resources/js/pages/monitoring/components/filter.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
88
resources/js/pages/monitoring/components/metrics-cards.tsx
Normal file
88
resources/js/pages/monitoring/components/metrics-cards.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user