mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-17 15:36:50 +00:00
Server History Page
This commit is contained in:
headlessdev
parent
4381f20146
commit
4e58dc5a0b
@ -1,23 +1,102 @@
|
||||
import { NextResponse, NextRequest } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Prisma } from "@prisma/client";
|
||||
|
||||
interface GetRequest {
|
||||
page?: number;
|
||||
ITEMS_PER_PAGE?: number;
|
||||
timeRange?: '1h' | '7d' | '30d';
|
||||
serverId?: number;
|
||||
}
|
||||
|
||||
const getTimeRange = (timeRange: '1h' | '7d' | '30d' = '1h') => {
|
||||
const now = new Date();
|
||||
switch (timeRange) {
|
||||
case '7d':
|
||||
return {
|
||||
start: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
|
||||
end: now,
|
||||
intervalMinutes: 60 // 1 hour intervals
|
||||
};
|
||||
case '30d':
|
||||
return {
|
||||
start: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000),
|
||||
end: now,
|
||||
intervalMinutes: 240 // 4 hour intervals
|
||||
};
|
||||
case '1h':
|
||||
default:
|
||||
return {
|
||||
start: new Date(now.getTime() - 60 * 60 * 1000),
|
||||
end: now,
|
||||
intervalMinutes: 1 // 1 minute intervals
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getIntervals = (timeRange: '1h' | '7d' | '30d' = '1h') => {
|
||||
const { start, end, intervalMinutes } = getTimeRange(timeRange);
|
||||
|
||||
let intervalCount: number;
|
||||
switch (timeRange) {
|
||||
case '7d':
|
||||
intervalCount = 168; // 7 days * 24 hours
|
||||
break;
|
||||
case '30d':
|
||||
intervalCount = 180; // 30 days * 6 (4-hour intervals)
|
||||
break;
|
||||
case '1h':
|
||||
default:
|
||||
intervalCount = 60;
|
||||
break;
|
||||
}
|
||||
|
||||
// Calculate the total time span in minutes
|
||||
const totalMinutes = Math.floor((end.getTime() - start.getTime()) / (1000 * 60));
|
||||
|
||||
// Create equally spaced intervals
|
||||
return Array.from({ length: intervalCount }, (_, i) => {
|
||||
const minutesFromEnd = Math.floor(i * (totalMinutes / (intervalCount - 1)));
|
||||
const d = new Date(end.getTime() - minutesFromEnd * 60 * 1000);
|
||||
return d;
|
||||
}).reverse(); // Return in chronological order
|
||||
};
|
||||
|
||||
const parseUsageValue = (value: string | null): number => {
|
||||
if (!value) return 0;
|
||||
return parseFloat(value.replace('%', ''));
|
||||
};
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body: GetRequest = await request.json();
|
||||
const page = Math.max(1, body.page || 1);
|
||||
const ITEMS_PER_PAGE = body.ITEMS_PER_PAGE || 4;
|
||||
const timeRange = body.timeRange || '1h';
|
||||
const serverId = body.serverId;
|
||||
|
||||
const hosts = await prisma.server.findMany({
|
||||
where: { hostServer: 0 },
|
||||
// If serverId is provided, only fetch that specific server
|
||||
const hostsQuery = serverId
|
||||
? { id: serverId }
|
||||
: { hostServer: 0 };
|
||||
|
||||
let hosts;
|
||||
if (!serverId) {
|
||||
hosts = await prisma.server.findMany({
|
||||
where: hostsQuery,
|
||||
orderBy: { name: 'asc' as Prisma.SortOrder },
|
||||
skip: (page - 1) * ITEMS_PER_PAGE,
|
||||
take: ITEMS_PER_PAGE,
|
||||
orderBy: { name: 'asc' }
|
||||
});
|
||||
} else {
|
||||
hosts = await prisma.server.findMany({
|
||||
where: hostsQuery,
|
||||
orderBy: { name: 'asc' as Prisma.SortOrder },
|
||||
});
|
||||
}
|
||||
|
||||
const { start } = getTimeRange(timeRange);
|
||||
const intervals = getIntervals(timeRange);
|
||||
|
||||
const hostsWithVms = await Promise.all(
|
||||
hosts.map(async (host) => {
|
||||
@ -26,6 +105,87 @@ export async function POST(request: NextRequest) {
|
||||
orderBy: { name: 'asc' }
|
||||
});
|
||||
|
||||
// Get server history for the host
|
||||
const serverHistory = await prisma.server_history.findMany({
|
||||
where: {
|
||||
serverId: host.id,
|
||||
createdAt: {
|
||||
gte: start
|
||||
}
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'asc'
|
||||
}
|
||||
});
|
||||
|
||||
// Process history data into intervals
|
||||
const historyMap = new Map<string, {
|
||||
cpu: number[],
|
||||
ram: number[],
|
||||
disk: number[],
|
||||
online: boolean[]
|
||||
}>();
|
||||
|
||||
// Initialize intervals
|
||||
intervals.forEach(date => {
|
||||
const key = date.toISOString();
|
||||
historyMap.set(key, {
|
||||
cpu: [],
|
||||
ram: [],
|
||||
disk: [],
|
||||
online: []
|
||||
});
|
||||
});
|
||||
|
||||
// Group data by interval
|
||||
serverHistory.forEach(record => {
|
||||
const recordDate = new Date(record.createdAt);
|
||||
let nearestInterval: Date = intervals[0];
|
||||
let minDiff = Infinity;
|
||||
|
||||
// Find the nearest interval for this record
|
||||
intervals.forEach(intervalDate => {
|
||||
const diff = Math.abs(recordDate.getTime() - intervalDate.getTime());
|
||||
if (diff < minDiff) {
|
||||
minDiff = diff;
|
||||
nearestInterval = intervalDate;
|
||||
}
|
||||
});
|
||||
|
||||
const key = nearestInterval.toISOString();
|
||||
const interval = historyMap.get(key);
|
||||
if (interval) {
|
||||
interval.cpu.push(parseUsageValue(record.cpuUsage));
|
||||
interval.ram.push(parseUsageValue(record.ramUsage));
|
||||
interval.disk.push(parseUsageValue(record.diskUsage));
|
||||
interval.online.push(record.online);
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate averages for each interval
|
||||
const historyData = intervals.map(date => {
|
||||
const key = date.toISOString();
|
||||
const data = historyMap.get(key) || {
|
||||
cpu: [],
|
||||
ram: [],
|
||||
disk: [],
|
||||
online: []
|
||||
};
|
||||
|
||||
const average = (arr: number[]) =>
|
||||
arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : null;
|
||||
|
||||
return {
|
||||
timestamp: key,
|
||||
cpu: average(data.cpu),
|
||||
ram: average(data.ram),
|
||||
disk: average(data.disk),
|
||||
online: data.online.length ?
|
||||
data.online.filter(Boolean).length / data.online.length >= 0.5
|
||||
: null
|
||||
};
|
||||
});
|
||||
|
||||
// Add isVM flag to VMs
|
||||
const vmsWithFlag = vms.map(vm => ({
|
||||
...vm,
|
||||
@ -35,17 +195,41 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
return {
|
||||
...host,
|
||||
isVM: false, // Mark as physical server/not a VM
|
||||
hostedVMs: vmsWithFlag
|
||||
isVM: false,
|
||||
hostedVMs: vmsWithFlag,
|
||||
history: {
|
||||
labels: intervals.map(d => d.toISOString()),
|
||||
datasets: {
|
||||
cpu: intervals.map(d => {
|
||||
const data = historyMap.get(d.toISOString())?.cpu || [];
|
||||
return data.length ? data.reduce((a, b) => a + b) / data.length : null;
|
||||
}),
|
||||
ram: intervals.map(d => {
|
||||
const data = historyMap.get(d.toISOString())?.ram || [];
|
||||
return data.length ? data.reduce((a, b) => a + b) / data.length : null;
|
||||
}),
|
||||
disk: intervals.map(d => {
|
||||
const data = historyMap.get(d.toISOString())?.disk || [];
|
||||
return data.length ? data.reduce((a, b) => a + b) / data.length : null;
|
||||
}),
|
||||
online: intervals.map(d => {
|
||||
const data = historyMap.get(d.toISOString())?.online || [];
|
||||
return data.length ? data.filter(Boolean).length / data.length >= 0.5 : null;
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Only calculate maxPage when not requesting a specific server
|
||||
let maxPage = 1;
|
||||
if (!serverId) {
|
||||
const totalHosts = await prisma.server.count({
|
||||
where: { OR: [{ hostServer: 0 }, { hostServer: null }] }
|
||||
});
|
||||
|
||||
const maxPage = Math.ceil(totalHosts / ITEMS_PER_PAGE);
|
||||
maxPage = Math.ceil(totalHosts / ITEMS_PER_PAGE);
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
servers: hostsWithVms,
|
||||
|
||||
@ -13,7 +13,7 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Plus,
|
||||
Link,
|
||||
Link as LinkIcon,
|
||||
MonitorIcon as MonitorCog,
|
||||
FileDigit,
|
||||
Trash2,
|
||||
@ -26,6 +26,7 @@ import {
|
||||
HardDrive,
|
||||
LucideServer,
|
||||
Copy,
|
||||
History,
|
||||
} from "lucide-react"
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import {
|
||||
@ -52,34 +53,49 @@ import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import Cookies from "js-cookie"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import axios from "axios"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { DynamicIcon } from "lucide-react/dynamic"
|
||||
import { StatusIndicator } from "@/components/status-indicator"
|
||||
import Chart from 'chart.js/auto'
|
||||
import NextLink from "next/link"
|
||||
|
||||
interface ServerHistory {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
cpu: number[];
|
||||
ram: number[];
|
||||
disk: number[];
|
||||
online: boolean[];
|
||||
}
|
||||
}
|
||||
|
||||
interface Server {
|
||||
id: number
|
||||
name: string
|
||||
icon: string
|
||||
host: boolean
|
||||
hostServer: number | null
|
||||
os?: string
|
||||
ip?: string
|
||||
url?: string
|
||||
cpu?: string
|
||||
gpu?: string
|
||||
ram?: string
|
||||
disk?: string
|
||||
hostedVMs?: Server[]
|
||||
isVM?: boolean
|
||||
monitoring?: boolean
|
||||
monitoringURL?: string
|
||||
online?: boolean
|
||||
cpuUsage?: number
|
||||
ramUsage?: number
|
||||
diskUsage?: number
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
host: boolean;
|
||||
hostServer: number | null;
|
||||
os?: string;
|
||||
ip?: string;
|
||||
url?: string;
|
||||
cpu?: string;
|
||||
gpu?: string;
|
||||
ram?: string;
|
||||
disk?: string;
|
||||
hostedVMs?: Server[];
|
||||
isVM?: boolean;
|
||||
monitoring?: boolean;
|
||||
monitoringURL?: string;
|
||||
online?: boolean;
|
||||
cpuUsage: number;
|
||||
ramUsage: number;
|
||||
diskUsage: number;
|
||||
history?: ServerHistory;
|
||||
port: number;
|
||||
}
|
||||
|
||||
interface GetServersResponse {
|
||||
@ -209,6 +225,7 @@ export default function Dashboard() {
|
||||
console.log("ID:" + server.id)
|
||||
}
|
||||
setServers(response.data.servers)
|
||||
console.log(response.data.servers)
|
||||
setMaxPage(response.data.maxPage)
|
||||
setLoading(false)
|
||||
} catch (error: any) {
|
||||
@ -822,7 +839,8 @@ export default function Dashboard() {
|
||||
<div className={isGridLayout ? "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4" : "space-y-4"}>
|
||||
{servers
|
||||
.filter((server) => (searchTerm ? true : server.hostServer === 0))
|
||||
.map((server) => (
|
||||
.map((server) => {
|
||||
return (
|
||||
<Card
|
||||
key={server.id}
|
||||
className={`${isGridLayout ? "h-full flex flex-col justify-between" : "w-full mb-4"} hover:shadow-md transition-all duration-200 max-w-full relative`}
|
||||
@ -839,9 +857,11 @@ export default function Dashboard() {
|
||||
<CardTitle className="text-2xl font-bold flex items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{server.icon && <DynamicIcon name={server.icon as any} size={24} />}
|
||||
<NextLink href={`/dashboard/servers/${server.id}`} className="hover:underline">
|
||||
<span className="font-bold">
|
||||
{server.icon && "･"} {server.name}
|
||||
</span>
|
||||
</NextLink>
|
||||
</div>
|
||||
{server.isVM && (
|
||||
<span className="bg-blue-500 text-white text-xs px-2 py-1 rounded">VM</span>
|
||||
@ -915,7 +935,7 @@ export default function Dashboard() {
|
||||
|
||||
<div className="col-span-full">
|
||||
<h4 className="text-sm font-semibold mb-3">Resource Usage</h4>
|
||||
<div className={`${!isGridLayout ? "grid grid-cols-3 gap-4" : "space-y-3"}`}>
|
||||
<div className={`${!isGridLayout ? "grid grid-cols-[1fr_1fr_1fr_auto] gap-4" : "space-y-3"}`}>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
@ -970,776 +990,19 @@ export default function Dashboard() {
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/6" />
|
||||
<div className="flex flex-col items-end justify-start space-y-2 w-1/6">
|
||||
<div className="flex items-center justify-end gap-2 w-full">
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<div className="flex gap-2">
|
||||
{server.url && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
onClick={() => window.open(server.url, "_blank")}
|
||||
>
|
||||
<Link className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="h-9 w-9"
|
||||
onClick={() => deleteApplication(server.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button size="icon" className="h-9 w-9" onClick={() => openEditDialog(server)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Edit Server</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
<Tabs defaultValue="general" className="w-full">
|
||||
<TabsList className="w-full">
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="hardware">Hardware</TabsTrigger>
|
||||
<TabsTrigger value="virtualization">Virtualization</TabsTrigger>
|
||||
{(!editHostServer || editHostServer === 0) && <TabsTrigger value="monitoring">Monitoring</TabsTrigger>}
|
||||
</TabsList>
|
||||
<TabsContent value="general">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="grid w-[calc(100%-52px)] items-center gap-1.5">
|
||||
<Label htmlFor="icon">Icon</Label>
|
||||
<div className="space-y-2">
|
||||
<Select
|
||||
value={editIcon}
|
||||
onValueChange={(value) => setEditIcon(value)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select an icon">
|
||||
{editIcon && (
|
||||
<div className="flex items-center gap-2">
|
||||
<DynamicIcon
|
||||
name={editIcon as any}
|
||||
size={18}
|
||||
/>
|
||||
<span>{editIcon}</span>
|
||||
</div>
|
||||
)}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-[300px]">
|
||||
<Input
|
||||
placeholder="Search icons..."
|
||||
className="mb-2"
|
||||
onChange={(e) => {
|
||||
const iconElements =
|
||||
document.querySelectorAll("[data-edit-icon-item]")
|
||||
const searchTerm = e.target.value.toLowerCase()
|
||||
|
||||
iconElements.forEach((el) => {
|
||||
const iconName =
|
||||
el.getAttribute("data-icon-name")?.toLowerCase() || ""
|
||||
if (iconName.includes(searchTerm)) {
|
||||
;(el as HTMLElement).style.display = "flex"
|
||||
} else {
|
||||
;(el as HTMLElement).style.display = "none"
|
||||
}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{Object.entries(iconCategories).map(
|
||||
([category, categoryIcons]) => (
|
||||
<div key={category} className="mb-2">
|
||||
<div className="px-2 text-xs font-bold text-muted-foreground mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{categoryIcons.map((iconName) => (
|
||||
<SelectItem
|
||||
key={iconName}
|
||||
value={iconName}
|
||||
data-edit-icon-item
|
||||
data-icon-name={iconName}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<DynamicIcon
|
||||
name={iconName as any}
|
||||
size={18}
|
||||
/>
|
||||
<span>{iconName}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid w-[52px] items-center gap-1.5">
|
||||
<Label htmlFor="icon">Preview</Label>
|
||||
<div className="flex items-center justify-center">
|
||||
{editIcon && (
|
||||
<DynamicIcon name={editIcon as any} size={36} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editName">Name</Label>
|
||||
<Input
|
||||
id="editName"
|
||||
type="text"
|
||||
placeholder="e.g. Server1"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editOs">Operating System</Label>
|
||||
<Select value={editOs} onValueChange={setEditOs}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select OS" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Windows">Windows</SelectItem>
|
||||
<SelectItem value="Linux">Linux</SelectItem>
|
||||
<SelectItem value="MacOS">MacOS</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editIp">IP Adress</Label>
|
||||
<Input
|
||||
id="editIp"
|
||||
type="text"
|
||||
placeholder="e.g. 192.168.100.2"
|
||||
value={editIp}
|
||||
onChange={(e) => setEditIp(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editUrl">Management URL</Label>
|
||||
<Input
|
||||
id="editUrl"
|
||||
type="text"
|
||||
placeholder="e.g. https://proxmox.server1.com"
|
||||
value={editUrl}
|
||||
onChange={(e) => setEditUrl(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="hardware">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editCpu">CPU</Label>
|
||||
<Input
|
||||
id="editCpu"
|
||||
value={editCpu}
|
||||
onChange={(e) => setEditCpu(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editGpu">GPU</Label>
|
||||
<Input
|
||||
id="editGpu"
|
||||
value={editGpu}
|
||||
onChange={(e) => setEditGpu(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editRam">RAM</Label>
|
||||
<Input
|
||||
id="editRam"
|
||||
value={editRam}
|
||||
onChange={(e) => setEditRam(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editDisk">Disk</Label>
|
||||
<Input
|
||||
id="editDisk"
|
||||
value={editDisk}
|
||||
onChange={(e) => setEditDisk(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="virtualization">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="editHostCheckbox"
|
||||
checked={editHost}
|
||||
onCheckedChange={(checked) => setEditHost(checked === true)}
|
||||
disabled={server.hostedVMs && server.hostedVMs.length > 0}
|
||||
/>
|
||||
<Label htmlFor="editHostCheckbox">
|
||||
Mark as host server
|
||||
{server.hostedVMs && server.hostedVMs.length > 0 && (
|
||||
<span className="text-muted-foreground text-sm ml-2">
|
||||
(Cannot be disabled while hosting VMs)
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
</div>
|
||||
{!editHost && (
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label>Host Server</Label>
|
||||
<Select
|
||||
value={editHostServer?.toString()}
|
||||
onValueChange={(value) => {
|
||||
const newHostServer = Number(value);
|
||||
setEditHostServer(newHostServer);
|
||||
if (newHostServer !== 0) {
|
||||
setEditMonitoring(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a host server" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0">No host server</SelectItem>
|
||||
{hostServers
|
||||
.filter((server) => server.id !== editId)
|
||||
.map((server) => (
|
||||
<SelectItem key={server.id} value={server.id.toString()}>
|
||||
{server.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="monitoring">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="editMonitoringCheckbox"
|
||||
checked={editMonitoring}
|
||||
onCheckedChange={(checked) => setEditMonitoring(checked === true)}
|
||||
/>
|
||||
<Label htmlFor="editMonitoringCheckbox">Enable monitoring</Label>
|
||||
</div>
|
||||
{editMonitoring && (
|
||||
<>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editMonitoringURL">Monitoring URL</Label>
|
||||
<Input
|
||||
id="editMonitoringURL"
|
||||
type="text"
|
||||
placeholder={`http://${editIp}:61208`}
|
||||
value={editMonitoringURL}
|
||||
onChange={(e) => setEditMonitoringURL(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 p-4 border rounded-lg bg-muted">
|
||||
<h4 className="text-sm font-semibold mb-2">Required Server Setup</h4>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
To enable monitoring, you need to install Glances on your server. Here's an example Docker Compose configuration:
|
||||
</p>
|
||||
<pre className="bg-background p-4 rounded-md text-sm">
|
||||
<code>{`services:
|
||||
glances:
|
||||
image: nicolargo/glances:latest
|
||||
container_name: glances
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "61208:61208"
|
||||
pid: "host"
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
||||
environment:
|
||||
- GLANCES_OPT=-w --disable-webui`}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<Button onClick={edit}>Save</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
|
||||
{server.hostedVMs && server.hostedVMs.length > 0 && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline" className="h-9 flex items-center gap-2 px-3 w-full">
|
||||
<LucideServer className="h-4 w-4" />
|
||||
<span>VMs</span>
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Hosted VMs</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{server.host && (
|
||||
<div className="mt-4">
|
||||
<ScrollArea className="h-[500px] w-full pr-3">
|
||||
<div className="space-y-2 mt-2">
|
||||
{server.hostedVMs?.map((hostedVM) => (
|
||||
<div
|
||||
key={hostedVM.id}
|
||||
className="flex flex-col gap-2 border border-muted py-2 px-4 rounded-md"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{hostedVM.icon && (
|
||||
<DynamicIcon
|
||||
name={hostedVM.icon as any}
|
||||
size={24}
|
||||
/>
|
||||
)}
|
||||
<div className="text-base font-extrabold">
|
||||
{hostedVM.icon && "･ "}
|
||||
{hostedVM.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/80">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
onClick={() => window.open(hostedVM.url, "_blank")}
|
||||
>
|
||||
<Link className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="h-9 w-9"
|
||||
onClick={() => deleteApplication(hostedVM.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openEditDialog(hostedVM)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Edit VM</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
<Tabs defaultValue="general" className="w-full">
|
||||
<TabsList className="w-full">
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="hardware">Hardware</TabsTrigger>
|
||||
<TabsTrigger value="virtualization">
|
||||
Virtualization
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="general">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="grid w-[calc(100%-52px)] items-center gap-1.5">
|
||||
<Label htmlFor="editIcon">Icon</Label>
|
||||
<div className="space-y-2">
|
||||
<Select
|
||||
value={editIcon}
|
||||
onValueChange={(value) =>
|
||||
setEditIcon(value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select an icon">
|
||||
{editIcon && (
|
||||
<div className="flex items-center gap-2">
|
||||
<DynamicIcon
|
||||
name={editIcon as any}
|
||||
size={18}
|
||||
/>
|
||||
<span>{editIcon}</span>
|
||||
</div>
|
||||
)}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-[300px]">
|
||||
<Input
|
||||
placeholder="Search icons..."
|
||||
className="mb-2"
|
||||
onChange={(e) => {
|
||||
const iconElements =
|
||||
document.querySelectorAll(
|
||||
"[data-vm-edit-icon-item]",
|
||||
)
|
||||
const searchTerm =
|
||||
e.target.value.toLowerCase()
|
||||
|
||||
iconElements.forEach((el) => {
|
||||
const iconName =
|
||||
el
|
||||
.getAttribute(
|
||||
"data-icon-name",
|
||||
)
|
||||
?.toLowerCase() || ""
|
||||
if (
|
||||
iconName.includes(searchTerm)
|
||||
) {
|
||||
;(
|
||||
el as HTMLElement
|
||||
).style.display = "flex"
|
||||
} else {
|
||||
;(
|
||||
el as HTMLElement
|
||||
).style.display = "none"
|
||||
}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{Object.entries(iconCategories).map(
|
||||
([category, categoryIcons]) => (
|
||||
<div
|
||||
key={category}
|
||||
className="mb-2"
|
||||
>
|
||||
<div className="px-2 text-xs font-bold text-muted-foreground mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{categoryIcons.map((iconName) => (
|
||||
<SelectItem
|
||||
key={iconName}
|
||||
value={iconName}
|
||||
data-vm-edit-icon-item
|
||||
data-icon-name={iconName}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<DynamicIcon
|
||||
name={iconName as any}
|
||||
size={18}
|
||||
/>
|
||||
<span>{iconName}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid w-[52px] items-center gap-1.5">
|
||||
<Label htmlFor="editIcon">Preview</Label>
|
||||
<div className="flex items-center justify-center">
|
||||
{editIcon && (
|
||||
<DynamicIcon
|
||||
name={editIcon as any}
|
||||
size={36}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editName">Name</Label>
|
||||
<Input
|
||||
id="editName"
|
||||
type="text"
|
||||
placeholder="e.g. Server1"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editOs">Operating System</Label>
|
||||
<Select
|
||||
value={editOs}
|
||||
onValueChange={setEditOs}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select OS" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Windows">
|
||||
Windows
|
||||
</SelectItem>
|
||||
<SelectItem value="Linux">Linux</SelectItem>
|
||||
<SelectItem value="MacOS">MacOS</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editIp">IP Adress</Label>
|
||||
<Input
|
||||
id="editIp"
|
||||
type="text"
|
||||
placeholder="e.g. 192.168.100.2"
|
||||
value={editIp}
|
||||
onChange={(e) => setEditIp(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editUrl">Management URL</Label>
|
||||
<Input
|
||||
id="editUrl"
|
||||
type="text"
|
||||
placeholder="e.g. https://proxmox.server1.com"
|
||||
value={editUrl}
|
||||
onChange={(e) => setEditUrl(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="hardware">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editCpu">CPU</Label>
|
||||
<Input
|
||||
id="editCpu"
|
||||
value={editCpu}
|
||||
onChange={(e) => setEditCpu(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editGpu">GPU</Label>
|
||||
<Input
|
||||
id="editGpu"
|
||||
value={editGpu}
|
||||
onChange={(e) => setEditGpu(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editRam">RAM</Label>
|
||||
<Input
|
||||
id="editRam"
|
||||
value={editRam}
|
||||
onChange={(e) => setEditRam(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editDisk">Disk</Label>
|
||||
<Input
|
||||
id="editDisk"
|
||||
value={editDisk}
|
||||
onChange={(e) => setEditDisk(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="virtualization">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="editHostCheckbox"
|
||||
checked={editHost}
|
||||
onCheckedChange={(checked) =>
|
||||
setEditHost(checked === true)
|
||||
}
|
||||
disabled={
|
||||
server.hostedVMs &&
|
||||
server.hostedVMs.length > 0
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="editHostCheckbox">
|
||||
Mark as host server
|
||||
{server.hostedVMs &&
|
||||
server.hostedVMs.length > 0 && (
|
||||
<span className="text-muted-foreground text-sm ml-2">
|
||||
(Cannot be disabled while hosting VMs)
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
</div>
|
||||
{!editHost && (
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label>Host Server</Label>
|
||||
<Select
|
||||
value={editHostServer?.toString()}
|
||||
onValueChange={(value) => {
|
||||
const newHostServer = Number(value);
|
||||
setEditHostServer(newHostServer);
|
||||
if (newHostServer !== 0) {
|
||||
setEditMonitoring(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a host server" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0">No host server</SelectItem>
|
||||
{hostServers
|
||||
.filter(
|
||||
(server) => server.id !== editId,
|
||||
)
|
||||
.map((server) => (
|
||||
<SelectItem key={server.id} value={server.id.toString()}>
|
||||
{server.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<Button onClick={edit}>Save</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-fullpb-2">
|
||||
<Separator />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5 pb-2">
|
||||
<div className="flex items-center gap-2 text-foreground/80">
|
||||
<MonitorCog className="h-4 w-4 text-muted-foreground" />
|
||||
<span>
|
||||
<b>OS:</b> {hostedVM.os || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/80">
|
||||
<FileDigit className="h-4 w-4 text-muted-foreground" />
|
||||
<span>
|
||||
<b>IP:</b> {hostedVM.ip || "Not set"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-full mb-2">
|
||||
<h4 className="text-sm font-semibold">Hardware Information</h4>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-foreground/80">
|
||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
||||
<span>
|
||||
<b>CPU:</b> {hostedVM.cpu || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/80">
|
||||
<Microchip className="h-4 w-4 text-muted-foreground" />
|
||||
<span>
|
||||
<b>GPU:</b> {hostedVM.gpu || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/80">
|
||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
||||
<span>
|
||||
<b>RAM:</b> {hostedVM.ram || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/80">
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
<span>
|
||||
<b>Disk:</b> {hostedVM.disk || "-"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{hostedVM.monitoring && (
|
||||
<>
|
||||
<div className="col-span-full pt-2 pb-2">
|
||||
<Separator />
|
||||
</div>
|
||||
|
||||
<div className="col-span-full grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">CPU</span>
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
{hostedVM.cpuUsage || 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
|
||||
<div
|
||||
className={`h-full ${hostedVM.cpuUsage && hostedVM.cpuUsage > 80 ? "bg-destructive" : hostedVM.cpuUsage && hostedVM.cpuUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${hostedVM.cpuUsage || 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">RAM</span>
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
{hostedVM.ramUsage || 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
|
||||
<div
|
||||
className={`h-full ${hostedVM.ramUsage && hostedVM.ramUsage > 80 ? "bg-destructive" : hostedVM.ramUsage && hostedVM.ramUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${hostedVM.ramUsage || 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">Disk</span>
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
{hostedVM.diskUsage || 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
|
||||
<div
|
||||
className={`h-full ${hostedVM.diskUsage && hostedVM.diskUsage > 80 ? "bg-destructive" : hostedVM.diskUsage && hostedVM.diskUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${hostedVM.diskUsage || 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Close</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<div className="px-6 pb-6">
|
||||
<NextLink href={`/dashboard/servers/${server.id}`}>
|
||||
<Button variant="outline" className="w-full mt-2">
|
||||
<History className="h-4 w-4 mr-2" />
|
||||
View Details
|
||||
</Button>
|
||||
</NextLink>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
|
||||
591
app/dashboard/servers/[server_id]/Server.tsx
Normal file
591
app/dashboard/servers/[server_id]/Server.tsx
Normal file
@ -0,0 +1,591 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useParams } from "next/navigation"
|
||||
import axios from "axios"
|
||||
import Chart from 'chart.js/auto'
|
||||
import { AppSidebar } from "@/components/app-sidebar"
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb"
|
||||
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Link } from "lucide-react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { StatusIndicator } from "@/components/status-indicator"
|
||||
import { DynamicIcon } from "lucide-react/dynamic"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import NextLink from "next/link"
|
||||
|
||||
interface ServerHistory {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
cpu: (number | null)[];
|
||||
ram: (number | null)[];
|
||||
disk: (number | null)[];
|
||||
online: (boolean | null)[];
|
||||
}
|
||||
}
|
||||
|
||||
interface Server {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
host: boolean;
|
||||
hostServer: number | null;
|
||||
os?: string;
|
||||
ip?: string;
|
||||
url?: string;
|
||||
cpu?: string;
|
||||
gpu?: string;
|
||||
ram?: string;
|
||||
disk?: string;
|
||||
hostedVMs?: Server[];
|
||||
isVM?: boolean;
|
||||
monitoring?: boolean;
|
||||
monitoringURL?: string;
|
||||
online?: boolean;
|
||||
cpuUsage: number;
|
||||
ramUsage: number;
|
||||
diskUsage: number;
|
||||
history?: ServerHistory;
|
||||
port: number;
|
||||
}
|
||||
|
||||
interface GetServersResponse {
|
||||
servers: Server[];
|
||||
maxPage: number;
|
||||
}
|
||||
|
||||
export default function ServerDetail() {
|
||||
const params = useParams()
|
||||
const serverId = params.server_id as string
|
||||
const [server, setServer] = useState<Server | null>(null)
|
||||
const [timeRange, setTimeRange] = useState<'1h' | '7d' | '30d'>('1h')
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// Chart references
|
||||
const cpuChartRef = { current: null as Chart | null }
|
||||
const ramChartRef = { current: null as Chart | null }
|
||||
const diskChartRef = { current: null as Chart | null }
|
||||
|
||||
const fetchServerDetails = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.post<GetServersResponse>("/api/servers/get", {
|
||||
serverId: parseInt(serverId),
|
||||
timeRange: timeRange
|
||||
})
|
||||
|
||||
if (response.data.servers && response.data.servers.length > 0) {
|
||||
setServer(response.data.servers[0])
|
||||
}
|
||||
setLoading(false)
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch server details:", error)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchServerDetails()
|
||||
}, [serverId, timeRange])
|
||||
|
||||
useEffect(() => {
|
||||
if (!server || !server.history) return
|
||||
|
||||
// Clean up existing charts
|
||||
if (cpuChartRef.current) cpuChartRef.current.destroy()
|
||||
if (ramChartRef.current) ramChartRef.current.destroy()
|
||||
if (diskChartRef.current) diskChartRef.current.destroy()
|
||||
|
||||
// Wait for DOM to be ready
|
||||
const initTimer = setTimeout(() => {
|
||||
const history = server.history as ServerHistory
|
||||
|
||||
// Format time labels based on the selected time range
|
||||
const timeLabels = history.labels.map((date: string) => {
|
||||
const d = new Date(date)
|
||||
if (timeRange === '1h') {
|
||||
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
} else if (timeRange === '7d') {
|
||||
// For 7 days, show day and time
|
||||
return d.toLocaleDateString([], {
|
||||
weekday: 'short',
|
||||
month: 'numeric',
|
||||
day: 'numeric'
|
||||
}) + ' ' + d.toLocaleTimeString([], {
|
||||
hour: '2-digit'
|
||||
})
|
||||
} else {
|
||||
// For 30 days
|
||||
return d.toLocaleDateString([], {
|
||||
month: 'numeric',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Create a time range title for the chart
|
||||
const getRangeTitle = () => {
|
||||
const now = new Date()
|
||||
const startDate = new Date(history.labels[0])
|
||||
|
||||
if (timeRange === '1h') {
|
||||
return `Last Hour (${startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })})`
|
||||
} else if (timeRange === '7d') {
|
||||
return `Last 7 Days (${startDate.toLocaleDateString([], { month: 'short', day: 'numeric' })} - ${now.toLocaleDateString([], { month: 'short', day: 'numeric' })})`
|
||||
} else {
|
||||
return `Last 30 Days (${startDate.toLocaleDateString([], { month: 'short', day: 'numeric' })} - ${now.toLocaleDateString([], { month: 'short', day: 'numeric' })})`
|
||||
}
|
||||
}
|
||||
|
||||
const chartConfig = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'nearest' as const,
|
||||
axis: 'x' as const,
|
||||
intersect: false
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: getRangeTitle(),
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: function(tooltipItems: any) {
|
||||
return timeLabels[tooltipItems[0].dataIndex];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Usage %'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
},
|
||||
line: {
|
||||
tension: 0.4
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add individual chart configs
|
||||
const cpuChartConfig = {
|
||||
...chartConfig,
|
||||
plugins: {
|
||||
...chartConfig.plugins,
|
||||
title: {
|
||||
...chartConfig.plugins.title,
|
||||
text: 'CPU Usage History'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const ramChartConfig = {
|
||||
...chartConfig,
|
||||
plugins: {
|
||||
...chartConfig.plugins,
|
||||
title: {
|
||||
...chartConfig.plugins.title,
|
||||
text: 'RAM Usage History'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const diskChartConfig = {
|
||||
...chartConfig,
|
||||
plugins: {
|
||||
...chartConfig.plugins,
|
||||
title: {
|
||||
...chartConfig.plugins.title,
|
||||
text: 'Disk Usage History'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cpuCanvas = document.getElementById(`cpu-chart`) as HTMLCanvasElement
|
||||
if (cpuCanvas) {
|
||||
cpuChartRef.current = new Chart(cpuCanvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: timeLabels,
|
||||
datasets: [{
|
||||
label: 'CPU Usage',
|
||||
data: history.datasets.cpu.filter(value => value !== null),
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.1)',
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: cpuChartConfig
|
||||
})
|
||||
}
|
||||
|
||||
const ramCanvas = document.getElementById(`ram-chart`) as HTMLCanvasElement
|
||||
if (ramCanvas) {
|
||||
ramChartRef.current = new Chart(ramCanvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: timeLabels,
|
||||
datasets: [{
|
||||
label: 'RAM Usage',
|
||||
data: history.datasets.ram.filter(value => value !== null),
|
||||
borderColor: 'rgb(153, 102, 255)',
|
||||
backgroundColor: 'rgba(153, 102, 255, 0.1)',
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: ramChartConfig
|
||||
})
|
||||
}
|
||||
|
||||
const diskCanvas = document.getElementById(`disk-chart`) as HTMLCanvasElement
|
||||
if (diskCanvas) {
|
||||
diskChartRef.current = new Chart(diskCanvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: timeLabels,
|
||||
datasets: [{
|
||||
label: 'Disk Usage',
|
||||
data: history.datasets.disk.filter(value => value !== null),
|
||||
borderColor: 'rgb(255, 159, 64)',
|
||||
backgroundColor: 'rgba(255, 159, 64, 0.1)',
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: diskChartConfig
|
||||
})
|
||||
}
|
||||
}, 100)
|
||||
|
||||
return () => {
|
||||
clearTimeout(initTimer)
|
||||
if (cpuChartRef.current) cpuChartRef.current.destroy()
|
||||
if (ramChartRef.current) ramChartRef.current.destroy()
|
||||
if (diskChartRef.current) diskChartRef.current.destroy()
|
||||
}
|
||||
}, [server, timeRange])
|
||||
|
||||
// Function to refresh data
|
||||
const refreshData = () => {
|
||||
fetchServerDetails()
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="flex items-center gap-2 px-4">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<BreadcrumbPage>/</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>My Infrastructure</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<NextLink href="/dashboard/servers" className="hover:underline">
|
||||
<BreadcrumbPage>Servers</BreadcrumbPage>
|
||||
</NextLink>
|
||||
</BreadcrumbItem>
|
||||
{server && (
|
||||
<>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>{server.name}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</>
|
||||
)}
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-6">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="inline-block" role="status" aria-label="loading">
|
||||
<svg
|
||||
className="w-6 h-6 stroke-white animate-spin "
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_9023_61563)">
|
||||
<path
|
||||
d="M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444"
|
||||
stroke="stroke-current"
|
||||
strokeWidth="1.4"
|
||||
strokeLinecap="round"
|
||||
className="my-path"
|
||||
></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9023_61563">
|
||||
<rect width="24" height="24" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : server ? (
|
||||
<div className="space-y-6">
|
||||
{/* Server header card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{server.icon && <DynamicIcon name={server.icon as any} size={32} />}
|
||||
<div>
|
||||
<CardTitle className="text-2xl flex items-center gap-2">
|
||||
{server.name}
|
||||
{server.monitoring && (
|
||||
<StatusIndicator isOnline={server.online} />
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{server.os || "No OS specified"} • {server.isVM ? "Virtual Machine" : "Physical Server"}
|
||||
{server.isVM && server.hostServer && (
|
||||
<> • Hosted on {server.hostedVMs?.[0]?.name}</>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Select value={timeRange} onValueChange={(value: '1h' | '7d' | '30d') => setTimeRange(value)}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Time range" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1h">Last Hour</SelectItem>
|
||||
<SelectItem value="7d">Last 7 Days (Hourly)</SelectItem>
|
||||
<SelectItem value="30d">Last 30 Days (4h Intervals)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" onClick={refreshData}>Refresh Data</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium">Hardware</h3>
|
||||
<div className="grid grid-cols-[120px_1fr] text-sm gap-1">
|
||||
<div className="text-muted-foreground">CPU:</div>
|
||||
<div>{server.cpu || "N/A"}</div>
|
||||
<div className="text-muted-foreground">GPU:</div>
|
||||
<div>{server.gpu || "N/A"}</div>
|
||||
<div className="text-muted-foreground">RAM:</div>
|
||||
<div>{server.ram || "N/A"}</div>
|
||||
<div className="text-muted-foreground">Disk:</div>
|
||||
<div>{server.disk || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium">Network</h3>
|
||||
<div className="grid grid-cols-[120px_1fr] text-sm gap-1">
|
||||
<div className="text-muted-foreground">IP Address:</div>
|
||||
<div>{server.ip || "N/A"}</div>
|
||||
<div className="text-muted-foreground">Management URL:</div>
|
||||
<div>
|
||||
{server.url ? (
|
||||
<a href={server.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 text-blue-500 hover:underline">
|
||||
{server.url} <Link className="h-3 w-3" />
|
||||
</a>
|
||||
) : (
|
||||
"N/A"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{server.monitoring && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium">Current Usage</h3>
|
||||
<div className="grid grid-cols-[120px_1fr] text-sm gap-1">
|
||||
<div className="text-muted-foreground">CPU Usage:</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-24 h-2 bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${server.cpuUsage > 80 ? "bg-destructive" : server.cpuUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${server.cpuUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span>{server.cpuUsage}%</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground">RAM Usage:</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-24 h-2 bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${server.ramUsage > 80 ? "bg-destructive" : server.ramUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${server.ramUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span>{server.ramUsage}%</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground">Disk Usage:</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-24 h-2 bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${server.diskUsage > 80 ? "bg-destructive" : server.diskUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${server.diskUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span>{server.diskUsage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Charts */}
|
||||
{server.monitoring && server.history && (
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Resource Usage History</CardTitle>
|
||||
<CardDescription>
|
||||
{timeRange === '1h'
|
||||
? 'Last hour, per minute'
|
||||
: timeRange === '7d'
|
||||
? 'Last 7 days, hourly intervals'
|
||||
: 'Last 30 days, 4-hour intervals'}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[600px] pr-4">
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
<div className="h-[200px] relative bg-background">
|
||||
<canvas id="cpu-chart" />
|
||||
</div>
|
||||
<div className="h-[200px] relative bg-background">
|
||||
<canvas id="ram-chart" />
|
||||
</div>
|
||||
<div className="h-[200px] relative bg-background">
|
||||
<canvas id="disk-chart" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Virtual Machines */}
|
||||
{server.hostedVMs && server.hostedVMs.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Virtual Machines</CardTitle>
|
||||
<CardDescription>Virtual machines hosted on this server</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{server.hostedVMs.map(vm => (
|
||||
<Card key={vm.id} className="hover:shadow-md transition-all duration-200">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{vm.icon && <DynamicIcon name={vm.icon as any} size={20} />}
|
||||
<NextLink href={`/dashboard/servers/${vm.id}`}>
|
||||
<CardTitle className="text-lg hover:underline">{vm.name}</CardTitle>
|
||||
</NextLink>
|
||||
</div>
|
||||
{vm.monitoring && (
|
||||
<StatusIndicator isOnline={vm.online} />
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{vm.os || "No OS specified"}
|
||||
</div>
|
||||
{vm.monitoring && (
|
||||
<div className="grid grid-cols-3 gap-2 mt-3">
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">CPU</div>
|
||||
<div className="h-1 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${vm.cpuUsage > 80 ? "bg-destructive" : vm.cpuUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${vm.cpuUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">RAM</div>
|
||||
<div className="h-1 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${vm.ramUsage > 80 ? "bg-destructive" : vm.ramUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${vm.ramUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">Disk</div>
|
||||
<div className="h-1 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${vm.diskUsage > 80 ? "bg-destructive" : vm.diskUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
|
||||
style={{ width: `${vm.diskUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-12">
|
||||
<h2 className="text-2xl font-bold">Server not found</h2>
|
||||
<p className="text-muted-foreground mt-2">The requested server could not be found or you don't have permission to view it.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
59
app/dashboard/servers/[server_id]/page.tsx
Normal file
59
app/dashboard/servers/[server_id]/page.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ServerDetail from "./Server"
|
||||
import axios from "axios";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const [isAuthChecked, setIsAuthChecked] = useState(false);
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const token = Cookies.get("token");
|
||||
if (!token) {
|
||||
router.push("/");
|
||||
} else {
|
||||
const checkToken = async () => {
|
||||
try {
|
||||
const response = await axios.post("/api/auth/validate", {
|
||||
token: token,
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
setIsValid(true);
|
||||
}
|
||||
} catch (error: any) {
|
||||
Cookies.remove("token");
|
||||
router.push("/");
|
||||
}
|
||||
}
|
||||
checkToken();
|
||||
}
|
||||
setIsAuthChecked(true);
|
||||
}, [router]);
|
||||
|
||||
if (!isAuthChecked) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className='inline-block' role='status' aria-label='loading'>
|
||||
<svg className='w-6 h-6 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
||||
<g clipPath='url(#clip0_9023_61563)'>
|
||||
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' strokeWidth='1.4' strokeLinecap='round' className='my-path'></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_9023_61563'>
|
||||
<rect width='24' height='24' fill='white'></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<span className='sr-only'>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return isValid ? <ServerDetail /> : null;
|
||||
}
|
||||
2418
package-lock.json
generated
2418
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -32,6 +32,7 @@
|
||||
"@xyflow/react": "^12.5.5",
|
||||
"axios": "^1.8.4",
|
||||
"bcrypt": "^5.1.1",
|
||||
"chart.js": "^4.4.9",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"fuse.js": "^7.1.0",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user