Fix: Server Historical Performance chart improvement
Fix: Improve sidebar collapse/expand performance
This commit is contained in:
Tola Leng
@@ -1,4 +1,3 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
@@ -10,8 +9,7 @@ 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, Database } from "lucide-react";
|
||||
import { ServerMetricsCharts } from "@/components/servers/ServerMetricsCharts";
|
||||
import { ArrowLeft, Server } from "lucide-react";
|
||||
import { ServerMetricsOverview } from "@/components/servers/ServerMetricsOverview";
|
||||
import { ServerHistoryCharts } from "@/components/servers/ServerHistoryCharts";
|
||||
import { ServerSystemInfoCard } from "@/components/servers/ServerSystemInfoCard";
|
||||
@@ -24,7 +22,7 @@ const ServerDetail = () => {
|
||||
const { sidebarCollapsed, toggleSidebar } = useSidebar();
|
||||
const [currentUser, setCurrentUser] = useState(authService.getCurrentUser());
|
||||
|
||||
//console.log('ServerDetail component loaded with serverId:', serverId);
|
||||
console.log('ServerDetail component loaded with serverId:', serverId);
|
||||
|
||||
const {
|
||||
data: server,
|
||||
@@ -36,6 +34,70 @@ const ServerDetail = () => {
|
||||
enabled: !!serverId
|
||||
});
|
||||
|
||||
const getOSLogo = (server: any) => {
|
||||
if (!server) return null;
|
||||
|
||||
// Parse system_info if it's a string, but handle both JSON and plain text
|
||||
let systemInfo: any = {};
|
||||
let systemInfoText = '';
|
||||
|
||||
if (server.system_info) {
|
||||
if (typeof server.system_info === 'string') {
|
||||
// Try to parse as JSON first
|
||||
try {
|
||||
systemInfo = JSON.parse(server.system_info);
|
||||
} catch (error) {
|
||||
// If JSON parsing fails, treat it as plain text
|
||||
console.log('system_info is plain text:', server.system_info);
|
||||
systemInfoText = server.system_info.toLowerCase();
|
||||
}
|
||||
} else {
|
||||
systemInfo = server.system_info;
|
||||
}
|
||||
}
|
||||
|
||||
// Check system_info (both JSON and plain text), then fallback to os_type
|
||||
const osFromJson = systemInfo.OSName || '';
|
||||
const osFromText = systemInfoText;
|
||||
const osFromType = server.os_type || '';
|
||||
|
||||
// Combine all OS information for detection
|
||||
const combinedOSInfo = `${osFromJson} ${osFromText} ${osFromType}`.toLowerCase();
|
||||
|
||||
console.log('OS detection info:', { osFromJson, osFromText, osFromType, combinedOSInfo });
|
||||
|
||||
// Check for specific OS distributions first (most specific to least specific)
|
||||
if (combinedOSInfo.includes('ubuntu')) {
|
||||
return '/upload/os/ubuntu.png';
|
||||
} else if (combinedOSInfo.includes('debian')) {
|
||||
return '/upload/os/debian.png';
|
||||
} else if (combinedOSInfo.includes('centos')) {
|
||||
return '/upload/os/centos.png';
|
||||
} else if (combinedOSInfo.includes('rhel') || combinedOSInfo.includes('red hat')) {
|
||||
return '/upload/os/rhel.png';
|
||||
} else if (combinedOSInfo.includes('fedora')) {
|
||||
return '/upload/os/fedora.png';
|
||||
} else if (combinedOSInfo.includes('suse') || combinedOSInfo.includes('opensuse')) {
|
||||
return '/upload/os/suse.png';
|
||||
} else if (combinedOSInfo.includes('arch')) {
|
||||
return '/upload/os/arch.png';
|
||||
} else if (combinedOSInfo.includes('alpine')) {
|
||||
return '/upload/os/alpine.png';
|
||||
} else if (combinedOSInfo.includes('windows')) {
|
||||
return '/upload/os/windows.png';
|
||||
} else if (combinedOSInfo.includes('macos') || combinedOSInfo.includes('darwin') || combinedOSInfo.includes('mac os')) {
|
||||
return '/upload/os/macos.png';
|
||||
} else if (combinedOSInfo.includes('freebsd')) {
|
||||
return '/upload/os/freebsd.png';
|
||||
} else if (combinedOSInfo.includes('linux') || combinedOSInfo.includes('gnu')) {
|
||||
// Default to linux.png for any Linux-based system that doesn't match specific distributions
|
||||
return '/upload/os/linux.png';
|
||||
}
|
||||
|
||||
// Final fallback - if we can't determine the OS, default to linux.png
|
||||
return '/upload/os/linux.png';
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
authService.logout();
|
||||
navigate('/login');
|
||||
@@ -46,7 +108,6 @@ const ServerDetail = () => {
|
||||
};
|
||||
|
||||
if (serverError) {
|
||||
// console.error('Server detail error:', serverError);
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background text-foreground">
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
@@ -101,7 +162,7 @@ const ServerDetail = () => {
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background text-foreground">
|
||||
<Sidebar collapsed={sidebarCollapsed} />
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<Header
|
||||
currentUser={currentUser}
|
||||
onLogout={handleLogout}
|
||||
@@ -126,24 +187,32 @@ const ServerDetail = () => {
|
||||
</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">
|
||||
<Database className="h-4 w-4 text-primary" />
|
||||
<div className="h-12 w-12 rounded bg-primary/10 flex items-center justify-center p-2">
|
||||
{server && getOSLogo(server) ? (
|
||||
<img
|
||||
src={getOSLogo(server)}
|
||||
alt="OS Logo"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<Server className="h-6 w-6 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'}`}>
|
||||
<p className="text-muted-foreground mt-1 sm:mt-2 text-sm sm:text-base">
|
||||
Monitor server performance metrics and system health
|
||||
{server && (
|
||||
<span className="block text-xs text-foreground/80 mt-1">
|
||||
<span className="block text-xs text-muted-foreground/70 mt-1">
|
||||
{server.hostname} • {server.ip_address} • {server.os_type}
|
||||
</span>
|
||||
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{/* System Info Card */}
|
||||
|
||||
{/* System Info Card */}
|
||||
{server && (
|
||||
<div className="flex-shrink-0">
|
||||
<ServerSystemInfoCard server={server} />
|
||||
@@ -159,17 +228,10 @@ const ServerDetail = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Historical Charts Section */}
|
||||
{server && (
|
||||
<div className="mb-6 lg:mb-8">
|
||||
<ServerHistoryCharts serverId={server.id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metrics Charts Section */}
|
||||
{/* Historical Charts Section - Single comprehensive section */}
|
||||
{server && (
|
||||
<div className="min-w-0">
|
||||
<ServerMetricsCharts serverId={server.id} />
|
||||
<ServerHistoryCharts serverId={server.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user