feat: add timeout to monitor

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

@@ -39,6 +39,8 @@ const formatTimeout = (timeout) => {
   return timeout
 }
 
+const TIMEOUT_CACHE_KEY = "monitor-timeout"
+
 const Monitor = (props) => {
   const {
     selectedCluster,
@@ -62,7 +64,7 @@ const Monitor = (props) => {
         timeFormatter: formatter.dates(1),
       },
       timeInterval: formatTimeInterval(param?.timeInterval),
-      timeout: formatTimeout(param?.timeout),
+      timeout: formatTimeout(param?.timeout) || localStorage.getItem(TIMEOUT_CACHE_KEY) || '120s',
       param: param,
     })
   );
@@ -105,14 +107,19 @@ const Monitor = (props) => {
 
   const breadcrumbList = getBreadcrumbList(state);
 
+  const isAgent = useMemo(() => {
+    const { monitor_configs = {} } = selectedCluster || {}
+    return monitor_configs?.node_stats?.enabled === false && monitor_configs?.index_stats?.enabled === false
+  }, [JSON.stringify(selectedCluster?.monitor_configs)])
+
   return (
     <div>
       <BreadcrumbList data={breadcrumbList} />
 
       <Card bodyStyle={{ padding: 15 }}>
         <div style={{ marginBottom: 5 }}>
           <div style={{ display: 'flex', gap: 8 }}>
-            <div style={{ flexGrow: 0, minWidth: 400 }}>
+            <div style={{ flexGrow: 0 }}>
               <DatePicker
                 locale={getLocale()}
                 start={state.timeRange.min}
@@ -129,6 +136,7 @@ const Monitor = (props) => {
                 showTimeout={true}
                 timeout={state.timeout}
                 onTimeSettingChange={(timeSetting) => {
+                  localStorage.setItem(TIMEOUT_CACHE_KEY, timeSetting.timeout)
                   setState({
                     ...state,
                     timeInterval: timeSetting.timeInterval,
@@ -170,6 +178,7 @@ const Monitor = (props) => {
                   ) : (
                     <pane.component
                       selectedCluster={selectedCluster}
+                      isAgent={isAgent}
                       {...state}
                       handleTimeChange={handleTimeChange}
                       setSpinning={setSpinning}

web/src/models/global.js

@@ -99,11 +99,7 @@ export default {
         .filter((item) => item.enabled)
         .map((item) => {
           return {
-            name: item.name,
-            id: item.id,
-            endpoint: item.endpoint,
-            host: item.host,
-            version: item.version,
+            ...item,
             distribution: item.distribution || "elasticsearch",
             cluster_uuid: item.cluster_uuid || "",
           };

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

@@ -15,6 +15,7 @@ export default ({
   timeRange,
   handleTimeChange,
   bucketSize,
+  timeout,
 }) => {
 
   const isVersionGTE6 = useMemo(() => {
@@ -58,6 +59,7 @@ export default ({
           handleTimeChange={handleTimeChange}
           fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}
           bucketSize={bucketSize}
+          timeout={timeout}
           metrics={[
             'cluster_health',
             'index_throughput', 
@@ -87,6 +89,7 @@ export default ({
           param={param}
           setParam={setParam}
           bucketSize={bucketSize}
+          timeout={timeout}
           metrics={[
               [
                   "operations",
@@ -233,6 +236,7 @@ export default ({
           param={param}
           setParam={setParam}
           bucketSize={bucketSize}
+          timeout={timeout}
           metrics={[
             [
                 "operations",
@@ -315,6 +319,7 @@ export default ({
           param={param}
           setParam={setParam}
           bucketSize={bucketSize}
+          timeout={timeout}
           metrics={[
             isVersionGTE6 ? [
                 "thread_pool_write",

web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx

@@ -8,11 +8,13 @@ export default ({
   timeRange,
   handleTimeChange,
   bucketSize,
+  timeout,
 }) => {
   return (
     <ClusterMetric
       timezone={timezone}
       timeRange={timeRange}
+      timeout={timeout}
       handleTimeChange={handleTimeChange}
       overview={1}
       fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}

web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx

@@ -10,7 +10,8 @@ export default ({
   timeRange,
   handleTimeChange,
   shardID,
-  bucketSize
+  bucketSize,
+  timeout
 }) => {
   const [param, setParam] = useState({
     show_top: false,
@@ -26,6 +27,7 @@ export default ({
       setParam={setParam}
       shardID={shardID}
       bucketSize={bucketSize}
+      timeout={timeout}
       metrics={[
         [
             "operations",

web/src/pages/Platform/Overview/Indices/Monitor/index.jsx

@@ -6,8 +6,10 @@ import { formatMessage } from "umi/locale";
 import Monitor from "@/components/Overview/Monitor";
 import StatisticBar from "./statistic_bar";
 import ShardStatisticBar from "./shard_statistic_bar";
+import { connect } from "dva";
 
-export default (props) => {
+const Page = (props) => {
+  const { clusterStatus, selectedCluster } = props;
   const {shard_id} = props.location.query;
   const panes = React.useMemo(()=>{
     const panes = [
@@ -26,6 +28,7 @@ export default (props) => {
   }
   return (
     <Monitor
+      selectedCluster={selectedCluster}
       formatState={(state) => {
         return {
           ...state,
@@ -80,3 +83,8 @@ export default (props) => {
     />
   );
 };
+
+export default connect(({ global }) => ({
+  selectedCluster: global.selectedCluster,
+  clusterStatus: global.clusterStatus,
+}))(Page);

web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx

@@ -5,12 +5,14 @@ import ClusterMetric from "../../components/cluster_metric";
 const timezone = "local";
 
 export default ({
+  isAgent,
   clusterID,
   indexName,
   timeRange,
   handleTimeChange,
   shardID,
   bucketSize,
+  timeout
 }) => {
   let url = `${ESPrefix}/${clusterID}/index/${indexName}/metrics`;
   if(shardID){
@@ -24,13 +26,15 @@ export default ({
       overview={1}
       fetchUrl={url}
       bucketSize={bucketSize}
+      timeout={timeout}
       metrics={[
         "index_health",
         "index_throughput",
         "search_throughput",
         "index_latency",
-        "search_latency"
-      ]}
+        "search_latency",
+        isAgent ? "shard_state" : undefined,
+      ].filter((item) => !!item)}
     />
   );
 }

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

@@ -13,6 +13,7 @@ export default ({
   timeRange,
   handleTimeChange,
   bucketSize,
+  timeout,
 }) => {
 
   const isVersionGTE6 = useMemo(() => {
@@ -63,6 +64,7 @@ export default ({
           param={param}
           setParam={setParam}
           bucketSize={bucketSize}
+          timeout={timeout}
           metrics={[
             [
                 "operations",
@@ -209,6 +211,7 @@ export default ({
           param={param}
           setParam={setParam}
           bucketSize={bucketSize}
+          timeout={timeout}
           metrics={[
             isVersionGTE6 ? [
                 "thread_pool_write",

web/src/pages/Platform/Overview/Node/Monitor/index.jsx

@@ -5,16 +5,18 @@ import Shards from "./shards";
 import { formatMessage } from "umi/locale";
 import Monitor from "@/components/Overview/Monitor";
 import StatisticBar from "./statistic_bar";
+import { connect } from "dva";
 
 const panes = [
   { title: "Overview", component: Overview, key: "overview" },
   { title: "Advanced", component: Advanced, key: "advanced" },
   { title: "Shards", component: Shards, key: "shards" },
 ];
-
-export default (props) => {
+const Page = (props) => {
+  const { clusterStatus, selectedCluster } = props;
   return (
     <Monitor
+      selectedCluster={selectedCluster}
       formatState={(state) => {
         return {
           ...state,
@@ -54,3 +56,8 @@ export default (props) => {
     />
   );
 };
+
+export default connect(({ global }) => ({
+  selectedCluster: global.selectedCluster,
+  clusterStatus: global.clusterStatus,
+}))(Page);

web/src/pages/Platform/Overview/Node/Monitor/overview.jsx

@@ -1,35 +1,40 @@
 import { ESPrefix } from "@/services/common";
 import StatisticBar from "./statistic_bar";
 import ClusterMetric from "../../components/cluster_metric";
+import { useMemo } from "react";
 
 const timezone = "local";
 
 export default ({
+  isAgent,
   clusterID,
   nodeID,
   timeRange,
   handleTimeChange,
   bucketSize,
+  timeout,
 }) => {
+
   return (
     <ClusterMetric
       timezone={timezone}
       timeRange={timeRange}
+      timeout={timeout}
       handleTimeChange={handleTimeChange}
       overview={1}
       fetchUrl={`${ESPrefix}/${clusterID}/node/${nodeID}/metrics`}
       bucketSize={bucketSize}
       metrics={[
         "node_health",
-        "shard_state",
         "cpu",
         "jvm",
         "index_throughput",
         "search_throughput",
         "index_latency",
         "search_latency",
-        "parent_breaker"
-      ]}
+        "parent_breaker",
+        isAgent ? "shard_state" : undefined,
+      ].filter((item) => !!item)}
     />
   );
 }