feat: metric related bugfix

src/components/Charts/LineChart.tsx

@@ -119,14 +119,14 @@ function LineChart(props: IProps, ref) {
       max = max + 5;
       min = min < 0 ? min - 5 : 0;
     } else {
-      min = 0;
+      min = Math.min(min, 0);
     }
 
     yMin.current = min;
     yMax.current = max;
     const tickInterval = Math.round((max - min) / 5);
     return {
-      min: yMin.current,
+      min: yMin.current < 0 ? yMin.current - tickInterval : yMin.current,
       max: yMax.current + tickInterval,
       tickInterval,
     }

src/components/Service/ServiceCardEdit/index.tsx

@@ -27,12 +27,8 @@ function ServiceCardEdit(props: IProps) {
 
   const curServiceMetricItems = useMemo<IServiceMetricItem[]>(() => serviceMetric[editType], [serviceMetric, editType]);
 
-  const handleUpdateMetricType = (value: string) => {
-    const metric = curServiceMetricItems.find(
-      item => item.metric === value,
-    );
+  const handleUpdateMetricType = (_value: string) => {
     formRef.current.setFieldsValue({
-      aggregation: metric?.aggregations[0],
       space: '',
     });
   };

src/pages/MachineDashboard/Cards/CPUCard.tsx

@@ -7,14 +7,15 @@ import { VALUE_TYPE } from '@/utils/promQL';
 import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
-  const { cpuStat, metricsFilterValues } = state.machine;
+  const { cpuStat, metricsFilterValues, instanceList } = state.machine;
   const { aliasConfig } = state.app;
   return {
     data: getDataByType({
       data: cpuStat,
       type: metricsFilterValues.instanceList,
       nameObj: getMetricsUniqName(MetricScene.CPU),
       aliasConfig,
+      instanceList
     }),
     valueType: VALUE_TYPE.percentage,
     loading: false,

src/pages/MachineDashboard/Cards/LoadCard.tsx

@@ -7,14 +7,15 @@ import { VALUE_TYPE } from '@/utils/promQL';
 import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
-  const { loadStat, metricsFilterValues } = state.machine;
+  const { loadStat, metricsFilterValues, instanceList } = state.machine;
   const { aliasConfig } = state.app;
   return {
     data: getDataByType({
       data: loadStat,
       type: metricsFilterValues.instanceList,
       nameObj: getMetricsUniqName(MetricScene.LOAD),
       aliasConfig,
+      instanceList,
     }),
     valueType: VALUE_TYPE.number,
     loading: false,

src/pages/MachineDashboard/Cards/MemoryCard.tsx

@@ -6,14 +6,15 @@ import { VALUE_TYPE } from '@/utils/promQL';
 import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
-  const { memoryStat, memorySizeStat, metricsFilterValues } = state.machine;
+  const { memoryStat, memorySizeStat, metricsFilterValues, instanceList } = state.machine;
   const { aliasConfig } = state.app;
   return {
     data: getDataByType({
       data: memoryStat,
       type: metricsFilterValues.instanceList,
       nameObj: getMetricsUniqName(MetricScene.MEMORY),
       aliasConfig,
+      instanceList,
     }),
     sizes: memorySizeStat,
     valueType: VALUE_TYPE.percentage,

src/pages/MachineDashboard/Cards/NetworkIn.tsx

@@ -7,14 +7,15 @@ import { VALUE_TYPE } from '@/utils/promQL';
 import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
-  const { networkInStat, metricsFilterValues } = state.machine;
+  const { networkInStat, metricsFilterValues, instanceList } = state.machine;
   const { aliasConfig } = state.app;
   return {
     data: getDataByType({
       data: networkInStat,
       type: metricsFilterValues.instanceList,
       nameObj: getMetricsUniqName(MetricScene.NETWORK),
       aliasConfig,
+      instanceList,
     }),
     valueType: VALUE_TYPE.byteSecondNet,
     loading: false,

src/pages/MachineDashboard/Cards/NetworkOut.tsx

@@ -7,14 +7,15 @@ import { getDataByType, getMetricsUniqName } from '@/utils/dashboard';
 import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
-  const { networkOutStat, metricsFilterValues } = state.machine;
+  const { networkOutStat, metricsFilterValues, instanceList } = state.machine;
   const { aliasConfig } = state.app;
   return {
     data: getDataByType({
       data: networkOutStat,
       type: metricsFilterValues.instanceList,
       nameObj: getMetricsUniqName(MetricScene.NETWORK),
       aliasConfig,
+      instanceList,
     }),
     valueType: VALUE_TYPE.byteSecondNet,
     loading: false,

src/pages/MachineDashboard/Detail/index.tsx

@@ -177,12 +177,14 @@ function Detail(props: IProps) {
           type: metricsFilterValues.instanceList,
           nameObj: dataTypeObj,
           aliasConfig,
+          instanceList: instances,
         }) :
         getDataByType({
           data: dataSources[i] || [],
           type: metricsFilterValues.instanceList,
           nameObj: dataTypeObj,
           aliasConfig,
+          instanceList: instances, 
         });
       const values = data.map(d => d.value) as number[];
       const maxNum = values.length > 0 ? Math.floor(Math.max(...values) * 100) / 100 : undefined;

src/pages/MetricDetail/index.tsx

@@ -70,10 +70,6 @@ const mapState = (state: IRootState) => ({
 });
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
-  // asyncUpdateBaseLine: (key, value) =>
-  //   dispatch.setting.update({
-  //     [key]: value,
-  //   }),
   updateMetricsFiltervalues: dispatch.machine.updateMetricsFiltervalues,
   updateServiceMetricsFiltervalues: dispatch.service.updateMetricsFiltervalues,
   asyncFetchMachineMetricsData: dispatch.machine.asyncGetMetricsData,
@@ -186,18 +182,21 @@ function MetricDetail(props: Props) {
 
   const updateChart = () => {
     const metricScene = getMetricSecene(metricType);
+    const instanceList = isServiceMetric(metricType) ? serviceInstanceList : instances;
     const data = metricType === MetricTypeName.Disk ?
       getDiskData({
         data: dataSource || [],
         type: curMetricsFilterValues.instanceList,
         nameObj: getMetricsUniqName(metricScene),
         aliasConfig,
+        instanceList
       }) :
       getDataByType({
         data: dataSource || [],
         type: curMetricsFilterValues.instanceList,
         nameObj: getMetricsUniqName(metricScene),
         aliasConfig,
+        instanceList,
       });
     const values = data.map(d => d.value) as number[];
     const maxNum = values.length > 0 ? Math.floor(Math.max(...values) * 100) / 100 : undefined;
@@ -212,32 +211,19 @@ function MetricDetail(props: Props) {
     }).changeData(data);
   };
 
-  const metricTypeMap = useMemo(() => {
-    const map = {};
-    if (metricOption && isServiceMetric(metricType)) {
-      metricOption.aggregations.forEach(type => {
-        if (!map[type]) {
-          map[type] = [metricOption];
-        } else {
-          map[type].push(metricOption)
-        }
-      })
-    }
-    return map;
-  }, [metricType, metricOption])
-
   const getData = async () => {
     const [startTimestamps, endTimestamps] = calcTimeRange(curMetricsFilterValues.timeRange);
     if (isServiceMetric(metricType)) {
-      const { period, space, metricType: aggregration } = curMetricsFilterValues;
-      const item = metricTypeMap[aggregration]?.find(metricItem => metricItem.metric === metricChart.metric.metric);
-      if (item) {
+      const { space } = curMetricsFilterValues;
+      if (metricChart.metric.metric.length) {
+        const aggregation = metricChart.metric.aggregations[0];
         asyncFetchServiceMetricsData({
-          query: getQueryByMetricType(item, aggregration, period),
+          query: getQueryByMetricType(metricChart.metric, aggregation, '5'),
           start: startTimestamps,
           end: endTimestamps,
           space: metricType === MetricTypeName.Graphd ? space : undefined,
           clusterID: cluster?.id,
+          aggregation,
         }).then(res => {
           setDataSource(res);
         });

src/pages/ServiceDashboard/Detail/index.tsx

@@ -211,6 +211,7 @@ function ServiceDetail(props: IProps) {
         type: instanceList,
         nameObj: getMetricsUniqName(MetricScene.SERVICE),
         aliasConfig,
+        instanceList: props.instanceList,
       });
       const realRange = data.length>0?(data[data.length-1].time - data[0].time):0;
       const tickInterval = getTickIntervalByGap(Math.floor(realRange / 10)); // 10 ticks max

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

@@ -22,6 +22,7 @@ const mapState = (state: IRootState) => ({
   cluster: (state as any).cluster?.cluster,
   metricsFilterValues: state.service.metricsFilterValues,
   serviceMetric: state.serviceMetric,
+  instances: state.service.instanceList,
 });
 
 interface IProps
@@ -35,7 +36,7 @@ interface IProps
 
 function CustomServiceQueryPanel(props: IProps) {
 
-  const { config, cluster, asyncGetMetricsData, onConfigPanel, aliasConfig, metricsFilterValues, isHidePeriod, serviceMetric, serviceType } = props;
+  const { config, cluster, asyncGetMetricsData, onConfigPanel, aliasConfig, metricsFilterValues, isHidePeriod, serviceMetric, serviceType, instances } = props;
 
   const [data, setData] = useState<any[]>([])
 
@@ -117,6 +118,7 @@ function CustomServiceQueryPanel(props: IProps) {
               type: metricsFilterValues.instanceList,
               nameObj: getMetricsUniqName(MetricScene.SERVICE),
               aliasConfig,
+              instanceList: instances
             })}
             serviceType={serviceType}
             loading={false}

src/utils/dashboard.ts

@@ -159,8 +159,10 @@ export const getDataByType = (payload: {
     showName: (name: string) => string;
   };
   aliasConfig?: any;
+  instanceList?: string[];
 }) => {
-  const { nameObj, type, data, aliasConfig } = payload;
+  const { nameObj, data, aliasConfig, instanceList } = payload;
+  let { type } = payload;
   const { name, showName } = nameObj;
   const res = [] as ILineChartMetric[];
   data.forEach(instance => {
@@ -170,7 +172,11 @@ export const getDataByType = (payload: {
       if (typeof type === 'string') {
         shouldPush = (type === 'all' && _name !== 'total') || _name === type;
       } else if (Array.isArray(type)) {
-        shouldPush = (type.includes('all') && _name !== 'total') || !!type.find(t => _name.includes(t))
+        if (type.includes('all')) {
+          shouldPush= instanceList ? instanceList.some(instance => _name.includes(instance)) : true;
+        } else {
+          shouldPush = !!type.find(t => _name.includes(t))
+        }
       }
       if (shouldPush) {
         res.push({
@@ -192,8 +198,9 @@ export let getDiskData = (payload: {
     name: string;
     showName: (name: string) => string;
   };
+  instanceList?: string[];
 }) => {
-  const { type, data, nameObj } = payload;
+  const { type, data, nameObj, instanceList } = payload;
   const { name, showName } = nameObj;
   const res = [] as ILineChartMetric[];
   data.forEach(instance => {
@@ -204,7 +211,11 @@ export let getDiskData = (payload: {
       if (typeof type === 'string') {
         shouldPush = (type === 'all' && _name !== 'total') || _name === type;
       } else if (Array.isArray(type)) {
-        shouldPush = (type.includes('all') && _name !== 'total') || !!type.find(t => _name.includes(t))
+        if (type.includes('all')) {
+          shouldPush= instanceList ? instanceList.some(instance => _name.includes(instance)) : true;
+        } else {
+          shouldPush = !!type.find(t => _name.includes(t))
+        }
       }
       if (shouldPush) {
         res.push({