mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-06 23:56:37 +08:00
修复仪表盘与节点详情「24 小时网络趋势」误按速率展示:改为 OpenResty 入/出站小时流量与近 24 小时总量摘要,Y 轴与 tooltip 自动换算 B/KB/MB/GB。
This commit is contained in:
@@ -1,15 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import {TrendChart} from '@/components/data/trend-chart';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {Card, CardContent, CardHeader, CardTitle,} from '@/components/ui/card';
|
||||
import type {DiskIOTrendPoint, NetworkTrendPoint} from '@/lib/services/openflare';
|
||||
|
||||
import {formatBytes, formatBytesPerSecond, formatTrendHour} from './dashboard-utils';
|
||||
import {formatBytes, formatTrendHour} from './dashboard-utils';
|
||||
|
||||
export function NetworkDiskTrendChart({
|
||||
networkPoints,
|
||||
@@ -27,7 +22,9 @@ export function NetworkDiskTrendChart({
|
||||
<TrendChart
|
||||
labels={networkPoints.map((point) => formatTrendHour(point.bucket_started_at))}
|
||||
height={180}
|
||||
yAxisValueFormatter={(value) => formatBytesPerSecond(value, 3600)}
|
||||
summaryScope="total"
|
||||
summaryHint="近 24 小时"
|
||||
yAxisValueFormatter={formatBytes}
|
||||
series={[
|
||||
{
|
||||
label: 'OpenResty 入站',
|
||||
@@ -35,13 +32,13 @@ export function NetworkDiskTrendChart({
|
||||
fillColor: 'rgba(34, 197, 94, 0.14)',
|
||||
variant: 'area',
|
||||
values: networkPoints.map((point) => point.openresty_rx_bytes),
|
||||
valueFormatter: (value) => formatBytesPerSecond(value, 3600),
|
||||
valueFormatter: formatBytes,
|
||||
},
|
||||
{
|
||||
label: 'OpenResty 出站',
|
||||
color: '#38bdf8',
|
||||
values: networkPoints.map((point) => point.openresty_tx_bytes),
|
||||
valueFormatter: (value) => formatBytesPerSecond(value, 3600),
|
||||
valueFormatter: formatBytes,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -49,6 +46,8 @@ export function NetworkDiskTrendChart({
|
||||
<TrendChart
|
||||
labels={diskPoints.map((point) => formatTrendHour(point.bucket_started_at))}
|
||||
height={180}
|
||||
summaryScope="total"
|
||||
summaryHint="近 24 小时"
|
||||
yAxisValueFormatter={formatBytes}
|
||||
series={[
|
||||
{
|
||||
@@ -70,4 +69,4 @@ export function NetworkDiskTrendChart({
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,7 +183,7 @@ export function WorldStage({
|
||||
progress: healthyRate,
|
||||
},
|
||||
{
|
||||
label: '最近窗口请求',
|
||||
label: '24小时请求',
|
||||
value: formatCompactNumber(traffic.request_count),
|
||||
hint: `QPS ${traffic.estimated_qps.toFixed(1)} · ${traffic.reported_nodes} 个节点上报`,
|
||||
icon: Activity,
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import {TrendChart} from '@/components/data/trend-chart';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
|
||||
import type {DiskIOTrendPoint} from '@/lib/services/openflare';
|
||||
|
||||
import {formatBytes, formatTrendHour} from '../../components/dashboard/dashboard-utils';
|
||||
@@ -30,6 +24,8 @@ export function DiskIOTrendChart({
|
||||
<CardContent>
|
||||
<TrendChart
|
||||
labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
|
||||
summaryScope="total"
|
||||
summaryHint="近 24 小时"
|
||||
yAxisValueFormatter={formatBytes}
|
||||
series={[
|
||||
{
|
||||
@@ -51,4 +47,4 @@ export function DiskIOTrendChart({
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import {TrendChart} from '@/components/data/trend-chart';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
|
||||
import type {NetworkTrendPoint} from '@/lib/services/openflare';
|
||||
|
||||
import {
|
||||
formatBytesPerSecond,
|
||||
formatTrendHour,
|
||||
} from '../../components/dashboard/dashboard-utils';
|
||||
import {formatBytes, formatTrendHour} from '../../components/dashboard/dashboard-utils';
|
||||
|
||||
export function NetworkTrendChart({
|
||||
points,
|
||||
title = '24 小时网络趋势',
|
||||
description = '观察 OpenResty 入站/出站吞吐的变化,辅助识别回源压力、突发流量或出口异常。',
|
||||
description = '按小时展示 OpenResty 入站/出站流量累计,摘要为近 24 小时总量。',
|
||||
}: {
|
||||
points: NetworkTrendPoint[];
|
||||
title?: string;
|
||||
@@ -33,7 +24,9 @@ export function NetworkTrendChart({
|
||||
<CardContent>
|
||||
<TrendChart
|
||||
labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
|
||||
yAxisValueFormatter={(value) => formatBytesPerSecond(value, 3600)}
|
||||
summaryScope="total"
|
||||
summaryHint="近 24 小时"
|
||||
yAxisValueFormatter={formatBytes}
|
||||
series={[
|
||||
{
|
||||
label: 'OpenResty 入站',
|
||||
@@ -41,17 +34,17 @@ export function NetworkTrendChart({
|
||||
fillColor: 'rgba(34, 197, 94, 0.14)',
|
||||
variant: 'area',
|
||||
values: points.map((point) => point.openresty_rx_bytes),
|
||||
valueFormatter: (value) => formatBytesPerSecond(value, 3600),
|
||||
valueFormatter: formatBytes,
|
||||
},
|
||||
{
|
||||
label: 'OpenResty 出站',
|
||||
color: '#38bdf8',
|
||||
values: points.map((point) => point.openresty_tx_bytes),
|
||||
valueFormatter: (value) => formatBytesPerSecond(value, 3600),
|
||||
valueFormatter: formatBytes,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user