lablup / lablup/backend.ai-webui

Standardize inconsistent image info / image path display across screens

Closed
#7,995 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.