vesoft-inc · xigongdaEricyang · Jun 21, 2022 · Jun 21, 2022
diff --git a/src/components/ServiceMetricsFilterPanel/index.tsx b/src/components/ServiceMetricsFilterPanel/index.tsx
@@ -11,10 +11,9 @@ import { AGGREGATION_OPTIONS, TIME_INTERVAL_OPTIONS } from '@/utils/dashboard';
 interface IProps {
   spaces: string[];
   instanceList: string[];
-  metricTypes: string[];
   onChange?: (values) => void;
   values?: any;
-  onRefresh?: () => void;
+  onRefresh?: (values: any) => void;
 }
 
 function ServiceMetricsFilterPanel(props: IProps) {

diff --git a/src/components/StatusPanel/index.tsx b/src/components/StatusPanel/index.tsx
@@ -1,12 +1,10 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
-// import { IDispatch } from '@/store';
 import { NEBULA_COUNT } from '@/utils/promQL';
 import { DETAIL_DEFAULT_RANGE } from '@/utils/dashboard';
 import { SERVICE_POLLING_INTERVAL } from '@/utils/service';
-import { isEnterpriseVersion } from '@/utils';
-
+import { shouldCheckCluster } from '@/utils';
 import './index.less';
 
 const mapState = (state: any) => ({
@@ -15,76 +13,64 @@ const mapState = (state: any) => ({
 
 const mapDispatch = (dispatch) => ({});
 
-const shouldCheckCluster = isEnterpriseVersion();
-
 interface IProps extends ReturnType<typeof mapState>  {
   type: string;
   clusterID?: string;
   getStatus: (payload) => void;
 }
 
-interface IState {
-  normal: number;
-  abnormal: number;
-}
-class StatusPanel extends React.Component<IProps, IState> {
-  pollingTimer: any;
+function StatusPanel(props: IProps) {
 
-  constructor(props: IProps) {
-    super(props);
-    this.state = {
-      normal: 0,
-      abnormal: 0,
-    };
-  }
+  const { cluster, type, getStatus } = props;
 
-  componentDidMount() {
-    this.pollingData();
-  }
+  const pollingTimer: any = useRef<any>();
 
-  pollingData = () => {
-    if (shouldCheckCluster) {
-      const { cluster } = this.props;
-      if (cluster.id) {
-        this.asyncGetStatus();
-        this.pollingTimer = setTimeout(this.pollingData, SERVICE_POLLING_INTERVAL);
-      }
-    } else {
-      this.asyncGetStatus();
-      this.pollingTimer = setTimeout(this.pollingData, SERVICE_POLLING_INTERVAL);
-    }
-  };
+  const [ statusNumInfo, setStatusNumInfo ] = useState<any>({
+    abnormal: 0,
+    normal: 0
+  });
 
-  componentWillUnmount() {
-    if (this.pollingTimer) {
-      clearTimeout(this.pollingTimer);
+  useEffect(() => {
+    pollingData();
+    return () => {
+      if (pollingTimer.current) {
+        clearTimeout(pollingTimer.current);
+      }
     }
-  }
+  }, [cluster])
 
-  asyncGetStatus = async () => {
-    const { type, cluster } = this.props;
-    const { normal, abnormal } = (await this.props.getStatus({
+  const asyncGetStatus = async () => {
+    const { normal, abnormal } = (await getStatus({
       query: NEBULA_COUNT[type],
       end: Date.now(),
       interval: DETAIL_DEFAULT_RANGE,
       clusterID: cluster?.id,
     })) as any;
-    this.setState({ normal, abnormal });
+    setStatusNumInfo({ normal, abnormal })
+  };
+
+  const pollingData = () => {
+    if (shouldCheckCluster()) {
+      if (cluster.id) {
+        asyncGetStatus();
+        pollingTimer.current = setTimeout(pollingData, SERVICE_POLLING_INTERVAL);
+      }
+    } else {
+      asyncGetStatus();
+      pollingTimer.current = setTimeout(pollingData, SERVICE_POLLING_INTERVAL);
+    }
   };
 
-  render() {
-    const { normal, abnormal } = this.state;
-    return (
-      <ul className="status-panel">
-        <li className="normal">
-          {intl.get('service.normal')}: <span>{normal}</span>
-        </li>
-        <li className="abnormal">
-          {intl.get('service.abnormal')}: <span>{abnormal}</span>
-        </li>
-      </ul>
-    );
-  }
+  return (
+    <ul className="status-panel">
+      <li className="normal">
+        {intl.get('service.normal')}: <span>{statusNumInfo.normal}</span>
+      </li>
+      <li className="abnormal">
+        {intl.get('service.abnormal')}: <span>{statusNumInfo.abnormal}</span>
+      </li>
+    </ul>
+  );
 }
 
 export default connect(mapState, mapDispatch)(StatusPanel);
diff --git a/src/pages/ServiceDashboard/Detail/index.tsx b/src/pages/ServiceDashboard/Detail/index.tsx
@@ -27,6 +27,7 @@ import './index.less';
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
   asyncGetStatus: dispatch.service.asyncGetStatus,
+  asyncGetSpaces: dispatch.serviceMetric.asyncGetSpaces,
   asyncFetchMetricsData: dispatch.service.asyncGetMetricsData,
   asyncUpdateBaseLine: (key, value) =>
     dispatch.machine.update({
@@ -52,8 +53,7 @@ interface IProps
 let pollingTimer: any;
 
 function ServiceDetail(props: IProps) {
-  const { asyncFetchMetricsData, serviceMetric, loading, cluster, updateMetricsFiltervalues, metricsFilterValues, instanceList } = props;
-
+  const { asyncFetchMetricsData, serviceMetric, loading, cluster, updateMetricsFiltervalues, metricsFilterValues, instanceList, asyncGetSpaces } = props;
 
   const location = useLocation();
 
@@ -64,7 +64,25 @@ function ServiceDetail(props: IProps) {
 
   useEffect(() => {
     setShowLoading(loading && metricsFilterValues.frequency === 0)
-  }, [loading, metricsFilterValues.frequency])
+  }, [loading, metricsFilterValues.frequency]);
+
+  useEffect(() => {
+    const [ start, end ] = calcTimeRange(metricsFilterValues.timeRange);
+    if (shouldCheckCluster()) {
+      if (cluster?.id) {
+        asyncGetSpaces({
+          clusterID: cluster.id,
+          start,
+          end
+        })
+      }
+    } else {
+      asyncGetSpaces({
+        start,
+        end
+      })
+    }
+  }, [metricsFilterValues.timeRange, cluster])
 
   const metricOptions = useMemo<IMetricOption[]>(() => {
     if (serviceMetric.graphd.length === 0
@@ -84,7 +102,7 @@ function ServiceDetail(props: IProps) {
       })
     }
     return options;
-  }, [serviceType, serviceMetric.graphd, serviceMetric.metad, serviceMetric.storaged, serviceMetric.spaces]);
+  }, [serviceType, serviceMetric.graphd, serviceMetric.metad, serviceMetric.storaged]);
 
   const metricTypeMap = useMemo(() => {
     const map = {};
@@ -252,8 +270,6 @@ function ServiceDetail(props: IProps) {
     asyncGetMetricsData();
   }
 
-  console.log('serviceMetric.spaces', serviceMetric.spaces);
-
   return (
     <Spin spinning={showLoading} wrapperClassName="service-detail">
       <div className='dashboard-detail'>
@@ -262,7 +278,6 @@ function ServiceDetail(props: IProps) {
             onChange={handleMetricChange}
             instanceList={instanceList}
             spaces={serviceMetric.spaces}
-            metricTypes={Object.keys(metricTypeMap)}
             values={metricsFilterValues}
             onRefresh={handleRefresh}
           />

diff --git a/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx b/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx
@@ -5,12 +5,9 @@ import { Popover } from 'antd';
 import Icon from '@/components/Icon';
 import { IServicePanelConfig } from '@/utils/interface';
 import { calcTimeRange, getDataByType } from '@/utils/dashboard';
-// import {
-//   SERVICE_DEFAULT_RANGE,
-// } from '@/utils/service';
 import Card from '@/components/Service/ServiceCard/Card';
 import { IDispatch, IRootState } from '@/store';
-import { isEnterpriseVersion, shouldCheckCluster } from '@/utils';
+import { shouldCheckCluster } from '@/utils';
 
 import './index.less';
 
@@ -30,13 +27,14 @@ interface IProps
   onConfigPanel: () => void;
   config: IServicePanelConfig;
   aliasConfig: any;
+  isHidePeriod?: boolean;
 }
 
 function CustomServiceQueryPanel(props: IProps) {
 
-  const { config, cluster, asyncGetMetricsData, onConfigPanel, aliasConfig, metricsFilterValues } = props;
+  const { config, cluster, asyncGetMetricsData, onConfigPanel, aliasConfig, metricsFilterValues, isHidePeriod } = props;
 
-  const [ data, setData ] = useState<any[]>([])
+  const [data, setData] = useState<any[]>([])
 
   let pollingTimer: any = useMemo(() => undefined, []);
 
@@ -60,7 +58,7 @@ function CustomServiceQueryPanel(props: IProps) {
 
   const getMetricsData = async () => {
     const { period: metricPeriod, metricFunction, space } = config;
-    const [ start, end ] = calcTimeRange(metricsFilterValues.timeRange);
+    const [start, end] = calcTimeRange(metricsFilterValues.timeRange);
     const data = await asyncGetMetricsData({
       query: metricFunction + metricPeriod, // EXPLAIN: query like nebula_graphd_num_queries_rate_600
       start,
@@ -90,12 +88,18 @@ function CustomServiceQueryPanel(props: IProps) {
           {config.metric}
         </Popover>
         <div>
-          <span>
-            {intl.get('service.period')}: <span>{config.period}</span>
-          </span>
-          <span>
-            {intl.get('service.metricParams')}: <span>{config.metricType}</span>
-          </span>
+          {
+            !isHidePeriod && (
+              <>
+                <span>
+                  {intl.get('service.period')}: <span>{config.period}</span>
+                </span>
+                <span>
+                  {intl.get('service.metricParams')}: <span>{config.metricType}</span>
+                </span>
+              </>
+            )
+          }
           <div
             className="btn-icon-with-desc blue"
             onClick={onConfigPanel}

diff --git a/src/pages/ServiceDashboard/index.tsx b/src/pages/ServiceDashboard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import intl from 'react-intl-universal';
 import { RouteComponentProps, useHistory, withRouter } from 'react-router-dom';
@@ -12,9 +12,12 @@ import MetricsFilterPanel from '@/components/MetricsFilterPanel';
 
 import './index.less';
 import { ServiceMetricsPanelValue } from '@/utils/interface';
+import { calcTimeRange } from '@/utils/dashboard';
+import { shouldCheckCluster } from '@/utils';
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
   asyncGetStatus: dispatch.service.asyncGetStatus,
+  asyncGetSpaces: dispatch.serviceMetric.asyncGetSpaces,
   updateMetricsFiltervalues: dispatch.service.updateMetricsFiltervalues,
   updatePanelConfig: values =>
     dispatch.service.update({
@@ -26,6 +29,7 @@ const mapState: any = (state: IRootState) => ({
   panelConfig: state.service.panelConfig,
   aliasConfig: state.app.aliasConfig,
   instanceList: state.service.instanceList as any,
+  cluster: (state as any)?.cluster?.cluster,
   serviceMetric: state.serviceMetric,
   metricsFilterValues: (state as any).service.metricsFilterValues as ServiceMetricsPanelValue,
 });
@@ -38,7 +42,7 @@ interface IProps
 
 function ServiceDashboard(props: IProps){
 
-  const { panelConfig, serviceMetric, updatePanelConfig, asyncGetStatus, onView, instanceList, updateMetricsFiltervalues, metricsFilterValues } = props;
+  const { panelConfig, serviceMetric, updatePanelConfig, asyncGetStatus, onView, instanceList, updateMetricsFiltervalues, metricsFilterValues, asyncGetSpaces, cluster } = props;
 
   const [editPanelType, setEditPanelType ] = useState('');
   const [editPanelIndex, setEditPanelIndex ] = useState(0)
@@ -47,6 +51,24 @@ function ServiceDashboard(props: IProps){
 
   const modalHandlerRef = useRef<any>();
 
+  useEffect(() => {
+    const [ start, end ] = calcTimeRange(metricsFilterValues.timeRange);
+    if (shouldCheckCluster()) {
+      if (cluster?.id) {
+        asyncGetSpaces({
+          clusterID: cluster.id,
+          start,
+          end
+        })
+      }
+    } else {
+      asyncGetSpaces({
+        start,
+        end
+      })
+    }
+  }, [metricsFilterValues.timeRange, cluster])
+
   const handleConfigPanel = (serviceType: string, index: number) => {
     setEditPanelIndex(index);
     setEditPanelType(serviceType);
@@ -77,7 +99,7 @@ function ServiceDashboard(props: IProps){
         <div className='common-header' >
           <MetricsFilterPanel 
             onChange={handleMetricsChange} 
-            instanceList={instanceList} 
+            instanceList={instanceList}
             values={metricsFilterValues}
             onRefresh={handleRefreshData}
           />

diff --git a/src/store/models/metric.ts b/src/store/models/metric.ts
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { compare } from 'compare-versions';
 import service from '@/config/service';
 import { filterServiceMetrics } from '@/utils/metric';
-import dayjs from 'dayjs';
+import { getClusterPrefix } from '@/utils/promQL';
 
 interface IState {
   graphd: any[];
@@ -78,8 +78,14 @@ export function MetricModelWrapper(serviceApi) {
           [componentType]: metrics,
         });
       },
-      async asyncGetSpaces(clusterID: string) {
-        const { data: res } = (await service.getSpaces({ clusterID })) as any;
+      async asyncGetSpaces({ clusterID, start, end }) {
+        start = start / 1000;
+        end = end / 1000;
+        const { data: res } = (await service.getSpaces({ 
+          'match[]': clusterID ? `{${getClusterPrefix()}='${clusterID}'}` : undefined,
+          start, 
+          end
+        })) as any;
         if (res.status === 'success') {
           this.update({
             spaces: res.data,