fix: cloud version metrics multi line

src/pages/MachineDashboard/Cards/CPUCard.tsx

@@ -2,8 +2,9 @@ import { connect } from 'react-redux';
 import { IRootState } from '@/store';
 
 import LineCard from '@/components/DashboardCard/LineCard';
-import { getDataByType } from '@/utils/dashboard';
+import { getDataByType, getMetricsUniqName } from '@/utils/dashboard';
 import { VALUE_TYPE } from '@/utils/promQL';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { cpuStat, metricsFilterValues } = state.machine;
@@ -15,7 +16,7 @@ const mapState = (state: IRootState) => {
     data: getDataByType({
       data: cpuStat,
       type: metricsFilterValues.instanceList,
-      name: 'instance',
+      nameObj: getMetricsUniqName(MetricScene.CPU),
       aliasConfig,
     }),
     valueType: VALUE_TYPE.percentage,

src/pages/MachineDashboard/Cards/LoadCard.tsx

@@ -2,8 +2,9 @@ import { connect } from 'react-redux';
 import { IRootState } from '@/store';
 
 import LineCard from '@/components/DashboardCard/LineCard';
-import { getDataByType } from '@/utils/dashboard';
+import { getDataByType, getMetricsUniqName } from '@/utils/dashboard';
 import { VALUE_TYPE } from '@/utils/promQL';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { loadStat, metricsFilterValues } = state.machine;
@@ -14,7 +15,7 @@ const mapState = (state: IRootState) => {
     data: getDataByType({
       data: loadStat,
       type: metricsFilterValues.instanceList,
-      name: 'instance',
+      nameObj: getMetricsUniqName(MetricScene.MACHINE),
       aliasConfig,
     }),
     valueType: VALUE_TYPE.number,

src/pages/MachineDashboard/Cards/MemoryCard.tsx

@@ -1,8 +1,9 @@
 import { connect } from 'react-redux';
 import LineCard from '@/components/DashboardCard/LineCard';
 import { IRootState } from '@/store';
-import { getDataByType } from '@/utils/dashboard';
+import { getDataByType, getMetricsUniqName } from '@/utils/dashboard';
 import { VALUE_TYPE } from '@/utils/promQL';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { memoryStat, memorySizeStat, metricsFilterValues } = state.machine;
@@ -12,7 +13,7 @@ const mapState = (state: IRootState) => {
     data: getDataByType({
       data: memoryStat,
       type: metricsFilterValues.instanceList,
-      name: 'instance',
+      nameObj: getMetricsUniqName(MetricScene.MACHINE),
       aliasConfig,
     }),
     sizes: memorySizeStat,

src/pages/MachineDashboard/Cards/NetworkIn.tsx

@@ -2,8 +2,9 @@ import { connect } from 'react-redux';
 import { IRootState } from '@/store';
 
 import LineCard from '@/components/DashboardCard/LineCard';
-import { getDataByType } from '@/utils/dashboard';
+import { getDataByType, getMetricsUniqName } from '@/utils/dashboard';
 import { VALUE_TYPE } from '@/utils/promQL';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { networkInStat, metricsFilterValues } = state.machine;
@@ -14,7 +15,7 @@ const mapState = (state: IRootState) => {
     data: getDataByType({
       data: networkInStat,
       type: metricsFilterValues.instanceList,
-      name: 'instance',
+      nameObj: getMetricsUniqName(MetricScene.NETWORK),
       aliasConfig,
     }),
     valueType: VALUE_TYPE.byteSecondNet,

src/pages/MachineDashboard/Cards/NetworkOut.tsx

@@ -3,7 +3,8 @@ import { IRootState } from '@/store';
 import { VALUE_TYPE } from '@/utils/promQL';
 
 import LineCard from '@/components/DashboardCard/LineCard';
-import { getDataByType } from '@/utils/dashboard';
+import { getDataByType, getMetricsUniqName } from '@/utils/dashboard';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { networkOutStat, metricsFilterValues } = state.machine;
@@ -14,7 +15,7 @@ const mapState = (state: IRootState) => {
     data: getDataByType({
       data: networkOutStat,
       type: metricsFilterValues.instanceList,
-      name: 'instance',
+      nameObj: getMetricsUniqName(MetricScene.NETWORK),
       aliasConfig,
     }),
     valueType: VALUE_TYPE.byteSecondNet,

src/pages/MachineDashboard/Detail/CPUDetail.tsx

@@ -2,10 +2,13 @@ import { connect } from 'react-redux';
 import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
+import { getMetricsUniqName } from '@/utils/dashboard';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => ({
   type: 'cpu',
   metricOptions: SUPPORT_METRICS.cpu,
+  dataTypeObj: getMetricsUniqName(MetricScene.CPU),
   loading: !!state.loading.effects.machine.asyncGetCPUStatByRange,
 });
 

src/pages/MachineDashboard/Detail/DiskDetail.tsx

@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
+import { getMetricsUniqName } from '@/utils/dashboard';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => ({
   type: 'disk',
   instances: state.machine.instanceList,
   metricOptions: SUPPORT_METRICS.disk,
+  dataTypeObj: getMetricsUniqName(MetricScene.MACHINE),
   metricsFilterValues: state.machine.metricsFilterValues,
   loading: state.loading.effects.machine.asyncGetDiskStatByRange,
 });

src/pages/MachineDashboard/Detail/LoadDetail.tsx

@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
+import { getMetricsUniqName } from '@/utils/dashboard';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => ({
   type: 'load',
   instances: state.machine.instanceList,
   metricOptions: SUPPORT_METRICS.load,
+  dataTypeObj: getMetricsUniqName(MetricScene.MACHINE),
   metricsFilterValues: state.machine.metricsFilterValues,
   loading: state.loading.effects.machine.asyncGetLoadByRange,
 });

src/pages/MachineDashboard/Detail/MemoryDetail.tsx

@@ -3,10 +3,13 @@ import { connect } from 'react-redux';
 import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
+import { getMetricsUniqName } from '@/utils/dashboard';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => ({
   type: 'memory',
   metricOptions: SUPPORT_METRICS.memory,
+  dataTypeObj: getMetricsUniqName(MetricScene.MACHINE),
   loading: state.loading.effects.machine.asyncGetMemoryStatByRange,
 });
 

src/pages/MachineDashboard/Detail/NetworkDetail.tsx

@@ -2,10 +2,13 @@ import { connect } from 'react-redux';
 import Detail from '.';
 import { IDispatch, IRootState } from '@/store';
 import { SUPPORT_METRICS } from '@/utils/promQL';
+import { getMetricsUniqName } from '@/utils/dashboard';
+import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => ({
   type: 'network',
   metricOptions: SUPPORT_METRICS.network,
+  dataTypeObj: getMetricsUniqName(MetricScene.NETWORK),
   loading: state.loading.effects.machine.asyncGetNetworkStatByRange,
 });
 

src/pages/MachineDashboard/Detail/index.tsx

@@ -50,13 +50,14 @@ interface IProps
     valueType: VALUE_TYPE;
   }[];
   loading: true;
+  dataTypeObj: any;
 }
 
 let pollingTimer: any;
 
 function Detail(props: IProps) {
 
-  const { metricOptions, loading, aliasConfig, asyncGetDataSourceByRange, asyncUpdateBaseLine, cluster, instances, metricsFilterValues, updateMetricsFiltervalues, type } = props;
+  const { metricOptions, loading, aliasConfig, asyncGetDataSourceByRange, asyncUpdateBaseLine, cluster, instances, metricsFilterValues, updateMetricsFiltervalues, type, dataTypeObj } = props;
 
   const [maxNum, setMaxNum] = useState<number>(0);
   const [dataSources, setDataSources] = useState<any[]>([]);
@@ -158,12 +159,13 @@ function Detail(props: IProps) {
         getDiskData({
           data: dataSources[i] || [],
           type: metricsFilterValues.instanceList,
+          nameObj: dataTypeObj,
           aliasConfig,
         }) :
         getDataByType({
           data: dataSources[i] || [],
           type: metricsFilterValues.instanceList,
-          name: 'instance',
+          nameObj: dataTypeObj,
           aliasConfig,
         });
         setMaxNum(100);

src/pages/ServiceDashboard/Detail/index.tsx

@@ -10,10 +10,11 @@ import {
   calcTimeRange,
   getBaseLineByUnit,
   getMaxNum,
+  getMetricsUniqName,
 } from '@/utils/dashboard';
 import { IDispatch, IRootState } from '@/store';
 import { VALUE_TYPE } from '@/utils/promQL';
-import { IMetricOption, ServiceMetricsPanelValue } from '@/utils/interface';
+import { IMetricOption, MetricScene, ServiceMetricsPanelValue } from '@/utils/interface';
 
 import LineChart from '@/components/Charts/LineChart';
 import { configDetailChart, updateDetailChart } from '@/utils/chart/chart';
@@ -216,7 +217,7 @@ function ServiceDetail(props: IProps) {
         const data = getDataByType({
           data: dataSources[i] || [],
           type: instanceList,
-          name: 'instanceName',
+          nameObj: getMetricsUniqName(MetricScene.SERVICE),
           aliasConfig,
         });
         chart.maxNum = getMaxNum(data);

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

@@ -3,8 +3,8 @@ import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
 import { Popover } from 'antd';
 import Icon from '@/components/Icon';
-import { IServicePanelConfig } from '@/utils/interface';
-import { calcTimeRange, getDataByType } from '@/utils/dashboard';
+import { IServicePanelConfig, MetricScene } from '@/utils/interface';
+import { calcTimeRange, getDataByType, getMetricsUniqName } from '@/utils/dashboard';
 import Card from '@/components/Service/ServiceCard/Card';
 import { IDispatch, IRootState } from '@/store';
 import { shouldCheckCluster } from '@/utils';
@@ -117,7 +117,7 @@ function CustomServiceQueryPanel(props: IProps) {
             data={getDataByType({
               data,
               type: metricsFilterValues.instanceList,
-              name: 'instanceName',
+              nameObj: getMetricsUniqName(MetricScene.SERVICE),
               aliasConfig,
             })}
             loading={false}

src/utils/dashboard.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { ILineChartMetric, IStatRangeItem } from '@/utils/interface';
+import { DashboardType, ILineChartMetric, IStatRangeItem, MetricScene } from '@/utils/interface';
 import { VALUE_TYPE } from '@/utils/promQL';
 
 export const DETAIL_DEFAULT_RANGE = 60 * 60 * 24 * 1000;
@@ -145,10 +145,14 @@ export const getProperByteDesc = (bytes: any, conversion: number) => {
 export const getDataByType = (payload: {
   data: IStatRangeItem[];
   type?: string | string[];
-  name: string;
+  nameObj: {
+    name: string;
+    showName: (name: string) => string;
+  };
   aliasConfig?: any;
 }) => {
-  const { name, type, data, aliasConfig } = payload;
+  const { nameObj, type, data, aliasConfig } = payload;
+  const { name, showName } = nameObj;
   const res = [] as ILineChartMetric[];
   data.forEach(instance => {
     instance.values.forEach(([timstamps, value]) => {
@@ -161,7 +165,7 @@ export const getDataByType = (payload: {
       }
       if (shouldPush) {
         res.push({
-          type: aliasConfig && aliasConfig[_name] ? aliasConfig[_name] : _name,
+          type: showName(aliasConfig && aliasConfig[_name] ? aliasConfig[_name] : _name),
           value: Number(value),
           time: timstamps,
         });
@@ -175,13 +179,18 @@ export const getDiskData = (payload: {
   data: IStatRangeItem[];
   type?: string | string[];
   aliasConfig?: any;
+  nameObj: {
+    name: string;
+    showName: (name: string) => string;
+  };
 }) => {
-  const { type, data } = payload;
+  const { type, data, nameObj } = payload;
+  const { name, showName } = nameObj;
   const res = [] as ILineChartMetric[];
   data.forEach(instance => {
     instance.values.forEach(([timstamps, value]) => {
       const device = instance.metric['device'];
-      const _name = instance.metric['instance'];
+      const _name = instance.metric[name];
       let shouldPush = false;
       if (typeof type === 'string') {
         shouldPush = (type === 'all' && _name !== 'total') || _name === type;
@@ -190,7 +199,7 @@ export const getDiskData = (payload: {
       }
       if (shouldPush) {
         res.push({
-          type: `${_name}-${device}`,
+          type: `${showName(_name)}-${device}`,
           value: Number(value),
           time: timstamps,
         });
@@ -218,7 +227,7 @@ export enum TIME_OPTION_TYPE {
   HOUR12 = '12hour',
   DAY1 = '1day',
   DAY3 = '3day',
-  DAY7  = '7day',
+  DAY7 = '7day',
   DAY14 = '14day',
 }
 
@@ -278,7 +287,7 @@ export const calcTimeRange = (timeRange: TIME_OPTION_TYPE | [number, number]): [
   if (typeof timeRange === 'string') {
     const value = TIMEOPTIONS.find(t => t.name === timeRange)?.value!;
     return [end - value, end];
-  } else if ( typeof timeRange === 'object' && timeRange.length === 2) {
+  } else if (typeof timeRange === 'object' && timeRange.length === 2) {
     return timeRange;
   }
   throw new Error('timeRange is not valid');
@@ -383,3 +392,50 @@ export function getVersion(v: string) {
   const match = v?.match(VERSION_REGEX);
   return match ? match[0] : v;
 }
+
+export const getMetricsUniqName = (scene: MetricScene) => {
+  const dashboardType = VERSION_TYPE?.type;
+  switch (dashboardType) {
+    case DashboardType.CLOUD:
+      if (scene === MetricScene.MACHINE) {
+        return {
+          name: 'pod',
+          showName: (name) => name ? name.slice(name.lastIndexOf('-') + 1) : name
+        }
+      }
+      if (scene === MetricScene.CPU || scene === MetricScene.NETWORK) {
+        return {
+          name: 'instance',
+          showName: (name) => name ? name.slice(name.lastIndexOf('-') + 1) : name
+        }
+      }
+      if (scene === MetricScene.SERVICE) {
+        return {
+          name: 'kubernetes_pod_name',
+          showName: (name) => name ? name.slice(name.split('-').slice(2).join('-')) : name
+        }
+      }
+      if (scene === MetricScene.DISK) {
+        return {
+          name: 'pod',
+          showName: (name) => name ? name.slice(name.split('-').slice(2).join('-')) : name
+        }
+      }
+      break;
+    default:
+      if (scene === MetricScene.SERVICE) {
+        return {
+          name: 'instanceName',
+          showName: (name) => name
+        }
+      }
+      return {
+        name: 'instance',
+        showName: (name) => name
+      }
+  }
+  return {
+    name: 'instance',
+    showName: (name) => name
+  }
+}