lablup / lablup/backend.ai-webui

Select runtime, image, and version in one row and filter runtime parameters by runtime version (BA-7721)

Open
#9,459 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
133
Forks
81
Avg merge
1d 12h
Merged PRs (30d)
355

Description

## Background

[BA-7721](https://lablup.atlassian.net/browse/BA-7721) adds `added_version` / `deprecated_version` columns to runtime variant presets and an `available_at_version` predicate on `RuntimeVariantPresetFilter`, so presets can be filtered to those valid for a given runtime version. The runtime version is **selected by the client** — the server does not infer it from the image; it only filters against the version it is given. The WebUI must supply that version and adjust its forms accordingly.

## Current state

Runtime variant and environment (image + version) are configured in multiple places, each laid out differently:

- `react/src/components/DeploymentAddRevisionModal.tsx` — runtime variant (`BAIRuntimeVariantSelect`) sits in one section; the image is picked much further down in a separate **Environments** section via `ImageEnvironmentSelectFormItems` (two stacked rows: environment select + version select), with runtime-parameter / service-config blocks in between.
- `react/src/components/AdminDeploymentPresetSettingPageContent.tsx` — runtime variant select followed by `RuntimeParameterFormSection`, then a single `imageId` select (`BAIAdminImageSelect`), so the image is chosen **after** the parameters it should constrain.
- Runtime parameter presets are fetched by `react/src/hooks/useRuntimeParameterSchema.ts` (`runtimeVariantPresets(filter, orderBy, …)`) with no version filtering today, so every preset is offered unconditionally.

## Requirements

1. **One row for runtime + image + version.** Let the user select the runtime variant, image, and version together in a single row, so the trio reads as one decision. Apply the change **identically to every surface** that configures runtime variants + environments — no per-page variations.
1. **Version-aware runtime parameters.** Once all three are selected, pass `available_at_version` (from BA-7721) to the `runtimeVariantPresets` query so only the parameters valid for that runtime + image version are shown. Until all three are selected, define and implement a sensible intermediate state (e.g. keep the unfiltered behaviour or defer rendering the parameter section).
1. **Deriving the runtime version.** Decide and implement how the client determines the runtime version to send (e.g. parsing the runtime version out of the selected image tag / labels). Verify that version values are handled correctly end to end — what gets parsed, what gets sent, and what happens for images whose tags carry no usable runtime version.
1. **Layout / UX design pass.** `ImageEnvironmentSelectFormItems` is two stacked rows (environment + version) while the runtime select is a single row — naively placing them side by side will look unbalanced. Evaluate whether the current image selection method should be redesigned (e.g. a combined image+version picker, a cascader, or another pattern) so the one-row layout feels natural, and improve it if needed.
1. Guard the new filter usage behind the manager version that ships BA-7721 (`@since` / capability check), so older managers keep the current unfiltered behaviour.

## Success criteria

- [ ] Runtime variant, image, and version are selectable in a single row, with the same UX on every surface that configures them (deployment revision modal, admin deployment preset form, and any other such surface).
- [ ] With all three selected, the runtime parameter section shows only presets valid for the selected runtime version (`available_at_version` filter applied); changing the image version updates the parameter list.
- [ ] The runtime version sent to the server is derived correctly from the selection, with a defined fallback when no version can be derived.
- [ ] Older managers without BA-7721 keep the current behaviour (no broken queries).
- [ ] The combined row does not look awkward — layout reviewed against the two-row image/version stack, with the image selection UX improved if needed.

JIRA Issue: FR-3870

[BA-7721]: https://lablup.atlassian.net/browse/BA-7721?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with DeploymentAddRevisionModal.tsx, AdminDeploymentPresetSettingPageContent.tsx, ImageEnvironmentSelectFormItems, and useRuntimeParameterSchema.ts. Trace how runtime variant, image, version, and runtimeVariantPresets are selected and queried, then check the manager capability/version handling for BA-7721. Done means every configuring surface has the same combined selection UX, version-aware parameters update correctly, and older managers retain unfiltered behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.