TransactionTable

트랜잭션 데이터에 특화된 고성능 테이블 컴포넌트입니다.

인터랙티브 데모

컬럼 헤더로 정렬하고 트랜잭션을 선택하세요. 응답 시간 셀은 메서드·SQL·외부 호출의 시간 구성을 표시합니다.

개요

TransactionTable은 BaseTable을 확장하여 트랜잭션 분석에 필요한 특수 기능들을 제공합니다. ProfileInfo 컴포넌트를 내장하고, 트랜잭션 전용 행 렌더링과 정렬 기능을 포함합니다.

Props 인터페이스

interface Props<T extends TransactionData & Record<string, unknown>>
    extends PagingTableProps<T> {
    maxMap: TransactionTime; // 각 시간 메트릭의 최대값
}

interface TransactionData {
    elapsedTime: number; // 응답시간
    sqlTime: number; // SQL 실행시간
    externalCallTime: number; // 외부 호출 시간
    methodTime: number; // 메소드 실행시간
    errorType: number; // 에러 타입
    // ... 기타 트랜잭션 속성들
}

interface TransactionTime {
    elapsedTime: number;
    sqlTime: number;
    externalCallTime: number;
    methodTime: number;
}

기본 사용법

<template>
    <TransactionTable
        alias="transaction-list"
        :width="1000"
        :height="600"
        :display-count="20"
        :columns="transactionColumns"
        :rows="transactionRows"
        :max-map="maxTimeValues"
        @sort="handleSort"
        @select="handleTransactionSelect"
    >
        <template #tools="{ page, totalCount }">
            <button @click="exportTransactions">내보내기</button>
            <span>{{ page }} / {{ Math.ceil(totalCount / 20) }}</span>
        </template>
    </TransactionTable>
</template>

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

interface MyTransactionData {
    txid: string;
    name: string;
    elapsedTime: number;
    sqlTime: number;
    externalCallTime: number;
    methodTime: number;
    errorType: number;
    startTime: string;
}

const transactionColumns: PagingTableColumn[] = [
    {
        key: 'name',
        name: '트랜잭션명',
        type: PagingTableCellType.TEXT,
        rate: 0.3,
    },
    {
        key: 'elapsedTime',
        name: '응답시간',
        type: PagingTableCellType.BAR,
        rate: 0.15,
        color: '#3B82F6',
    },
    {
        key: 'sqlTime',
        name: 'SQL 시간',
        type: PagingTableCellType.BAR,
        rate: 0.15,
        color: '#10B981',
    },
    {
        key: 'externalCallTime',
        name: '외부호출',
        type: PagingTableCellType.BAR,
        rate: 0.15,
        color: '#F59E0B',
    },
    {
        key: 'startTime',
        name: '시작시간',
        type: PagingTableCellType.TIME,
        rate: 0.15,
    },
    {
        key: 'errorType',
        name: '에러',
        type: PagingTableCellType.ERROR,
        rate: 0.1,
    },
];

const transactionRows = ref([
    {
        id: 'tx001',
        data: {
            txid: 'tx001',
            name: '/api/users',
            elapsedTime: 1250,
            sqlTime: 850,
            externalCallTime: 200,
            methodTime: 200,
            errorType: 0,
            startTime: '2025-01-15 14:30:25',
        },
    },
    // ... 더 많은 트랜잭션 데이터
]);

const maxTimeValues = computed(() => ({
    elapsedTime: Math.max(
        ...transactionRows.value.map((r) => r.data.elapsedTime)
    ),
    sqlTime: Math.max(...transactionRows.value.map((r) => r.data.sqlTime)),
    externalCallTime: Math.max(
        ...transactionRows.value.map((r) => r.data.externalCallTime)
    ),
    methodTime: Math.max(
        ...transactionRows.value.map((r) => r.data.methodTime)
    ),
}));

const handleSort = (key: string, order: PagingTableSortOrder) => {
    // 트랜잭션 정렬 로직
};

const handleTransactionSelect = (id: string, row: any) => {
    // 트랜잭션 상세 분석 페이지로 이동
    router.push(`/analysis/transaction/${row.data.txid}`);
};
</script>

내장 기능

1. ProfileInfo 자동 표시

트랜잭션 프로파일 정보가 테이블 상단에 자동으로 표시됩니다.

2. 전용 행 렌더링

트랜잭션 데이터에 최적화된 셀 렌더링을 제공합니다.

3. 시간 메트릭 시각화

응답시간, SQL 시간, 외부 호출 시간을 바 차트로 시각화합니다.

4. 내장 정렬

트랜잭션 데이터에 최적화된 정렬 알고리즘을 제공합니다.

고급 사용법

에러 트랜잭션 필터링

<script setup>
const showErrorsOnly = ref(false);

const filteredRows = computed(() => {
    if (!showErrorsOnly.value) return transactionRows.value;
    return transactionRows.value.filter((row) => row.data.errorType > 0);
});
</script>

<template>
    <TransactionTable :rows="filteredRows" v-bind="otherProps" />
</template>

성능 임계값 기반 색상

<script setup>
const performanceThresholds = {
    good: 1000,
    warning: 3000,
    critical: 5000,
};

const enhancedColumns = computed(() =>
    transactionColumns.map((col) => {
        if (col.key === 'elapsedTime') {
            return {
                ...col,
                color: (value) => {
                    if (value <= performanceThresholds.good) return '#10B981';
                    if (value <= performanceThresholds.warning)
                        return '#F59E0B';
                    return '#EF4444';
                },
            };
        }
        return col;
    })
);
</script>

의존성

• BaseTable
• ProfileInfo
• ColumnTools
• Vue 3 Composition API