fix(dashboard): 资源趋势图移除随机模拟数据
- 无主机/无指标时不再用 Math.random 生成假曲线,改为空状态提示 - 移除随之不再使用的 avgCpu/avgMemory props,新增中英文 noData 文案
This commit is contained in:
1 parent
1ac0a34717
commit
e0cc547c8b
2 files changed
+9
-20
No files matched your search
@@ -148,8 +148,6 @@ export function Dashboard() {
|
|||||||
{/* 资源使用率趋势 — 第一行 */}
|
{/* 资源使用率趋势 — 第一行 */}
|
||||||
<div className="animate-fade-in-delay-1">
|
<div className="animate-fade-in-delay-1">
|
||||||
<ResourceUsageCard
|
<ResourceUsageCard
|
||||||
avgCpu={Number(serverStats?.avg_cpu ?? 0)}
|
|
||||||
avgMemory={Number(serverStats?.avg_memory ?? 0)}
|
|
||||||
avgDisk={Number(serverStats?.avg_disk ?? 0)}
|
avgDisk={Number(serverStats?.avg_disk ?? 0)}
|
||||||
totalCpu={Number(serverStats?.total_cpu ?? 0)}
|
totalCpu={Number(serverStats?.total_cpu ?? 0)}
|
||||||
totalMemory={Number(serverStats?.total_memory ?? 0)}
|
totalMemory={Number(serverStats?.total_memory ?? 0)}
|
||||||
|
|||||||
@@ -56,19 +56,7 @@ export function computeMonthChange( monthTrend: JsonData[]): {
|
|||||||
return { pct, label, direction };
|
return { pct, label, direction };
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateMetricsData(avgCpu: number, avgMemory: number, avgDisk: number, points = 24) {
|
// 无真实指标时不再生成模拟曲线,避免“没有主机却有波动”的误导展示 // Logan.Li
|
||||||
const data = [];
|
|
||||||
for (let i = points - 1; i >= 0; i--) {
|
|
||||||
const d = new Date(Date.now() - i * 60 * 60 * 1000);
|
|
||||||
data.push({
|
|
||||||
time: `${d.getHours().toString().padStart(2, '0')}:00`,
|
|
||||||
cpu: Number(Math.max(0, Math.min(100, avgCpu + (Math.random() - 0.5) * 15)).toFixed(1)),
|
|
||||||
memory: Number(Math.max(0, Math.min(100, avgMemory + (Math.random() - 0.5) * 10)).toFixed(1)),
|
|
||||||
disk: Number(Math.max(0, Math.min(100, avgDisk + (Math.random() - 0.5) * 5)).toFixed(1)),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildMetricsFromReal( metrics: JsonData[], avgDisk: number) {
|
function buildMetricsFromReal( metrics: JsonData[], avgDisk: number) {
|
||||||
if (!metrics || metrics.length === 0) return [];
|
if (!metrics || metrics.length === 0) return [];
|
||||||
@@ -291,8 +279,6 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: JsonData}) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function ResourceUsageCard({
|
export function ResourceUsageCard({
|
||||||
avgCpu,
|
|
||||||
avgMemory,
|
|
||||||
avgDisk,
|
avgDisk,
|
||||||
totalCpu,
|
totalCpu,
|
||||||
totalMemory,
|
totalMemory,
|
||||||
@@ -301,8 +287,6 @@ export function ResourceUsageCard({
|
|||||||
usedDisk,
|
usedDisk,
|
||||||
metrics,
|
metrics,
|
||||||
}: {
|
}: {
|
||||||
avgCpu: number;
|
|
||||||
avgMemory: number;
|
|
||||||
avgDisk: number;
|
avgDisk: number;
|
||||||
totalCpu: number;
|
totalCpu: number;
|
||||||
totalMemory: number;
|
totalMemory: number;
|
||||||
@@ -312,7 +296,6 @@ export function ResourceUsageCard({
|
|||||||
metrics?: JsonData[];
|
metrics?: JsonData[];
|
||||||
}) {
|
}) {
|
||||||
const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
|
const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
|
||||||
const data = realData.length > 0 ? realData : generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -358,6 +341,7 @@ export function ResourceUsageCard({
|
|||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
{realData.length > 0 ? (
|
||||||
<div className="h-[280px]">
|
<div className="h-[280px]">
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
<AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
<AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
||||||
@@ -385,6 +369,13 @@ export function ResourceUsageCard({
|
|||||||
</AreaChart>
|
</AreaChart>
|
||||||
</ResponsiveContainer>
|
</ResponsiveContainer>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
/* 空状态:无主机/无指标时明确提示,不再展示模拟波动 // Logan.Li */
|
||||||
|
<div className="h-[280px] flex flex-col items-center justify-center gap-2 text-[var(--dg-text-muted)]">
|
||||||
|
<Activity className="h-8 w-8 opacity-40" />
|
||||||
|
<p className="text-sm">{t('dashboard.resourceUsage.noData')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in new issue
Block a user