JenniferSoft Design Docs

Appearance

ProfileInfo ​

트랜잭션에 포함된 프로파일 종류에 대한 표시를 하는 컴포넌트입니다.

개요 ​

ProfileInfo 컴포넌트는 트랜잭션 분석 시 각 프로파일 타입(Method, SQL, External Call, Batch Job, Error)의 색상 범례를 제공합니다. 각 프로파일 타입은 고유한 색상으로 구분되어 표시됩니다.

Props 인터페이스 ​

typescript
interface Props {
    hideBatchJob?: boolean; // Batch Job 항목 숨김 여부 (기본값: false)
    hideError?: boolean; // Error 항목 숨김 여부 (기본값: false)
}

이벤트 ​

  • create-shared-url: 공유 URL 생성 이벤트 (emit으로 정의되어 있으나 현재 미사용)

슬롯 ​

  • tools: 우측에 추가 도구/버튼을 배치할 수 있는 슬롯

기본 사용법 ​

vue
<template>
    <ProfileInfo />
</template>

<script setup lang="ts">
import { ProfileInfo } from '@jennifersoft/apm-components';
import { provide } from 'vue';

provide<I18n>('i18n', {
    method: 'Method',
    sql: 'SQL',
    externalCall: 'External Call',
    batch: 'Batch',
    error: 'Error',
});
</script>

인터랙티브 데모 ​

Method
SQL
External Call
Batch Job
ERROR

고급 사용법 ​

특정 프로파일 타입 숨기기 ​

vue
<template>
    <!-- Batch Job과 Error 정보를 숨긴 간소화된 버전 -->
    <ProfileInfo :hide-batch-job="true" :hide-error="true" />
</template>

커스텀 도구 슬롯 사용 ​

vue
<template>
    <ProfileInfo>
        <template v-slot:tools>
            <Btn type="text" size="small" :trailing-icon="ICON_TYPE.share" />
            <Btn type="text" size="small" :trailing-icon="ICON_TYPE.download" />
        </template>
    </ProfileInfo>
</template>

프로파일 색상 ​

컴포넌트는 getProfileColor 유틸리티 함수를 사용하여 각 프로파일 타입에 고유한 색상을 할당합니다:

  • METHOD: 메소드 호출
  • SQL: SQL 쿼리 실행
  • TX_CALL: 외부 트랜잭션 호출
  • BATCH: 배치 작업
  • ERROR: 에러 발생

의존성 ​

  • @jennifersoft/vue-components-v2 (Btn 컴포넌트 사용 시)
  • Vue 3 Composition API
  • Global I18n 타입 정의