blob: bb1c2443889cf0722d57ebecdacc5cfe9647c582 [file] [log] [blame]
import React, { useState, useEffect } from 'react';
import {
ResponsiveContainer, LineChart, Line,
XAxis, YAxis, Tooltip, CartesianGrid, Legend
} from 'recharts';
import { fetchSysCost } from '../api/posts_trm';
function PerformanceLogs({ userId }) {
const [data, setData] = useState([]);
useEffect(() => {
fetchSysCost(userId)
.then(list => setData(list))
.catch(err => console.error('fetchSysCost error:', err));
}, [userId]);
return (
<section className="dashboard-performance">
<ResponsiveContainer width="100%" height={400}>
<LineChart
data={data}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="record_time" />
<YAxis
domain={[0, 'auto']}
label={{ value: '时间 (s)', angle: -90, position: 'insideLeft' }}
tickFormatter={val => (val / 1000).toFixed(2)}
/>
<Tooltip formatter={val => (typeof val === 'number' ? (val/1000).toFixed(2) + 's' : val)} />
<Legend />
<Line type="monotone" dataKey="elapsed_time" stroke="#8884d8" name="响应时间" />
<Line type="monotone" dataKey="cpu_user" stroke="#82ca9d" name="CPU 用户时间" />
<Line type="monotone" dataKey="cpu_system" stroke="#ffc658" name="CPU 系统时间" />
<Line type="monotone" dataKey="memory_rss" stroke="#ff7300" name="内存 RSS" />
{/* 如需更多指标,可再添其他 <Line /> */}
</LineChart>
</ResponsiveContainer>
</section>
);
}
export default PerformanceLogs;