External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
CoreControl/app/dashboard/servers/Servers.tsx
headlesdev 94ba5e20c6 Revert "cleanup v2" 
This reverts commit 8b82578809528b7163ea7003d0a4734d93522263.
2025-05-17 12:31:27 +02:00

2117 lines
124 KiB
TypeScript
Raw Permalink Blame History

"use client"
import { AppSidebar } from "@/components/app-sidebar"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Separator } from "@/components/ui/separator"
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import {
Plus,
Link as LinkIcon,
MonitorIcon as MonitorCog,
FileDigit,
Trash2,
LayoutGrid,
List,
Pencil,
Cpu,
MicroscopeIcon as Microchip,
MemoryStick,
HardDrive,
LucideServer,
Copy,
History,
Thermometer,
ChevronLeft,
ChevronRight,
} from "lucide-react"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Input } from "@/components/ui/input"
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, 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"
import { Toaster } from "@/components/ui/sonner"
import { toast } from "sonner"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useTranslations } from "next-intl"
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;
history?: ServerHistory;
port: number;
uptime: string;
gpuUsage?: number;
temp?: number;
}
interface GetServersResponse {
servers: Server[]
maxPage: number
totalItems: number
}
interface MonitoringData {
id: number
online: boolean
cpuUsage: number
ramUsage: number
diskUsage: number
uptime: number
gpuUsage?: number
temp?: number
}
export default function Servers() {
const t = useTranslations()
const [host, setHost] = useState<boolean>(false)
const [hostServer, setHostServer] = useState<number>(0)
const [name, setName] = useState<string>("")
const [icon, setIcon] = useState<string>("")
const [os, setOs] = useState<string>("")
const [ip, setIp] = useState<string>("")
const [url, setUrl] = useState<string>("")
const [cpu, setCpu] = useState<string>("")
const [gpu, setGpu] = useState<string>("")
const [ram, setRam] = useState<string>("")
const [disk, setDisk] = useState<string>("")
const [monitoring, setMonitoring] = useState<boolean>(false)
const [monitoringURL, setMonitoringURL] = useState<string>("")
const [online, setOnline] = useState<boolean>(false)
const [cpuUsage, setCpuUsage] = useState<number>(0)
const [ramUsage, setRamUsage] = useState<number>(0)
const [diskUsage, setDiskUsage] = useState<number>(0)
const [currentPage, setCurrentPage] = useState<number>(1)
const [maxPage, setMaxPage] = useState<number>(1)
const [servers, setServers] = useState<Server[]>([])
const [loading, setLoading] = useState<boolean>(true)
const [totalItems, setTotalItems] = useState<number>(0)
const [editId, setEditId] = useState<number | null>(null)
const [editHost, setEditHost] = useState<boolean>(false)
const [editHostServer, setEditHostServer] = useState<number | null>(0)
const [editName, setEditName] = useState<string>("")
const [editIcon, setEditIcon] = useState<string>("")
const [editOs, setEditOs] = useState<string>("")
const [editIp, setEditIp] = useState<string>("")
const [editUrl, setEditUrl] = useState<string>("")
const [editCpu, setEditCpu] = useState<string>("")
const [editGpu, setEditGpu] = useState<string>("")
const [editRam, setEditRam] = useState<string>("")
const [editDisk, setEditDisk] = useState<string>("")
const [editMonitoring, setEditMonitoring] = useState<boolean>(false)
const [editMonitoringURL, setEditMonitoringURL] = useState<string>("")
const [searchTerm, setSearchTerm] = useState<string>("")
const [isSearching, setIsSearching] = useState<boolean>(false)
const [hostServers, setHostServers] = useState<Server[]>([])
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
const [monitoringInterval, setMonitoringInterval] = useState<NodeJS.Timeout | null>(null);
const savedLayout = Cookies.get("layoutPreference-servers");
const savedItemsPerPage = Cookies.get("itemsPerPage-servers");
const initialIsGridLayout = savedLayout === "grid";
const defaultItemsPerPage = initialIsGridLayout ? 6 : 4;
const initialItemsPerPage = savedItemsPerPage ? parseInt(savedItemsPerPage) : defaultItemsPerPage;
const [isGridLayout, setIsGridLayout] = useState<boolean>(initialIsGridLayout);
const [itemsPerPage, setItemsPerPage] = useState<number>(initialItemsPerPage);
const customInputRef = useRef<HTMLInputElement>(null);
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
const toggleLayout = (gridLayout: boolean) => {
setIsGridLayout(gridLayout);
Cookies.set("layoutPreference-servers", gridLayout ? "grid" : "standard", {
expires: 365,
path: "/",
sameSite: "strict",
});
};
const add = async () => {
try {
await axios.post("/api/servers/add", {
host,
hostServer,
name,
icon,
os,
ip,
url,
cpu,
gpu,
ram,
disk,
monitoring,
monitoringURL,
})
setIsAddDialogOpen(false)
setHost(false)
setHostServer(0)
setIcon("")
setName("")
setOs("")
setIp("")
setUrl("")
setCpu("")
setGpu("")
setRam("")
setDisk("")
setMonitoring(false)
setMonitoringURL("")
getServers()
toast.success("Server added successfully");
} catch (error: any) {
console.log(error.response.data)
toast.error("Failed to add server");
}
}
const getServers = async () => {
try {
setLoading(true)
const response = await axios.post<GetServersResponse>("/api/servers/get", {
page: currentPage,
ITEMS_PER_PAGE: itemsPerPage,
})
for (const server of response.data.servers) {
console.log("Host Server:" + server.hostServer)
console.log("ID:" + server.id)
}
setServers(response.data.servers)
setMaxPage(response.data.maxPage)
setTotalItems(response.data.totalItems)
setLoading(false)
} catch (error: any) {
console.log(error.response)
toast.error("Failed to fetch servers");
}
}
useEffect(() => {
getServers()
}, [currentPage, itemsPerPage])
const handlePrevious = () => {
setCurrentPage((prev) => Math.max(1, prev - 1))
}
const handleNext = () => {
setCurrentPage((prev) => Math.min(maxPage, prev + 1))
}
const deleteApplication = async (id: number) => {
try {
await axios.post("/api/servers/delete", { id })
getServers()
toast.success("Server deleted successfully");
} catch (error: any) {
console.log(error.response.data)
toast.error("Failed to delete server");
}
}
const openEditDialog = (server: Server) => {
setEditId(server.id)
setEditHost(server.host)
setEditHostServer(server.hostServer || null)
setEditName(server.name)
setEditIcon(server.icon || "")
setEditOs(server.os || "")
setEditIp(server.ip || "")
setEditUrl(server.url || "")
setEditCpu(server.cpu || "")
setEditGpu(server.gpu || "")
setEditRam(server.ram || "")
setEditDisk(server.disk || "")
setEditMonitoring(server.monitoring || false)
setEditMonitoringURL(server.monitoringURL || "")
}
const edit = async () => {
if (!editId) return
try {
await axios.put("/api/servers/edit", {
id: editId,
host: editHost,
hostServer: editHostServer,
name: editName,
icon: editIcon,
os: editOs,
ip: editIp,
url: editUrl,
cpu: editCpu,
gpu: editGpu,
ram: editRam,
disk: editDisk,
monitoring: editMonitoring,
monitoringURL: editMonitoringURL,
})
getServers()
setEditId(null)
toast.success("Server edited successfully");
} catch (error: any) {
console.log(error.response.data)
toast.error("Failed to edit server");
}
}
const searchServers = async () => {
try {
setIsSearching(true)
const response = await axios.post<{ results: Server[] }>("/api/servers/search", { searchterm: searchTerm })
setServers(response.data.results)
setMaxPage(1)
setIsSearching(false)
} catch (error: any) {
console.error("Search error:", error.response?.data)
setIsSearching(false)
}
}
useEffect(() => {
const delayDebounce = setTimeout(() => {
if (searchTerm.trim() === "") {
getServers()
} else {
searchServers()
}
}, 300)
return () => clearTimeout(delayDebounce)
}, [searchTerm])
useEffect(() => {
const fetchHostServers = async () => {
try {
const response = await axios.get<{ servers: Server[] }>("/api/servers/hosts")
setHostServers(response.data.servers)
} catch (error) {
console.error("Error fetching host servers:", error)
}
}
if (isAddDialogOpen || editId !== null) {
fetchHostServers()
}
}, [isAddDialogOpen, editId])
// Add this function to get the host server name for a VM
const getHostServerName = (hostServerId: number | null) => {
if (!hostServerId) return ""
const hostServer = servers.find((server) => server.id === hostServerId)
return hostServer ? hostServer.name : ""
}
const iconCategories = {
Infrastructure: ["server", "network", "database", "database-backup", "cloud", "hard-drive", "router", "wifi", "antenna"],
Computing: ["cpu", "microchip", "memory-stick", "terminal", "code", "binary", "command", "ethernet-port"],
Monitoring: ["activity", "monitor", "gauge", "bar-chart", "line-chart", "pie-chart"],
Security: ["shield", "lock", "key", "fingerprint", "scan-face"],
Status: ["check-circle", "x-octagon", "alert-triangle", "alarm-check", "life-buoy"],
Other: [
"settings",
"power",
"folder",
"file-code",
"clipboard-list",
"git-branch",
"git-commit",
"git-merge",
"git-pull-request",
"github",
"bug",
],
}
// Flatten icons for search
const allIcons = Object.values(iconCategories).flat()
const copyServerDetails = (sourceServer: Server) => {
// First clear all fields
setName("")
setIcon("")
setOs("")
setIp("")
setUrl("")
setCpu("")
setGpu("")
setRam("")
setDisk("")
setMonitoring(false)
setMonitoringURL("")
setHost(false)
setHostServer(0)
// Then copy the new server details
setTimeout(() => {
setName(sourceServer.name + " (Copy)")
setIcon(sourceServer.icon || "")
setOs(sourceServer.os || "")
setIp(sourceServer.ip || "")
setUrl(sourceServer.url || "")
setCpu(sourceServer.cpu || "")
setGpu(sourceServer.gpu || "")
setRam(sourceServer.ram || "")
setDisk(sourceServer.disk || "")
setMonitoring(sourceServer.monitoring || false)
setMonitoringURL(sourceServer.monitoringURL || "")
setHost(sourceServer.host)
setHostServer(sourceServer.hostServer || 0)
}, 0)
}
const updateMonitoringData = async () => {
try {
const response = await axios.get<MonitoringData[]>("/api/servers/monitoring");
const monitoringData = response.data;
setServers(prevServers =>
prevServers.map(server => {
const serverMonitoring = monitoringData.find(m => m.id === server.id);
if (serverMonitoring) {
return {
...server,
online: serverMonitoring.online,
cpuUsage: serverMonitoring.cpuUsage,
ramUsage: serverMonitoring.ramUsage,
diskUsage: serverMonitoring.diskUsage,
gpuUsage: serverMonitoring.gpuUsage ? Number(serverMonitoring.gpuUsage) : 0,
temp: serverMonitoring.temp ? Number(serverMonitoring.temp) : 0
};
}
return server;
})
);
} catch (error) {
console.error("Error updating monitoring data:", error);
toast.error("Failed to update monitoring data");
}
};
// Set up monitoring interval
useEffect(() => {
updateMonitoringData();
const interval = setInterval(updateMonitoringData, 5000);
setMonitoringInterval(interval);
return () => {
if (monitoringInterval) {
clearInterval(monitoringInterval);
}
};
}, []);
const handleItemsPerPageChange = (value: string) => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
debounceTimerRef.current = setTimeout(() => {
const newItemsPerPage = parseInt(value);
if (isNaN(newItemsPerPage) || newItemsPerPage < 1) {
toast.error("Bitte eine Zahl zwischen 1 und 100 eingeben");
return;
}
const validatedValue = Math.min(Math.max(newItemsPerPage, 1), 100);
setItemsPerPage(validatedValue);
setCurrentPage(1);
Cookies.set("itemsPerPage-servers", String(validatedValue), {
expires: 365,
path: "/",
sameSite: "strict",
});
getServers();
}, 600);
};
const handlePresetItemsPerPageChange = (value: string) => {
const newItemsPerPage = parseInt(value);
if ([4, 6, 10, 15, 20, 25].includes(newItemsPerPage)) {
setItemsPerPage(newItemsPerPage);
setCurrentPage(1);
Cookies.set("itemsPerPage-servers", String(newItemsPerPage), {
expires: 365,
path: "/",
sameSite: "strict",
});
getServers();
} else {
handleItemsPerPageChange(value);
}
};
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>{t('Servers.MyInfrastructure')}</BreadcrumbPage>
</BreadcrumbItem>
<BreadcrumbSeparator className="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>{t('Servers.Title')}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<Toaster />
<div className="p-6">
<div className="flex justify-between items-center">
<span className="text-3xl font-bold">{t('Servers.YourServers')}</span>
<div className="flex gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" title={t('Common.ChangeView')}>
{isGridLayout ? (
<LayoutGrid className="h-4 w-4" />
) : (
<List className="h-4 w-4" />
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => toggleLayout(false)}>
<List className="h-4 w-4 mr-2" /> {t('Common.ListView')}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => toggleLayout(true)}>
<LayoutGrid className="h-4 w-4 mr-2" /> {t('Common.GridView')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Select
value={String(itemsPerPage)}
onValueChange={handlePresetItemsPerPageChange}
onOpenChange={(open) => {
if (open && customInputRef.current) {
customInputRef.current.value = String(itemsPerPage);
}
}}
>
<SelectTrigger className="w-[140px]">
<SelectValue>
{itemsPerPage} {itemsPerPage === 1 ? t('Common.ItemsPerPage.item') : t('Common.ItemsPerPage.items')}
</SelectValue>
</SelectTrigger>
<SelectContent>
{![4, 6, 10, 15, 20, 25].includes(itemsPerPage) ? (
<SelectItem value={String(itemsPerPage)}>
{itemsPerPage} {itemsPerPage === 1 ? t('Common.ItemsPerPage.item') : t('Common.ItemsPerPage.items')} ({t('Common.ItemsPerPage.Custom')})
</SelectItem>
) : null}
<SelectItem value="4">{t('Common.ItemsPerPage.4')}</SelectItem>
<SelectItem value="6">{t('Common.ItemsPerPage.6')}</SelectItem>
<SelectItem value="10">{t('Common.ItemsPerPage.10')}</SelectItem>
<SelectItem value="15">{t('Common.ItemsPerPage.15')}</SelectItem>
<SelectItem value="20">{t('Common.ItemsPerPage.20')}</SelectItem>
<SelectItem value="25">{t('Common.ItemsPerPage.25')}</SelectItem>
<div className="p-2 border-t mt-1">
<Label htmlFor="custom-items" className="text-xs font-medium">{t('Common.ItemsPerPage.Custom')}</Label>
<div className="flex items-center gap-2 mt-1">
<Input
id="custom-items"
ref={customInputRef}
type="number"
min="1"
max="100"
className="h-8"
defaultValue={itemsPerPage}
onChange={(e) => {
const value = parseInt(e.target.value);
if (isNaN(value) || value < 1 || value > 100) {
e.target.classList.add("border-red-500");
} else {
e.target.classList.remove("border-red-500");
}
}}
onBlur={(e) => {
const value = parseInt(e.target.value);
if (value >= 1 && value <= 100) {
handleItemsPerPageChange(e.target.value);
}
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
debounceTimerRef.current = null;
}
const value = parseInt((e.target as HTMLInputElement).value);
if (value >= 1 && value <= 100) {
const validatedValue = Math.min(Math.max(value, 1), 100);
setItemsPerPage(validatedValue);
setCurrentPage(1);
Cookies.set("itemsPerPage-servers", String(validatedValue), {
expires: 365,
path: "/",
sameSite: "strict",
});
setTimeout(() => {
getServers();
document.body.click();
}, 50);
}
}
}}
onClick={(e) => e.stopPropagation()}
/>
<span className="text-xs text-muted-foreground whitespace-nowrap">{t('Common.ItemsPerPage.items')}</span>
</div>
</div>
</SelectContent>
</Select>
<AlertDialog onOpenChange={setIsAddDialogOpen}>
<AlertDialogTrigger asChild>
<Button variant="outline" size="icon">
<Plus />
</Button>
</AlertDialogTrigger>
<AlertDialogContent className="max-w-[95vw] w-[600px] max-h-[90vh] overflow-y-auto">
<AlertDialogHeader>
<AlertDialogTitle className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
<span>{t('Servers.AddServer.Title')}</span>
<Select
onValueChange={(value) => {
if (!value) return;
const sourceServer = servers.find(s => s.id === parseInt(value));
if (!sourceServer) return;
// Clear all fields first
setName("");
setIcon("");
setOs("");
setIp("");
setUrl("");
setCpu("");
setGpu("");
setRam("");
setDisk("");
setMonitoring(false);
setMonitoringURL("");
setHost(false);
setHostServer(0);
// Copy new server details
setName(sourceServer.name + " (Copy)");
setIcon(sourceServer.icon || "");
setOs(sourceServer.os || "");
setIp(sourceServer.ip || "");
setUrl(sourceServer.url || "");
setCpu(sourceServer.cpu || "");
setGpu(sourceServer.gpu || "");
setRam(sourceServer.ram || "");
setDisk(sourceServer.disk || "");
setMonitoring(sourceServer.monitoring || false);
setMonitoringURL(sourceServer.monitoringURL || "");
setHost(sourceServer.host);
setHostServer(sourceServer.hostServer || 0);
}}
>
<SelectTrigger className="w-[140px] h-8 text-xs">
<div className="flex items-center gap-1.5">
<Copy className="h-3 w-3 text-muted-foreground" />
<SelectValue placeholder={t('Servers.AddServer.General.CopyServer')} />
</div>
</SelectTrigger>
<SelectContent>
{servers.map((server) => (
<SelectItem key={server.id} value={server.id.toString()} className="text-sm">
{server.name}
</SelectItem>
))}
</SelectContent>
</Select>
</AlertDialogTitle>
<AlertDialogDescription>
<Tabs defaultValue="general" className="w-full">
<TabsList className="w-full">
<TabsTrigger value="general">{t('Common.Server.Tabs.General')}</TabsTrigger>
<TabsTrigger value="hardware">{t('Common.Server.Tabs.Hardware')}</TabsTrigger>
<TabsTrigger value="virtualization">{t('Common.Server.Tabs.Host')}</TabsTrigger>
<TabsTrigger value="monitoring">{t('Common.Server.Tabs.Monitoring')}</TabsTrigger>
</TabsList>
<TabsContent value="general">
<div className="space-y-4 pt-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<div className="grid w-full sm:w-[calc(100%-52px)] items-center gap-1.5">
<Label htmlFor="icon">{t('Servers.AddServer.General.Icon')}</Label>
<div className="space-y-2">
<Select value={icon} onValueChange={(value) => setIcon(value)}>
<SelectTrigger className="w-full">
<SelectValue placeholder={t('Servers.AddServer.General.IconPlaceholder')}>
{icon && (
<div className="flex items-center gap-2">
<DynamicIcon name={icon as any} size={18} />
<span>{icon}</span>
</div>
)}
</SelectValue>
</SelectTrigger>
<SelectContent className="max-h-[300px]">
<Input
placeholder={t('Servers.AddServer.General.IconSearchPlaceholder')}
className="mb-2"
onChange={(e) => {
const iconElements = document.querySelectorAll("[data-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-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">{t('Servers.AddServer.General.Preview')}</Label>
<div className="flex items-center justify-center">
{icon && <DynamicIcon name={icon as any} size={36} />}
</div>
</div>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">{t('Servers.AddServer.General.Name')}</Label>
<Input
id="name"
type="text"
placeholder="e.g. Server1"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="description">
{t('Servers.AddServer.General.OperatingSystem')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Select value={os} onValueChange={(value) => setOs(value)}>
<SelectTrigger className="w-full">
<SelectValue placeholder={t('Servers.AddServer.General.OperatingSystemPlaceholder')} />
</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="ip">
{t('Servers.AddServer.General.IPAdress')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Input
id="ip"
type="text"
placeholder="e.g. 192.168.100.2"
value={ip}
onChange={(e) => setIp(e.target.value)}
/>
</div>
<div className="grid w-full items-center gap-1.5">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Label htmlFor="publicURL">
{t('Servers.AddServer.General.ManagementURL')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
</TooltipTrigger>
<TooltipContent>
{t('Servers.AddServer.General.ManagementURLTooltip')}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Input
id="publicURL"
type="text"
placeholder="e.g. https://proxmox.server1.com"
value={url}
onChange={(e) => setUrl(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="cpu">
{t('Common.Server.CPU')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Input
id="cpu"
type="text"
placeholder="e.g. AMD Ryzen™ 7 7800X3D"
value={cpu}
onChange={(e) => setCpu(e.target.value)}
/>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="gpu">
{t('Common.Server.GPU')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Input
id="gpu"
type="text"
placeholder="e.g. AMD Radeon™ Graphics"
value={gpu}
onChange={(e) => setGpu(e.target.value)}
/>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="ram">
{t('Common.Server.RAM')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Input
id="ram"
type="text"
placeholder="e.g. 64GB DDR5"
value={ram}
onChange={(e) => setRam(e.target.value)}
/>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="disk">
{t('Common.Server.Disk')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Input
id="disk"
type="text"
placeholder="e.g. 2TB SSD"
value={disk}
onChange={(e) => setDisk(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="hostCheckbox"
checked={host}
onCheckedChange={(checked) => setHost(checked === true)}
/>
<Label htmlFor="hostCheckbox">{t('Servers.AddServer.Host.MarkAsHostServer')}</Label>
</div>
{!host && (
<div className="grid w-full items-center gap-1.5">
<Label>{t('Servers.AddServer.Host.SelectHostServer')}</Label>
<Select
value={hostServer?.toString()}
onValueChange={(value) => {
const newHostServer = Number(value);
setHostServer(newHostServer);
if (newHostServer !== 0) {
setMonitoring(false);
}
}}
>
<SelectTrigger>
<SelectValue placeholder={t('Servers.AddServer.Host.SelectHostServerPlaceholder')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">{t('Servers.AddServer.Host.NoHostServer')}</SelectItem>
{hostServers.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="monitoringCheckbox"
checked={monitoring}
onCheckedChange={(checked) => setMonitoring(checked === true)}
/>
<Label htmlFor="monitoringCheckbox">{t('Servers.AddServer.Monitoring.Enable')}</Label>
</div>
{monitoring && (
<>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="monitoringURL">{t('Servers.AddServer.Monitoring.URL')}</Label>
<Input
id="monitoringURL"
type="text"
placeholder={`http://${ip}:61208`}
value={monitoringURL}
onChange={(e) => setMonitoringURL(e.target.value)}
/>
</div>
<div className="mt-4 p-4 border rounded-lg bg-muted">
<h4 className="text-sm font-semibold mb-2">{t('Servers.AddServer.Monitoring.SetupTitle')}</h4>
<p className="text-sm text-muted-foreground mb-3">
{t('Servers.AddServer.Monitoring.SetupDescription')}
</p>
<pre className="bg-background p-4 rounded-md text-sm overflow-x-auto">
<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>{t('Common.cancel')}</AlertDialogCancel>
<AlertDialogAction onClick={add}>{t('Common.add')}</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</div>
<div className="flex flex-col gap-2 mb-4 pt-2">
<Input
id="application-search"
placeholder={t('Servers.Search.Placeholder')}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<br />
{!loading ? (
<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) => {
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`}
>
<CardHeader>
{server.monitoring && (
<div className="absolute top-4 right-4 flex flex-col items-end">
<StatusIndicator isOnline={server.online} />
{server.online && server.uptime && (
<span className="text-xs text-muted-foreground mt-1">
{t('Common.since', { date: server.uptime })}
</span>
)}
</div>
)}
<div className="flex items-center justify-between w-full">
<div className="flex items-center w-full">
<div className="ml-4 flex-grow">
<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>
)}
</CardTitle>
<CardDescription
className={`text-sm mt-1 grid gap-y-1 ${
isGridLayout ? "grid-cols-1" : "grid-cols-2 gap-x-4"
}`}
>
<div className="flex items-center gap-2 text-foreground/80">
<MonitorCog className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.OS')}:</b> {server.os || "-"}
</span>
</div>
<div className="flex items-center gap-2 text-foreground/80">
<FileDigit className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.IP')}:</b> {server.ip || t('Common.notSet')}
</span>
</div>
{server.isVM && server.hostServer && (
<div className="flex items-center gap-2 text-foreground/80">
<LucideServer className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.Host')}:</b> {getHostServerName(server.hostServer)}
</span>
</div>
)}
<div className="col-span-full pt-2 pb-2">
<Separator />
</div>
<div className="col-span-full mb-2">
<h4 className="text-sm font-semibold">{t('Servers.ServerCard.HardwareInformation')}</h4>
</div>
<div className="flex items-center gap-2 text-foreground/80">
<Cpu className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.CPU')}:</b> {server.cpu || "-"}
</span>
</div>
<div className="flex items-center gap-2 text-foreground/80">
<Microchip className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.GPU')}:</b> {server.gpu || "-"}
</span>
</div>
<div className="flex items-center gap-2 text-foreground/80">
<MemoryStick className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.RAM')}:</b> {server.ram || "-"}
</span>
</div>
<div className="flex items-center gap-2 text-foreground/80">
<HardDrive className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.Disk')}:</b> {server.disk || "-"}
</span>
</div>
{server.monitoring && server.hostServer === 0 && (
<>
<div className="col-span-full pt-2 pb-2">
<Separator />
</div>
<div className="col-span-full">
<h4 className="text-sm font-semibold mb-3">{t('Servers.ServerCard.ResourceUsage')}</h4>
<div className="grid grid-cols-2 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">{t('Common.Server.CPU')}</span>
</div>
<span className="text-xs font-medium">{server.cpuUsage !== null && server.cpuUsage !== undefined ? `${server.cpuUsage}%` : t('Common.noData')}</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
<div
className={`h-full ${server.cpuUsage && server.cpuUsage > 80 ? "bg-destructive" : server.cpuUsage && server.cpuUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
style={{ width: `${server.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">{t('Common.Server.RAM')}</span>
</div>
<span className="text-xs font-medium">{server.ramUsage !== null && server.ramUsage !== undefined ? `${server.ramUsage}%` : t('Common.noData')}</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
<div
className={`h-full ${server.ramUsage && server.ramUsage > 80 ? "bg-destructive" : server.ramUsage && server.ramUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
style={{ width: `${server.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">{t('Common.Server.Disk')}</span>
</div>
<span className="text-xs font-medium">{server.diskUsage !== null && server.diskUsage !== undefined ? `${server.diskUsage}%` : t('Common.noData')}</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
<div
className={`h-full ${server.diskUsage && server.diskUsage > 80 ? "bg-destructive" : server.diskUsage && server.diskUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
style={{ width: `${server.diskUsage || 0}%` }}
/>
</div>
</div>
<div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Microchip className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">{t('Common.Server.GPU')}</span>
</div>
<span className="text-xs font-medium">
{server.online &&
server.gpuUsage &&
server.gpuUsage !== null &&
server.gpuUsage !== undefined &&
server.gpuUsage.toString() !== "0"
? `${server.gpuUsage}%`
: t('Common.noData')}
</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
<div
className={`h-full ${server.gpuUsage && server.gpuUsage > 80 ? "bg-destructive" : server.gpuUsage && server.gpuUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
style={{ width: `${server.gpuUsage || 0}%` }}
/>
</div>
</div>
</div>
<div className="mt-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Thermometer className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">{t('Common.Server.Temperature')}</span>
</div>
<span className="text-xs font-medium">
{server.online &&
server.temp !== null &&
server.temp !== undefined &&
server.temp.toString() !== "0"
? `${server.temp}°C`
: t('Common.noData')}
</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
<div
className={`h-full ${server.temp && server.temp > 80 ? "bg-destructive" : server.temp && server.temp > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
style={{ width: `${Math.min(server.temp || 0, 100)}%` }}
/>
</div>
</div>
</div>
</>
)}
</CardDescription>
</div>
</div>
</div>
</CardHeader>
<div className="px-6">
<div className="flex gap-2 mt-2 mb-2">
<NextLink href={`/dashboard/servers/${server.id}`} className="flex-1">
<Button variant="outline" className="w-full">
<History className="h-4 w-4 mr-2" />
{t('Servers.ServerCard.ViewDetails')}
</Button>
</NextLink>
{server.url && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
onClick={() => window.open(server.url, "_blank")}
>
<LinkIcon className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>{t('Servers.ServerCard.OpenManagementURL')}</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
onClick={() => {
openEditDialog(server);
// Open the dialog after setting the values
const dialogTriggerButton = document.getElementById(`edit-dialog-trigger-${server.id}`);
if (dialogTriggerButton) {
dialogTriggerButton.click();
}
}}
>
<Pencil className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>{t('Servers.ServerCard.EditServer')}</TooltipContent>
</Tooltip>
</TooltipProvider>
{server.host && server.hostedVMs && server.hostedVMs.length > 0 && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline" size="icon">
<LucideServer className="h-4 w-4" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t('Servers.ServerCard.HostedVMs')}</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">
{ hostedVM.url && (
<Button
variant="outline"
className="gap-2"
onClick={() => window.open(hostedVM.url, "_blank")}
>
<LinkIcon 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 className="max-w-[95vw] w-[600px] max-h-[90vh] overflow-y-auto">
<AlertDialogHeader>
<AlertDialogTitle>{t('Servers.EditServer.Title', { name: hostedVM.name })}</AlertDialogTitle>
<AlertDialogDescription>
<Tabs defaultValue="general" className="w-full">
<TabsList className="w-full">
<TabsTrigger value="general">{t('Common.Server.Tabs.General')}</TabsTrigger>
<TabsTrigger value="hardware">{t('Common.Server.Tabs.Hardware')}</TabsTrigger>
<TabsTrigger value="virtualization">
{t('Common.Server.Tabs.Host')}
</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">{t('Servers.EditServer.General.Icon')}</Label>
<div className="space-y-2">
<Select
value={editIcon}
onValueChange={(value) =>
setEditIcon(value)
}
>
<SelectTrigger className="w-full">
<SelectValue placeholder={t('Servers.AddServer.General.IconPlaceholder')}>
{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={t('Servers.AddServer.General.IconSearchPlaceholder')}
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">{t('Servers.AddServer.General.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">{t('Servers.EditServer.General.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">{t('Servers.EditServer.General.OperatingSystem')}</Label>
<Select
value={editOs}
onValueChange={setEditOs}
>
<SelectTrigger className="w-full">
<SelectValue placeholder={t('Servers.AddServer.General.OperatingSystemPlaceholder')} />
</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">{t('Servers.EditServer.General.IPAddress')}</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">{t('Servers.EditServer.General.ManagementURL')}</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">{t('Servers.EditServer.Hardware.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">{t('Servers.EditServer.Hardware.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">{t('Servers.EditServer.Hardware.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">{t('Servers.EditServer.Hardware.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">
{t('Servers.EditServer.Host.MarkAsHostServer')}
{server.hostedVMs &&
server.hostedVMs.length > 0 && (
<span className="text-muted-foreground text-sm ml-2">
({t('Servers.EditServer.Host.CannotDisableHost')})
</span>
)}
</Label>
</div>
{!editHost && (
<div className="grid w-full items-center gap-1.5">
<Label>{t('Servers.EditServer.Host.SelectHostServer')}</Label>
<Select
value={editHostServer?.toString()}
onValueChange={(value) => {
const newHostServer = Number(value);
setEditHostServer(newHostServer);
if (newHostServer !== 0) {
setEditMonitoring(false);
}
}}
>
<SelectTrigger>
<SelectValue placeholder={t('Servers.AddServer.Host.SelectHostServerPlaceholder')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">{t('Servers.AddServer.Host.NoHostServer')}</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>{t('Common.cancel')}</AlertDialogCancel>
<Button onClick={edit}>{t('Servers.EditServer.Save')}</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</div>
<div className="col-span-full pb-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>{t('Common.Server.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>{t('Common.Server.IP')}:</b> {hostedVM.ip || t('Common.notSet')}
</span>
</div>
</div>
<div className="col-span-full mb-2">
<h4 className="text-sm font-semibold">{t('Servers.ServerCard.HardwareInformation')}</h4>
</div>
<div className="flex items-center gap-2 text-foreground/80">
<Cpu className="h-4 w-4 text-muted-foreground" />
<span>
<b>{t('Common.Server.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>{t('Common.Server.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>{t('Common.Server.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>{t('Common.Server.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">{t('Common.Server.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">{t('Common.Server.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">{t('Common.Server.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>{t('Common.cancel')}</AlertDialogCancel>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</TooltipTrigger>
<TooltipContent>{t('Servers.ServerCard.HostedVMs')} ({server.hostedVMs.length})</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
id={`edit-dialog-trigger-${server.id}`}
className="hidden"
>
Hidden Trigger
</Button>
</AlertDialogTrigger>
<AlertDialogContent className="max-w-[95vw] w-[600px] max-h-[90vh] overflow-y-auto">
<AlertDialogHeader>
<AlertDialogTitle>{t('Servers.EditServer.Title', { name: server.name })}</AlertDialogTitle>
<AlertDialogDescription>
<Tabs defaultValue="general" className="w-full">
<TabsList className="w-full">
<TabsTrigger value="general">{t('Common.Server.Tabs.General')}</TabsTrigger>
<TabsTrigger value="hardware">{t('Common.Server.Tabs.Hardware')}</TabsTrigger>
<TabsTrigger value="virtualization">{t('Common.Server.Tabs.Host')}</TabsTrigger>
<TabsTrigger value="monitoring">{t('Common.Server.Tabs.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="editIcon">{t('Servers.EditServer.General.Icon')}</Label>
<div className="space-y-2">
<Select
value={editIcon}
onValueChange={(value) => setEditIcon(value)}
>
<SelectTrigger className="w-full">
<SelectValue placeholder={t('Servers.AddServer.General.IconPlaceholder')}>
{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={t('Servers.AddServer.General.IconSearchPlaceholder')}
className="mb-2"
onChange={(e) => {
const iconElements = document.querySelectorAll(
"[data-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-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">{t('Servers.AddServer.General.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">{t('Servers.EditServer.General.Name')}</Label>
<Input
id="editName"
type="text"
value={editName}
onChange={(e) => setEditName(e.target.value)}
/>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="editOs">
{t('Servers.EditServer.General.OperatingSystem')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Select value={editOs} onValueChange={(value) => setEditOs(value)}>
<SelectTrigger className="w-full">
<SelectValue placeholder={t('Servers.AddServer.General.OperatingSystemPlaceholder')} />
</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">
{t('Servers.EditServer.General.IPAddress')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Input
id="editIp"
type="text"
value={editIp}
onChange={(e) => setEditIp(e.target.value)}
/>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="editUrl">
{t('Servers.EditServer.General.ManagementURL')} <span className="text-stone-600">({t('Common.optional')})</span>
</Label>
<Input
id="editUrl"
type="text"
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">{t('Servers.EditServer.Hardware.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">{t('Servers.EditServer.Hardware.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">{t('Servers.EditServer.Hardware.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">{t('Servers.EditServer.Hardware.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)
}
/>
<Label htmlFor="editHostCheckbox">{t('Servers.EditServer.Host.MarkAsHostServer')}</Label>
</div>
{!editHost && (
<div className="grid w-full items-center gap-1.5">
<Label>{t('Servers.EditServer.Host.SelectHostServer')}</Label>
<Select
value={editHostServer?.toString()}
onValueChange={(value) => {
const newHostServer = Number(value);
setEditHostServer(newHostServer);
if (newHostServer !== 0) {
setEditMonitoring(false);
}
}}
>
<SelectTrigger>
<SelectValue placeholder={t('Servers.AddServer.Host.SelectHostServerPlaceholder')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">{t('Servers.AddServer.Host.NoHostServer')}</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">{t('Servers.EditServer.Monitoring.Enable')}</Label>
</div>
{editMonitoring && (
<>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="editMonitoringURL">{t('Servers.EditServer.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">{t('Servers.EditServer.Monitoring.SetupTitle')}</h4>
<p className="text-sm text-muted-foreground mb-3">
{t('Servers.EditServer.Monitoring.SetupDescription')}
</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>{t('Common.cancel')}</AlertDialogCancel>
<Button onClick={edit}>{t('Servers.EditServer.Save')}</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive" size="icon">
<Trash2 className="h-4 w-4" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t('Servers.ServerCard.DeleteConfirmation.Title', { name: server.name })}</AlertDialogTitle>
<AlertDialogDescription>
{t('Servers.ServerCard.DeleteConfirmation.Description')}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('Servers.ServerCard.DeleteConfirmation.Cancel')}</AlertDialogCancel>
<AlertDialogAction
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
onClick={() => deleteApplication(server.id)}
>
{t('Servers.ServerCard.DeleteConfirmation.Delete')}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</TooltipTrigger>
<TooltipContent>{t('Servers.ServerCard.DeleteServer')}</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
</Card>
)
})}
</div>
) : (
<div className="flex items-center justify-center">
<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>
)}
<div className="pt-4 pb-4">
<div className="flex justify-between items-center mb-2">
<div className="text-sm text-muted-foreground">
{totalItems > 0
? t('Servers.Pagination.Showing', {
start: ((currentPage - 1) * itemsPerPage) + 1,
end: Math.min(currentPage * itemsPerPage, totalItems),
total: totalItems
})
: t('Servers.Pagination.NoServers')}
</div>
</div>
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious
onClick={handlePrevious}
isActive={currentPage > 1}
style={{
cursor: currentPage === 1 ? "not-allowed" : "pointer",
}}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink isActive>{currentPage}</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext
onClick={handleNext}
isActive={currentPage < maxPage}
style={{
cursor: currentPage === maxPage ? "not-allowed" : "pointer",
}}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
</div>
</SidebarInset>
</SidebarProvider>
)
}
Reference in New Issue View Git Blame Copy Permalink