Skip to content

Add ReplicaStatusTag component + Storybook story #7172

@agatha197

Description

@agatha197

Parent Story: FR-2658

Spec: .specs/FR-1368-endpoint-deployment-migration/spec.md §ReplicaStatusTag 컴포넌트

Files to change

  • react/src/components/ReplicaStatusTag.tsx (NEW)
  • react/src/components/ReplicaStatusTag.stories.tsx (NEW) — or placed under packages/backend.ai-ui if deemed reusable; default to react/src/components/

Implementation notes

export interface ReplicaStatusTagProps extends Omit<BAITagProps, 'color'> {
  status: RouteHealthStatus | LivenessStatus;
  showTooltip?: boolean;
}

Color mapping:

  • NOT_CHECKED → gray/default
  • HEALTHY → green/success
  • UNHEALTHY → red/error
  • DEGRADED → amber/warning

Tooltip text (use i18n keys from sub-task FR-2666):

  • NOT_CHECKED: "초기 지연 기간 중. 첫 번째 헬스체크 전 상태입니다."
  • HEALTHY: "정상. AppProxy Active Pool에 포함되어 트래픽을 수신 중입니다."
  • UNHEALTHY: "비정상 확정. 연속 실패 횟수 초과로 Active Pool에서 제외되었습니다."
  • DEGRADED: "헬스체커 도달 불가 유예 상태. Active Pool에서 임시 제외되었습니다."

Extends BAITag per .claude/rules/component-props-extension.md.

Storybook story should cover every status value.

Acceptance

  • Component renders each status with the correct color + label + tooltip
  • Props pass through to BAITag via ...rest
  • Storybook stories exist and lint clean
  • Review complexity: Medium

JIRA Issue: FR-2667

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No fields configured for Task.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions