perf: 调整负载统计时间跨度,为延迟图表添加隐藏显示全部的按钮

This commit is contained in:
Montia37
2025-09-05 17:37:39 +08:00
parent 4cb0fe3e46
commit b10f40195a
3 changed files with 33 additions and 4 deletions

View File

@@ -118,7 +118,7 @@ export const useLoadCharts = (node: NodeData | null, hours: number) => {
})); }));
let filledData; let filledData;
if (hours === 1) { if (hours <= 4) {
filledData = fillMissingTimePoints( filledData = fillMissingTimePoints(
stringifiedData, stringifiedData,
minute, minute,

View File

@@ -1,4 +1,7 @@
import { memo, useState, useMemo, useCallback, useEffect } from "react"; import { memo, useState, useMemo, useCallback, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { useIsMobile } from "@/hooks/useMobile";
import { Eye, EyeOff } from "lucide-react";
import { import {
LineChart, LineChart,
Line, Line,
@@ -35,6 +38,7 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
useConfigItem("enableConnectBreaks") useConfigItem("enableConnectBreaks")
); );
const maxPointsToRender = useConfigItem("pingChartMaxPoints") || 0; // 0表示不限制 const maxPointsToRender = useConfigItem("pingChartMaxPoints") || 0; // 0表示不限制
const isMobile = useIsMobile();
useEffect(() => { useEffect(() => {
if (pingHistory?.tasks) { if (pingHistory?.tasks) {
@@ -143,6 +147,15 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
); );
}; };
const handleToggleAll = () => {
if (!pingHistory?.tasks) return;
if (visiblePingTasks.length === pingHistory.tasks.length) {
setVisiblePingTasks([]);
} else {
setVisiblePingTasks(pingHistory.tasks.map((t) => t.id));
}
};
const sortedTasks = useMemo(() => { const sortedTasks = useMemo(() => {
if (!pingHistory?.tasks) return []; if (!pingHistory?.tasks) return [];
return [...pingHistory.tasks].sort((a, b) => a.name.localeCompare(b.name)); return [...pingHistory.tasks].sort((a, b) => a.name.localeCompare(b.name));
@@ -259,8 +272,8 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
<Card> <Card>
<CardHeader> <CardHeader>
<div className="flex justify-between items-start"> <div className="flex justify-between items-center flex-wrap">
<div className="flex items-center gap-4"> <div className="flex gap-4 flex-wrap">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Switch <Switch
id="peak-shaving" id="peak-shaving"
@@ -294,6 +307,22 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
</Tips> </Tips>
</div> </div>
</div> </div>
<div className={isMobile ? "w-full mt-2" : ""}>
<Button variant="secondary" onClick={handleToggleAll} size="sm">
{pingHistory?.tasks &&
visiblePingTasks.length === pingHistory.tasks.length ? (
<>
<EyeOff size={16} />
</>
) : (
<>
<Eye size={16} />
</>
)}
</Button>
</div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="pt-0">

View File

@@ -39,7 +39,7 @@ const InstancePage = () => {
return [ return [
{ label: "实时", hours: 0 }, { label: "实时", hours: 0 },
{ label: "1小时", hours: 1 }, { label: "1小时", hours: 1 },
{ label: "6小时", hours: 6 }, { label: "4小时", hours: 4 },
{ label: "1天", hours: 24 }, { label: "1天", hours: 24 },
{ label: "7天", hours: 168 }, { label: "7天", hours: 168 },
{ label: "30天", hours: 720 }, { label: "30天", hours: 720 },