80 lines
No EOL
2.8 KiB
TypeScript
80 lines
No EOL
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Server, ServerMetrics } from '../types';
|
|
import { Cpu, MemoryStick as Memory, Server as ServerIcon } from 'lucide-react';
|
|
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
|
|
|
|
interface ServerCardProps {
|
|
server: Server;
|
|
metrics: ServerMetrics[];
|
|
}
|
|
|
|
export function ServerCard({ server, metrics }: ServerCardProps) {
|
|
const lastMetric = metrics[metrics.length - 1] || { cpu_usage: 0, ram_usage: 0 };
|
|
|
|
return (
|
|
<div className="bg-gray-800 rounded-lg p-6 shadow-lg">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center space-x-3">
|
|
<ServerIcon className="text-blue-500" size={24} />
|
|
<h3 className="text-xl font-semibold text-white">{server.name}</h3>
|
|
</div>
|
|
<span className="text-gray-400 text-sm">{server.model}</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
|
<div className="bg-gray-700 p-4 rounded-lg">
|
|
<div className="flex items-center space-x-2 mb-2">
|
|
<Cpu className="text-green-500" size={20} />
|
|
<span className="text-gray-300">CPU</span>
|
|
</div>
|
|
<p className="text-white font-semibold">{server.cpu_model}</p>
|
|
<p className="text-blue-400 mt-2">{lastMetric.cpu_usage.toFixed(1)}% Usage</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-700 p-4 rounded-lg">
|
|
<div className="flex items-center space-x-2 mb-2">
|
|
<Memory className="text-purple-500" size={20} />
|
|
<span className="text-gray-300">Memory</span>
|
|
</div>
|
|
<p className="text-white font-semibold">{server.ram_gb} GB</p>
|
|
<p className="text-blue-400 mt-2">{lastMetric.ram_usage.toFixed(1)}% Usage</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-40">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={metrics}>
|
|
<XAxis
|
|
dataKey="timestamp"
|
|
stroke="#4B5563"
|
|
tickFormatter={(value) => new Date(value).toLocaleTimeString()}
|
|
/>
|
|
<YAxis stroke="#4B5563" />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: '#1F2937',
|
|
border: 'none',
|
|
borderRadius: '0.5rem',
|
|
color: '#F3F4F6'
|
|
}}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="cpu_usage"
|
|
stroke="#10B981"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="ram_usage"
|
|
stroke="#8B5CF6"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |