feat(obs): 去掉宿主机网卡趋势,磁盘读写改按速率展示

Agent 不再采集网卡累计字节,看板与节点网络图仅保留访问日志已提供/接收。
磁盘 IO 按小时换算为 B/s 曲线,摘要为近 24 小时平均速率,并同步 Swagger。
This commit is contained in:
ryan
2026-07-18 13:17:13 +08:00
parent 55f8c9a527
commit 26057514a1
20 changed files with 87 additions and 278 deletions
@@ -7,7 +7,22 @@ import type {
NetworkTrendPoint,
} from '@/lib/services/openflare';
import { formatBytes, formatTrendHour } from './dashboard-utils';
import {
formatBytes,
formatBytesPerSecond,
formatTrendHour,
} from './dashboard-utils';
/** Backend disk points are per-hour totals; chart displays bytes/s within each hour. */
const DISK_BUCKET_SECONDS = 3600;
function diskBytesToRate(bytes: number) {
return bytes > 0 ? bytes / DISK_BUCKET_SECONDS : 0;
}
function formatDiskRate(bytesPerSecond: number) {
return formatBytesPerSecond(bytesPerSecond, 1, { zeroText: '0 B' });
}
export function NetworkDiskTrendChart({
networkPoints,
@@ -50,54 +65,32 @@ export function NetworkDiskTrendChart({
]}
/>
<TrendChart
labels={networkPoints.map((point) =>
formatTrendHour(point.bucket_started_at),
)}
height={180}
summaryScope='total'
summaryHint='近 24 小时 · 宿主机网卡'
yAxisValueFormatter={formatBytes}
series={[
{
label: '宿主机网卡入站',
color: '#a3e635',
fillColor: 'rgba(163, 230, 53, 0.12)',
variant: 'area',
values: networkPoints.map((point) => point.network_rx_bytes),
valueFormatter: formatBytes,
},
{
label: '宿主机网卡出站',
color: '#f97316',
values: networkPoints.map((point) => point.network_tx_bytes),
valueFormatter: formatBytes,
},
]}
/>
<TrendChart
labels={diskPoints.map((point) =>
formatTrendHour(point.bucket_started_at),
)}
height={180}
summaryScope='total'
summaryHint='近 24 小时 · 宿主机磁盘'
yAxisValueFormatter={formatBytes}
summaryScope='average'
summaryHint='近 24 小时 · 宿主机磁盘 · 平均速率'
yAxisValueFormatter={formatDiskRate}
series={[
{
label: '磁盘读',
color: '#a78bfa',
fillColor: 'rgba(167, 139, 250, 0.14)',
variant: 'area',
values: diskPoints.map((point) => point.disk_read_bytes),
valueFormatter: formatBytes,
values: diskPoints.map((point) =>
diskBytesToRate(point.disk_read_bytes),
),
valueFormatter: formatDiskRate,
},
{
label: '磁盘写',
color: '#fb7185',
values: diskPoints.map((point) => point.disk_write_bytes),
valueFormatter: formatBytes,
values: diskPoints.map((point) =>
diskBytesToRate(point.disk_write_bytes),
),
valueFormatter: formatDiskRate,
},
]}
/>
@@ -9,16 +9,25 @@ import {
CardTitle,
} from '@/components/ui/card';
import type { DiskIOTrendPoint } from '@/lib/services/openflare';
import { formatBytesPerSecond } from '@/lib/utils/metrics';
import {
formatBytes,
formatTrendHour,
} from '../../components/dashboard/dashboard-utils';
import { formatTrendHour } from '../../components/dashboard/dashboard-utils';
/** Backend disk points are per-hour totals; chart displays bytes/s within each hour. */
const DISK_BUCKET_SECONDS = 3600;
function diskBytesToRate(bytes: number) {
return bytes > 0 ? bytes / DISK_BUCKET_SECONDS : 0;
}
function formatDiskRate(bytesPerSecond: number) {
return formatBytesPerSecond(bytesPerSecond, 1, { zeroText: '0 B' });
}
export function DiskIOTrendChart({
points,
title = '24 小时磁盘 IO 趋势',
description = '观察磁盘读写变化,辅助判断日志放大、缓存抖动或磁盘压力。',
description = '按小时展示磁盘读写速率(B/s),辅助判断日志放大、缓存抖动或磁盘压力。',
}: {
points: DiskIOTrendPoint[];
title?: string;
@@ -35,23 +44,27 @@ export function DiskIOTrendChart({
labels={points.map((point) =>
formatTrendHour(point.bucket_started_at),
)}
summaryScope='total'
summaryHint='近 24 小时'
yAxisValueFormatter={formatBytes}
summaryScope='average'
summaryHint='近 24 小时 · 平均速率'
yAxisValueFormatter={formatDiskRate}
series={[
{
label: '磁盘读',
color: '#a78bfa',
fillColor: 'rgba(167, 139, 250, 0.14)',
variant: 'area',
values: points.map((point) => point.disk_read_bytes),
valueFormatter: formatBytes,
values: points.map((point) =>
diskBytesToRate(point.disk_read_bytes),
),
valueFormatter: formatDiskRate,
},
{
label: '磁盘写',
color: '#fb7185',
values: points.map((point) => point.disk_write_bytes),
valueFormatter: formatBytes,
values: points.map((point) =>
diskBytesToRate(point.disk_write_bytes),
),
valueFormatter: formatDiskRate,
},
]}
/>
@@ -18,7 +18,7 @@ import {
export function NetworkTrendChart({
points,
title = '24 小时网络趋势',
description = '按小时展示已提供/接收数据(访问日志)与宿主机网卡;摘要为近 24 小时总量。',
description = '按小时展示已提供/接收数据(访问日志);摘要为近 24 小时总量。',
}: {
points: NetworkTrendPoint[];
title?: string;
@@ -53,18 +53,6 @@ export function NetworkTrendChart({
values: points.map((point) => point.bytes_provided),
valueFormatter: formatBytes,
},
{
label: '宿主机网卡入站',
color: '#a3e635',
values: points.map((point) => point.network_rx_bytes),
valueFormatter: formatBytes,
},
{
label: '宿主机网卡出站',
color: '#f97316',
values: points.map((point) => point.network_tx_bytes),
valueFormatter: formatBytes,
},
]}
/>
</CardContent>
@@ -717,7 +717,7 @@ export function NodeObservability({
) : null}
<div className='grid gap-3 sm:grid-cols-2'>
<div className='rounded-lg border px-3 py-3'>
<div className='rounded-lg border px-3 py-3 sm:col-span-2'>
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
OpenResty 连接
</p>
@@ -731,15 +731,6 @@ export function NodeObservability({
</p>
</div>
</div>
<div className='rounded-lg border px-3 py-3'>
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
节点网络
</p>
<div className='mt-3 space-y-2 text-sm text-muted-foreground'>
<p>入站:{formatBytes(latestMetric.network_rx_bytes)}</p>
<p>出站:{formatBytes(latestMetric.network_tx_bytes)}</p>
</div>
</div>
</div>
<div className='grid gap-3 sm:grid-cols-2'>