| 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; |