Mobile APM Transactions

/mobile-apm-transactions 데모에서 사용하는 MobileTransactionCard와 MobileElapsedStackBar는 모바일 트랜잭션 목록과 시간 구성 정보를 표시합니다. 둘 다 화면용으로 변환된 모델을 받으며, API 호출이나 날짜·단위 번역은 수행하지 않습니다.

인터랙티브 데모

카드를 선택하면 선택한 항목이 아래에 표시됩니다. 카드의 시간 막대를 눌러 구간별 소요 시간도 확인하세요.

MobileTransactionCard

필수 model은 MobileTransactionCardModel입니다. 주요 필드는 다음과 같습니다.

필드	용도
id, applicationName	항목 식별과 애플리케이션 이름
originText, startTimeText	선택적 출처와 시작 시각 표시
elapsedText, elapsedTotal, elapsedSummary	전체 소요 시간과 요약
errorCode	선택적 오류 코드
segments	메서드·SQL·호출·배치 시간 구성
details	팝오버에 표시할 라벨/값 상세

선택 시 select(id) 이벤트를 보냅니다. segments의 각 항목에는 key, label, value, valueText, colorToken을 전달합니다. 지원 키는 methodTime, sqlTime, txcallTime, batchTime입니다.

<MobileTransactionCard :model="transaction" @select="openTransaction" />

MobileElapsedStackBar

segments, details, elapsedSummary, elapsedText, elapsedTotal을 받아 시간 비율 막대와 상세 팝오버를 표시합니다. 서버 응답의 원본 값 대신 화면에 보여줄 텍스트와 디자인 토큰을 모델에 함께 담습니다.

데모 시나리오

데모에는 기본 목록, 빈 결과, 긴 항목, 오류 상태가 있습니다. 샘플은 고정 fixture이며 실시간 서버 조회가 아닙니다. 실제 앱에서는 필드 누락과 0에 가까운 구간을 변환 단계에서 정규화하고, 오류·로딩·빈 결과 상태를 화면 컨테이너에서 구분하세요.