TransactionTable

트랜잭션 데이터 표현을 위한 테이블 컴포넌트입니다.

Types

import type { ApiTransactionData } from '@jennifersoft/apm-apis';

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

export interface TransactionTime {
    elapsedTime: number;
    methodTime: number;
    sqlTime: number;
    txcallTime: number;
    batchTime: number;
}

// TransactionTable.vue
interface TransactionData extends ApiTransactionData {
    transactionTypes: TransactionType[];
    score: number;
    methodTime: number;
}

type TransactionTableData = TransactionData & Record<string, unknown>;

const emit = defineEmits(['sort', 'select']);
const props = defineProps<
    PagingTableProps<T> & {
        maxMap: TransactionTime;
    }
>();

Sample Code

<template>
    <transaction-table
        :alias="'transaction-table'"
        :width="620"
        :height="420"
        :columns="TRANSACTION_TABLE_COLUMNS"
        :rows="TRANSACTION_TABLE_ROWS"
        :display-count="10"
        :max-map="TRANSACTION_TABLE_MAX_TIME"
        @select="onSelectTransactionTable"
    >
    </transaction-table>
</template>

<script setup lang="ts">
import {
    TRANSACTION_TABLE_COLUMNS,
    TRANSACTION_TABLE_ROWS,
    TRANSACTION_TABLE_MAX_TIME,
} from './data/transaction-table';
import { provide } from 'vue';
import { TransactionTable } from '@jennifersoft/apm-components';

provide<I18n>('i18n', {
    method: 'Method',
    sql: 'SQL',
    externalCall: 'External Call',
    batch: 'Batch Job',
    error: 'ERROR',
    fetch: 'Fetch',

    pageInfo: '%d개 중 %s',
    firstPage: '첫 페이지',
    lastPage: '마지막 페이지',
    manageTableColumns: '테이블 컬럼 관리',
});

const onSelectTransactionTable = (row) => {
    console.log('TransactionTable selected:', row);
};
</script>

Demo