fix: optimize monitor data fetching for large time ranges (#5)

* fix: adjust cluster monitor (fetch data independently, lazy load, copy request) Co-authored-by: yaojiping <[email protected]>
infinilabs · Dec 6, 2024 · d6a8e2f · d6a8e2f
1 parent 4823339
commit d6a8e2f
Show file tree

Hide file tree

Showing 20 changed files with 1,227 additions and 1,075 deletions.
diff --git a/web/src/components/Overview/Monitor/index.jsx b/web/src/components/Overview/Monitor/index.jsx
@@ -39,8 +39,11 @@ const formatTimeout = (timeout) => {
   return timeout
 }
 
+const TIMEOUT_CACHE_KEY = "monitor-timeout"
+
 const Monitor = (props) => {
   const {
+    selectedCluster,
     formatState,
     getBreadcrumbList,
     StatisticBar,
@@ -61,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,
     })
   );
@@ -104,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}
@@ -128,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,
@@ -139,16 +148,6 @@ const Monitor = (props) => {
                 recentlyUsedRangesKey={'monitor'}
               />
             </div>
-            <Button 
-              loading={spinning} 
-              icon={"reload"} 
-              type="primary"
-              onClick={() => {
-                handleTimeChange({ start: state.timeRange.min, end: state.timeRange.max, timeInterval: state.timeInterval, timeout: state.timeout})
-              }}
-            >
-              {formatMessage({ id: "form.button.refresh"})}
-            </Button>
           </div>
         </div>
 
@@ -178,6 +177,8 @@ const Monitor = (props) => {
                     pane.component
                   ) : (
                     <pane.component
+                      selectedCluster={selectedCluster}
+                      isAgent={isAgent}
                       {...state}
                       handleTimeChange={handleTimeChange}
                       setSpinning={setSpinning}

diff --git a/web/src/locales/en-US/cluster.js b/web/src/locales/en-US/cluster.js
@@ -347,4 +347,7 @@ export default {
   "cluster.providers.aliyun": "Aliyun",
   "cluster.providers.tencent-cloud": "Tencent-cloud",
   "cluster.providers.ecloud": "Ecloud",
+
+  "cluster.metrics.request.copy": "Copy request",
+  "cluster.metrics.request.copy.success": "Copy request successfully"
 };
diff --git a/web/src/locales/zh-CN/cluster.js b/web/src/locales/zh-CN/cluster.js
@@ -332,4 +332,7 @@ export default {
   "cluster.providers.aliyun": "阿里云",
   "cluster.providers.tencent-cloud": "腾讯云",
   "cluster.providers.ecloud": "移动云",
+
+  "cluster.metrics.request.copy": "复制请求",
+  "cluster.metrics.request.copy.success": "复制请求成功"
 };
diff --git a/web/src/models/global.js b/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 || "",
           };