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

Refactor: Make instance monitoring page responsive

Browse Source 
- Make the Instance Monitoring page and Server Table List fully responsive across the whole page.
This commit is contained in:
Tola Leng
2025-07-18 22:01:26 +07:00
parent 868832f5ba
commit 63d63a908a
2 changed files with 179 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/servers/ServerTable.tsx
+169 -162
View File
@@ -149,11 +149,11 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
if (isLoading) { if (isLoading) {
return ( return (
<Card> <Card className="flex-1 flex flex-col">
<CardHeader> <CardHeader className="flex-shrink-0">
<CardTitle>Servers</CardTitle> <CardTitle>Servers</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="flex-1 flex items-center justify-center">
<div className="flex items-center justify-center h-32"> <div className="flex items-center justify-center h-32">
<RefreshCw className="h-6 w-6 animate-spin" /> <RefreshCw className="h-6 w-6 animate-spin" />
<span className="ml-2">Loading servers...</span> <span className="ml-2">Loading servers...</span>
@@ -165,8 +165,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
return ( return (
<> <>
<Card> <Card className="flex-1 flex flex-col min-h-0">
<CardHeader> <CardHeader className="flex-shrink-0">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<CardTitle className="text-xl font-semibold">Servers</CardTitle> <CardTitle className="text-xl font-semibold">Servers</CardTitle>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -185,173 +185,180 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="flex-1 flex flex-col min-h-0 p-0">
{filteredServers.length === 0 ? ( {filteredServers.length === 0 ? (
<div className="text-center py-8"> <div className="flex-1 flex items-center justify-center p-8">
<p className="text-muted-foreground">No servers found</p> <p className="text-muted-foreground">No servers found</p>
</div> </div>
) : ( ) : (
<div className="rounded-md border overflow-x-auto"> <div className="flex-1 flex flex-col min-h-0">
<Table> <div className="flex-1 overflow-auto border-t">
<TableHeader> <Table>
<TableRow> <TableHeader className="sticky top-0 bg-background z-10">
<TableHead>Name</TableHead> <TableRow>
<TableHead>Status</TableHead> <TableHead className="w-[150px] min-w-[120px]">Name</TableHead>
<TableHead>OS</TableHead> <TableHead className="w-[100px] min-w-[80px]">Status</TableHead>
<TableHead>IP Address</TableHead> <TableHead className="w-[100px] min-w-[80px]">OS</TableHead>
<TableHead>CPU</TableHead> <TableHead className="w-[120px] min-w-[100px]">IP Address</TableHead>
<TableHead>Memory</TableHead> <TableHead className="w-[140px] min-w-[120px]">CPU</TableHead>
<TableHead>Disk</TableHead> <TableHead className="w-[140px] min-w-[120px]">Memory</TableHead>
<TableHead>Uptime</TableHead> <TableHead className="w-[140px] min-w-[120px]">Disk</TableHead>
<TableHead>Last Checked</TableHead> <TableHead className="w-[100px] min-w-[80px]">Uptime</TableHead>
<TableHead className="text-right">Actions</TableHead> <TableHead className="w-[150px] min-w-[130px]">Last Checked</TableHead>
</TableRow> <TableHead className="w-[80px] min-w-[60px] text-right">Actions</TableHead>
</TableHeader> </TableRow>
<TableBody> </TableHeader>
{filteredServers.map((server) => { <TableBody>
const cpuUsage = server.cpu_usage || 0; {filteredServers.map((server) => {
const memoryUsage = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0; const cpuUsage = server.cpu_usage || 0;
const diskUsage = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0; const memoryUsage = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0;
const isPaused = server.status === "paused"; const diskUsage = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0;
const isProcessing = pausingServers.has(server.id); const isPaused = server.status === "paused";
const isProcessing = pausingServers.has(server.id);
return ( return (
<TableRow key={server.id} className="hover:bg-muted/50"> <TableRow key={server.id} className="hover:bg-muted/50">
<TableCell> <TableCell className="font-medium">
<div> <div className="truncate max-w-[140px]" title={server.name}>
<div className="font-medium">{server.name}</div> {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">{server.os_type}</span>
</div>
</TableCell>
<TableCell>
<code className="text-sm bg-muted px-1 py-0.5 rounded">{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">{server.cpu_cores} cores</span>
</div> </div>
<Progress </TableCell>
value={cpuUsage} <TableCell>
className="h-2" <ServerStatusBadge status={server.status} />
indicatorClassName={ </TableCell>
cpuUsage > 90 ? "bg-red-500" : <TableCell>
cpuUsage > 75 ? "bg-orange-500" : <div className="flex items-center gap-2">
cpuUsage > 60 ? "bg-yellow-500" : "bg-green-500" <OSTypeIcon osType={server.os_type} />
} <span className="text-sm truncate max-w-[60px]" title={server.os_type}>
/> {server.os_type}
</div> </span>
</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>{serverService.formatBytes(server.ram_total)}</span>
</div> </div>
<Progress </TableCell>
value={memoryUsage} <TableCell>
className="h-2" <code className="text-sm bg-muted px-1 py-0.5 rounded text-xs">
indicatorClassName={ {server.ip_address}
memoryUsage > 90 ? "bg-red-500" : </code>
memoryUsage > 75 ? "bg-yellow-500" : "bg-blue-500" </TableCell>
} <TableCell>
/> <div className="space-y-1 min-w-[120px]">
</div> <div className="flex justify-between text-sm">
</TableCell> <span>{cpuUsage.toFixed(1)}%</span>
<TableCell> <span className="text-muted-foreground text-xs">{server.cpu_cores} cores</span>
<div className="space-y-1 min-w-[120px]"> </div>
<div className="flex justify-between text-sm"> <Progress
<span className="text-muted-foreground">{diskUsage.toFixed(1)}%</span> value={cpuUsage}
<span>{serverService.formatBytes(server.disk_total)}</span> className="h-2"
indicatorClassName={
cpuUsage > 90 ? "bg-red-500" :
cpuUsage > 75 ? "bg-orange-500" :
cpuUsage > 60 ? "bg-yellow-500" : "bg-green-500"
}
/>
</div> </div>
<Progress </TableCell>
value={diskUsage} <TableCell>
className="h-2" <div className="space-y-1 min-w-[120px]">
indicatorClassName={ <div className="flex justify-between text-sm">
diskUsage > 95 ? "bg-red-500" : <span className="text-muted-foreground">{memoryUsage.toFixed(1)}%</span>
diskUsage > 85 ? "bg-yellow-500" : "bg-orange-500" <span className="text-xs">{serverService.formatBytes(server.ram_total)}</span>
} </div>
/> <Progress
</div> value={memoryUsage}
</TableCell> className="h-2"
<TableCell> indicatorClassName={
<div className="text-sm">{server.uptime}</div> memoryUsage > 90 ? "bg-red-500" :
</TableCell> memoryUsage > 75 ? "bg-yellow-500" : "bg-blue-500"
}
<TableCell> />
<div className="text-sm text-muted-foreground"> </div>
{new Date(server.last_checked).toLocaleString()} </TableCell>
</div> <TableCell>
</TableCell> <div className="space-y-1 min-w-[120px]">
<TableCell className="text-right"> <div className="flex justify-between text-sm">
<DropdownMenu> <span className="text-muted-foreground">{diskUsage.toFixed(1)}%</span>
<DropdownMenuTrigger asChild> <span className="text-xs">{serverService.formatBytes(server.disk_total)}</span>
<Button variant="ghost" className="h-8 w-8 p-0" disabled={isProcessing}> </div>
<span className="sr-only">Open menu</span> <Progress
{isProcessing ? ( value={diskUsage}
<RefreshCw className="h-4 w-4 animate-spin" /> className="h-2"
) : ( indicatorClassName={
<MoreHorizontal className="h-4 w-4" /> diskUsage > 95 ? "bg-red-500" :
)} diskUsage > 85 ? "bg-yellow-500" : "bg-orange-500"
</Button> }
</DropdownMenuTrigger> />
<DropdownMenuContent align="end" className="w-[200px]"> </div>
<DropdownMenuItem onClick={() => handleViewDetails(server.id)}> </TableCell>
<Eye className="mr-2 h-4 w-4" /> <TableCell>
View Server Detail <div className="text-sm truncate max-w-[80px]" title={server.uptime}>
</DropdownMenuItem> {server.uptime}
{server.docker === 'true' && ( </div>
<DropdownMenuItem onClick={() => handleViewContainers(server.id)}> </TableCell>
<Activity className="mr-2 h-4 w-4" /> <TableCell>
Container Monitoring <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> </DropdownMenuItem>
)} {server.docker === 'true' && (
<DropdownMenuSeparator /> <DropdownMenuItem onClick={() => handleViewContainers(server.id)}>
<DropdownMenuItem <Activity className="mr-2 h-4 w-4" />
onClick={() => handlePauseResume(server)} Container Monitoring
disabled={isProcessing} </DropdownMenuItem>
>
{isPaused ? (
<>
<Play className="mr-2 h-4 w-4" />
Resume Monitoring
</>
) : (
<>
<Pause className="mr-2 h-4 w-4" />
Pause Monitoring
</>
)} )}
</DropdownMenuItem> <DropdownMenuSeparator />
<DropdownMenuSeparator /> <DropdownMenuItem
<DropdownMenuItem onClick={() => handleEdit(server.id)}> onClick={() => handlePauseResume(server)}
<Edit className="mr-2 h-4 w-4" /> disabled={isProcessing}
Edit Server >
</DropdownMenuItem> {isPaused ? (
<DropdownMenuItem <>
onClick={() => handleDelete(server)} <Play className="mr-2 h-4 w-4" />
className="text-red-600 focus:text-red-600" Resume Monitoring
> </>
<Trash2 className="mr-2 h-4 w-4" /> ) : (
Delete Server <>
</DropdownMenuItem> <Pause className="mr-2 h-4 w-4" />
</DropdownMenuContent> Pause Monitoring
</DropdownMenu> </>
</TableCell> )}
</TableRow> </DropdownMenuItem>
); <DropdownMenuSeparator />
})} <DropdownMenuItem onClick={() => handleEdit(server.id)}>
</TableBody> <Edit className="mr-2 h-4 w-4" />
</Table> 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>
</div> </div>
)} )}
</CardContent> </CardContent>
application/src/pages/InstanceMonitoring.tsx
+10 -10
View File
@@ -61,7 +61,7 @@ const InstanceMonitoring = () => {
return ( return (
<div className="flex h-screen overflow-hidden bg-background text-foreground"> <div className="flex h-screen overflow-hidden bg-background text-foreground">
<Sidebar collapsed={sidebarCollapsed} /> <Sidebar collapsed={sidebarCollapsed} />
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1 min-w-0">
<Header <Header
currentUser={currentUser} currentUser={currentUser}
onLogout={handleLogout} onLogout={handleLogout}
@@ -90,7 +90,7 @@ const InstanceMonitoring = () => {
return ( return (
<div className="flex h-screen overflow-hidden bg-background text-foreground"> <div className="flex h-screen overflow-hidden bg-background text-foreground">
<Sidebar collapsed={sidebarCollapsed} /> <Sidebar collapsed={sidebarCollapsed} />
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1 min-w-0">
<Header <Header
currentUser={currentUser} currentUser={currentUser}
onLogout={handleLogout} onLogout={handleLogout}
@@ -98,19 +98,19 @@ const InstanceMonitoring = () => {
toggleSidebar={toggleSidebar} toggleSidebar={toggleSidebar}
/> />
<main className="flex-1 overflow-auto"> <main className="flex-1 overflow-auto">
<div className="mx-[20px] my-[20px]"> <div className="h-full flex flex-col p-4 sm:p-6 lg:p-8 space-y-6">
{/* Header Section */} {/* Header Section */}
<div className="mb-6 lg:mb-8"> <div className="flex-shrink-0">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h1 className="text-2xl font-bold text-foreground"> <h1 className="text-2xl lg:text-3xl font-bold text-foreground">
Instance Monitoring Instance Monitoring
</h1> </h1>
<p className={`text-muted-foreground mt-1 sm:mt-2 transition-all duration-300 ${sidebarCollapsed ? 'text-base sm:text-lg' : 'text-sm sm:text-base'}`}> <p className="text-muted-foreground mt-1 sm:mt-2 text-sm sm:text-base lg:text-lg">
Monitor and manage your server instances in real-time Monitor and manage your server instances in real-time
</p> </p>
</div> </div>
<Button onClick={() => setAddDialogOpen(true)}> <Button onClick={() => setAddDialogOpen(true)} className="flex-shrink-0">
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Add Server Agent Add Server Agent
</Button> </Button>
@@ -118,12 +118,12 @@ const InstanceMonitoring = () => {
</div> </div>
{/* Stats Cards Section */} {/* Stats Cards Section */}
<div className="mb-6 lg:mb-8"> <div className="flex-shrink-0">
<ServerStatsCards stats={stats} /> <ServerStatsCards stats={stats} />
</div> </div>
{/* Server Table Section */} {/* Server Table Section - This will take remaining space */}
<div className="min-w-0"> <div className="flex-1 min-h-0 flex flex-col">
<ServerTable servers={servers} isLoading={isLoading} onRefresh={handleRefresh} /> <ServerTable servers={servers} isLoading={isLoading} onRefresh={handleRefresh} />
</div> </div>
</div> </div>