{percentage.toFixed(1)}%
diff --git a/application/src/components/servers/ServerSystemInfoCard.tsx b/application/src/components/servers/ServerSystemInfoCard.tsx
new file mode 100644
index 0000000..893b60d
--- /dev/null
+++ b/application/src/components/servers/ServerSystemInfoCard.tsx
@@ -0,0 +1,112 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Server, Monitor, Cpu, HardDrive, DatabaseIcon, InfoIcon } from "lucide-react";
+import { Server as ServerType } from "@/types/server.types";
+
+interface ServerSystemInfoCardProps {
+ server: ServerType;
+}
+
+export function ServerSystemInfoCard({ server }: ServerSystemInfoCardProps) {
+ // Parse system_info if it's a string
+ let systemInfo: any = {};
+ if (server.system_info) {
+ try {
+ systemInfo = typeof server.system_info === 'string'
+ ? JSON.parse(server.system_info)
+ : server.system_info;
+ } catch (error) {
+ console.log('Error parsing system_info:', error);
+ }
+ }
+
+ const formatBytes = (bytes: number) => {
+ if (bytes === 0) return '0 Bytes';
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+ };
+
+ const formatUptime = (uptimeSeconds: string | number) => {
+ const seconds = typeof uptimeSeconds === 'string' ? parseInt(uptimeSeconds) : uptimeSeconds;
+ const days = Math.floor(seconds / 86400);
+ const hours = Math.floor((seconds % 86400) / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+
+ if (days > 0) return `${days}d ${hours}h`;
+ if (hours > 0) return `${hours}h ${minutes}m`;
+ return `${minutes}m`;
+ };
+
+ // Format the detailed system info string
+ const getDetailedSystemInfo = () => {
+ if (typeof server.system_info === 'string' && server.system_info.includes('|')) {
+ // If system_info is already in the detailed format, return it
+ return server.system_info;
+ }
+
+ // Otherwise, build the detailed string from available data
+ const parts = [];
+
+ // Basic server info
+ parts.push(server.hostname || 'Unknown');
+ parts.push(server.ip_address || 'Unknown IP');
+ parts.push(server.os_type || 'Unknown OS');
+
+ // Parse additional info from system_info if available
+ if (systemInfo.OSName) {
+ parts.push(systemInfo.OSName + (systemInfo.OSVersion ? ` ${systemInfo.OSVersion}` : ''));
+ }
+
+ if (systemInfo.Architecture) {
+ parts.push(`| ${systemInfo.Architecture}`);
+ }
+
+ if (systemInfo.KernelVersion) {
+ parts.push(`| Kernel: ${systemInfo.KernelVersion}`);
+ }
+
+ if (systemInfo.CPUModel) {
+ parts.push(`| CPU: ${systemInfo.CPUModel} (${server.cpu_cores || 0} cores)`);
+ } else if (server.cpu_cores) {
+ parts.push(`| CPU: ${server.cpu_cores} cores`);
+ }
+
+ if (server.ram_total) {
+ parts.push(`| RAM: ${formatBytes(server.ram_total)}`);
+ }
+
+ if (systemInfo.GoVersion) {
+ parts.push(`| Go ${systemInfo.GoVersion}`);
+ }
+
+ if (systemInfo.IPAddress && systemInfo.IPAddress !== server.ip_address) {
+ parts.push(`| IP: ${systemInfo.IPAddress}`);
+ }
+
+ // Check for Docker info
+ const dockerInfo = server.docker || systemInfo.Docker;
+ if (dockerInfo !== undefined) {
+ parts.push(`| Docker: ${dockerInfo}`);
+ }
+
+ return parts.join(' • ').replace(/• \|/g, '|');
+ };
+
+ return (
+
+
+
+
+
+
+
System Information
+
+ {getDetailedSystemInfo()}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/application/src/pages/ServerDetail.tsx b/application/src/pages/ServerDetail.tsx
index 4e7fdd1..6522f3a 100644
--- a/application/src/pages/ServerDetail.tsx
+++ b/application/src/pages/ServerDetail.tsx
@@ -14,6 +14,7 @@ import { ArrowLeft, Server, Database } from "lucide-react";
import { ServerMetricsCharts } from "@/components/servers/ServerMetricsCharts";
import { ServerMetricsOverview } from "@/components/servers/ServerMetricsOverview";
import { ServerHistoryCharts } from "@/components/servers/ServerHistoryCharts";
+import { ServerSystemInfoCard } from "@/components/servers/ServerSystemInfoCard";
const ServerDetail = () => {
const { serverId } = useParams();
@@ -136,14 +137,18 @@ const ServerDetail = () => {
Monitor server performance metrics and system health
{server && (
- {server.hostname} • {server.ip_address} • {server.os_type} • {server.system_info}
+ {server.hostname} • {server.ip_address} • {server.os_type}
)}
-
-