RelationTree

연관된 트랜잭션에 대한 MSA 분석을 위한 컴포넌트입니다.

Types

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

export interface RelationTreeData extends ApiRelationData {
    rootId?: string;
}

// RelationTree.vue
const emit = defineEmits(['select', 'focus']);
const props = defineProps<{
    width: number;
    height: number;
    screenWidth: number;
    screenHeight: number;
    children: RelationTreeData[];
    globalScale?: number;
    transactionId?: string;
    focusedId?: string;
    useResizer?: boolean;
}>();

Sample Code

<template>
    <relation-tree
        :width="totalWidth"
        :height="totalHeight"
        :screen-width="RELATION_TREE_WIDTH"
        :screen-height="RELATION_TREE_HEIGHT"
        :children="RELATION_SAMPLE_DATA"
        :transaction-id="''"
        :use-resizer="true"
        :global-scale="0.6"
    ></relation-tree>
</template>
<script setup lang="ts">
import { RELATION_SAMPLE_DATA } from './data/relation-tree';
import { computed, provide } from 'vue';
import {
    ProfileInfo,
    RelationTree,
    SizeInRelationTree,
} from '@jennifersoft/apm-components';
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';

const RELATION_TREE_WIDTH = 680;
const RELATION_TREE_HEIGHT = 400;

const totalWidth = computed<number>(() => RELATION_TREE_WIDTH);
const totalHeight = computed<number>(
    () => RELATION_TREE_HEIGHT - SizeInRelationTree.MARGIN * 2
);

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

    callCount: 'Call Count',
    errorCount: 'Error Count',
    elapsedTimeAvg: 'Elapsed Time Avg',
    elapsedTime: 'Elapsed Time',
    sqlTimeAvg: 'Sql Time Avg',
    externalCallTimeAvg: 'External Call Time Avg',
    elapsedTimeStandardDeviation: 'Elapsed Time Standard Deviation',
});
</script>

Demo