feat(FR-2494): add Prometheus query result preview in editor modal by agatha197 · Pull Request #6642 · lablup/backend.ai-webui

agatha197 · 2026-04-13T11:45:15Z

Resolves #6642 (FR-2494)

Blocked by lablup/backend.ai#11036

Note

Test Node: /serving/e21d2f21-028a-405b-b196-69736b7343b0 with 10.122.10.215

Summary

Add Prometheus query result preview in the auto-scaling rule editor modal
When a Prometheus preset is selected, an instant query result is displayed below the query template using prometheusQueryPresetResult API
Shows current metric value with a refresh button to re-fetch on demand
Handles multiple series results, empty results, loading (Suspense), and errors (ErrorBoundary)

Changes

react/src/components/AutoScalingRuleEditorModal.tsx: Added PrometheusPresetPreview component using useLazyLoadQuery with fetchKey for manual refresh support
resources/i18n/en.json: Added i18n keys for preview UI (CurrentValue, MultipleSeriesResult, NoDataAvailable, RefreshPreview)

agatha197 · 2026-04-13T11:45:34Z

refactor(FR-2494): apply UI review feedback on auto-scaling rule editor modal #6724 : 2 dependent PRs (#6727 , #6735 )
refactor(FR-2494): improve auto-scaling rule list with URL state, sorting, filtering, and column settings #6703
feat(FR-2494): add Prometheus query result preview in editor modal #6642 👈 (View in Graphite)
feat(FR-2494): add Strawberry AutoScalingRuleEditorModal with single/range mode and Prometheus preset #6641
feat(FR-2494): add Strawberry AutoScalingRuleList component #6640
feat(FR-2494): extract Legacy auto-scaling rule components and add version gating #6639
feat(FR-2494): add auto scaling rule UX improvements spec #6486 : 1 other dependent PR (#6356 )
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2026-04-13T11:48:16Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	8.7% (-0.01% 🔻)	1738/19978
🔴	Branches	7.92% (-0.01% 🔻)	1104/13944
🔴	Functions	5.22% (-0% 🔻)	283/5422
🔴	Lines	8.4% (-0.01% 🔻)	1630/19404

Test suite run success

847 tests passing in 38 suites.

Report generated by 🧪jest coverage report action from 0a1624c

Copilot

Pull request overview

Adds an inline “current value” preview for selected Prometheus query presets inside the autoscaling rule editor modal, helping users validate query templates before saving an autoscaling rule.

Changes:

Introduces a Suspense-powered PrometheusPresetPreview that fetches prometheusQueryPresetResult and displays the latest value with a manual refresh control.
Extends the autoscaling i18n namespace with new strings used by the preview UI.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
resources/i18n/en.json	Adds new `autoScalingRule.*` translation entries for the preview UI (current value, refresh, empty state, multi-series summary).
react/src/components/AutoScalingRuleEditorModal.tsx	Adds the inline preview component and wires it into the Prometheus preset section via `Form.Item.extra` with `Suspense` + error boundary.

nowgnuesLee

LGTM

graphite-app · 2026-04-16T06:34:31Z

Merge activity

Apr 16, 6:34 AM UTC: nowgnuesLee added this pull request to the Graphite merge queue.
Apr 16, 6:35 AM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #6639.
Apr 16, 6:35 AM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #6639.
Apr 16, 6:42 AM UTC: agatha197 added this pull request to the Graphite merge queue.
Apr 16, 6:53 AM UTC: Merged by the Graphite merge queue.

…6642) Resolves #6642 (FR-2494) Blocked by lablup/backend.ai#11036 > [!NOTE] > Test Node: /serving/e21d2f21-028a-405b-b196-69736b7343b0 with 10.122.10.215 ## Summary - Add Prometheus query result preview in the auto-scaling rule editor modal - When a Prometheus preset is selected, an instant query result is displayed below the query template using `prometheusQueryPresetResult` API - Shows current metric value with a refresh button to re-fetch on demand - Handles multiple series results, empty results, loading (Suspense), and errors (ErrorBoundary) ## Changes - `react/src/components/AutoScalingRuleEditorModal.tsx`: Added `PrometheusPresetPreview` component using `useLazyLoadQuery` with `fetchKey` for manual refresh support - `resources/i18n/en.json`: Added i18n keys for preview UI (`CurrentValue`, `MultipleSeriesResult`, `NoDataAvailable`, `RefreshPreview`)

Resolves #6485 (FR-2494) - Sub-task 2 > [!NOTE] > Translation is handled in #6642 ## Summary - Create new `AutoScalingRuleList.tsx` component that uses the Strawberry API (`ModelDeployment.autoScalingRules` nested connection) for `>=26.4.0` backends - Display conditions using `minThreshold`/`maxThreshold` with normalized `<` direction: - `maxThreshold` only: `[metric_name] < [maxThreshold]` - `minThreshold` only: `[minThreshold] < [metric_name]` - Both set: `[minThreshold] < [metric_name] < [maxThreshold]` - Show Prometheus preset name for `PROMETHEUS` metric source rules by matching `prometheusQueryPresetId` (raw UUID) with `toLocalId(presetGlobalId)` - Wire up `deleteAutoScalingRule` Strawberry mutation - Update `EndpointDetailPage.tsx` to render the new list when `isSupportPrometheusAutoScalingRule` is true - Add i18n keys: `TimeWindow`, `PrometheusPreset` ## Changed files - `react/src/components/AutoScalingRuleList.tsx` (new) - `react/src/pages/EndpointDetailPage.tsx` (conditional rendering for Strawberry path) - `resources/i18n/en.json` (new i18n keys) ## Verification ``` === ALL PASS === ```

…range mode and Prometheus preset (#6641) Resolves #6485 (FR-2494) > [!NOTE] > Translation is handled in #6642 ## Summary - Add `AutoScalingRuleEditorModal.tsx` (Strawberry API, >=26.4.0) with: - Segmented single/range condition mode toggle - Single mode: direction selector (Upper sets `maxThreshold`, Lower sets `minThreshold`) - Range mode: both `minThreshold` + `maxThreshold` with validation (min >= max shows error) - Metric source dropdown with KERNEL, INFERENCE_FRAMEWORK, PROMETHEUS options - Prometheus preset selection: auto-fills `metricName`, shows `queryTemplate` read-only, auto-applies `timeWindow` - `prometheusQueryPresetId` stored as raw UUID via `toLocalId(globalId)` - Strawberry `createAutoScalingRule` / `updateAutoScalingRule` mutations - Wire `AutoScalingRuleEditorModal` into `AutoScalingRuleList.tsx` (create + edit flows) - Add i18n keys for new UI elements (Single, Range, Upper, Lower, QueryTemplate, validation messages, etc.) ## Verification ``` === Relay: PASS === === Lint: PASS === === Format: PASS === === TypeScript: PASS === === ALL PASS === ```

Copilot AI review requested due to automatic review settings April 13, 2026 11:45

github-actions Bot assigned agatha197 Apr 13, 2026

github-actions Bot added area:ux UI / UX issue. area:i18n Localization size:L 100~500 LoC labels Apr 13, 2026

This was referenced Apr 13, 2026

feat(FR-2494): extract Legacy auto-scaling rule components and add version gating #6639

Merged

feat(FR-2494): add Strawberry AutoScalingRuleList component #6640

Merged

agatha197 mentioned this pull request Apr 13, 2026

feat(FR-2494): add Strawberry AutoScalingRuleEditorModal with single/range mode and Prometheus preset #6641

Merged

Copilot started reviewing on behalf of agatha197 April 13, 2026 11:45 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

Comment thread resources/i18n/en.json

Comment thread react/src/components/AutoScalingRuleEditorModal.tsx Outdated

Comment thread react/src/components/AutoScalingRuleEditorModal.tsx

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch from e393255 to 5ee0503 Compare April 13, 2026 13:16

github-actions Bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels Apr 13, 2026

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch from 5ee0503 to be00f49 Compare April 13, 2026 13:27

agatha197 force-pushed the 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset branch from 8fb120a to 9c9286d Compare April 13, 2026 13:27

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch 10 times, most recently from 9be608e to d5c0406 Compare April 14, 2026 01:17

agatha197 force-pushed the 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset branch from 9c9286d to ad49b5e Compare April 14, 2026 05:02

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch from d5c0406 to 8086c01 Compare April 14, 2026 05:02

agatha197 force-pushed the 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset branch from ad49b5e to d2270c4 Compare April 14, 2026 05:19

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch 3 times, most recently from e6965ed to 9a9551a Compare April 14, 2026 07:31

agatha197 force-pushed the 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset branch from 2321b26 to 74a8ee8 Compare April 14, 2026 07:31

agatha197 mentioned this pull request Apr 15, 2026

refactor(FR-2494): improve auto-scaling rule list with URL state, sorting, filtering, and column settings #6703

Merged

agatha197 force-pushed the 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset branch from 74a8ee8 to 3050b47 Compare April 15, 2026 07:32

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch from 9a9551a to 29b12aa Compare April 15, 2026 07:32

This was referenced Apr 15, 2026

refactor(FR-2494): apply UI review feedback on auto-scaling rule editor modal #6724

Merged

chore(FR-2494): translate new auto-scaling rule editor i18n keys to 19 languages #6727

Closed

nowgnuesLee requested changes Apr 15, 2026

View reviewed changes

Comment thread react/src/components/AutoScalingRuleEditorModal.tsx

Comment thread react/src/components/AutoScalingRuleEditorModal.tsx Outdated

Comment thread react/src/components/AutoScalingRuleEditorModal.tsx Outdated

agatha197 force-pushed the 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset branch from 3050b47 to 7e058a6 Compare April 15, 2026 09:12

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch from 29b12aa to 1fe42af Compare April 15, 2026 09:12

agatha197 requested a review from nowgnuesLee April 15, 2026 09:14

agatha197 force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch from 1fe42af to 137a879 Compare April 15, 2026 09:18

yomybaby approved these changes Apr 16, 2026

View reviewed changes

nowgnuesLee approved these changes Apr 16, 2026

View reviewed changes

graphite-app Bot force-pushed the 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset branch from 7e058a6 to 15d6897 Compare April 16, 2026 06:44

graphite-app Bot force-pushed the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch from 137a879 to 0a1624c Compare April 16, 2026 06:45

Base automatically changed from 04-13-feat_fr-2494_add_strawberry_autoscalingruleeditormodal_with_single_range_mode_and_prometheus_preset to main April 16, 2026 06:52

graphite-app Bot merged commit 0a1624c into main Apr 16, 2026
8 checks passed

graphite-app Bot deleted the 04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal branch April 16, 2026 06:53

github-pages Bot temporarily deployed to github-pages April 16, 2026 06:53 Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(FR-2494): add Prometheus query result preview in editor modal#6642

feat(FR-2494): add Prometheus query result preview in editor modal#6642
graphite-app[bot] merged 1 commit intomainfrom
04-13-feat_fr-2494_add_prometheus_query_result_preview_in_editor_modal

agatha197 commented Apr 13, 2026 •

edited

Loading

Uh oh!

agatha197 commented Apr 13, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Uh oh!

graphite-app Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

agatha197 commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Uh oh!

agatha197 commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app Bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

agatha197 commented Apr 13, 2026 •

edited

Loading

agatha197 commented Apr 13, 2026 •

edited

Loading

github-actions Bot commented Apr 13, 2026 •

edited

Loading

Coverage report for `./react`

graphite-app Bot commented Apr 16, 2026 •

edited

Loading