ApmTransactionTable

개요

ApmTransactionTable은 APM(Application Performance Monitoring) 환경에서 트랜잭션 데이터를 테이블 형태로 표시하는 컴포넌트입니다. 성능 분석, 오류 추적, 트랜잭션 상세 정보 조회 등의 기능을 제공합니다.

주요 기능

• 트랜잭션 데이터의 테이블 뷰 제공
• 정렬, 페이징, 행 선택 기능
• 프로파일 정보 표시
• 도구 슬롯을 통한 확장 가능한 UI
• 트랜잭션 시간 시각화

Props 인터페이스

interface ApmTransactionTableProps<
    T extends TransactionData & Record<string, unknown>
> extends PagingTableProps<T> {
    maxMap: TransactionTime;
}

interface PagingTableProps<T> {
    alias: string; // 테이블 식별자
    width: number; // 테이블 너비
    height: number; // 테이블 높이
    displayCount: number; // 페이지당 표시 개수
    columns: PagingTableColumn[]; // 컬럼 정의
    rows: PagingTableRow<T>[]; // 행 데이터
    rowHeight?: number; // 행 높이 (기본값: 56)
    sortKey?: string; // 정렬 키
    sortOrder?: PagingTableSortOrder; // 정렬 순서
    sortLoading?: boolean; // 정렬 로딩 상태
    useSkeleton?: boolean; // 스켈레톤 UI 사용 여부
    useSelect?: boolean; // 행 선택 기능 사용 여부
    foundRowId?: string; // 강조할 행 ID
    selectedRowIds?: string[]; // 선택된 행 ID 목록
}

interface TransactionTime {
    elapsedTime: number; // 경과 시간 최대값
    methodTime: number; // 메서드 시간 최대값
    sqlTime: number; // SQL 시간 최대값
    txcallTime: number; // 트랜잭션 호출 시간 최대값
    batchTime: number; // 배치 시간 최대값
}

이벤트

interface ApmTransactionTableEmits<T> {
    (e: 'sort', key: string, order: PagingTableSortOrder): void;
    (e: 'select', id: string, row?: PagingTableRow<T>): void;
}

• sort: 컬럼 정렬 시 발생
• select: 행 선택 시 발생

슬롯

tools

테이블 상단의 도구 영역을 커스터마이징할 수 있습니다.

<template #tools="slotProps">
    <button @click="exportData">내보내기</button>
    <button @click="refreshData">새로고침</button>
</template>

기본 사용법

<template>
    <apm-transaction-table
        :alias="'transaction-table'"
        :width="1000"
        :height="500"
        :columns="columns"
        :rows="rows"
        :display-count="10"
        :max-map="maxMap"
        @select="onSelectRow"
        @sort="onSort"
    />
</template>

<script setup lang="ts">
import { ApmTransactionTable } from '@jennifersoft/apm-components';
import type {
    PagingTableColumn,
    PagingTableRow,
    TransactionTime,
} from '@jennifersoft/apm-components';

const columns: PagingTableColumn[] = [
    { key: 'serviceName', name: '서비스명', type: 'text', sortable: true },
    { key: 'elapsedTime', name: '경과시간', type: 'number', sortable: true },
    { key: 'startTime', name: '시작시간', type: 'datetime', sortable: true },
];

const rows: PagingTableRow<TransactionData>[] = [
    {
        id: '1',
        data: {
            serviceName: '/api/users',
            elapsedTime: 1267,
            startTime: Date.now(),
            // ... 기타 트랜잭션 데이터
        },
    },
];

const maxMap: TransactionTime = {
    elapsedTime: 1737,
    methodTime: 937,
    sqlTime: 480,
    txcallTime: 320,
    batchTime: 0,
};

const onSelectRow = (id: string, row?: PagingTableRow<TransactionData>) => {
    console.log('선택된 행:', id, row);
};

const onSort = (key: string, order: PagingTableSortOrder) => {
    console.log('정렬:', key, order);
};
</script>

인터랙티브 데모

데이터 구조

TransactionData

interface TransactionData extends Record<string, unknown> {
    sid: number; // 시스템 ID
    domainName: string; // 도메인명
    instId: number; // 인스턴스 ID
    instanceName: string; // 인스턴스명
    serviceName: string; // 서비스명
    serviceHash: number; // 서비스 해시
    txid: string; // 트랜잭션 ID
    errCode: string; // 오류 코드
    elapsedTime: number; // 경과 시간
    methodTime: number; // 메서드 시간
    sqlTime: number; // SQL 시간
    txcallTime: number; // 트랜잭션 호출 시간
    batchTime: number; // 배치 시간
    startTime: number; // 시작 시간
    endTime: number; // 종료 시간
    cpuTime: number; // CPU 시간
    sqlCount: number; // SQL 개수
    httpStatusCode: string; // HTTP 상태 코드
    linked: boolean; // 연결 여부
    stacked: boolean; // 스택 여부
    async: boolean; // 비동기 여부
    transactionTypes: TransactionType[]; // 트랜잭션 타입 목록
}

type TransactionType = 'ERROR' | 'LINKED' | 'STACKED' | 'ASYNC';

고급 사용법

커스텀 도구 모음

<template>
    <apm-transaction-table v-bind="tableProps" @select="onSelectRow">
        <template
            #tools="{ columns, page, updateColumns, updatePage, resetSettings }"
        >
            <div class="custom-tools">
                <button @click="exportCsv(columns)">CSV 내보내기</button>
                <button @click="resetSettings">설정 초기화</button>
                <span>페이지: {{ page }}</span>
            </div>
        </template>
    </apm-transaction-table>
</template>

정렬 및 필터링

<script setup lang="ts">
import { ref, computed } from 'vue';

const sortKey = ref<string>('startTime');
const sortOrder = ref<PagingTableSortOrder>(PagingTableSortOrder.DESC);
const sortLoading = ref<boolean>(false);

const onSort = async (key: string, order: PagingTableSortOrder) => {
    sortLoading.value = true;
    sortKey.value = key;
    sortOrder.value = order;

    // 정렬 로직 수행
    await performSort(key, order);

    sortLoading.value = false;
};
</script>

의존성

• @jennifersoft/apm-components
• @jennifersoft/apm-apis
• @jennifersoft/vue-components-v2 (도구 버튼 사용 시)