134 lines
4.4 KiB
JavaScript
134 lines
4.4 KiB
JavaScript
import React from 'react';
|
|
import { Card, Row, Col, Statistic, Progress, Alert } from 'antd';
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
|
|
import { useSystemData } from '../hooks/useServiceStatus';
|
|
|
|
const SystemMetrics = () => {
|
|
const { systemStats, loading, error } = useSystemData();
|
|
|
|
// Mock data for charts (fallback when services are unavailable)
|
|
const cpuData = [
|
|
{ time: '00:00', cpu: 25 },
|
|
{ time: '04:00', cpu: 30 },
|
|
{ time: '08:00', cpu: 45 },
|
|
{ time: '12:00', cpu: 60 },
|
|
{ time: '16:00', cpu: 55 },
|
|
{ time: '20:00', cpu: 40 },
|
|
{ time: '24:00', cpu: 35 }
|
|
];
|
|
|
|
const memoryData = [
|
|
{ time: '00:00', memory: 2.1 },
|
|
{ time: '04:00', memory: 2.3 },
|
|
{ time: '08:00', memory: 2.8 },
|
|
{ time: '12:00', memory: 3.2 },
|
|
{ time: '16:00', memory: 3.0 },
|
|
{ time: '20:00', memory: 2.7 },
|
|
{ time: '24:00', memory: 2.4 }
|
|
];
|
|
|
|
const networkData = [
|
|
{ time: '00:00', in: 5, out: 3 },
|
|
{ time: '04:00', in: 8, out: 4 },
|
|
{ time: '08:00', in: 15, out: 8 },
|
|
{ time: '12:00', in: 20, out: 12 },
|
|
{ time: '16:00', in: 18, out: 10 },
|
|
{ time: '20:00', in: 12, out: 7 },
|
|
{ time: '24:00', in: 6, out: 4 }
|
|
];
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card title="System Performance Metrics">
|
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
|
Loading metrics...
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{error && (
|
|
<Alert
|
|
message="Metrics Unavailable"
|
|
description="Real-time metrics are not available. Showing sample data."
|
|
type="warning"
|
|
style={{ marginBottom: 16 }}
|
|
/>
|
|
)}
|
|
|
|
<Card title="System Performance Metrics" style={{ marginBottom: 16 }}>
|
|
<Row gutter={16}>
|
|
<Col span={8}>
|
|
<Card size="small">
|
|
<Statistic title="CPU Usage (24h)" value={systemStats.cpu || 0} suffix="%" />
|
|
<Progress percent={systemStats.cpu || 0} showInfo={false} />
|
|
</Card>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Card size="small">
|
|
<Statistic title="Memory Usage (24h)" value={systemStats.memory || 0} suffix="%" />
|
|
<Progress percent={systemStats.memory || 0} showInfo={false} />
|
|
</Card>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Card size="small">
|
|
<Statistic title="Disk Usage" value={systemStats.disk || 0} suffix="%" />
|
|
<Progress percent={systemStats.disk || 0} showInfo={false} />
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
|
|
<Row gutter={16}>
|
|
<Col span={12}>
|
|
<Card title="CPU Usage Over Time">
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<AreaChart data={cpuData}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="time" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Area type="monotone" dataKey="cpu" stroke="#1890ff" fill="#1890ff" fillOpacity={0.3} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Card title="Memory Usage Over Time">
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<LineChart data={memoryData}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="time" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Line type="monotone" dataKey="memory" stroke="#52c41a" strokeWidth={2} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row gutter={16} style={{ marginTop: 16 }}>
|
|
<Col span={24}>
|
|
<Card title="Network Traffic">
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<AreaChart data={networkData}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="time" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Area type="monotone" dataKey="in" stackId="1" stroke="#1890ff" fill="#1890ff" fillOpacity={0.6} />
|
|
<Area type="monotone" dataKey="out" stackId="1" stroke="#52c41a" fill="#52c41a" fillOpacity={0.6} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SystemMetrics;
|