floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add a crosshair of the same point in each chart when hover in a chart (#16) 

Co-authored-by: yaojiping <yaojiping@infini.ltd>
This commit is contained in:
yaojp123 2024-12-09 10:38:05 +08:00 committed by GitHub
parent 356f710e4a
commit 8aa77ca98c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 117 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
View File

@ -239,7 +239,7 @@ export default ({
"request_cache_miss"
]
]
]}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
<Tabs.TabPane
@ -402,7 +402,7 @@ export default ({
"force_merge_threads"
]
]
].filter((item) => !!item)}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
</Tabs>

4
web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
View File

@ -201,7 +201,7 @@ export default ({
"request_cache_miss"
]
]
]}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
<Tabs.TabPane
@ -286,7 +286,7 @@ export default ({
"force_merge_threads"
]
]
]}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
</Tabs>

14
web/src/pages/Platform/Overview/components/MetricChart.jsx
View File

@ -37,7 +37,9 @@ export default (props) => {
style,
formatMetric,
height = 200,
customRenderChart
customRenderChart,
instance,
pointerUpdate
} = props;
const [loading, setLoading] = useState(false)
@ -119,14 +121,6 @@ export default (props) => {
};
}, [isInView]);
const chartRef = useRef();
const pointerUpdate = (event) => {
if (chartRef.current) {
chartRef.current.dispatchExternalPointerEvent(event);
}
};
const handleChartBrush = ({ x }) => {
if (!x) {
return;
@ -168,7 +162,7 @@ export default (props) => {
<Chart
size={[, height]}
className={styles.vizChartItem}
ref={chartRef}
ref={instance}
>
<Settings
pointerUpdateDebounce={0}

28
web/src/pages/Platform/Overview/components/cluster_metric.jsx
View File

@ -2,7 +2,7 @@ import styles from "./Metrics.scss";
import "./node_metric.scss";
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
import MetricChart from "./MetricChart";
import { useMemo } from "react";
import { createRef, useEffect, useMemo, useRef, useState } from "react";
import { formatMessage } from "umi/locale";
import { formatTimeRange } from "@/lib/elasticsearch/util";
@ -27,12 +27,34 @@ export default (props) => {
const extra = renderExtra ? renderExtra() : null;
const [charts, setCharts] = useState([])
useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((metricKey) => {
cs[metricKey] = createRef()
})
return cs
})
}, [JSON.stringify(metrics)])
const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};
return (
<div id="cluster-metric">
<div className={styles.metricList}>
{metrics.map((metricKey, i) => (
{metrics.filter((item) => !!item).map((metricKey) => (
<MetricChart
key={metricKey}
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
timeout={timeout}

30
web/src/pages/Platform/Overview/components/index_metric.jsx
View File

@ -9,7 +9,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
import NodeSelect from "@/components/NodeSelect";
import Anchor from "@/components/Anchor";
import MetricChart from "./MetricChart";
import { useMemo } from "react";
import { createRef, useEffect, useMemo, useState } from "react";
export default (props) => {
@ -79,6 +79,30 @@ export default (props) => {
return Object.values(indices || []);
}, [indices]);
const [charts, setCharts] = useState([])
useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((item) => {
if (item[1]?.length > 0) {
item[1].forEach((metricKey) => {
cs[metricKey] = createRef()
})
}
})
return cs
})
}, [JSON.stringify(metrics)])
const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};
return (
<div id="node-metric">
{showTop ? (
@ -109,7 +133,7 @@ export default (props) => {
<div className="px-box">
<div className="px">
{metrics.map((item, i) => {
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
return (
<div key={item[0]} style={{ margin: "8px 0" }}>
<MetricContainer
@ -122,6 +146,8 @@ export default (props) => {
item[1].map((metricKey) => (
<MetricChart
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}

30
web/src/pages/Platform/Overview/components/node_metric.jsx
View File

@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
import NodeSelect from "@/components/NodeSelect";
import Anchor from "@/components/Anchor";
import MetricChart from "./MetricChart";
import { useCallback, useMemo } from "react";
import { createRef, useCallback, useEffect, useMemo, useState } from "react";
export default (props) => {
@ -94,6 +94,30 @@ export default (props) => {
});
}, [nodes]);
const [charts, setCharts] = useState([])
useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((item) => {
if (item[1]?.length > 0) {
item[1].forEach((metricKey) => {
cs[metricKey] = createRef()
})
}
})
return cs
})
}, [JSON.stringify(metrics)])
const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};
return (
<div id="node-metric">
{showTop ? (
@ -132,7 +156,7 @@ export default (props) => {
<div className="px-box">
<div className="px">
{metrics.map((item, i) => {
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
return (
<div key={item[0]} style={{ margin: "8px 0" }}>
<MetricContainer
@ -145,6 +169,8 @@ export default (props) => {
item[1].map((metricKey) => (
<MetricChart
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}

30
web/src/pages/Platform/Overview/components/queue_metric.jsx
View File

@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
import NodeSelect from "@/components/NodeSelect";
import Anchor from "@/components/Anchor";
import MetricChart from "./MetricChart";
import { useCallback, useMemo } from "react";
import { createRef, useCallback, useEffect, useMemo, useState } from "react";
export default (props) => {
@ -94,6 +94,30 @@ export default (props) => {
});
}, [nodes]);
const [charts, setCharts] = useState([])
useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((item) => {
if (item[1]?.length > 0) {
item[1].forEach((metricKey) => {
cs[metricKey] = createRef()
})
}
})
return cs
})
}, [JSON.stringify(metrics)])
const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};
return (
<div id="node-metric">
{showTop ? (
@ -132,7 +156,7 @@ export default (props) => {
<div className="px-box">
<div className="px">
{metrics.map((item, i) => {
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
return (
<div key={item[0]} style={{ margin: "8px 0" }}>
<MetricContainer
@ -145,6 +169,8 @@ export default (props) => {
item[1].map((metricKey) => (
<MetricChart
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}