fix: service metric don't show different metricType chart

src/components/Charts/LineChart.tsx

@@ -214,7 +214,6 @@ function LineChart(props: IProps, ref) {
         tickInterval,
       },
     });
-    autoAdjustPadding(options.valueType);
     return chartInstanceRef.current;
   };
 

src/components/ServiceMetricsFilterPanel/index.tsx

@@ -42,22 +42,6 @@ function ServiceMetricsFilterPanel(props: IProps) {
     onChange?.(form.getFieldsValue());
   }
 
-  const handlePeriodChange = (value) => {
-    if (!form) return;
-    form.setFieldsValue({
-      period: value,
-    });
-    onChange?.(form.getFieldsValue());
-  }
-
-  const handleMetricTypeChange = (value) => {
-    if (!form) return;
-    form.setFieldsValue({
-      metricType: value,
-    });
-    onChange?.(form.getFieldsValue());
-  }
-
   const handleFilterPanelChange = () => {
     onChange?.(form.getFieldsValue());
   }

src/pages/ServiceDashboard/Detail/index.tsx

@@ -105,25 +105,11 @@ function ServiceDetail(props: IProps) {
     return options;
   }, [serviceType, serviceMetric.graphd, serviceMetric.metad, serviceMetric.storaged, serviceMetric.drainerd, serviceMetric['metad-listener'], serviceMetric['storaged-listener']]);
 
-  const metricTypeMap: Map<AggregationType, IServiceMetricItem[]> = useMemo(() => {
-    const map: Map<AggregationType, IServiceMetricItem[]> = {} as any;
-    metricOptions.forEach(option => {
-      option.aggregations.forEach(type => {
-        if (!map[type]) {
-          map[type] = [option];
-        } else {
-          map[type].push(option)
-        }
-      })
-    })
-    return map;
-  }, [metricOptions]);
-
   const metricNameList: string[] = useMemo(() => (
     (metricOptions || []).map((metric) => metric.metric)
   ), [metricOptions]);
 
-  const [curMetricOptions, setMetricOptions] = useState<IServiceMetricItem[]>([]);
+  const [metricCharts, setMetricCharts] = useState<{ metric:IServiceMetricItem,index:number,baseLine:any,chartRef?:any,visible:boolean }[]>([]);
 
   useEffect(() => {
     const match = /(\w+)-metrics/g.exec(location.pathname);
@@ -135,26 +121,6 @@ function ServiceDetail(props: IProps) {
     setServiceType(serviceType);
   }, [location]);
 
-  const metricCharts: any = useMemo(() => {
-    if (Object.keys(metricTypeMap).length === 0) return [];
-    const { metricType } = metricsFilterValues;
-    let charts: any = [];
-    if (metricType === 'all') {
-      charts = metricOptions.map((metric, i) => ({
-        metric,
-        index: i,
-        baseLine: undefined,
-      }))
-    } else {
-      charts = (metricTypeMap[metricType] || []).map((metric, i) => ({
-        metric,
-        index: i,
-        baseLine: undefined,
-      }));
-    }
-    return charts;
-  }, [metricTypeMap, metricsFilterValues.metricType])
-
   useEffect(() => {
     clearPolling();
     if (shouldCheckCluster()) {
@@ -178,27 +144,28 @@ function ServiceDetail(props: IProps) {
   };
 
   useEffect(() => {
-    setMetricOptions(metricOptions)
+    setMetricCharts(metricOptions.map((metric, index) => ({ metric, index, baseLine: null,visible:true })));
   }, [metricOptions])
 
   useEffect(() => {
     if (dataSources.length === 0) return;
     updateChart();
-  }, [metricsFilterValues.instanceList, dataSources, curMetricOptions])
+  }, [metricsFilterValues.instanceList, dataSources, metricCharts])
 
   useEffect(() => {
     if (pollingTimerRef.current) {
       clearPolling();
       pollingData();
     }
-  }, [curMetricOptions])
+  }, [metricCharts])
 
   const asyncGetMetricsData = async () => {
-    const { timeRange, period, space, metricType } = metricsFilterValues;
+    const { timeRange, period="5", space,  } = metricsFilterValues;
     const [startTime, endTime] = calcTimeRange(timeRange);
     const getPromise = (chart) => {
       return new Promise((resolve, reject) => {
-        const item: IServiceMetricItem = metricTypeMap[metricType].find(metricItem => metricItem.metric === chart.metric.metric);
+        const item: IServiceMetricItem = chart.metric;
+        const metricType = item.aggregations[0] as AggregationType;
         asyncFetchMetricsData({
           query: getQueryByMetricType(item, metricType, period),
           start: startTime,
@@ -215,7 +182,7 @@ function ServiceDetail(props: IProps) {
     }
     if (metricCharts.length === 0) return;
     Promise.all(metricCharts.map((chart, i) => {
-      if (curMetricOptions.length === 0 || curMetricOptions.find(m => m.metric === chart.metric.metric)) {
+      if (chart.visible) {
         return getPromise(chart);
       } else {
         return Promise.resolve(dataSources[i]);
@@ -255,11 +222,15 @@ function ServiceDetail(props: IProps) {
   };
 
   const renderChart = (i: number) => () => {
+    const chart = metricCharts[i];
     const [startTimestamps, endTimestamps] = calcTimeRange(metricsFilterValues.timeRange);
-    metricCharts[i].chartRef.configDetailChart({
+    chart.chartRef.configDetailChart({
       tickInterval: getProperTickInterval(endTimestamps - startTimestamps),
-      valueType: metricCharts[i].metric.valueType,
+      valueType: chart.metric.valueType,
     });
+    if (chart.visible&&chart.baseLine) {
+      chart.chartRef.updateBaseline(chart.baseLine);
+    }
   };
 
   const handleBaseLineEdit = (metricChart) => () => {
@@ -292,17 +263,18 @@ function ServiceDetail(props: IProps) {
     asyncGetMetricsData();
   }
 
-  const handleMetricsChange = (values) => {
+  const handleMetricsChange = (values) => { 
     if (values.length === 0) {
-      setMetricOptions(metricOptions);
+      metricCharts.forEach(chart => {
+        chart.visible = true;
+      })
     } else {
-      setMetricOptions(metricOptions.filter(metric => values.includes(metric.metric)));
+      metricCharts.forEach(chart => {
+        chart.visible = values.includes(chart.metric.metric);
+      })
     }
-  }
-
-  const shouldShow = (metricItem) => {
-    return curMetricOptions.find(item => item.metric === metricItem.metric)
-  }
+    setMetricCharts([...metricCharts]);
+  } 
 
   const getViewPath = (path: string): string => {
     if (cluster?.id) {
@@ -350,7 +322,7 @@ function ServiceDetail(props: IProps) {
           {
             metricCharts.length ? (
               metricCharts.map((metricChart, i) => (
-                <div key={i} className='chart-item' style={{ display: shouldShow(metricChart.metric) ? 'flex' : 'none' }}>
+                <div key={i} className='chart-item' style={{ display: metricChart.visible ? 'flex' : 'none' }}>
                   <div className='chart-title'>
                     {metricChart.metric.metric}
                     <Popover

src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx

@@ -65,7 +65,7 @@ function CustomServiceQueryPanel(props: IProps) {
     const item = (serviceMetric[serviceType] as IServiceMetricItem[]).find((metricItem: IServiceMetricItem) => metricItem.metric === metric);
     if (item) {
       const data = await asyncGetMetricsData({
-        query: getQueryByMetricType(item, aggregation, metricPeriod.toString()), // EXPLAIN: query like nebula_graphd_num_queries_rate_600
+        query: getQueryByMetricType(item, aggregation, metricPeriod?.toString()), // EXPLAIN: query like nebula_graphd_num_queries_rate_600
         start,
         end,
         space,

src/pages/ServiceManage/LeaderDistribution/index.tsx

@@ -78,12 +78,11 @@ const LeaderDistribution: React.FC<IProps> = (props: IProps) => {
   const updateChart = () => {
     if (data.length > 0) {
       const lastItem = last(data);
-      const total = lastItem!.count;
       const hostList =
         lastItem!.name === 'Total' ? data.slice(0, data.length - 1) : data;
       const chartData = hostList.map(item => ({
         type: item.name,
-        value: total ? round(item.count / total, 2) : 1,
+        value: item.count
       }));
       chartInstance?.data(chartData).render();
     }

src/pages/ServiceManage/Overview/index.tsx

@@ -23,6 +23,7 @@ const mapDispatch: any = (dispatch: IDispatch) => ({
   asyncGetHostsInfo: dispatch.nebula.asyncGetHostsInfo,
   asyncGetServices: dispatch.nebula.asyncGetServices,
   asyncExecNGQL: dispatch.nebula.asyncExecNGQL,
+  clear: dispatch.nebula.clear,
 });
 
 const mapState = (state: IRootState) => ({
@@ -60,6 +61,9 @@ const Overview: React.FC<IProps> = (props: IProps) => {
   const modalHandler = useRef<any>();
   const [hosts, setHosts] = useState([]);
 
+  useEffect(() => {
+    props.clear();
+  },[cluster])
   useEffect(() => {
     if (nebulaConnect) {
       asyncGetHostsInfo();

src/store/models/nebula.ts

@@ -151,6 +151,17 @@ export function NebulaModelWrapper(serviceApi, state, _effects) {
         }));
         return versionInfos;
       },
+
+      clear() {
+        this.update({
+          configs: [],
+          jobs: [],
+          spaces: [],
+          parts: [],
+          services: [],
+          currentSpace: null,
+        });
+      },
       ..._effects(dispatch),
     }),
   })

src/utils/dashboard.ts

@@ -353,10 +353,10 @@ export const getMaxNumAndLength = (payload: {
 }) => {
   const { data = [], valueType, baseLine } = payload;
   const maxNum = getMaxNum(data);
-  let maxNumLen =
-    maxNum === 0 && baseLine
-      ? baseLine.toString().length
-      : maxNum.toString().length;
+  let maxString =  maxNum === 0 && baseLine
+      ? baseLine.toString()
+      : maxNum.toString();
+  let maxNumLen = maxString.length;
   switch (valueType) {
     case VALUE_TYPE.percentage:
       maxNumLen = 5;
@@ -375,8 +375,9 @@ export const getMaxNumAndLength = (payload: {
       maxNumLen = unit.length + value.toString().length + 2;
       break;
     }
+    case VALUE_TYPE.number:
     case VALUE_TYPE.numberSecond:
-      maxNumLen += 2;
+      maxNumLen = maxString.split('.')[0].length ;
       break;
     default:
       break;