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

fix: optimize monitor data fetching for large time ranges in overview detail (#10) 

Co-authored-by: yaojiping <yaojiping@infini.ltd>
This commit is contained in:
yaojp123 2024-12-06 16:27:38 +08:00 committed by GitHub
parent 7dd3808942
commit eedcda0fec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 124 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/Overview/Detail/Metrics/MetricLine.js
View File

@ -48,11 +48,8 @@ export default (props) => {
},
};
return (
<div className={styles.lineWrapper}>
<div className={styles.chartTitle}>{props.title}</div>
<div className={styles.chartBody}>
<Line {...config} />
</div>
</div>
);
};

57
web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
View File

@ -3,13 +3,32 @@ import { Line } from "@ant-design/plots";
import styles from "./index.scss";
import MetricLine from "./MetricLine";
import { formatMessage } from "umi/locale";
import { useState } from "react";
import request from "@/utils/request";
import MetricChart from "@/pages/Platform/Overview/components/MetricChart";
export default ({ metrics = {}, renderExtraMetric }) => {
let newMetrics = Object.values(metrics).map((item) => {
let key = item.key;
export default (props) => {
const { action, timeRange, timezone, timeout, overview, renderExtraMetric, metrics = [], queryParams } = props
return (
<div className={styles.metricChart}>
{metrics.map((metricKey) => {
return (
<MetricChart
key={metricKey}
timezone={timezone}
timeRange={timeRange}
fetchUrl={action}
metricKey={metricKey}
title={formatMessage({id: "cluster.metrics.axis." + metricKey + ".title"})}
queryParams={queryParams}
timeout={timeout}
className={styles.lineWrapper}
formatMetric={(metric) => {
if (!metric) return metric;
let units = "";
let newData = [];
item.lines.map((line) => {
const newData = [];
(metric.lines || []).map((line) => {
let category = line.metric.label;
if (!units) {
if (line.metric.formatType.toLowerCase() == "bytes") {
@ -27,27 +46,21 @@ export default ({ metrics = {}, renderExtraMetric }) => {
});
});
});
return { key: key, data: newData, units: units, order: item.order };
});
newMetrics = newMetrics.sort((a, b) => a.order - b.order);
return (
<div className={styles.metricChart}>
{newMetrics.map((item) => {
if(["node_health", "parent_breaker", "index_health"].includes(item.key)){
return null;
}
let config = {
data: item.data,
return { ...metric, data: newData, units };
}}
customRenderChart={(metric) => {
if (!metric) return null
const config = {
data: metric.data,
xField: "x",
yField: "y",
seriesField: "category",
title: `${formatMessage({
id: "cluster.metrics.axis." + item.key + ".title",
})} ${item.units ? "(" + item.units + ")" : ""}`,
yUnits: item.units,
yUnits: metric.units,
};
return <MetricLine {...config} key={item.key} />;
return <MetricLine {...config} key={metric.key} />
}}
/>
)
})}
{renderExtraMetric ? renderExtraMetric() : null}
</div>

47
web/src/components/Overview/Detail/Metrics/MetricSeries.jsx
View File

@ -1,38 +1,21 @@
import React, { useMemo, useEffect } from "react";
import { ESPrefix } from "@/services/common";
import useFetch from "@/lib/hooks/use_fetch";
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
import MetricLineList from "./MetricLineList";
import { formatTimeRange } from "@/lib/elasticsearch/util";
export default ({ action, timeRange, overview, setSpinning, renderExtraMetric }) => {
export default (props) => {
const { action, bucketSize, timeRange, overview, setSpinning, renderExtraMetric, metrics = [] } = props
const queryParams = useMemo(() => {
const bounds = calculateBounds({
from: timeRange.min,
to: timeRange.max,
});
let params = {
min: bounds.min.valueOf(),
max: bounds.max.valueOf(),
};
params.overview = overview;
return params;
}, [timeRange]);
const { loading, error, value } = useFetch(
action,
{ queryParams },
[action, queryParams]
);
useEffect(() => {
setSpinning(loading);
}, [loading]);
const metrics = useMemo(() => {
const { metrics = {} } = value || {};
return metrics;
}, [value]);
return <MetricLineList metrics={metrics} renderExtraMetric={renderExtraMetric}/>;
const newParams = formatTimeRange(timeRange);
if (overview) {
newParams.overview = overview;
}
if (bucketSize) {
newParams.bucket_size = bucketSize
}
return newParams;
}, [timeRange, bucketSize]);
return <MetricLineList {...props} queryParams={queryParams} />;
};

28
web/src/components/Overview/Detail/Metrics/index.js
View File

@ -15,6 +15,7 @@ import { formatMessage } from "umi/locale";
import DatePicker from "@/common/src/DatePicker";
import { getLocale } from "umi/locale";
import { getTimezone } from "@/utils/utils";
import { TIMEOUT_CACHE_KEY } from "../../Monitor";
const { TabPane } = Tabs;
@ -26,6 +27,7 @@ export default (props) => {
linkMore,
overviews,
extra,
metrics = [],
} = props;
const [spinning, setSpinning] = useState(false);
@ -35,12 +37,14 @@ export default (props) => {
max: "now",
timeFormatter: formatter.dates(1),
},
timeInterval: '',
timeout: localStorage.getItem(TIMEOUT_CACHE_KEY) || '120s',
});
const [refresh, setRefresh] = useState({ isRefreshPaused: false });
const [timeZone, setTimeZone] = useState(() => getTimezone());
const handleTimeChange = ({ start, end }) => {
const handleTimeChange = ({ start, end, timeInterval, timeout }) => {
const bounds = calculateBounds({
from: start,
to: end,
@ -55,6 +59,8 @@ export default (props) => {
max: end,
timeFormatter: formatter.dates(intDay),
},
timeInterval: timeInterval || state.timeInterval,
timeout: timeout || state.timeout
});
setSpinning(true);
};
@ -90,23 +96,35 @@ export default (props) => {
{...refresh}
onRefreshChange={setRefresh}
onRefresh={handleTimeChange}
showTimeSetting={true}
showTimeInterval={true}
showTimeout={true}
timeout={state.timeout}
onTimeSettingChange={(timeSetting) => {
localStorage.setItem(TIMEOUT_CACHE_KEY, timeSetting.timeout)
setState({
...state,
timeInterval: timeSetting.timeInterval,
timeout: timeSetting.timeout
});
}}
timeZone={timeZone}
onTimeZoneChange={setTimeZone}
recentlyUsedRangesKey={'overview-detail'}
/>
</div>
<Button onClick={() => {
handleTimeChange({ start: state.timeRange.min, end: state.timeRange.max})
}} loading={spinning} icon={"reload"} type="primary" />
</div>
<div className={styles.metricWrapper}>
<MetricSeries
action={metricAction}
timeRange={state.timeRange}
timeZone={timeZone}
overview={1}
setSpinning={setSpinning}
renderExtraMetric={renderExtraMetric}
metrics={metrics}
{...state}
bucketSize={state.timeInterval}
/>
</div>

3
web/src/components/Overview/Monitor/index.jsx
View File

@ -39,7 +39,7 @@ const formatTimeout = (timeout) => {
return timeout
}
const TIMEOUT_CACHE_KEY = "monitor-timeout"
export const TIMEOUT_CACHE_KEY = "monitor-timeout"
const Monitor = (props) => {
const {
@ -187,7 +187,6 @@ const Monitor = (props) => {
setSpinning={setSpinning}
{...extraParams}
bucketSize={state.timeInterval}
timeout={state.timeout}
/>
)
) : null}

1
web/src/pages/Platform/Overview/Cluster/Detail/Metrics.js
View File

@ -33,6 +33,7 @@ export default (props) => {
params={{ clusterID, clusterName }}
linkMore={`/cluster/monitor/elasticsearch/${clusterID}`}
overviews={overviews}
metrics={['index_throughput', 'search_throughput', 'index_latency', 'search_latency']}
/>
)

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

@ -6,6 +6,7 @@ import IndexMetric from "../../components/index_metric";
import ClusterMetric from "../../components/cluster_metric";
import QueueMetric from "../../components/queue_metric";
import { ESPrefix } from "@/services/common";
import { SearchEngines } from "@/lib/search_engines";
const timezone = "local";
@ -19,6 +20,7 @@ export default ({
}) => {
const isVersionGTE6 = useMemo(() => {
if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
const main = selectedCluster?.version?.split('.')[0]
if (main && parseInt(main) >= 6) {
return true

6
web/src/pages/Platform/Overview/Indices/Detail/Metrics.js
View File

@ -26,6 +26,12 @@ export default (props) => {
params={{ clusterID, clusterName }}
linkMore={`/cluster/monitor/${clusterID}/indices/${indexName}?_g={"cluster_name":"${clusterName}"}`}
overviews={overviews}
metrics={[
"index_throughput",
"search_throughput",
"index_latency",
"search_latency",
]}
/>
)
};

8
web/src/pages/Platform/Overview/Node/Detail/Metrics.js
View File

@ -27,6 +27,14 @@ export default (props) => {
params={{ clusterID, clusterName }}
linkMore={`/cluster/monitor/${clusterID}/nodes/${nodeID}?_g={"cluster_name":"${clusterName}","node_name":"${nodeName}"}`}
overviews={overviews}
metrics={[
"cpu",
"jvm",
"index_throughput",
"search_throughput",
"index_latency",
"search_latency",
]}
/>
);
};

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

@ -3,6 +3,7 @@ import { Tabs } from "antd";
import NodeMetric from "../../components/node_metric";
import QueueMetric from "../../components/queue_metric";
import { formatMessage } from "umi/locale";
import { SearchEngines } from "@/lib/search_engines";
const timezone = "local";
@ -17,12 +18,13 @@ export default ({
}) => {
const isVersionGTE6 = useMemo(() => {
if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
const main = selectedCluster?.version?.split('.')[0]
if (main && parseInt(main) >= 6) {
return true
}
return false
}, [selectedCluster?.version])
}, [selectedCluster])
const [param, setParam] = useState({
show_top: false,

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

@ -34,7 +34,9 @@ export default (props) => {
queryParams,
className,
style,
formatMetric
formatMetric,
height = 200,
customRenderChart
} = props;
const [loading, setLoading] = useState(false)
@ -71,7 +73,7 @@ export default (props) => {
} else if (res && !res.error) {
const { metrics = {} } = res || {};
const metric = metrics[metricKey]
setMetric(formatMetric ? formatMetric(metric) : metric);
setMetric(formatMetric && metric ? formatMetric(metric) : metric);
}
if (firstFetchRef.current || showLoading) {
setLoading(false)
@ -142,10 +144,10 @@ export default (props) => {
};
const renderChart = () => {
if (loading) return <div style={{ height: 200 }}></div>
if (loading) return <div style={{ height }}></div>
if (error) {
return (
<div style={{ height: 200, padding: 10 }}>
<div style={{ height, padding: 10 }}>
<Alert style={{ maxHeight: '100%', overflow: 'auto', wordBreak: 'break-all'}} message={error} type="error"/>
</div>
)
@ -153,11 +155,11 @@ export default (props) => {
const axis = metric?.axis || [];
const lines = metric?.lines || [];
if (lines.every((item) => !item.data || item.data.length === 0)) {
return <Empty style={{ height: 200, margin: 0, paddingTop: 64 }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
return <Empty style={{ height, margin: 0, paddingTop: 64 }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
}
return (
<Chart
size={[, 200]}
size={[, height]}
className={styles.vizChartItem}
ref={chartRef}
>
@ -312,7 +314,7 @@ export default (props) => {
</span>
}
</div>
{renderChart()}
{customRenderChart ? customRenderChart(metric) : renderChart()}
</Spin>
</div>
);