Agentic UI/CollectorHealthBar

CollectorHealthBar

데이터 수집기의 상태를 한눈에 보여주는 헬스바 컴포넌트입니다. 각 수집기의 정상/저하/오류 상태를 실시간으로 모니터링합니다.

Installation

bash

npx axis-cli add collector-health-bar

Usage

수집기 상태

OnOffMix

45건

120ms

EventUs

32건

85ms

Festa

28건

95ms

마지막 확인: 오후 12:07:53

tsx

import { CollectorHealthBar } from '@ax/ui'

const healthData = {
  checked_at: '2024-03-15T10:30:00Z',
  results: [
    { collector_name: 'onoffmix', status: 'healthy', checked_at: '...', sample_count: 45, error_message: null, response_time_ms: 120 },
    { collector_name: 'eventus', status: 'healthy', checked_at: '...', sample_count: 32, error_message: null, response_time_ms: 85 },
    { collector_name: 'festa', status: 'degraded', checked_at: '...', sample_count: 12, error_message: '일부 데이터 누락', response_time_ms: 340 },
  ],
  summary: { total: 3, healthy: 2, degraded: 1, unhealthy: 0 }
}

export function Example() {
  return (
    <CollectorHealthBar
      data={healthData}
      onRefresh={() => console.log('새로고침')}
    />
  )
}

Status Variants

Healthy (모든 수집기 정상)

수집기 상태

OnOffMix

45건

120ms

EventUs

32건

85ms

Festa

28건

95ms

마지막 확인: 오후 12:07:53

Degraded (일부 저하)

수집기 상태

OnOffMix

45건

120ms

EventUs

12건

850ms

Festa

28건

95ms

마지막 확인: 오후 12:07:53

EventUs: 응답 지연 발생

Unhealthy (오류 발생)

수집기 상태

OnOffMix

45건

120ms

EventUs

0건

Festa

8건

450ms

마지막 확인: 오후 12:07:53

EventUs: 연결 실패: ECONNREFUSED

Festa: 일부 데이터 누락

Loading State

수집기 상태

확인 중...

Props

Prop	Type	Default	Description
`data*`	`HealthCheckData \| null`	-	헬스체크 데이터
`isLoading`	`boolean`	false	로딩 상태
`onRefresh`	`() => void`	-	새로고침 핸들러
`className`	`string`	-	추가 CSS 클래스

HealthCheckData Interface

Prop	Type	Default	Description
`checked_at*`	`string`	-	확인 시각 (ISO 8601)
`results*`	`CollectorHealthResult[]`	-	수집기별 결과
`summary*`	`object`	-	요약 정보 (total, healthy, degraded, unhealthy)

CollectorHealthResult Interface

Prop	Type	Default	Description
`collector_name*`	`string`	-	수집기 이름
`status*`	`"healthy" \| "degraded" \| "unhealthy"`	-	상태
`checked_at*`	`string`	-	확인 시각
`sample_count*`	`number`	-	수집된 샘플 수
`error_message`	`string \| null`	null	오류 메시지
`response_time_ms`	`number \| null`	null	응답 시간 (ms)

HealthStatus Type

tsx

type HealthStatus = 'healthy' | 'degraded' | 'unhealthy'