Mobile Call Tree

/mobile-call-tree 데모의 MobileTree, MobileCallTree, MobileCallChain은 모바일 트랜잭션 분석의 트리와 호출 경로를 표시합니다. 데스크톱 호출 트리 API는 APM Call Tree를 참고하세요.

인터랙티브 데모

화살표로 하위 호출을 펼치고 이름을 선택하세요. 콜 체인의 원을 선택하면 현재 거래가 바뀝니다.

MobileTree

data, accessor, expandedKeys, emptyText, itemLabel을 전달하는 제네릭 트리입니다. 선택 상태는 선택적 selectedKey로 제어하고, 들여쓰기 최소 폭은 minContentWidth(기본 300px), 테스트 접두사는 testIdPrefix(기본 mobile-tree)로 지정할 수 있습니다.

row 슬롯에는 item, row, selected가 전달됩니다. 펼침 상태 변경은 update:expandedKeys, 선택은 select 이벤트로 나옵니다.

MobileCallTree

ApmCallTreeNode[] 데이터와 transactionDuration, expandedTreeIndexes, emptyText를 받습니다. selectedTreeIndex, 표시 라벨, 연결 라벨은 선택적으로 전달합니다. 펼침 변경, 노드 선택, 연결된 상대 노드 열기는 각각 update:expandedTreeIndexes, select, open-counterpart 이벤트로 전달됩니다.

MobileCallChain

최근 호출 경로를 표시하며 최대 10개 항목을 보여줍니다. 현재 항목은 링크가 아닙니다.

Prop	설명
items	MobileCallChainItem[] 경로 데이터
label	접근성 라벨
timeUnit	기본 단위, 기본값 ms
secondTimeUnit	선택적 보조 시간 단위

항목을 선택하면 select(item) 이벤트를 보냅니다. 각 항목은 key, name, elapsedTime, state, async, current로 표현합니다.

데모 데이터

이 문서의 실행형 데모는 네트워크 요청 없이 고정된 호출 트리와 거래 경로를 사용합니다. apm-components의 별도 데모 앱은 MSW로 API 응답을 모사합니다. 제품에서는 호스트가 API 응답을 ApmCallTreeNode와 호출 경로 모델로 변환하고, 라벨과 권한에 맞는 연결 동작을 전달해야 합니다.