fix: add loading to monitor statistic (#11)

yaojp123 · yaojiping · web-flow · commit 8b176ab8ed8e · 2024-12-07T14:04:42.000+08:00
Co-authored-by: yaojiping &lt;yaojiping@infini.ltd&gt;
diff --git a/web/src/common/src/DatePicker/index.jsx b/web/src/common/src/DatePicker/index.jsx
@@ -202,7 +202,7 @@ const DatePicker = (props) => {
   const [reloadLoading, setReloadLoading] = useState(false) 
   const onRefreshClick = () => {
     setReloadLoading(true)
-    onRefresh && onRefresh({ start, end });
+    onRefresh && onRefresh({ start, end, refresh: true });
     setTimeout(()=>{
       setReloadLoading(false)
     }, 1000)
diff --git a/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx b/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
@@ -24,6 +24,7 @@ export default (props) => {
             queryParams={queryParams}
             timeout={timeout}
             className={styles.lineWrapper}
+            height={150}
             formatMetric={(metric) => {
               if (!metric) return metric;
               let units = "";
diff --git a/web/src/components/Overview/Monitor/index.jsx b/web/src/components/Overview/Monitor/index.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect, useCallback } from "react";
-import { Card, Tabs, Breadcrumb, Button, BackTop, Empty } from "antd";
+import { Card, Tabs, Breadcrumb, Button, BackTop, Empty, Spin } from "antd";
 import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
 import { formatter } from "@/utils/format";
 import moment from "moment";
@@ -66,6 +66,7 @@ const Monitor = (props) => {
       timeInterval: formatTimeInterval(param?.timeInterval),
       timeout: formatTimeout(param?.timeout) || localStorage.getItem(TIMEOUT_CACHE_KEY) || '120s',
       param: param,
+      refresh: true
     })
   );
 
@@ -76,7 +77,7 @@ const Monitor = (props) => {
     setParam({ ...param, timeRange: state.timeRange, timeInterval: state.timeInterval, timeout: state.timeout });
   }, [state.timeRange, state.timeInterval, state.timeout]);
 
-  const handleTimeChange = useCallback(({ start, end, timeInterval, timeout }) => {
+  const handleTimeChange = useCallback(({ start, end, timeInterval, timeout, refresh }) => {
     const bounds = calculateBounds({
       from: start,
       to: end,
@@ -93,9 +94,9 @@ const Monitor = (props) => {
         timeFormatter: formatter.dates(intDay),
       },
       timeInterval: timeInterval || state.timeInterval,
-      timeout: timeout || state.timeout
+      timeout: timeout || state.timeout,
+      refresh
     });
-    setSpinning(true);
   }, [state]) 
 
   const onInfoChange = (info) => {
@@ -112,6 +113,12 @@ const Monitor = (props) => {
     return monitor_configs?.node_stats?.enabled === false && monitor_configs?.index_stats?.enabled === false
   }, [JSON.stringify(selectedCluster?.monitor_configs)])
 
+  console.log("spinning")
+  console.log(spinning)
+  console.log("state.refresh")
+  console.log(state.refresh)
+
+
   return (
     <div>
       <BreadcrumbList data={breadcrumbList} />
@@ -165,12 +172,14 @@ const Monitor = (props) => {
               >
                 {panes.map((pane) => (
                   <TabPane tab={pane.title} key={pane.key}>
-                    <StatisticBar
-                      setSpinning={setSpinning}
-                      onInfoChange={onInfoChange}
-                      {...state}
-                      {...extraParams}
-                    />
+                    <Spin spinning={spinning && !!state.refresh}>
+                      <StatisticBar
+                        setSpinning={setSpinning}
+                        onInfoChange={onInfoChange}
+                        {...state}
+                        {...extraParams}
+                      />
+                    </Spin>
                     <div style={{ marginTop: 15 }}>
                       {checkPaneParams({
                         ...state,
diff --git a/web/src/lib/hooks/use_fetch.js b/web/src/lib/hooks/use_fetch.js
@@ -6,7 +6,7 @@ const DEFAULT_OPTIONS = {
 };
 
 export default function useFetch(url, options = {}, dependencies = [], runInInit = true) {
-  const { returnRawResponse, noticeable, ...rest } = options
+  const { returnRawResponse, noticeable, ...rest } = options || {}
   return useAsync(() => {
     return request(url, { ...DEFAULT_OPTIONS, ...rest }, returnRawResponse, noticeable);
   }, dependencies, runInInit);
diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
@@ -8,17 +8,27 @@ import QueueMetric from "../../components/queue_metric";
 import { ESPrefix } from "@/services/common";
 import { SearchEngines } from "@/lib/search_engines";
 
-const timezone = "local";
-
 export default ({
   selectedCluster,
   clusterID,
   timeRange,
   handleTimeChange,
+  timezone,
   bucketSize,
   timeout,
+  refresh,
 }) => {
 
+  const tabProps = {
+    clusterID,
+    timeRange,
+    handleTimeChange,
+    timezone,
+    bucketSize,
+    timeout,
+    refresh
+  }
+
   const isVersionGTE6 = useMemo(() => {
     if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
     const main = selectedCluster?.version?.split('.')[0]
@@ -56,12 +66,8 @@ export default ({
         })}
       >
         <ClusterMetric
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             'cluster_health',
             'index_throughput', 
@@ -84,14 +90,9 @@ export default ({
         })}
       >
         <NodeMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
               [
                   "operations",
@@ -231,14 +232,9 @@ export default ({
         })}
       >
         <IndexMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             [
                 "operations",
@@ -314,14 +310,9 @@ export default ({
         })}
       >
         <QueueMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             isVersionGTE6 ? [
                 "thread_pool_write",
@@ -397,18 +388,6 @@ export default ({
         ].filter((item) => !!item)}
         />
       </Tabs.TabPane>
-      {/* <Tabs.TabPane
-          key="storage"
-          tab={formatMessage({
-            id: "cluster.monitor.queue.storage",
-          })}
-        >
-          <StorageMetric
-            clusterID={clusterID}
-            timezone={timezone}
-            timeRange={timeRange}
-          />
-        </Tabs.TabPane> */}
     </Tabs>
   );
 }
diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx
@@ -1,20 +1,21 @@
 import ClusterMetric from "../../components/cluster_metric";
 import { ESPrefix } from "@/services/common";
 
-const timezone = "local";
-
 export default ({
   clusterID,
   timeRange,
   handleTimeChange,
   bucketSize,
   timeout,
+  timezone,
+  refresh
 }) => {
   return (
     <ClusterMetric
       timezone={timezone}
       timeRange={timeRange}
       timeout={timeout}
+      refresh={refresh}
       handleTimeChange={handleTimeChange}
       overview={1}
       fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}
diff --git a/web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx
@@ -2,16 +2,16 @@ import { useState } from "react";
 import StatisticBar from "./statistic_bar";
 import IndexMetric from "../../components/index_metric";
 
-const timezone = "local";
-
 export default ({
   clusterID,
   indexName,
   timeRange,
   handleTimeChange,
   shardID,
   bucketSize,
-  timeout
+  timezone,
+  timeout,
+  refresh,
 }) => {
   const [param, setParam] = useState({
     show_top: false,
@@ -28,6 +28,7 @@ export default ({
       shardID={shardID}
       bucketSize={bucketSize}
       timeout={timeout}
+      refresh={refresh}
       metrics={[
         [
             "operations",
diff --git a/web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx b/web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx
@@ -2,8 +2,6 @@ import { ESPrefix } from "@/services/common";
 import StatisticBar from "./statistic_bar";
 import ClusterMetric from "../../components/cluster_metric";
 
-const timezone = "local";
-
 export default ({
   isAgent,
   clusterID,
@@ -12,7 +10,9 @@ export default ({
   handleTimeChange,
   shardID,
   bucketSize,
-  timeout
+  timezone,
+  timeout,
+  refresh
 }) => {
   let url = `${ESPrefix}/${clusterID}/index/${indexName}/metrics`;
   if(shardID){
@@ -27,6 +27,7 @@ export default ({
       fetchUrl={url}
       bucketSize={bucketSize}
       timeout={timeout}
+      refresh={refresh}
       metrics={[
         "index_health",
         "index_throughput",
diff --git a/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
@@ -5,18 +5,28 @@ import QueueMetric from "../../components/queue_metric";
 import { formatMessage } from "umi/locale";
 import { SearchEngines } from "@/lib/search_engines";
 
-const timezone = "local";
-
 export default ({
   selectedCluster,
   clusterID,
   nodeID,
   timeRange,
   handleTimeChange,
+  timezone,
   bucketSize,
   timeout,
+  refresh,
 }) => {
 
+  const tabProps = {
+    clusterID,
+    timeRange,
+    handleTimeChange,
+    timezone,
+    bucketSize,
+    timeout,
+    refresh
+  }
+
   const isVersionGTE6 = useMemo(() => {
     if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
     const main = selectedCluster?.version?.split('.')[0]
@@ -59,14 +69,9 @@ export default ({
         })}
       >
         <NodeMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             [
                 "operations",
@@ -206,14 +211,9 @@ export default ({
         })}
       >
         <QueueMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             isVersionGTE6 ? [
                 "thread_pool_write",
diff --git a/web/src/pages/Platform/Overview/Node/Monitor/overview.jsx b/web/src/pages/Platform/Overview/Node/Monitor/overview.jsx
@@ -3,23 +3,24 @@ 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,
+  timezone,
   timeout,
+  refresh
 }) => {
 
   return (
     <ClusterMetric
       timezone={timezone}
       timeRange={timeRange}
       timeout={timeout}
+      refresh={refresh}
       handleTimeChange={handleTimeChange}
       overview={1}
       fetchUrl={`${ESPrefix}/${clusterID}/node/${nodeID}/metrics`}
diff --git a/web/src/pages/Platform/Overview/components/MetricChart.jsx b/web/src/pages/Platform/Overview/components/MetricChart.jsx
diff --git a/web/src/pages/Platform/Overview/components/cluster_metric.jsx b/web/src/pages/Platform/Overview/components/cluster_metric.jsx
diff --git a/web/src/pages/Platform/Overview/components/index_metric.jsx b/web/src/pages/Platform/Overview/components/index_metric.jsx
diff --git a/web/src/pages/Platform/Overview/components/node_metric.jsx b/web/src/pages/Platform/Overview/components/node_metric.jsx
diff --git a/web/src/pages/Platform/Overview/components/queue_metric.jsx b/web/src/pages/Platform/Overview/components/queue_metric.jsx
