feat: refactor tracing according to the new specification

shell/app/common/utils/go-to.tsx

@@ -286,6 +286,8 @@ export enum pages {
   // 微服务-具体事务分析页
   mspServiceTransaction = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/monitor/{terminusKey}/service-analysis/{applicationId}/{serviceId}/{serviceName}/transaction',
 
+  mspServiceAnalysisTrace = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/monitor/{terminusKey}/service-analysis/trace',
+
   mspGatewayIngress = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/synopsis/{terminusKey}/topology/gateway-ingress',
 
   mspExternalInsight = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/synopsis/{terminusKey}/topology/ei/{hostName}/affairs',

shell/app/config-page/components/bubble-graph/bubble-graph.spec.d.ts

@@ -0,0 +1,47 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+declare namespace CP_BUBBLE_GRAPH {
+  interface IProps {
+    theme: 'dark' | 'light';
+    className?: string;
+    useRealSize?: boolean;
+    style: import('react').CSSProperties;
+  }
+
+  interface Spec {
+    type: 'BubbleGraph';
+    props: IProps;
+    data: {
+      title: string;
+      subTitle?: string;
+      list: {
+        dimension: string;
+        group: string;
+        size: {
+          value: number;
+        };
+        x: {
+          unit: string;
+          value: number;
+        };
+        y: {
+          unit: string;
+          value: number;
+        };
+      }[];
+    };
+  }
+
+  type Props = MakeProps<Spec>;
+}

shell/app/config-page/components/bubble-graph/index.tsx

@@ -0,0 +1,153 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { colorToRgb } from 'common/utils';
+import Echarts from 'charts/components/echarts';
+import { functionalColor } from 'common/constants';
+import { groupBy } from 'lodash';
+
+const themeColor = {
+  dark: '#ffffff',
+  light: functionalColor.info,
+};
+
+const genCommonSize = (min: number, max: number, current: number, interval = 5) => {
+  const range = Math.ceil((max - min) / interval);
+  for (let i = 1; i <= interval; i++) {
+    const criticalValue = min + i * range;
+    if (current <= criticalValue) {
+      return criticalValue;
+    }
+  }
+  return current;
+};
+
+type ISerieData = [number, number, number, string, string];
+
+const CP_BubbleGraph: React.FC<CP_BUBBLE_GRAPH.Props> = (props) => {
+  const { props: configProps, data, operations, execOperation, customOp } = props;
+  const color = themeColor[configProps.theme ?? 'light'];
+  const [option, onEvents] = React.useMemo(() => {
+    const dimensions = groupBy(data.list, 'dimension');
+    const dimensionsArr = Object.keys(groupBy(data.list, 'dimension'));
+    const metaData = {};
+    const xAxisData: Array<string | number> = [];
+    const sizeArr: Array<number> = [];
+    dimensionsArr.forEach((dimension) => {
+      const current = dimensions[dimension];
+      current.forEach((item) => {
+        metaData[dimension] ||= [];
+        const xCoords = `${item.x.value}`;
+        const yCoords = `${item.y.value}`;
+        const size = item.size.value;
+        xAxisData.includes(xCoords) || xAxisData.push(xCoords);
+        sizeArr.includes(item.size.value) || sizeArr.push(item.size.value);
+        metaData[dimension].push([xCoords, yCoords, size, item]);
+      });
+    });
+
+    const maxSize = Math.max(...sizeArr);
+    const minSize = Math.min(...sizeArr);
+    const series = Object.keys(metaData).map((dimension) => {
+      return {
+        name: dimension,
+        data: metaData[dimension],
+        type: 'scatter',
+        symbolSize: (meta: ISerieData) => {
+          return configProps.useRealSize ? meta[2] : genCommonSize(minSize, maxSize, meta[2]);
+        },
+        emphasis: {
+          focus: 'series',
+          label: {
+            show: true,
+            formatter: (meta: { data: ISerieData }) => meta.data[2],
+            position: 'inside',
+          },
+        },
+      };
+    });
+    const chartOption = {
+      backgroundColor: 'transparent',
+      legend: {
+        data: (dimensionsArr ?? []).map((item) => ({
+          name: item,
+          textStyle: {
+            color: colorToRgb(color, 0.6),
+          },
+        })),
+        icon: 'reat',
+        itemWidth: 12,
+        itemHeight: 3,
+        type: 'scroll',
+        bottom: true,
+      },
+      grid: {
+        containLabel: true,
+        left: '5%',
+        bottom: 30,
+        top: data.subTitle ? 25 : 10,
+        right: 0,
+      },
+      xAxis: {
+        data: xAxisData,
+        axisLabel: {
+          color: colorToRgb(color, 0.6),
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+      yAxis: {
+        axisLabel: {
+          color: colorToRgb(color, 0.3),
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: [colorToRgb(color, 0.1)],
+          },
+        },
+        scale: true,
+      },
+      series,
+    };
+    const chartEvent = {};
+    if (customOp?.click || operations?.click) {
+      Object.assign(chartEvent, {
+        click: (params: { data: Array<string | number> }) => {
+          customOp?.click && customOp.click(params.data);
+          operations?.click && execOperation(operations.click, params.data);
+        },
+      });
+    }
+    return [chartOption, chartEvent];
+  }, [data.list, operations, customOp, configProps.useRealSize]);
+
+  return (
+    <div className={`px-4 pb-2 ${configProps.className ?? ''}`} style={{ backgroundColor: colorToRgb(color, 0.02) }}>
+      <div
+        className={`title h-12 flex items-center justify-between ${
+          configProps.theme === 'dark' ? 'text-white' : 'text-normal'
+        }`}
+      >
+        {data.title}
+      </div>
+      <div>
+        <Echarts onEvents={onEvents} option={option} style={configProps.style ?? {}} />
+      </div>
+    </div>
+  );
+};
+
+export default CP_BubbleGraph;

shell/app/config-page/components/index.tsx

@@ -80,6 +80,7 @@ import TopN from './top-n';
 import ScaleCard from './scale-card/scale-card';
 import LineGraph from './line-graph';
 import KV from './kv';
+import BubbleGraph from './bubble-graph';
 
 export const containerMap = {
   Alert,
@@ -154,4 +155,5 @@ export const containerMap = {
   DropdownSelect2,
   LineGraph,
   KV,
+  BubbleGraph,
 };

shell/app/config-page/components/table/v2/utils.tsx

@@ -12,8 +12,9 @@
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 import React from 'react';
 import { Tooltip } from 'antd';
-import { ErdaIcon } from 'common';
+import { Copy, ErdaIcon, TagsRow } from 'common';
 import { has } from 'lodash';
+import i18n from 'i18n';
 
 export const convertTableData = (data?: CP_TABLE2.IData, haveBatchOp?: boolean, props?: CP_TABLE2.IProps) => {
   const { columnsMap: pColumnsMap, pageSizeOptions } = props || {};
@@ -94,6 +95,38 @@ export const getRender = (val: Obj, record: Obj) => {
       // Comp = <DropdownSelectNew options={} />
       // }
       break;
+    case 'text':
+      {
+        const value = (typeof data === 'string' ? data : data?.text) || '-';
+        Comp = data.enableCopy ? (
+          <span className="flex group" title={value}>
+            <Copy copyText={value} className="ant-table-cell-ellipsis group-hover:text-purple-deep">
+              {value || i18n.t('copy')}
+            </Copy>
+            <span className="text-desc opacity-0 group-hover:text-purple-deep group-hover:opacity-100">
+              <ErdaIcon type="fz1" size={12} className="ml-1" />
+            </span>
+          </span>
+        ) : (
+          value
+        );
+      }
+      break;
+    case 'labels':
+      {
+        const { labels, showCount } = data;
+        // TODO showCount should be calculated based on the container width
+        Comp = (
+          <TagsRow
+            labels={labels.map((item: { id: string; title?: string; color?: string; group?: string }) => ({
+              ...item,
+              label: item.title || item.id,
+            }))}
+            showCount={showCount ?? 2}
+          />
+        );
+      }
+      break;
     default:
       Comp = (typeof data === 'string' ? data : data?.text) || '-';
       break;