feat(FR-2494): add auto scaling rule UX improvements spec

Author: agatha197

.specs/draft-auto-scaling-rule-ux/spec.md

@@ -0,0 +1,141 @@
+# Auto Scaling Rule UX 개선 Spec
+
+## 개요
+
+서비스 디테일 페이지의 Auto Scaling Rule 편집/목록 UI를 개선한다. 비교 연산자 방향을 정규화하고, 단일/범위 조건 모드를 추가하며, 백엔드 >=26.4.0에서 Prometheus Query Preset 기반 메트릭 선택을 지원한다.
+
+## 문제 정의
+
+현재 Auto Scaling Rule UI에는 다음 문제점이 있다:
+
+1. **규칙 목록에서 비교 연산자 방향이 혼재**: 규칙 목록 테이블에서 `>`, `>=`, `<`, `<=`가 혼재되어 표시되어 한눈에 조건을 파악하기 어렵다
+2. **범위 조건 미지원**: 하한과 상한을 동시에 지정할 수 없어 사용자가 두 개의 개별 Rule을 만들어야 한다
+3. **메트릭 선택이 수동 입력 의존**: 사용자가 metric source와 metric name을 직접 입력해야 하며, Prometheus Query Preset을 활용할 수 없다
+
+## 요구사항
+
+### 필수 (Must Have)
+
+#### 1. 규칙 목록 테이블 비교 연산자 표시 정규화
+
+- [ ] `EndpointDetailPage`의 Auto Scaling Rules 테이블에서 조건 컬럼의 비교 연산자를 항상 `<` / `<=` 방향으로 표시
+- [ ] GREATER_THAN으로 저장된 Rule: threshold와 metric_name 위치를 교환하여 `[threshold] < [metric_name]` 형태로 표시
+- [ ] GREATER_THAN_OR_EQUAL로 저장된 Rule: threshold와 metric_name 위치를 교환하여 `[threshold] <= [metric_name]` 형태로 표시
+- [ ] LESS_THAN / LESS_THAN_OR_EQUAL로 저장된 Rule: 기존대로 `[metric_name] < [threshold]` / `[metric_name] <= [threshold]` 형태로 표시
+- [ ] 에디터 모달의 비교 연산자 드롭다운은 기존 4가지(`<`, `<=`, `>`, `>=`)를 그대로 유지
+
+#### 2. 조건 모드 선택 (단일/범위)
+
+- [ ] Auto Scaling Rule 에디터 모달에 Ant Design `Segmented` 컴포넌트를 추가하여 "단일" / "범위" 모드 전환
+- [ ] **단일 모드**: 현재 UI와 동일하게 하나의 비교 연산자(`<`, `<=`, `>`, `>=`)와 threshold 값을 입력
+- [ ] **범위 모드**: 쿼리 키를 기준으로 상한/하한 범위를 동시에 지정
+  - UI 구성: `[하한값] [< 또는 ≤] [쿼리 키] [< 또는 ≤] [상한값]`
+  - 왼쪽 비교 연산자: `greater_than` (`<`) 또는 `greater_than_or_equal` (`<=`) — 쿼리 키가 하한값보다 큼
+  - 오른쪽 비교 연산자: `less_than` (`<`) 또는 `less_than_or_equal` (`<=`) — 쿼리 키가 상한값보다 작음
+  - 각 비교 연산자는 드롭다운으로 선택
+- [ ] 기본 모드: "단일"
+- [ ] 범위 모드 저장 시 `CreateAutoScalingRuleInput`의 `minThreshold` / `maxThreshold` 필드를 사용하여 하나의 Rule로 저장 (현재 사용 중인 API에 이미 지원됨)
+
+#### 3. Prometheus Preset 기반 메트릭 선택
+
+- [ ] `baiClient.supports('prometheus-auto-scaling-rule')` (또는 >=26.4.0 대응 키)로 기능 게이팅
+- [ ] >=26.4.0: 기존 metric source 드롭다운(KERNEL/INFERENCE_FRAMEWORK)과 metric name AutoComplete를 `prometheusQueryPresets` 기반 Select로 대체
+- [ ] 사용자가 Preset의 `metricName`을 선택하면 해당 Preset의 `queryTemplate`과 `timeWindow`가 자동으로 적용
+- [ ] <26.4.0: 기존 방식 유지 (metric source 선택 + metric name 수동 입력)
+- [ ] **TODO(needs-backend)**: 백엔드 코어 Auto Scaling PR이 머지되면 `metric_source` 필드의 버전별 분기 처리가 필요할 수 있음. 해당 시점에 확인 필요
+
+### 선택 (Nice to Have)
+
+#### 쿼리 결과값 미리보기
+
+- [ ] 메트릭 설정 form item의 `extra` 영역에 `prometheusQueryPresetResult` API 호출 결과를 표시
+- [ ] 표시 상태: 로딩 스피너 -> 결과값 텍스트 + 새로고침 아이콘 버튼
+- [ ] 새로고침 버튼 클릭 시 최신 결과를 다시 조회
+- [ ] Prometheus Preset 모드가 활성화된 경우(>=26.4.0)에만 표시
+- [ ] `options` 파라미터(`ExecuteQueryDefinitionOptionsInput`)를 통해 `filterLabels`와 `groupLabels`를 전달하여 쿼리 실행
+
+## 사용자 스토리
+
+- 일반 사용자로서, Auto Scaling Rule의 비교 연산자가 항상 동일한 방향(`<` / `<=`)으로 표시되어 조건을 직관적으로 이해할 수 있다
+- 일반 사용자로서, Auto Scaling Rule의 조건을 단일 값 또는 범위로 설정하여 더 유연한 스케일링 기준을 만들 수 있다
+- 일반 사용자로서, 어드민이 등록한 Prometheus Query Preset 목록에서 메트릭을 선택하여 복잡한 PromQL을 직접 입력하지 않고 Rule을 설정할 수 있다 (>=26.4.0)
+- 일반 사용자로서, Auto Scaling Rule 설정 시 현재 쿼리 결과값을 미리보기하여 설정 값이 적절한지 확인할 수 있다
+
+## 인수 조건 (Acceptance Criteria)
+
+### 비교 연산자 표시 정규화
+
+- [ ] Rules 목록 테이블에서 모든 조건이 `<` / `<=` 방향으로 통일되어 표시된다
+- [ ] 단일 모드에서 LESS_THAN으로 저장된 Rule: `[metric_name] < [threshold]` 형태로 표시
+- [ ] 단일 모드에서 LESS_THAN_OR_EQUAL로 저장된 Rule: `[metric_name] <= [threshold]` 형태로 표시
+- [ ] 단일 모드에서 GREATER_THAN으로 저장된 Rule: `[threshold] < [metric_name]` 형태로 표시 (방향 반전)
+- [ ] 단일 모드에서 GREATER_THAN_OR_EQUAL로 저장된 Rule: `[threshold] <= [metric_name]` 형태로 표시 (방향 반전)
+- [ ] 범위 모드로 저장된 Rule (minThreshold + maxThreshold): `[minThreshold] < [metric_name] < [maxThreshold]` 형태로 표시
+- [ ] 에디터 모달의 비교 연산자 드롭다운에는 기존 4가지(`<`, `<=`, `>`, `>=`)가 그대로 유지된다
+
+### 조건 모드 (단일/범위)
+
+- [ ] Segmented 컴포넌트로 "단일" / "범위" 모드를 전환할 수 있다
+- [ ] 단일 모드에서는 하나의 비교 연산자(`<`, `<=`, `>`, `>=`)와 threshold를 입력한다
+- [ ] 범위 모드에서는 `[하한값] [< 또는 ≤] [metric_name] [< 또는 ≤] [상한값]` 형태로 입력한다
+- [ ] 왼쪽 비교 연산자는 `<` (GREATER_THAN) 또는 `<=` (GREATER_THAN_OR_EQUAL), 오른쪽은 `<` (LESS_THAN) 또는 `<=` (LESS_THAN_OR_EQUAL)이다
+- [ ] 범위 모드에서 하한값이 상한값보다 크거나 같으면 validation 에러를 표시한다
+- [ ] 기본 모드는 "단일"이다
+
+### Prometheus Preset 기반 메트릭 선택
+
+- [ ] 백엔드 >=26.4.0에서 Prometheus Query Preset 목록이 Select 옵션으로 표시된다
+- [ ] Preset 선택 시 `queryTemplate`과 `timeWindow`가 자동으로 반영된다
+- [ ] 백엔드 <26.4.0에서는 기존 KERNEL/INFERENCE_FRAMEWORK 기반 수동 입력 방식이 동작한다
+- [ ] 버전 게이팅은 `baiClient.supports()` 패턴을 사용한다
+
+### 쿼리 결과값 미리보기 (Nice to Have)
+
+- [ ] 메트릭 설정 form item 하단(`extra`)에 쿼리 결과값이 표시된다
+- [ ] 결과값 조회 중에는 로딩 스피너가 표시된다
+- [ ] 결과값 옆에 새로고침 아이콘 버튼이 있다
+- [ ] Prometheus Preset 모드가 비활성화된 경우 미리보기가 표시되지 않는다
+
+## 버전 게이팅 전략
+
+| 기능 | <26.4.0 | >=26.4.0 |
+|---|---|---|
+| 비교 연산자 목록 정규화 | 적용 | 적용 |
+| 조건 모드 (단일/범위) | 적용 | 적용 |
+| Prometheus Preset 메트릭 선택 | 기존 수동 입력 유지 | Preset 기반 Select |
+| 쿼리 결과값 미리보기 | 미표시 | 표시 (Nice to Have) |
+
+## 현재 코드 참조
+
+| 파일 | 설명 |
+|---|---|
+| `react/src/components/AutoScalingRuleEditorModal.tsx` | Rule 추가/편집 모달. `COMPARATOR_LABELS` (line 53-58), `METRIC_NAMES_MAP` (line 60-65) |
+| `react/src/pages/EndpointDetailPage.tsx` | Rules 목록 테이블 (line 697-926), `baiClient.supports('auto-scaling-rule')` (line 170) |
+
+## GraphQL API 참조
+
+### 쿼리 (모든 인증된 사용자)
+
+| 쿼리 | 설명 |
+|---|---|
+| `prometheusQueryPresets(filter, orderBy, limit, offset)` | Preset 목록 조회 |
+| `prometheusQueryPreset(id)` | 단일 Preset 조회 |
+| `prometheusQueryPresetResult(id, timeRange, options, timeWindow)` | Preset 기반 쿼리 실행 결과 조회 |
+
+### 주요 타입
+
+- **QueryDefinition**: `id`, `name`, `metricName`, `queryTemplate`, `timeWindow`, `options`(`filterLabels`, `groupLabels`), `createdAt`, `updatedAt`
+- **ExecuteQueryDefinitionOptionsInput**: `filterLabels`(`[MetricLabelEntryInput!]`), `groupLabels`(`[String!]`)
+- **QueryDefinitionExecuteResult**: `status`, `resultType`, `result`(`[QueryDefinitionMetricResult!]!`)
+
+## 범위 외 (Out of Scope)
+
+- Admin Serving 페이지 Prometheus Query Preset CRUD (별도 Spec으로 진행)
+- Auto Scaling Rule CRUD 자체 (이미 구현됨)
+- Prometheus 서버 연결/인프라 관리
+- Rule 실행 이력 조회 및 모니터링 대시보드
+- `metric_source` 필드의 백엔드 변경 대응 (백엔드 PR 머지 후 별도 처리)
+
+## 관련 이슈
+
+- draft-auto-scaling-rule-management: 상위 범위의 드래프트 Spec (Admin Serving 페이지 Preset CRUD 포함)