infinilabs · luohoufu · Dec 6, 2024 · Dec 6, 2024
diff --git a/web/src/components/Overview/Detail/Metrics/MetricLine.js b/web/src/components/Overview/Detail/Metrics/MetricLine.js
@@ -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 className={styles.chartBody}>
+      <Line {...config} />
     </div>
   );
 };
diff --git 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 (
     <div className={styles.metricChart}>
-      {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 <MetricLine {...config} key={item.key} />;
+      {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 = "";
+              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 <MetricLine {...config} key={metric.key} />
+            }}
+          />
+        )
       })}
       {renderExtraMetric ? renderExtraMetric() : null}
     </div>
   );
-};
+};
diff --git 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 <MetricLineList metrics={metrics} renderExtraMetric={renderExtraMetric}/>;
+  return <MetricLineList {...props} queryParams={queryParams} />;
 };
diff --git 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'}
           />
         </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>
 

diff --git a/web/src/components/Overview/Monitor/index.jsx b/web/src/components/Overview/Monitor/index.jsx
@@ -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}

diff --git a/web/src/pages/Platform/Overview/Cluster/Detail/Metrics.js b/web/src/pages/Platform/Overview/Cluster/Detail/Metrics.js
@@ -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']}
     />
   )
 

diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
@@ -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

diff --git a/web/src/pages/Platform/Overview/Indices/Detail/Metrics.js b/web/src/pages/Platform/Overview/Indices/Detail/Metrics.js
@@ -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",
+      ]}
     />
   )
 };
diff --git a/web/src/pages/Platform/Overview/Node/Detail/Metrics.js b/web/src/pages/Platform/Overview/Node/Detail/Metrics.js
@@ -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",
+      ]}
     />
   );
 };
diff --git a/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
@@ -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,