[#noissue] fix servermap numaric display

pinpoint-apm · Apr 24, 2024 · 80e6969 · 80e6969
1 parent 93aab08
commit 80e6969
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 11 deletions.
diff --git a/web-frontend/src/main/v3/packages/server-map/src/constants/style/theme.ts b/web-frontend/src/main/v3/packages/server-map/src/constants/style/theme.ts
@@ -71,7 +71,7 @@ export const defaultTheme: DeepNonNullable<ServerMapTheme> = {
       'text-halign': 'center',
       'text-margin-y': 4,
       'overlay-opacity': 0,
-      'font-family': 'Helvetica, Arial, avn85, NanumGothic, ng, dotum, AppleGothic, sans-serif',
+      'font-family': 'Arial, Helvetica, sans-serif',
       'font-size': 12,
       'font-weight': 'normal',
       'text-wrap': 'wrap',
@@ -92,8 +92,9 @@ export const defaultTheme: DeepNonNullable<ServerMapTheme> = {
   edge: {
     default: {
       width: 1.5,
-      'font-size': '12px',
+      'font-size': 12,
       'font-weight': 'normal',
+      'font-family': 'Arial, Helvetica, sans-serif',
       'line-color': '#C0C3C8',
       'target-arrow-color': '#C0C3C8',
       'target-arrow-shape': 'triangle',

diff --git a/web-frontend/src/main/v3/packages/server-map/src/core/merge.ts b/web-frontend/src/main/v3/packages/server-map/src/core/merge.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { Node, Edge, MergedNode, MergedEdge } from '../types';
-import { getTransactionStatusSVGString } from '../ui/template/node';
+import { getNodeSVGString } from '../ui/template/node';
+import { ServerMapProps } from '../ui';
 type GroupBySource = { [key: string]: string[] };
 
 const mergeNodes = ({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) => {
@@ -105,7 +106,10 @@ const groupByType = (groupBySource: GroupBySource, nodes: Node[]) => {
   );
 };
 
-export const getMergedData = (data: { nodes: Node[]; edges: Edge[] }) => {
+export const getMergedData = (
+  data: { nodes: Node[]; edges: Edge[] },
+  renderNode?: ServerMapProps['renderNode'],
+) => {
   const { edges, nodes } = data;
   const mergedTypes = new Set<string>();
   const targetNodeIds = edges.map((edge) => edge.target);
@@ -314,7 +318,7 @@ export const getMergedData = (data: { nodes: Node[]; edges: Edge[] }) => {
         return {
           data: {
             ...node,
-            imgArr: [node?.imgPath, getTransactionStatusSVGString(node)],
+            imgArr: [node?.imgPath, getNodeSVGString(node, renderNode)],
           },
         };
       }),

diff --git a/web-frontend/src/main/v3/packages/server-map/src/ui/ServerMap.tsx b/web-frontend/src/main/v3/packages/server-map/src/ui/ServerMap.tsx
@@ -29,6 +29,7 @@ export interface ServerMapProps extends Pick<React.HTMLProps<HTMLDivElement>, 'c
   onDataMerged?: (mergeInfo: MergeInfo) => void;
   renderNodeLabel?: (node: MergedNode) => string | undefined;
   renderEdgeLabel?: (edge: MergedEdge) => string | undefined;
+  renderNode?: (node: MergedNode, transactionStatusSVGString: string) => string;
   cy?: (cy: cytoscape.Core) => void;
 }
 
@@ -42,6 +43,7 @@ export const ServerMap = ({
   onDataMerged,
   renderNodeLabel,
   renderEdgeLabel,
+  renderNode,
   className,
   style,
   cy,
@@ -110,7 +112,7 @@ export const ServerMap = ({
     if (data) {
       const cy = cyRef.current;
       if (cy) {
-        const { nodes: newNodes, edges: newEdges, mergeInfo } = getMergedData(data);
+        const { nodes: newNodes, edges: newEdges, mergeInfo } = getMergedData(data, renderNode);
         let addedNodes: cytoscape.CollectionReturnValue[] | undefined;
         onDataMerged?.(mergeInfo);
 

diff --git a/web-frontend/src/main/v3/packages/server-map/src/ui/template/node.ts b/web-frontend/src/main/v3/packages/server-map/src/ui/template/node.ts
@@ -1,19 +1,22 @@
 import { Node } from '../../types';
 import { defaultTheme } from '../../constants/style/theme';
+import { ServerMapProps } from '../ServerMap';
 
 type TransactionInfo = Node['transactionInfo'];
 
 const MIN_ARC_RATIO = 0.05;
 const RADIUS = 47;
 const DIAMETER = 2 * Math.PI * RADIUS;
 
-export const getTransactionStatusSVGString = (nodeData: Node): string => {
+export const getNodeSVGString = (nodeData: Node, renderNode?: ServerMapProps['renderNode']) => {
   const { transactionInfo } = nodeData;
+  const transactionStatusSVGString = getTransactionStatusSVGCircle(transactionInfo, !transactionInfo);
+
   return (
     'data:image/svg+xml;charset=utf-8,' +
     encodeURIComponent(`
     <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">
-      ${getTransactionStatusSVGCircle(transactionInfo, !transactionInfo)}
+      ${renderNode ? renderNode(nodeData, transactionStatusSVGString) : transactionStatusSVGString}
     </svg>
   `)
   );

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/ServerMap/ServerMapCore.tsx b/web-frontend/src/main/v3/packages/ui/src/components/ServerMap/ServerMapCore.tsx
@@ -5,9 +5,10 @@ import {
   Edge,
   ServerMap as ServerMapComponent,
   ServerMapProps as ServerMapComponentProps,
+  MergedEdge,
 } from '@pinpoint-fe/server-map';
 import { FilteredMap, GetServerMap } from '@pinpoint-fe/constants';
-import { getServerImagePath } from '@pinpoint-fe/utils';
+import { addCommas, getServerImagePath } from '@pinpoint-fe/utils';
 import {
   ServerMapMenu,
   SERVERMAP_MENU_CONTENT_TYPE,
@@ -114,6 +115,7 @@ export const ServerMapCore = ({
       target: link.to,
       transactionInfo: {
         totalCount: link.totalCount,
+        avgResponseTime: link.responseStatistics.Avg,
       },
     }));
 
@@ -134,6 +136,7 @@ export const ServerMapCore = ({
         }, 0),
         slow: node.histogram?.Slow,
         bad: node.histogram?.Error,
+        instanceCount: node.instanceCount,
       };
     }
   };
@@ -363,8 +366,28 @@ export const ServerMapCore = ({
             <ServerMapComponent
               baseNodeId={baseNodeId}
               data={serverMapData}
-              renderEdgeLabel={(edge: Edge) => {
-                return edge?.transactionInfo?.totalCount;
+              renderNode={(node, transactionStatusSVGString) => {
+                return `
+                  ${transactionStatusSVGString}
+                  ${
+                    node.transactionInfo?.instanceCount &&
+                    `<text 
+                      x="50" y="80"
+                      font-size="smaller"
+                      dominant-baseline="middle"
+                      text-anchor="middle"
+                      font-family="Arial, Helvetica, sans-serif"
+                    >${node.transactionInfo?.instanceCount}</text>`
+                  }
+                `;
+              }}
+              renderEdgeLabel={(edge: MergedEdge) => {
+                if (edge?.transactionInfo?.totalCount) {
+                  return `${addCommas(edge?.transactionInfo?.totalCount)}${edge.transactionInfo?.avgResponseTime ? ` (${edge.transactionInfo.avgResponseTime} ms)` : ''}`;
+                } else if (edge?.edges) {
+                  return `${edge.edges.reduce((acc, curr) => acc + curr.transactionInfo?.totalCount, 0)}`;
+                }
+                return '';
               }}
               onClickBackground={handleClickBackground}
               onClickNode={handleClickNode}