Topology Tooltips

@jennifersoft/apm-components의 토폴로지 툴팁 컴포넌트 문서입니다. 이 문서는 @jennifersoft/apm-components@1.4.1 기준으로 정리했습니다.

TopologyChart에서 노드·엣지에 마우스를 올렸을 때 띄우는 상세 툴팁 모음입니다. BaseTooltip이 위치 계산과 껍데기를 담당하고, 나머지 4개가 대상 종류별 본문을 채웁니다.

BaseTooltip                절대 위치 · 말풍선 · pointer-events 차단
├── EdgeTooltip            엣지(호출 관계) 통계
├── NodeDomainTooltip      도메인 노드
├── NodeInstanceTooltip    인스턴스 노드
└── NodeRemoteCallTooltip  원격 호출 노드

인터랙티브 데모

NOTE

위 데모는 상세 데이터를 하드코딩했습니다. 실제로는 노드 hover 시점에 API를 호출하고, 응답 전까지 isLoading을 true로 둡니다. isLoading 체크박스로 그 상태를 볼 수 있습니다.

공통 Props (BaseTooltipProps)

4개 툴팁 모두 BaseTooltipProps를 상속합니다.

Prop	타입	기본값	설명
`visible`	`boolean`	— (필수)	표시 여부
`targetCenterX`	`number`	— (필수)	대상 요소의 중앙 X 좌표
`targetCenterY`	`number`	— (필수)	대상 요소의 중앙 Y 좌표
`contentPadding`	`number`	`16`	컨텐츠 패딩
`offset`	`number`	`0`	대상에서 띄울 추가 간격
`cursorNone`	`boolean`	`false`	커서 앵커(삼각형) 숨김
`showTooltipButton`	`boolean`	`undefined`	하단 분석 버튼 노출 여부

좌표는 툴팁을 감싸는 position: relative 컨테이너 기준입니다. 툴팁은 translate(-50%, calc(-100% - 10px - offset))으로 대상 위쪽 중앙에 배치됩니다.

NOTE

BaseTooltip은 pointer-events: none이고 z-index: 2001입니다. 툴팁이 마우스 이벤트를 가로채지 않으므로 아래 노드의 hover가 끊기지 않습니다. 다만 툴팁 안의 버튼을 누르려면 파생 컴포넌트가 해당 영역만 pointer-events를 되살려야 합니다.

BaseTooltip

위치와 말풍선만 담당하는 껍데기입니다. 커스텀 툴팁을 만들 때 기본 슬롯에 본문을 넣습니다.

vue

<script setup lang="ts">
import { BaseTooltip } from '@jennifersoft/apm-components';
</script>

<template>
    <BaseTooltip
        :visible="hovered"
        :target-center-x="node.x"
        :target-center-y="node.y"
        :offset="4"
    >
        <div>사용자 정의 본문</div>
    </BaseTooltip>
</template>

EdgeTooltip

엣지(호출 관계)의 통계를 표시합니다.

Props

BaseTooltipProps + 아래 항목

Prop	타입	설명
`selectedEdge`	`TopologyEdge?`	호버된 엣지 (차트 이벤트에서 전달)
`detailEdgeData`	`EdgeDetailData?`	엣지 상세 API 응답
`isLoading`	`boolean?`	상세 조회 중 여부

이벤트

typescript

emit('edge-analysis', data?: EdgeDetailData)  // 트랜잭션 분석 버튼 클릭

평균 응답시간은 컴포넌트가 statistic.timeSum / statistic.count로 계산합니다. count가 0이면 0을 표시하므로 호출자가 나눗셈을 미리 할 필요가 없습니다.

NodeDomainTooltip

도메인 노드의 요약 지표를 표시합니다.

Prop	타입
`selectedNode`	`TopologyNode?`
`detailNodeData`	`NodeDetailData?`
`isLoading`	`boolean?`

표시 항목: 활성 인스턴스 수, TPS, 액티브서비스 수, 동시 사용자수

NodeInstanceTooltip

인스턴스 노드의 상세 지표를 표시합니다. 도메인보다 항목이 많습니다.

Prop	타입
`selectedNode`	`TopologyNode?`
`detailNodeData`	`NodeDetailData?`
`isLoading`	`boolean?`

표시 항목: TPS, 실패건수, 액티브서비스 수, 동시 사용자수, GC, CPU 사용률, 메모리 사용률

노드 이름은 [도메인명, 인스턴스명] 형식으로 표시됩니다.

NodeRemoteCallTooltip

원격 호출 노드를 표시합니다. 상세 API 응답을 받지 않습니다.

Prop	타입
`selectedNode`	`TopologyNode?`
`isLoading`	`boolean?`

이름 결정 규칙은 아래와 같습니다.

customMethodDescOrEmpty가 있고 숫자가 아니면 그 값을 사용합니다.
아니면 노드 속성에서 유도합니다.
type이 REMOTE_CALL이 아니면 Unknown Node를 표시합니다.

노드 툴팁 공통 이벤트

NodeDomainTooltip / NodeInstanceTooltip / NodeRemoteCallTooltip은 동일한 emit을 가집니다.

typescript

emit('node-analysis', data?: NodeDetailData, node?: TopologyNode)

다국어

툴팁 라벨은 provide/inject로 주입합니다. 키는 'i18n'입니다.

vue

<script setup lang="ts">
import { provide } from 'vue';

provide('i18n', {
    tps: 'TPS',
    failureCount: '실패건수',
    activeServiceCount: '액티브서비스 수',
    concurrentUser: '동시 사용자수',
    gc: 'GC',
    cpuUsage: 'CPU 사용률',
    memoryUsage: '메모리 사용률',
    aliveInstanceCount: '활성 인스턴스 수',
});
</script>

주입하지 않으면 각 컴포넌트의 한국어 기본값이 사용됩니다. EdgeTooltip과 NodeRemoteCallTooltip은 기본값이 비어 있으므로 다국어가 필요하면 반드시 주입하세요.

사용 예제

vue

<script setup lang="ts">
import { ref } from 'vue';
import {
    TopologyChart,
    NodeInstanceTooltip,
    EdgeTooltip,
} from '@jennifersoft/apm-components';
import type {
    TopologyNode,
    TopologyEdge,
    NodeDetailData,
    EdgeDetailData,
} from '@jennifersoft/apm-components';

const hoveredNode = ref<TopologyNode>();
const nodeDetail = ref<NodeDetailData>();
const nodePosition = ref({ x: 0, y: 0 });
const isLoading = ref(false);

async function onNodeHover(node: TopologyNode, x: number, y: number) {
    hoveredNode.value = node;
    nodePosition.value = { x, y };
    isLoading.value = true;
    nodeDetail.value = await fetchNodeDetail(node);
    isLoading.value = false;
}
</script>

<template>
    <div style="position: relative">
        <TopologyChart @node-hover="onNodeHover" />

        <NodeInstanceTooltip
            :visible="hoveredNode !== undefined"
            :target-center-x="nodePosition.x"
            :target-center-y="nodePosition.y"
            :selected-node="hoveredNode"
            :detail-node-data="nodeDetail"
            :is-loading="isLoading"
            show-tooltip-button
            @node-analysis="openAnalysis"
        />
    </div>
</template>

주의사항

부모에 position: relative가 없으면 좌표 기준이 어긋납니다.
showTooltipButton을 켜면 툴팁 높이가 버튼 높이만큼 늘어납니다(TOOLTIP_SIZE.BUTTON).
노드 종류에 맞는 툴팁을 골라야 합니다. TopologyNode.type이 DOMAIN / INSTANCE / REMOTE_CALL인지에 따라 표시 항목과 이름 규칙이 다릅니다.

Topology Tooltips ​

인터랙티브 데모 ​

공통 Props (BaseTooltipProps) ​

BaseTooltip ​

EdgeTooltip ​

Props ​

이벤트 ​

NodeDomainTooltip ​

NodeInstanceTooltip ​

NodeRemoteCallTooltip ​

노드 툴팁 공통 이벤트 ​

다국어 ​

사용 예제 ​

주의사항 ​