mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-09 00:56:37 +08:00
fix(wavelet): 趋势图组件支持可配置标题与描述
便于节点详情页复用请求与容量趋势图。
This commit is contained in:
@@ -12,14 +12,20 @@ import type {CapacityTrendPoint} from '@/lib/services/openflare';
|
|||||||
|
|
||||||
import {formatPercent, formatTrendHour} from './dashboard-utils';
|
import {formatPercent, formatTrendHour} from './dashboard-utils';
|
||||||
|
|
||||||
export function CapacityTrendChart({points}: {points: CapacityTrendPoint[]}) {
|
export function CapacityTrendChart({
|
||||||
|
points,
|
||||||
|
title = '24 小时容量趋势',
|
||||||
|
description = '按小时聚合 CPU 与内存使用率,判断整体容量是否持续紧张。',
|
||||||
|
}: {
|
||||||
|
points: CapacityTrendPoint[];
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<Card className="border-dashed shadow-none">
|
<Card className="border-dashed shadow-none">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-sm font-semibold">24 小时容量趋势</CardTitle>
|
<CardTitle className="text-sm font-semibold">{title}</CardTitle>
|
||||||
<CardDescription className="text-xs">
|
<CardDescription className="text-xs">{description}</CardDescription>
|
||||||
按小时聚合 CPU 与内存使用率,判断整体容量是否持续紧张。
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<TrendChart
|
<TrendChart
|
||||||
|
|||||||
@@ -12,14 +12,20 @@ import type {TrafficTrendPoint} from '@/lib/services/openflare';
|
|||||||
|
|
||||||
import {formatTrendHour} from './dashboard-utils';
|
import {formatTrendHour} from './dashboard-utils';
|
||||||
|
|
||||||
export function TrafficTrendChart({points}: {points: TrafficTrendPoint[]}) {
|
export function TrafficTrendChart({
|
||||||
|
points,
|
||||||
|
title = '24 小时请求趋势',
|
||||||
|
description = '观察整体请求量和错误量是否出现异常抬升。',
|
||||||
|
}: {
|
||||||
|
points: TrafficTrendPoint[];
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<Card className="border-dashed shadow-none">
|
<Card className="border-dashed shadow-none">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-sm font-semibold">24 小时请求趋势</CardTitle>
|
<CardTitle className="text-sm font-semibold">{title}</CardTitle>
|
||||||
<CardDescription className="text-xs">
|
<CardDescription className="text-xs">{description}</CardDescription>
|
||||||
观察整体请求量和错误量是否出现异常抬升。
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<TrendChart
|
<TrendChart
|
||||||
|
|||||||
Reference in New Issue
Block a user