TransactionTable

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

개요

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