url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Server Historical Performance chart improvement

Browse Source 
Fix: Improve sidebar collapse/expand performance
This commit is contained in:
Tola Leng
2025-07-19 15:23:28 +07:00
parent d40d5898c0
commit dc586dc15f
19 changed files with 1534 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/servers/ServerTable.tsx
+179 -170
View File
@@ -1,4 +1,3 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
@@ -13,9 +12,11 @@ import { RefreshCw, Search, Eye, Activity, MoreHorizontal, Pause, Play, Edit, Tr
import { Server } from "@/types/server.types";
import { ServerStatusBadge } from "./ServerStatusBadge";
import { OSTypeIcon } from "./OSTypeIcon";
import { EditServerDialog } from "./EditServerDialog";
import { serverService } from "@/services/serverService";
import { useToast } from "@/hooks/use-toast";
import { pb } from "@/lib/pocketbase";
import { useTheme } from "@/contexts/ThemeContext";
interface ServerTableProps {
servers: Server[];
@@ -24,8 +25,10 @@ interface ServerTableProps {
}
export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps) => {
const { theme } = useTheme();
const [searchTerm, setSearchTerm] = useState("");
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [editDialogOpen, setEditDialogOpen] = useState(false);
const [selectedServer, setSelectedServer] = useState<Server | null>(null);
const [isDeleting, setIsDeleting] = useState(false);
const [pausingServers, setPausingServers] = useState<Set<string>>(new Set());
@@ -104,9 +107,9 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
}
};
const handleEdit = (serverId: string) => {
// TODO: Implement edit functionality
console.log('Edit server:', serverId);
const handleEdit = (server: Server) => {
setSelectedServer(server);
setEditDialogOpen(true);
};
const handleDelete = (server: Server) => {
@@ -165,8 +168,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
return (
<>
<Card className="flex-1 flex flex-col min-h-0">
<CardHeader className="flex-shrink-0">
<Card className="bg-transparent border-0 shadow-none">
<CardHeader className="pb-4 px-0">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<CardTitle className="text-xl font-semibold">Servers</CardTitle>
<div className="flex items-center gap-2">
@@ -185,185 +188,191 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
</div>
</div>
</CardHeader>
<CardContent className="flex-1 flex flex-col min-h-0 p-0">
<CardContent className="p-0">
{filteredServers.length === 0 ? (
<div className="flex-1 flex items-center justify-center p-8">
<div className="flex items-center justify-center p-8">
<p className="text-muted-foreground">No servers found</p>
</div>
) : (
<div className="flex-1 flex flex-col min-h-0">
<div className="flex-1 overflow-auto border-t">
<Table>
<TableHeader className="sticky top-0 bg-background z-10">
<TableRow>
<TableHead className="w-[150px] min-w-[120px]">Name</TableHead>
<TableHead className="w-[100px] min-w-[80px]">Status</TableHead>
<TableHead className="w-[100px] min-w-[80px]">OS</TableHead>
<TableHead className="w-[120px] min-w-[100px]">IP Address</TableHead>
<TableHead className="w-[140px] min-w-[120px]">CPU</TableHead>
<TableHead className="w-[140px] min-w-[120px]">Memory</TableHead>
<TableHead className="w-[140px] min-w-[120px]">Disk</TableHead>
<TableHead className="w-[100px] min-w-[80px]">Uptime</TableHead>
<TableHead className="w-[150px] min-w-[130px]">Last Checked</TableHead>
<TableHead className="w-[80px] min-w-[60px] text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredServers.map((server) => {
const cpuUsage = server.cpu_usage || 0;
const memoryUsage = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0;
const diskUsage = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0;
const isPaused = server.status === "paused";
const isProcessing = pausingServers.has(server.id);
<div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} rounded-lg border border-border shadow-sm`}>
<Table>
<TableHeader className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'}`}>
<TableRow className={`${theme === 'dark' ? 'border-gray-700 hover:bg-gray-800' : 'border-gray-200 hover:bg-gray-100'}`}>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Name</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Status</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>OS</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>IP Address</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>CPU</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Memory</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Disk</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Uptime</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4`}>Last Checked</TableHead>
<TableHead className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} font-medium text-base py-4 text-right`}>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredServers.map((server) => {
const cpuUsage = server.cpu_usage || 0;
const memoryUsage = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0;
const diskUsage = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0;
const isPaused = server.status === "paused";
const isProcessing = pausingServers.has(server.id);
return (
<TableRow key={server.id} className="hover:bg-muted/50">
<TableCell className="font-medium">
<div className="truncate max-w-[140px]" title={server.name}>
{server.name}
return (
<TableRow key={server.id} className="hover:bg-muted/50">
<TableCell className="font-medium">
<div className="truncate" title={server.name}>
{server.name}
</div>
</TableCell>
<TableCell>
<ServerStatusBadge status={server.status} />
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<OSTypeIcon osType={server.os_type} />
<span className="text-sm truncate" title={server.os_type}>
{server.os_type}
</span>
</div>
</TableCell>
<TableCell>
<code className="text-sm bg-muted px-1 py-0.5 rounded text-xs">
{server.ip_address}
</code>
</TableCell>
<TableCell>
<div className="space-y-1">
<div className="flex justify-between text-sm">
<span>{cpuUsage.toFixed(1)}%</span>
<span className="text-muted-foreground text-xs">{server.cpu_cores} cores</span>
</div>
</TableCell>
<TableCell>
<ServerStatusBadge status={server.status} />
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<OSTypeIcon osType={server.os_type} />
<span className="text-sm truncate max-w-[60px]" title={server.os_type}>
{server.os_type}
</span>
<Progress
value={cpuUsage}
className="h-2"
indicatorClassName={
cpuUsage > 90 ? "bg-red-500" :
cpuUsage > 75 ? "bg-orange-500" :
cpuUsage > 60 ? "bg-yellow-500" : "bg-green-500"
}
/>
</div>
</TableCell>
<TableCell>
<div className="space-y-1">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">{memoryUsage.toFixed(1)}%</span>
<span className="text-xs">{serverService.formatBytes(server.ram_total)}</span>
</div>
</TableCell>
<TableCell>
<code className="text-sm bg-muted px-1 py-0.5 rounded text-xs">
{server.ip_address}
</code>
</TableCell>
<TableCell>
<div className="space-y-1 min-w-[120px]">
<div className="flex justify-between text-sm">
<span>{cpuUsage.toFixed(1)}%</span>
<span className="text-muted-foreground text-xs">{server.cpu_cores} cores</span>
</div>
<Progress
value={cpuUsage}
className="h-2"
indicatorClassName={
cpuUsage > 90 ? "bg-red-500" :
cpuUsage > 75 ? "bg-orange-500" :
cpuUsage > 60 ? "bg-yellow-500" : "bg-green-500"
}
/>
<Progress
value={memoryUsage}
className="h-2"
indicatorClassName={
memoryUsage > 90 ? "bg-red-500" :
memoryUsage > 75 ? "bg-yellow-500" : "bg-blue-500"
}
/>
</div>
</TableCell>
<TableCell>
<div className="space-y-1">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">{diskUsage.toFixed(1)}%</span>
<span className="text-xs">{serverService.formatBytes(server.disk_total)}</span>
</div>
</TableCell>
<TableCell>
<div className="space-y-1 min-w-[120px]">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">{memoryUsage.toFixed(1)}%</span>
<span className="text-xs">{serverService.formatBytes(server.ram_total)}</span>
</div>
<Progress
value={memoryUsage}
className="h-2"
indicatorClassName={
memoryUsage > 90 ? "bg-red-500" :
memoryUsage > 75 ? "bg-yellow-500" : "bg-blue-500"
}
/>
</div>
</TableCell>
<TableCell>
<div className="space-y-1 min-w-[120px]">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">{diskUsage.toFixed(1)}%</span>
<span className="text-xs">{serverService.formatBytes(server.disk_total)}</span>
</div>
<Progress
value={diskUsage}
className="h-2"
indicatorClassName={
diskUsage > 95 ? "bg-red-500" :
diskUsage > 85 ? "bg-yellow-500" : "bg-orange-500"
}
/>
</div>
</TableCell>
<TableCell>
<div className="text-sm truncate max-w-[80px]" title={server.uptime}>
{server.uptime}
</div>
</TableCell>
<TableCell>
<div className="text-sm text-muted-foreground text-xs">
{new Date(server.last_checked).toLocaleString()}
</div>
</TableCell>
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0" disabled={isProcessing}>
<span className="sr-only">Open menu</span>
{isProcessing ? (
<RefreshCw className="h-4 w-4 animate-spin" />
) : (
<MoreHorizontal className="h-4 w-4" />
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px]">
<DropdownMenuItem onClick={() => handleViewDetails(server.id)}>
<Eye className="mr-2 h-4 w-4" />
View Server Detail
</DropdownMenuItem>
{server.docker === 'true' && (
<DropdownMenuItem onClick={() => handleViewContainers(server.id)}>
<Activity className="mr-2 h-4 w-4" />
Container Monitoring
</DropdownMenuItem>
<Progress
value={diskUsage}
className="h-2"
indicatorClassName={
diskUsage > 95 ? "bg-red-500" :
diskUsage > 85 ? "bg-yellow-500" : "bg-orange-500"
}
/>
</div>
</TableCell>
<TableCell>
<div className="text-sm truncate" title={server.uptime}>
{server.uptime}
</div>
</TableCell>
<TableCell>
<div className="text-sm text-muted-foreground text-xs">
{new Date(server.last_checked).toLocaleString()}
</div>
</TableCell>
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0" disabled={isProcessing}>
<span className="sr-only">Open menu</span>
{isProcessing ? (
<RefreshCw className="h-4 w-4 animate-spin" />
) : (
<MoreHorizontal className="h-4 w-4" />
)}
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => handlePauseResume(server)}
disabled={isProcessing}
>
{isPaused ? (
<>
<Play className="mr-2 h-4 w-4" />
Resume Monitoring
</>
) : (
<>
<Pause className="mr-2 h-4 w-4" />
Pause Monitoring
</>
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px]">
<DropdownMenuItem onClick={() => handleViewDetails(server.id)}>
<Eye className="mr-2 h-4 w-4" />
View Server Detail
</DropdownMenuItem>
{server.docker === 'true' && (
<DropdownMenuItem onClick={() => handleViewContainers(server.id)}>
<Activity className="mr-2 h-4 w-4" />
Container Monitoring
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => handleEdit(server.id)}>
<Edit className="mr-2 h-4 w-4" />
Edit Server
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDelete(server)}
className="text-red-600 focus:text-red-600"
>
<Trash2 className="mr-2 h-4 w-4" />
Delete Server
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
)}
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => handlePauseResume(server)}
disabled={isProcessing}
>
{isPaused ? (
<>
<Play className="mr-2 h-4 w-4" />
Resume Monitoring
</>
) : (
<>
<Pause className="mr-2 h-4 w-4" />
Pause Monitoring
</>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => handleEdit(server)}>
<Edit className="mr-2 h-4 w-4" />
Edit Server
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDelete(server)}
className="text-red-600 focus:text-red-600"
>
<Trash2 className="mr-2 h-4 w-4" />
Delete Server
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
)}
</CardContent>
</Card>
{/* Edit Server Dialog */}
<EditServerDialog
server={selectedServer}
open={editDialogOpen}
onOpenChange={setEditDialogOpen}
onServerUpdated={onRefresh}
/>
{/* Delete Confirmation Dialog */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent>