feat: add metric detail panel

vesoft-inc · Aug 19, 2022 · 2539acf · 2539acf
1 parent 289d3c8
commit 2539acf
Showing 1 changed file with 76 additions and 55 deletions.
diff --git a/src/pages/MetricDetail/index.tsx b/src/pages/MetricDetail/index.tsx
@@ -15,7 +15,7 @@ import { SUPPORT_METRICS } from '@/utils/promQL';
 import { Chart } from '@antv/g2';
 import { configDetailChart, updateDetailChart } from '@/utils/chart/chart';
 import { shouldCheckCluster } from '@/utils';
-import { Popover } from 'antd';
+import { Popover, Spin } from 'antd';
 import Icon from '@/components/Icon';
 import BaseLineEditModal from '@/components/BaseLineEditModal';
 
@@ -64,6 +64,8 @@ const mapState = (state: IRootState) => ({
   serviceInstanceList: state.service.instanceList,
   metricsFilterValues: state.machine.metricsFilterValues,
   serviceMetricsFilterValues: state.service.metricsFilterValues,
+  serviceLoading: state.loading.models.service,
+  machineLoading: state.loading.models.machine,
 });
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
@@ -84,12 +86,15 @@ function MetricDetail(props: Props) {
 
   const { cluster, type, metricsFilterValues, serviceMetricsFilterValues,
     updateMetricsFiltervalues, updateServiceMetricsFiltervalues, instances, serviceInstanceList,
-    asyncFetchMachineMetricsData, aliasConfig, serviceMetric, asyncFetchServiceMetricsData, asyncGetSpaces } = props;
+    asyncFetchMachineMetricsData, aliasConfig, serviceMetric, asyncFetchServiceMetricsData, asyncGetSpaces,
+    serviceLoading, machineLoading } = props;
 
   const { metricName, metricType } = useParams<any>();
 
   const [dataSource, setDataSource] = useState<any[]>([]);
 
+  const [showLoading, setShowLoading] = useState<boolean>(false);
+
   const curMetricsFilterValues = useMemo(() => isServiceMetric(metricType) ? serviceMetricsFilterValues : metricsFilterValues, [type, metricsFilterValues, serviceMetricsFilterValues]);
 
   const metricOption = useMemo(() => {
@@ -113,6 +118,14 @@ function MetricDetail(props: Props) {
     return metricItem
   }, [metricName, metricType, serviceMetric])
 
+  useEffect(() => {
+    if (isServiceMetric(metricType)) {
+      setShowLoading(serviceLoading && curMetricsFilterValues.frequency === 0)
+    } else {
+      setShowLoading(machineLoading && curMetricsFilterValues.frequency === 0)
+    }
+  }, [metricType, serviceLoading, machineLoading, curMetricsFilterValues.frequency]);
+
   const metricChartRef = useRef<any>();
 
   const metricChart: any = useMemo(() => {
@@ -131,7 +144,7 @@ function MetricDetail(props: Props) {
     metricChartRef.current = res;
     return res
   }, [metricOption]);
-  
+
   useEffect(() => {
     if (!isServiceMetric(metricType)) return;
     const [start, end] = calcTimeRange(curMetricsFilterValues.timeRange);
@@ -150,7 +163,7 @@ function MetricDetail(props: Props) {
       })
     }
   }, [curMetricsFilterValues.timeRange, cluster, metricType])
-  
+
   useEffect(() => {
     if (pollingTimer) {
       clearTimeout(pollingTimer);
@@ -265,6 +278,12 @@ function MetricDetail(props: Props) {
   };
 
   const handleRefresh = () => {
+    if (isServiceMetric(metricType)) {
+      setShowLoading(!!serviceLoading);
+    } else {
+      setShowLoading(!!machineLoading);
+    }
+    getData();
   }
 
   const renderChart = (chartInstance: Chart) => {
@@ -295,61 +314,63 @@ function MetricDetail(props: Props) {
   };
 
   return (
-    <div className={styles.dashboardDetail}>
-      <div className={styles.commonHeader}>
-        {
-          isServiceMetric(metricType) ? (
-            <ServiceMetricsFilterPanel
-              onChange={handleMetricChange}
-              instanceList={serviceInstanceList}
-              spaces={metricType === MetricTypeName.Graphd ? serviceMetric.spaces : undefined}
-              values={curMetricsFilterValues}
-              onRefresh={handleRefresh}
-            />
-          ) : (
-            <MetricsFilterPanel
-              onChange={handleMetricChange}
-              instanceList={instances}
-              values={curMetricsFilterValues}
-              onRefresh={handleRefresh}
-            />
-          )
-        }
-      </div>
-      <div className={styles.detailContent}>
-        <div className={styles.chartItem}>
-          <div className='chart-title'>
-            {metricChart.metric?.metric}
-            <Popover
-              className={"chart-title-popover"}
-              content={
-                <div>{intl.get(`metric_description.${metricChart.metric?.metric}`)}</div>
-              }
-            >
-              <Icon className="metric-info-icon blue chart-title-desc" icon="#iconnav-serverInfo" />
-            </Popover>
-          </div>
-          <div className={styles.chartContent}>
-            <LineChart
-              isDefaultScale
-              yAxisMaximum={100}
-              options={{ padding: [10, 70, 70, 70] }}
-              ref={ref => metricChart.chartRef = ref}
-              renderChart={renderChart}
-            />
-          </div>
-          <div className="action-icons">
-            <div
-              className="btn-icon-with-desc blue base-line"
-              onClick={handleBaseLineEdit}
-            >
-              <Icon icon="#iconSetup" />
-              <span>{intl.get('common.baseLine')}</span>
+    <Spin spinning={showLoading}>
+      <div className={styles.dashboardDetail}>
+        <div className={styles.commonHeader}>
+          {
+            isServiceMetric(metricType) ? (
+              <ServiceMetricsFilterPanel
+                onChange={handleMetricChange}
+                instanceList={serviceInstanceList}
+                spaces={metricType === MetricTypeName.Graphd ? serviceMetric.spaces : undefined}
+                values={curMetricsFilterValues}
+                onRefresh={handleRefresh}
+              />
+            ) : (
+              <MetricsFilterPanel
+                onChange={handleMetricChange}
+                instanceList={instances}
+                values={curMetricsFilterValues}
+                onRefresh={handleRefresh}
+              />
+            )
+          }
+        </div>
+        <div className={styles.detailContent}>
+          <div className={styles.chartItem}>
+            <div className='chart-title'>
+              {metricChart.metric?.metric}
+              <Popover
+                className={"chart-title-popover"}
+                content={
+                  <div>{intl.get(`metric_description.${metricChart.metric?.metric}`)}</div>
+                }
+              >
+                <Icon className="metric-info-icon blue chart-title-desc" icon="#iconnav-serverInfo" />
+              </Popover>
+            </div>
+            <div className={styles.chartContent}>
+              <LineChart
+                isDefaultScale
+                yAxisMaximum={100}
+                options={{ padding: [10, 70, 70, 70] }}
+                ref={ref => metricChart.chartRef = ref}
+                renderChart={renderChart}
+              />
+            </div>
+            <div className="action-icons">
+              <div
+                className="btn-icon-with-desc blue base-line"
+                onClick={handleBaseLineEdit}
+              >
+                <Icon icon="#iconSetup" />
+                <span>{intl.get('common.baseLine')}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </Spin>
   )
 }