完成性能日志和事务日志功能
Change-Id: Iec30043bc5b954a29fa0d8d18a84c1feed2a1696
diff --git a/Merge/front/src/components/PerformanceLogs.js b/Merge/front/src/components/PerformanceLogs.js
new file mode 100644
index 0000000..bb1c244
--- /dev/null
+++ b/Merge/front/src/components/PerformanceLogs.js
@@ -0,0 +1,44 @@
+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;