lablup / lablup/backend.ai-webui
Standardize inconsistent image info / image path display across screens
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 344
Description
## Summary
Image information / image path is rendered in **inconsistent ways across different screens**. The same underlying image reference (e.g. `cr.backend.ai/stable/python-tensorflow:2.15-py39-cuda12.4-ubuntu20.04@x86_64`) is shown in at least three visually different formats depending on where it appears. We should discuss and standardize this into a consistent, reusable representation.
> ⚠️ This needs discussion before implementation — the goal of this ticket is to agree on a unified display convention and then apply it.
## Current state (3 different representations)
**1. Session / deployment detail — decomposed badge row**
- Registry icon + image name (e.g. "Ngc Pytorch") + version (26.03) + architecture (x86_64) + framework/lang/accelerator badges (PyTorch 2.11, Python 3.12, GPU:CUDA13.2), all in a single row.
- `react/src/components/ImageNodeSimpleTag.tsx`
- `react/src/components/SessionDetailContent.tsx`
- `react/src/components/SessionLauncherPreview.tsx`
**2. Table "Runtime environment" column — minimal single tag**
- Shows only the first image's `canonicalName` / `namespace` wrapped in a single tag; version, architecture and framework tags are dropped.
- `packages/backend.ai-ui/src/components/BAISessionNodesV2.tsx` (i18n key `comp:SessionV2Nodes.Environments`)
**3. Image list "Full image path" column — raw monospace string**
- Shows the full `registry/namespace:tag@architecture` path verbatim as copyable monospace text.
- `react/src/components/CustomizedImageList.tsx`, `react/src/components/ImageList.tsx` (i18n key `environment.FullImagePath`)
- Helper: `getImageFullName()` in `react/src/helper/index.tsx`
## Shared utilities already available (for a unified approach)
- `useBackendAIImageMetaData()` hook (`react/src/hooks/index.tsx`) — `tagAlias()`, `getImageAliasName()`, `getImageIcon()`, `getBaseVersion()`, `getArchitecture()`, `imageParser`.
- `ImageMetaIcon`, `ImageTags` / `AliasedImageDoubleTags`, `BAIDoubleTag`.
## Proposed direction (to discuss)
Define a single shared image-display component with display variants (e.g. `full` / `compact` / `path-only`) so all screens render the same decomposition consistently, instead of three independent renderers.
## Acceptance / next step
- [ ] Agree on the standard representation(s) and where each variant applies.
- [ ] Consolidate the renderers into a shared component / variant API.
JIRA Issue: FR-3182
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by comparing the renderers in ImageNodeSimpleTag.tsx, SessionDetailContent.tsx, SessionLauncherPreview.tsx, BAISessionNodesV2.tsx, CustomizedImageList.tsx, and ImageList.tsx. Review useBackendAIImageMetaData() and the shared image tag utilities before discussing the standard representation and variants. Done means the representation is agreed and the affected screens use a shared component or variant API.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100