initial project setup

frontend/src/components/SystemMetrics.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Card, Row, Col, Statistic, Progress } from 'antd';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
+
+const SystemMetrics = () => {
+  // Mock data for charts
+  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 }
+  ];
+
+  return (
+    <div>
+      <Card title="System Performance Metrics" style={{ marginBottom: 16 }}>
+        <Row gutter={16}>
+          <Col span={8}>
+            <Card size="small">
+              <Statistic title="CPU Usage (24h)" value={45.2} suffix="%" />
+              <Progress percent={45.2} showInfo={false} />
+            </Card>
+          </Col>
+          <Col span={8}>
+            <Card size="small">
+              <Statistic title="Memory Usage (24h)" value={68.5} suffix="%" />
+              <Progress percent={68.5} showInfo={false} />
+            </Card>
+          </Col>
+          <Col span={8}>
+            <Card size="small">
+              <Statistic title="Disk Usage" value={32.1} suffix="%" />
+              <Progress percent={32.1} 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;