美化性能dashboard
Change-Id: I1b844ced6c2387f6e9f0806175d5c1111c3e6935
diff --git a/Merge/front/src/components/PerformanceLogs.js b/Merge/front/src/components/PerformanceLogs.js
index bb1c244..be9eb99 100644
--- a/Merge/front/src/components/PerformanceLogs.js
+++ b/Merge/front/src/components/PerformanceLogs.js
@@ -10,33 +10,83 @@
useEffect(() => {
fetchSysCost(userId)
- .then(list => setData(list))
+ .then(list => {
+ const msList = list.map(item => ({
+ ...item,
+ elapsed_time: item.elapsed_time * 1000,
+ cpu_user: item.cpu_user * 1000,
+ cpu_system: item.cpu_system * 1000,
+ memory_rss: item.memory_rss / (1024 * 1024*8), // convert bytes to MB
+ record_time_ts: new Date(item.record_time).getTime() // add numeric timestamp
+ }));
+ console.log('Converted data:', msList[0]); // debug first item
+ setData(msList);
+ })
.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>
+ {/* 响应时间图表 */}
+ <div style={{ marginBottom: '30px' }}>
+ <h3>响应时间</h3>
+ <ResponsiveContainer width="100%" height={300}>
+ <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis
+ dataKey="record_time_ts"
+ type="number"
+ domain={['dataMin', 'dataMax']}
+ tickFormatter={ts => new Date(ts).toLocaleTimeString()}
+ />
+ <YAxis domain={[0, 'auto']} label={{ value: '时间 (ms)', angle: -90, position: 'insideLeft' }} />
+ <Tooltip formatter={(val) => typeof val === 'number' ? `${val.toFixed(2)} ms` : val} />
+ <Legend />
+ <Line type="monotone" dataKey="elapsed_time" stroke="#8884d8" name="响应时间 (ms)" />
+ </LineChart>
+ </ResponsiveContainer>
+ </div>
+
+ {/* CPU时间图表 */}
+ <div style={{ marginBottom: '30px' }}>
+ <h3>CPU 使用时间</h3>
+ <ResponsiveContainer width="100%" height={300}>
+ <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis
+ dataKey="record_time_ts"
+ type="number"
+ domain={['dataMin', 'dataMax']}
+ tickFormatter={ts => new Date(ts).toLocaleTimeString()}
+ />
+ <YAxis domain={[0, 'auto']} label={{ value: '时间 (ms)', angle: -90, position: 'insideLeft' }} />
+ <Tooltip formatter={(val) => typeof val === 'number' ? `${val.toFixed(2)} ms` : val} />
+ <Legend />
+ <Line type="monotone" dataKey="cpu_user" stroke="#82ca9d" name="CPU 用户时间 (ms)" />
+ <Line type="monotone" dataKey="cpu_system" stroke="#ffc658" name="CPU 系统时间 (ms)" />
+ </LineChart>
+ </ResponsiveContainer>
+ </div>
+
+ {/* 内存图表 */}
+ <div style={{ marginBottom: '30px' }}>
+ <h3>内存使用</h3>
+ <ResponsiveContainer width="100%" height={300}>
+ <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis
+ dataKey="record_time_ts"
+ type="number"
+ domain={['dataMin', 'dataMax']}
+ tickFormatter={ts => new Date(ts).toLocaleTimeString()}
+ />
+ <YAxis domain={[0, 'auto']} label={{ value: '内存 (MB)', angle: -90, position: 'insideLeft' }} />
+ <Tooltip formatter={(val) => typeof val === 'number' ? `${val.toFixed(2)} MB` : val} />
+ <Legend />
+ <Line type="monotone" dataKey="memory_rss" stroke="#ff7300" name="内存 RSS" />
+ </LineChart>
+ </ResponsiveContainer>
+ </div>
</section>
);
}