-
{props.title}
-
-
-
+
+
);
};
diff --git a/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx b/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
index d4a0d501..936bdd5f 100644
--- a/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
+++ b/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
@@ -3,53 +3,66 @@ 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;
- let units = "";
- let newData = [];
- item.lines.map((line) => {
- let category = line.metric.label;
- if (!units) {
- if (line.metric.formatType.toLowerCase() == "bytes") {
- units = line.metric.formatType;
- } else {
- units = line.metric.units;
- }
- }
-
- return line.data.map((ld) => {
- newData.push({
- category: category,
- x: formatter.dateUserDefined(parseInt(ld[0])),
- y: ld[1],
- });
- });
- });
- return { key: key, data: newData, units: units, order: item.order };
- });
- newMetrics = newMetrics.sort((a, b) => a.order - b.order);
+export default (props) => {
+ const { action, timeRange, timezone, timeout, overview, renderExtraMetric, metrics = [], queryParams } = props
return (
- {newMetrics.map((item) => {
- if(["node_health", "parent_breaker", "index_health"].includes(item.key)){
- return null;
- }
- let config = {
- data: item.data,
- xField: "x",
- yField: "y",
- seriesField: "category",
- title: `${formatMessage({
- id: "cluster.metrics.axis." + item.key + ".title",
- })} ${item.units ? "(" + item.units + ")" : ""}`,
- yUnits: item.units,
- };
- return ;
+ {metrics.map((metricKey) => {
+ return (
+ {
+ if (!metric) return metric;
+ let units = "";
+ const newData = [];
+ (metric.lines || []).map((line) => {
+ let category = line.metric.label;
+ if (!units) {
+ if (line.metric.formatType.toLowerCase() == "bytes") {
+ units = line.metric.formatType;
+ } else {
+ units = line.metric.units;
+ }
+ }
+
+ return line.data.map((ld) => {
+ newData.push({
+ category: category,
+ x: formatter.dateUserDefined(parseInt(ld[0])),
+ y: ld[1],
+ });
+ });
+ });
+ return { ...metric, data: newData, units };
+ }}
+ customRenderChart={(metric) => {
+ if (!metric) return null
+ const config = {
+ data: metric.data,
+ xField: "x",
+ yField: "y",
+ seriesField: "category",
+ yUnits: metric.units,
+ };
+ return
+ }}
+ />
+ )
})}
{renderExtraMetric ? renderExtraMetric() : null}
);
-};
+};
\ No newline at end of file
diff --git a/web/src/components/Overview/Detail/Metrics/MetricSeries.jsx b/web/src/components/Overview/Detail/Metrics/MetricSeries.jsx
index a005abbe..8339b58e 100644
--- a/web/src/components/Overview/Detail/Metrics/MetricSeries.jsx
+++ b/web/src/components/Overview/Detail/Metrics/MetricSeries.jsx
@@ -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 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 { action, bucketSize, timeRange, overview, setSpinning, renderExtraMetric, metrics = [] } = props
- const metrics = useMemo(() => {
- const { metrics = {} } = value || {};
- return metrics;
- }, [value]);
+ const queryParams = useMemo(() => {
+ const newParams = formatTimeRange(timeRange);
+ if (overview) {
+ newParams.overview = overview;
+ }
+ if (bucketSize) {
+ newParams.bucket_size = bucketSize
+ }
+ return newParams;
+ }, [timeRange, bucketSize]);
- return
;
+ return ;
};
diff --git a/web/src/components/Overview/Detail/Metrics/index.js b/web/src/components/Overview/Detail/Metrics/index.js
index 43255953..64877c0a 100644
--- a/web/src/components/Overview/Detail/Metrics/index.js
+++ b/web/src/components/Overview/Detail/Metrics/index.js
@@ -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'}
/>