[#noissue] Integrate serviceKey into ServerMap and FilteredMap flows

web-frontend/src/main/v3/packages/ui/src/atoms/serverMap.ts

@@ -44,9 +44,10 @@ export const serverMapCurrentTargetDataAtom = atom((get) => {
     );
   } else if (currentTarget?.type === 'node') {
     return (serverMapData?.applicationMapData?.nodeDataArray as ServerMapNodeDataArray)?.find(
-      ({ key }) =>
+      ({ key, applicationName, serviceType }) =>
         key === currentTarget?.id ||
-        key === `${currentTarget?.applicationName}^${currentTarget?.serviceType}`,
+        (applicationName === currentTarget?.applicationName &&
+          serviceType === currentTarget?.serviceType),
     );
   } else if (currentTarget?.type === 'edge') {
     return (serverMapData?.applicationMapData?.linkDataArray as ServerMapNodeLinkArray)?.find(

web-frontend/src/main/v3/packages/ui/src/components/Application/ApplicationCombinedListForCommon.tsx

@@ -24,6 +24,7 @@ export interface ApplicationCombinedListForCommonProps {
   addFavoriteMessage?: string;
   removeFavoriteMessage?: string;
   onClickApplication?: (application: ApplicationType) => void;
+  formatApplicationName?: (application: ApplicationType) => string;
 }
 
 export const ApplicationCombinedListForCommon = ({
@@ -36,6 +37,7 @@ export const ApplicationCombinedListForCommon = ({
   disabled,
   selectedApplication,
   onClickApplication,
+  formatApplicationName,
 }: ApplicationCombinedListForCommonProps) => {
   const [isOpen, setIsOpen] = React.useState(open);
   const popoverContentRef = React.useRef<HTMLDivElement>(null);
@@ -248,7 +250,11 @@ export const ApplicationCombinedListForCommon = ({
           {selectedApplication ? (
             <div className="flex items-center flex-1 gap-2 overflow-hidden group/applist-input">
               <ServerIcon className="w-6" application={selectedApplication} />
-              <div className="truncate">{selectedApplication.applicationName}</div>
+              <div className="truncate">
+                {formatApplicationName
+                  ? formatApplicationName(selectedApplication)
+                  : selectedApplication.applicationName}
+              </div>
               <div
                 className="flex-none hidden w-5 h-5 ml-auto cursor-pointer group-hover/applist-input:block"
                 onClick={(e) => handleClickFavorite(e, selectedApplication, { disableToast: true })}

web-frontend/src/main/v3/packages/ui/src/components/ChartsBoard/ChartsBoardHeader.tsx

@@ -1,5 +1,5 @@
 import { HiOutlineArrowRight } from 'react-icons/hi';
-import { getApplicationTypeAndName } from '@pinpoint-fe/ui/src/utils';
+import { parseServiceKey, getDisplayApplicationName } from '@pinpoint-fe/ui/src/utils';
 import { Edge } from '@pinpoint-fe/server-map';
 import { ServerIcon } from '../Application/ServerIcon';
 
@@ -25,14 +25,23 @@ export const ChartsBoardHeader = ({ currentTarget }: ChartsBoardHeaderProps) =>
           </>
         ) : (
           (() => {
-            const sourceApp = getApplicationTypeAndName(currentTarget?.source)!;
+            const parsedSource = parseServiceKey(currentTarget?.source ?? '');
+            const sourceApp = {
+              applicationName: getDisplayApplicationName(parsedSource.applicationName),
+              serviceType: parsedSource.serviceType,
+            };
             const targetApp = currentTarget.edges
               ? {
                   applicationName: `total: ${currentTarget.edges.length}`,
-                  serviceType: getApplicationTypeAndName(currentTarget.edges[0].target)!
-                    .serviceType,
+                  serviceType: parseServiceKey(currentTarget.edges[0].target).serviceType,
                 }
-              : getApplicationTypeAndName(currentTarget?.target)!;
+              : (() => {
+                  const parsedTarget = parseServiceKey(currentTarget?.target ?? '');
+                  return {
+                    applicationName: getDisplayApplicationName(parsedTarget.applicationName),
+                    serviceType: parsedTarget.serviceType,
+                  };
+                })();
 
             return (
               <div className="flex items-center justify-between w-full">

web-frontend/src/main/v3/packages/ui/src/components/FilterMap/FilterWizard.tsx

@@ -19,7 +19,7 @@ import { PiDotOutlineLight } from 'react-icons/pi';
 import { GoDot } from 'react-icons/go';
 import { FilterStatus } from './FilterStatus';
 import { FilteredMapType as FilteredMap } from '@pinpoint-fe/ui/src/constants';
-import { addCommas, getApplicationTypeAndName } from '@pinpoint-fe/ui/src/utils';
+import { addCommas, parseServiceKey, getDisplayApplicationName } from '@pinpoint-fe/ui/src/utils';
 import { Edge, Node } from '@pinpoint-fe/ui/src/utils/helper/serverMap';
 import { PopoverArrow } from '@radix-ui/react-popover';
 
@@ -56,14 +56,16 @@ export const getDefaultFilters = (
 ) => {
   if ('source' in data) {
     const edgeData = data as Edge;
-    // edge
-    const from = getApplicationTypeAndName(edgeData.source);
-    const to = getApplicationTypeAndName(edgeData.target);
+    // edge — source/target are keys: serviceName^applicationName^serviceType
+    const from = parseServiceKey(edgeData.source);
+    const to = parseServiceKey(edgeData.target);
     return {
-      fromApplication: from?.applicationName,
-      fromServiceType: from?.serviceType,
-      toApplication: to?.applicationName,
-      toServiceType: to?.serviceType,
+      fromApplication: getDisplayApplicationName(from.applicationName),
+      fromServiceType: from.serviceType,
+      fromServiceName: from.serviceName,
+      toApplication: getDisplayApplicationName(to.applicationName),
+      toServiceType: to.serviceType,
+      toServiceName: to.serviceName,
       transactionResult: null,
       applicationName: '',
       serviceType: '',
@@ -79,17 +81,18 @@ export const getDefaultFilters = (
       hint,
     };
   } else if ('type' in data) {
-    // node
+    // node — id is key: serviceName^applicationName^serviceType
     const nodeData = data as Node;
-    const app = getApplicationTypeAndName(nodeData.id);
+    const { serviceName, applicationName, serviceType } = parseServiceKey(nodeData.id);
     return {
       fromApplication: '',
       fromServiceType: '',
       toApplication: '',
       toServiceType: '',
       transactionResult: null,
-      applicationName: app?.applicationName,
-      serviceType: app?.serviceType,
+      applicationName: getDisplayApplicationName(applicationName),
+      serviceType,
+      serviceName,
       agentName: '',
       responseFrom: MIN_RESPONSE_TIME,
       responseTo: 'max',

web-frontend/src/main/v3/packages/ui/src/components/FilterMap/FilteredMapFetcher.tsx

@@ -12,6 +12,8 @@ import {
   mergeFilteredMapLinkData,
   getServerImagePath,
   getBaseNodeId,
+  parseServiceKey,
+  getDisplayApplicationName,
 } from '@pinpoint-fe/ui/src/utils';
 import { MergedNode, MergedEdge, Node, Edge } from '@pinpoint-fe/server-map';
 import { useFilteredMapParameters, useGetFilteredServerMapData } from '@pinpoint-fe/ui/src/hooks';
@@ -155,10 +157,13 @@ export const FilteredMapFetcher = ({
   };
 
   const handleMergeStateChange = () => {
-    const [applicationName, serviceType] = getBaseNodeId({
-      application,
-      applicationMapData: data?.applicationMapData,
-    }).split('^');
+    const { applicationName: parsedAppName, serviceType } = parseServiceKey(
+      getBaseNodeId({
+        application,
+        applicationMapData: data?.applicationMapData,
+      }),
+    );
+    const applicationName = getDisplayApplicationName(parsedAppName);
 
     setServerMapCurrentTarget({
       applicationName,

web-frontend/src/main/v3/packages/ui/src/components/ServerMap/ServerMapFetcher.tsx

@@ -12,7 +12,12 @@ import {
   useServerMapSearchParameters,
 } from '@pinpoint-fe/ui/src/hooks';
 import { useTranslation } from 'react-i18next';
-import { getBaseNodeId, getServerImagePath } from '@pinpoint-fe/ui/src/utils';
+import {
+  getBaseNodeId,
+  getServerImagePath,
+  parseServiceKey,
+  getDisplayApplicationName,
+} from '@pinpoint-fe/ui/src/utils';
 import { ServerMapCore, ServerMapCoreProps } from './ServerMapCore';
 
 export interface ServerMapFetcherProps extends Pick<
@@ -71,10 +76,13 @@ export const ServerMapFetcher = ({ shouldPoll, ...props }: ServerMapFetcherProps
 
   const handleMergeStateChange = () => {
     if (data) {
-      const [applicationName, serviceType] = getBaseNodeId({
-        application,
-        applicationMapData: data?.applicationMapData,
-      }).split('^');
+      const { applicationName: parsedAppName, serviceType } = parseServiceKey(
+        getBaseNodeId({
+          application,
+          applicationMapData: data?.applicationMapData,
+        }),
+      );
+      const applicationName = getDisplayApplicationName(parsedAppName);
 
       setServerMapCurrentTarget({
         applicationName,

web-frontend/src/main/v3/packages/ui/src/constants/types/Application.ts

@@ -2,4 +2,5 @@ export type ApplicationType = {
   code?: number;
   serviceType?: string;
   applicationName?: string;
+  serviceName?: string;
 };

web-frontend/src/main/v3/packages/ui/src/constants/types/FilteredMap.ts

@@ -10,14 +10,17 @@ export namespace FilteredMapType {
   export interface FilterState {
     fromApplication?: SearchParameters['fa']; // from applicationName
     fromServiceType?: SearchParameters['fst']; // from serviceType
+    fromServiceName?: string; // from serviceName
     fromAgents?: string[];
     toApplication?: SearchParameters['ta']; // to applicationName
     toServiceType?: SearchParameters['tst']; // to serviceType
+    toServiceName?: string; // to serviceName
     toAgents?: string[];
     transactionResult: SearchParameters['ie']; // include exception (X)
     // if single node
     applicationName?: SearchParameters['a']; //  applicationName
     serviceType?: SearchParameters['st']; // serviceType
+    serviceName?: string; // serviceName
     agentName?: SearchParameters['an']; // agentName
     agents?: string[];
     // settings by user
@@ -207,6 +210,7 @@ export namespace FilteredMapType {
 
   export interface NodeData {
     key: string;
+    serviceName?: string;
     applicationName: string;
     serviceType: string;
     serviceTypeCode: number;

web-frontend/src/main/v3/packages/ui/src/hooks/searchParameters/useFilteredMapParameters.ts

@@ -1,14 +1,14 @@
 import { useLocation } from 'react-router-dom';
 import {
-  getApplicationTypeAndName,
+  getApplicationTypeAndNameFromServicePath,
   parseFilterStateFromQueryString,
 } from '@pinpoint-fe/ui/src/utils';
 import { getSearchParameters, getDateRange } from './utils';
 
 export const useFilteredMapParameters = () => {
   const { search, pathname } = useLocation();
   const searchParameters = getSearchParameters(search);
-  const application = getApplicationTypeAndName(pathname);
+  const application = getApplicationTypeAndNameFromServicePath(pathname);
   const dateRange = getDateRange(search, false);
   const parsedFilters = parseFilterStateFromQueryString(searchParameters.filter);
   const parsedHint = (() => {

web-frontend/src/main/v3/packages/ui/src/hooks/serverMap/useFilterWizardOnClickApply.ts

@@ -29,8 +29,10 @@ export function useFilterWizardOnClickApply<
     if (!filterState?.applicationName) {
       const link = (serverMapData?.applicationMapData?.linkDataArray as T[])?.find(
         (l) =>
-          l?.key ===
-          `${filterState?.fromApplication}^${filterState?.fromServiceType}~${filterState?.toApplication}^${filterState?.toServiceType}`,
+          l?.sourceInfo?.applicationName === filterState?.fromApplication &&
+          l?.sourceInfo?.serviceType === filterState?.fromServiceType &&
+          l?.targetInfo?.applicationName === filterState?.toApplication &&
+          l?.targetInfo?.serviceType === filterState?.toServiceType,
       );
       if (link) {
         soureIsWas = link?.sourceInfo?.nodeCategory === GetServerMap.NodeCategory.SERVER;

web-frontend/src/main/v3/packages/ui/src/pages/FilteredMap.tsx

@@ -5,7 +5,6 @@ import {
   convertParamsToQueryString,
   getServerImagePath,
   getFilteredMapPath,
-  getApplicationKey,
   getServerMapPath,
 } from '@pinpoint-fe/ui/src/utils';
 import { useFilteredMapParameters } from '@pinpoint-fe/ui/src/hooks';
@@ -87,7 +86,11 @@ export const FilteredMapPage = ({
           return {
             ...prevFilter,
             agents: (serverMapData?.applicationMapData.nodeDataArray as FilteredMap.NodeData[])
-              ?.find((n) => n.key === `${prevFilter.applicationName}^${prevFilter.serviceType}`)
+              ?.find(
+                (n) =>
+                  n.applicationName === prevFilter.applicationName &&
+                  n.serviceType === prevFilter.serviceType,
+              )
               ?.agents?.map((agent) => agent.id),
           };
         } else if (
@@ -100,8 +103,10 @@ export const FilteredMapPage = ({
             serverMapData?.applicationMapData.linkDataArray as FilteredMap.LinkData[]
           )?.find(
             (n) =>
-              n.key ===
-              `${prevFilter.fromApplication}^${prevFilter.fromServiceType}~${prevFilter.toApplication}^${prevFilter.toServiceType}`,
+              n.sourceInfo.applicationName === prevFilter.fromApplication &&
+              n.sourceInfo.serviceType === prevFilter.fromServiceType &&
+              n.targetInfo.applicationName === prevFilter.toApplication &&
+              n.targetInfo.serviceType === prevFilter.toServiceType,
           );
 
           return {
@@ -137,7 +142,8 @@ export const FilteredMapPage = ({
           serverMapData.applicationMapData.nodeDataArray as GetServerMap.NodeData[]
         ).find((node) => {
           return (
-            getApplicationKey(application!) === node.key ||
+            (node.applicationName === application?.applicationName &&
+              node.serviceType === application?.serviceType) ||
             (node.applicationName === application?.applicationName &&
               node.serviceType === 'UNAUTHORIZED')
           );
@@ -213,7 +219,11 @@ export const FilteredMapPage = ({
           </div>
         }
       >
-        <ApplicationList selectedApplication={application} disabled />
+        <ApplicationList
+          selectedApplication={application}
+          disabled
+          formatApplicationName={(app) => `${app.serviceName ?? 'DEFAULT'}^${app.applicationName}`}
+        />
         <div className="ml-auto">
           {application && (
             <DatetimePicker

web-frontend/src/main/v3/packages/ui/src/pages/ServerMap.tsx

@@ -6,7 +6,6 @@ import {
   getServerMapPath,
   convertParamsToQueryString,
   getServerImagePath,
-  getApplicationKey,
   getFormattedDateRange,
   getRealtimePath,
 } from '@pinpoint-fe/ui/src/utils';
@@ -95,7 +94,8 @@ export const ServerMapPage = ({
           serverMapData.applicationMapData.nodeDataArray as GetServerMap.NodeData[]
         ).find((node) => {
           return (
-            getApplicationKey(application!) === node.key ||
+            (node.applicationName === application?.applicationName &&
+              node.serviceType === application?.serviceType) ||
             (node.applicationName === application?.applicationName &&
               node.serviceType === 'UNAUTHORIZED')
           );