Skip to content

Commit f3a4e4e

Browse files
author
yaojiping
committed
fix: optimize monitor data fetching for large time ranges in overview detail
1 parent 7dd3808 commit f3a4e4e

File tree

11 files changed

+124
-93
lines changed

11 files changed

+124
-93
lines changed

‎web/src/components/Overview/Detail/Metrics/MetricLine.js

+2-5
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,8 @@ export default (props) => {
4848
},
4949
};
5050
return (
51-
<div className={styles.lineWrapper}>
52-
<div className={styles.chartTitle}>{props.title}</div>
53-
<div className={styles.chartBody}>
54-
<Line {...config} />
55-
</div>
51+
<div className={styles.chartBody}>
52+
<Line {...config} />
5653
</div>
5754
);
5855
};

‎web/src/components/Overview/Detail/Metrics/MetricLineList.jsx

+55-42
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,66 @@ import { Line } from "@ant-design/plots";
33
import styles from "./index.scss";
44
import MetricLine from "./MetricLine";
55
import { formatMessage } from "umi/locale";
6+
import { useState } from "react";
7+
import request from "@/utils/request";
8+
import MetricChart from "@/pages/Platform/Overview/components/MetricChart";
69

7-
export default ({ metrics = {}, renderExtraMetric }) => {
8-
let newMetrics = Object.values(metrics).map((item) => {
9-
let key = item.key;
10-
let units = "";
11-
let newData = [];
12-
item.lines.map((line) => {
13-
let category = line.metric.label;
14-
if (!units) {
15-
if (line.metric.formatType.toLowerCase() == "bytes") {
16-
units = line.metric.formatType;
17-
} else {
18-
units = line.metric.units;
19-
}
20-
}
21-
22-
return line.data.map((ld) => {
23-
newData.push({
24-
category: category,
25-
x: formatter.dateUserDefined(parseInt(ld[0])),
26-
y: ld[1],
27-
});
28-
});
29-
});
30-
return { key: key, data: newData, units: units, order: item.order };
31-
});
32-
newMetrics = newMetrics.sort((a, b) => a.order - b.order);
10+
export default (props) => {
11+
const { action, timeRange, timezone, timeout, overview, renderExtraMetric, metrics = [], queryParams } = props
3312

3413
return (
3514
<div className={styles.metricChart}>
36-
{newMetrics.map((item) => {
37-
if(["node_health", "parent_breaker", "index_health"].includes(item.key)){
38-
return null;
39-
}
40-
let config = {
41-
data: item.data,
42-
xField: "x",
43-
yField: "y",
44-
seriesField: "category",
45-
title: `${formatMessage({
46-
id: "cluster.metrics.axis." + item.key + ".title",
47-
})} ${item.units ? "(" + item.units + ")" : ""}`,
48-
yUnits: item.units,
49-
};
50-
return <MetricLine {...config} key={item.key} />;
15+
{metrics.map((metricKey) => {
16+
return (
17+
<MetricChart
18+
key={metricKey}
19+
timezone={timezone}
20+
timeRange={timeRange}
21+
fetchUrl={action}
22+
metricKey={metricKey}
23+
title={formatMessage({id: "cluster.metrics.axis." + metricKey + ".title"})}
24+
queryParams={queryParams}
25+
timeout={timeout}
26+
className={styles.lineWrapper}
27+
formatMetric={(metric) => {
28+
if (!metric) return metric;
29+
let units = "";
30+
const newData = [];
31+
(metric.lines || []).map((line) => {
32+
let category = line.metric.label;
33+
if (!units) {
34+
if (line.metric.formatType.toLowerCase() == "bytes") {
35+
units = line.metric.formatType;
36+
} else {
37+
units = line.metric.units;
38+
}
39+
}
40+
41+
return line.data.map((ld) => {
42+
newData.push({
43+
category: category,
44+
x: formatter.dateUserDefined(parseInt(ld[0])),
45+
y: ld[1],
46+
});
47+
});
48+
});
49+
return { ...metric, data: newData, units };
50+
}}
51+
customRenderChart={(metric) => {
52+
if (!metric) return null
53+
const config = {
54+
data: metric.data,
55+
xField: "x",
56+
yField: "y",
57+
seriesField: "category",
58+
yUnits: metric.units,
59+
};
60+
return <MetricLine {...config} key={metric.key} />
61+
}}
62+
/>
63+
)
5164
})}
5265
{renderExtraMetric ? renderExtraMetric() : null}
5366
</div>
5467
);
55-
};
68+
};

‎web/src/components/Overview/Detail/Metrics/MetricSeries.jsx

+14-31
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,21 @@
11
import React, { useMemo, useEffect } from "react";
2-
import { ESPrefix } from "@/services/common";
3-
import useFetch from "@/lib/hooks/use_fetch";
4-
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
52
import MetricLineList from "./MetricLineList";
3+
import { formatTimeRange } from "@/lib/elasticsearch/util";
64

7-
export default ({ action, timeRange, overview, setSpinning, renderExtraMetric }) => {
5+
export default (props) => {
86

9-
const queryParams = useMemo(() => {
10-
const bounds = calculateBounds({
11-
from: timeRange.min,
12-
to: timeRange.max,
13-
});
14-
let params = {
15-
min: bounds.min.valueOf(),
16-
max: bounds.max.valueOf(),
17-
};
18-
params.overview = overview;
19-
return params;
20-
}, [timeRange]);
21-
22-
const { loading, error, value } = useFetch(
23-
action,
24-
{ queryParams },
25-
[action, queryParams]
26-
);
27-
28-
useEffect(() => {
29-
setSpinning(loading);
30-
}, [loading]);
7+
const { action, bucketSize, timeRange, overview, setSpinning, renderExtraMetric, metrics = [] } = props
318

32-
const metrics = useMemo(() => {
33-
const { metrics = {} } = value || {};
34-
return metrics;
35-
}, [value]);
9+
const queryParams = useMemo(() => {
10+
const newParams = formatTimeRange(timeRange);
11+
if (overview) {
12+
newParams.overview = overview;
13+
}
14+
if (bucketSize) {
15+
newParams.bucket_size = bucketSize
16+
}
17+
return newParams;
18+
}, [timeRange, bucketSize]);
3619

37-
return <MetricLineList metrics={metrics} renderExtraMetric={renderExtraMetric}/>;
20+
return <MetricLineList {...props} queryParams={queryParams} />;
3821
};

‎web/src/components/Overview/Detail/Metrics/index.js

+23-5
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { formatMessage } from "umi/locale";
1515
import DatePicker from "@/common/src/DatePicker";
1616
import { getLocale } from "umi/locale";
1717
import { getTimezone } from "@/utils/utils";
18+
import { TIMEOUT_CACHE_KEY } from "../../Monitor";
1819

1920
const { TabPane } = Tabs;
2021

@@ -26,6 +27,7 @@ export default (props) => {
2627
linkMore,
2728
overviews,
2829
extra,
30+
metrics = [],
2931
} = props;
3032

3133
const [spinning, setSpinning] = useState(false);
@@ -35,12 +37,14 @@ export default (props) => {
3537
max: "now",
3638
timeFormatter: formatter.dates(1),
3739
},
40+
timeInterval: '',
41+
timeout: localStorage.getItem(TIMEOUT_CACHE_KEY) || '120s',
3842
});
3943

4044
const [refresh, setRefresh] = useState({ isRefreshPaused: false });
4145
const [timeZone, setTimeZone] = useState(() => getTimezone());
4246

43-
const handleTimeChange = ({ start, end }) => {
47+
const handleTimeChange = ({ start, end, timeInterval, timeout }) => {
4448
const bounds = calculateBounds({
4549
from: start,
4650
to: end,
@@ -55,6 +59,8 @@ export default (props) => {
5559
max: end,
5660
timeFormatter: formatter.dates(intDay),
5761
},
62+
timeInterval: timeInterval || state.timeInterval,
63+
timeout: timeout || state.timeout
5864
});
5965
setSpinning(true);
6066
};
@@ -90,23 +96,35 @@ export default (props) => {
9096
{...refresh}
9197
onRefreshChange={setRefresh}
9298
onRefresh={handleTimeChange}
99+
showTimeSetting={true}
100+
showTimeInterval={true}
101+
showTimeout={true}
102+
timeout={state.timeout}
103+
onTimeSettingChange={(timeSetting) => {
104+
localStorage.setItem(TIMEOUT_CACHE_KEY, timeSetting.timeout)
105+
setState({
106+
...state,
107+
timeInterval: timeSetting.timeInterval,
108+
timeout: timeSetting.timeout
109+
});
110+
}}
93111
timeZone={timeZone}
94112
onTimeZoneChange={setTimeZone}
95113
recentlyUsedRangesKey={'overview-detail'}
96114
/>
97115
</div>
98-
<Button onClick={() => {
99-
handleTimeChange({ start: state.timeRange.min, end: state.timeRange.max})
100-
}} loading={spinning} icon={"reload"} type="primary" />
101116
</div>
102117

103118
<div className={styles.metricWrapper}>
104119
<MetricSeries
105120
action={metricAction}
106-
timeRange={state.timeRange}
121+
timeZone={timeZone}
107122
overview={1}
108123
setSpinning={setSpinning}
109124
renderExtraMetric={renderExtraMetric}
125+
metrics={metrics}
126+
{...state}
127+
bucketSize={state.timeInterval}
110128
/>
111129
</div>
112130

‎web/src/components/Overview/Monitor/index.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const formatTimeout = (timeout) => {
3939
return timeout
4040
}
4141

42-
const TIMEOUT_CACHE_KEY = "monitor-timeout"
42+
export const TIMEOUT_CACHE_KEY = "monitor-timeout"
4343

4444
const Monitor = (props) => {
4545
const {
@@ -187,7 +187,6 @@ const Monitor = (props) => {
187187
setSpinning={setSpinning}
188188
{...extraParams}
189189
bucketSize={state.timeInterval}
190-
timeout={state.timeout}
191190
/>
192191
)
193192
) : null}

‎web/src/pages/Platform/Overview/Cluster/Detail/Metrics.js

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export default (props) => {
3333
params={{ clusterID, clusterName }}
3434
linkMore={`/cluster/monitor/elasticsearch/${clusterID}`}
3535
overviews={overviews}
36+
metrics={['index_throughput', 'search_throughput', 'index_latency', 'search_latency']}
3637
/>
3738
)
3839

‎web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import IndexMetric from "../../components/index_metric";
66
import ClusterMetric from "../../components/cluster_metric";
77
import QueueMetric from "../../components/queue_metric";
88
import { ESPrefix } from "@/services/common";
9+
import { SearchEngines } from "@/lib/search_engines";
910

1011
const timezone = "local";
1112

@@ -19,6 +20,7 @@ export default ({
1920
}) => {
2021

2122
const isVersionGTE6 = useMemo(() => {
23+
if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
2224
const main = selectedCluster?.version?.split('.')[0]
2325
if (main && parseInt(main) >= 6) {
2426
return true

‎web/src/pages/Platform/Overview/Indices/Detail/Metrics.js

+6
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ export default (props) => {
2626
params={{ clusterID, clusterName }}
2727
linkMore={`/cluster/monitor/${clusterID}/indices/${indexName}?_g={"cluster_name":"${clusterName}"}`}
2828
overviews={overviews}
29+
metrics={[
30+
"index_throughput",
31+
"search_throughput",
32+
"index_latency",
33+
"search_latency",
34+
]}
2935
/>
3036
)
3137
};

‎web/src/pages/Platform/Overview/Node/Detail/Metrics.js

+8
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@ export default (props) => {
2727
params={{ clusterID, clusterName }}
2828
linkMore={`/cluster/monitor/${clusterID}/nodes/${nodeID}?_g={"cluster_name":"${clusterName}","node_name":"${nodeName}"}`}
2929
overviews={overviews}
30+
metrics={[
31+
"cpu",
32+
"jvm",
33+
"index_throughput",
34+
"search_throughput",
35+
"index_latency",
36+
"search_latency",
37+
]}
3038
/>
3139
);
3240
};

‎web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Tabs } from "antd";
33
import NodeMetric from "../../components/node_metric";
44
import QueueMetric from "../../components/queue_metric";
55
import { formatMessage } from "umi/locale";
6+
import { SearchEngines } from "@/lib/search_engines";
67

78
const timezone = "local";
89

@@ -17,12 +18,13 @@ export default ({
1718
}) => {
1819

1920
const isVersionGTE6 = useMemo(() => {
21+
if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
2022
const main = selectedCluster?.version?.split('.')[0]
2123
if (main && parseInt(main) >= 6) {
2224
return true
2325
}
2426
return false
25-
}, [selectedCluster?.version])
27+
}, [selectedCluster])
2628

2729
const [param, setParam] = useState({
2830
show_top: false,

0 commit comments

Comments
 (0)