feat: Implement instance monitoring dashboard
This commit is contained in:
Tola Leng
@@ -0,0 +1,108 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
import { useLanguage } from "@/contexts/LanguageContext";
|
||||
import { Sidebar } from "@/components/dashboard/Sidebar";
|
||||
import { Header } from "@/components/dashboard/Header";
|
||||
import { ServerStatsCards } from "@/components/servers/ServerStatsCards";
|
||||
import { ServerTable } from "@/components/servers/ServerTable";
|
||||
import { serverService } from "@/services/serverService";
|
||||
import { Server, ServerStats } from "@/types/server.types";
|
||||
import { useSidebar } from "@/contexts/SidebarContext";
|
||||
import { authService } from "@/services/authService";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
const InstanceMonitoring = () => {
|
||||
const {
|
||||
theme
|
||||
} = useTheme();
|
||||
const {
|
||||
t
|
||||
} = useLanguage();
|
||||
const {
|
||||
sidebarCollapsed,
|
||||
toggleSidebar
|
||||
} = useSidebar();
|
||||
const navigate = useNavigate();
|
||||
const [stats, setStats] = useState<ServerStats>({
|
||||
total: 0,
|
||||
online: 0,
|
||||
offline: 0,
|
||||
warning: 0
|
||||
});
|
||||
const [currentUser, setCurrentUser] = useState(authService.getCurrentUser());
|
||||
const {
|
||||
data: servers = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch
|
||||
} = useQuery({
|
||||
queryKey: ['servers'],
|
||||
queryFn: serverService.getServers,
|
||||
refetchInterval: 30000 // Refetch every 30 seconds
|
||||
});
|
||||
useEffect(() => {
|
||||
if (servers.length > 0) {
|
||||
serverService.getServerStats(servers).then(setStats);
|
||||
}
|
||||
}, [servers]);
|
||||
const handleRefresh = () => {
|
||||
refetch();
|
||||
};
|
||||
const handleLogout = () => {
|
||||
authService.logout();
|
||||
navigate('/login');
|
||||
};
|
||||
if (error) {
|
||||
return <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<Header currentUser={currentUser} onLogout={handleLogout} sidebarCollapsed={sidebarCollapsed} toggleSidebar={toggleSidebar} />
|
||||
<main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6">
|
||||
<div className="text-center max-w-md w-full">
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4">Error loading servers</h2>
|
||||
<p className="text-muted-foreground mb-4 text-sm sm:text-base">
|
||||
Unable to fetch server data. Please check your connection and try again.
|
||||
</p>
|
||||
<button onClick={handleRefresh} className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 text-sm sm:text-base">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
return <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<Header currentUser={currentUser} onLogout={handleLogout} sidebarCollapsed={sidebarCollapsed} toggleSidebar={toggleSidebar} />
|
||||
<main className="flex-1 overflow-auto">
|
||||
<div className="mx-[20px] my-[20px]">
|
||||
{/* Header Section */}
|
||||
<div className="mb-6 lg:mb-8">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
Instance Monitoring
|
||||
</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'}`}>
|
||||
Monitor and manage your server instances in real-time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards Section */}
|
||||
<div className="mb-6 lg:mb-8">
|
||||
<ServerStatsCards stats={stats} />
|
||||
</div>
|
||||
|
||||
{/* Server Table Section */}
|
||||
<div className="min-w-0">
|
||||
<ServerTable servers={servers} isLoading={isLoading} onRefresh={handleRefresh} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>;
|
||||
};
|
||||
export default InstanceMonitoring;
|
||||
@@ -0,0 +1,174 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
import { useLanguage } from "@/contexts/LanguageContext";
|
||||
import { useSidebar } from "@/contexts/SidebarContext";
|
||||
import { Sidebar } from "@/components/dashboard/Sidebar";
|
||||
import { Header } from "@/components/dashboard/Header";
|
||||
import { serverService } from "@/services/serverService";
|
||||
import { authService } from "@/services/authService";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, Server } from "lucide-react";
|
||||
import { ServerMetricsCharts } from "@/components/servers/ServerMetricsCharts";
|
||||
import { ServerMetricsOverview } from "@/components/servers/ServerMetricsOverview";
|
||||
import { ServerHistoryCharts } from "@/components/servers/ServerHistoryCharts";
|
||||
|
||||
const ServerDetail = () => {
|
||||
const { serverId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { theme } = useTheme();
|
||||
const { t } = useLanguage();
|
||||
const { sidebarCollapsed, toggleSidebar } = useSidebar();
|
||||
const [currentUser, setCurrentUser] = useState(authService.getCurrentUser());
|
||||
|
||||
console.log('ServerDetail component loaded with serverId:', serverId);
|
||||
|
||||
const {
|
||||
data: server,
|
||||
isLoading: serverLoading,
|
||||
error: serverError
|
||||
} = useQuery({
|
||||
queryKey: ['server', serverId],
|
||||
queryFn: () => serverService.getServer(serverId!),
|
||||
enabled: !!serverId
|
||||
});
|
||||
|
||||
const handleLogout = () => {
|
||||
authService.logout();
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const handleBackToServers = () => {
|
||||
navigate('/instance-monitoring');
|
||||
};
|
||||
|
||||
if (serverError) {
|
||||
console.error('Server detail error:', serverError);
|
||||
return (
|
||||
<div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<Header
|
||||
currentUser={currentUser}
|
||||
onLogout={handleLogout}
|
||||
sidebarCollapsed={sidebarCollapsed}
|
||||
toggleSidebar={toggleSidebar}
|
||||
/>
|
||||
<main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6">
|
||||
<div className="text-center max-w-md w-full">
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4">Error loading server</h2>
|
||||
<p className="text-muted-foreground mb-4 text-sm sm:text-base">
|
||||
Unable to fetch server data. Please check your connection and try again.
|
||||
</p>
|
||||
<div className="text-xs text-muted-foreground mb-4 font-mono">
|
||||
Error: {serverError?.message || 'Unknown error'}
|
||||
</div>
|
||||
<Button onClick={handleBackToServers} variant="outline" className="text-sm sm:text-base">
|
||||
Back to Servers
|
||||
</Button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (serverLoading) {
|
||||
return (
|
||||
<div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<Header
|
||||
currentUser={currentUser}
|
||||
onLogout={handleLogout}
|
||||
sidebarCollapsed={sidebarCollapsed}
|
||||
toggleSidebar={toggleSidebar}
|
||||
/>
|
||||
<main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading server details...</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<Header
|
||||
currentUser={currentUser}
|
||||
onLogout={handleLogout}
|
||||
sidebarCollapsed={sidebarCollapsed}
|
||||
toggleSidebar={toggleSidebar}
|
||||
/>
|
||||
<main className="flex-1 overflow-auto">
|
||||
<div className="mx-[20px] my-[20px]">
|
||||
{/* Header Section */}
|
||||
<div className="mb-6 lg:mb-8">
|
||||
<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="flex items-center gap-3 mb-2">
|
||||
<Button
|
||||
onClick={handleBackToServers}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Servers
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="h-8 w-8 rounded bg-primary/10 flex items-center justify-center">
|
||||
<Server className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
{server?.name || 'Server Detail'}
|
||||
</h1>
|
||||
</div>
|
||||
<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'}`}>
|
||||
Monitor server performance metrics and system health
|
||||
{server && (
|
||||
<span className="block text-xs text-muted-foreground/70 mt-1">
|
||||
{server.hostname} • {server.ip_address} • {server.os_type}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Server Overview Cards */}
|
||||
{server && (
|
||||
<div className="mb-6 lg:mb-8">
|
||||
<ServerMetricsOverview server={server} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Historical Charts Section */}
|
||||
{server && (
|
||||
<div className="mb-6 lg:mb-8">
|
||||
<ServerHistoryCharts serverId={server.id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metrics Charts Section */}
|
||||
{server && (
|
||||
<div className="min-w-0">
|
||||
<ServerMetricsCharts serverId={server.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServerDetail;
|
||||
Reference in New Issue
Block a user