lablup / lablup/backend.ai-webui

Show per-kernel status breakdown in a popover on the session status badge

Open
#9,634 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

## Goal

Hovering the session status badge of a multi-node session in a transitional phase (creating / terminating) opens a popover that explains the progress ring: **done / total** kernels and a stacked bar + legend with the count of kernels per status.

Design decision: variant **E — breakdown popover** from the proposal page linked in the Teams thread. The badge itself carries no number (see the ring issue); the popover is where the exact numbers live.

## Scope

- Presentational BUI component (e.g. `BAIKernelProgressPopover` / `BAIKernelStatusBreakdown`) in `packages/backend.ai-ui` taking `total` and a list of `{ status, count `}, rendering: title (`Kernel startup progress` / `Kernel termination progress`), `done / total`, a stacked bar and a legend. Colors come from the existing status → variant lookups (`badgeVariantForStatus`) and Astryx tokens; no raw hex. Ships with `.doc.ts`, story, test and BUI locale keys (`useBAIi18n`).
- `SessionStatusTag` wraps the badge in an Astryx `Popover` (hover) only when the session is multi-node and in a creating / terminating phase, grouping kernel statuses as: creating phase → `RUNNING`, `PREPARING`/`PREPARED`/`CREATING`, `PULLING`, `PENDING`/`SCHEDULED`; terminating phase → `TERMINATED`, `TERMINATING`, still `RUNNING`.
- Existing `status_info` tooltip behaviour is preserved.

## Acceptance

- Hovering a 120-node `TERMINATING` badge shows `119 / 120` with TERMINATED 119 / TERMINATING 1 / RUNNING 0.
- No popover on single-node or `RUNNING` sessions.
- `bash scripts/verify.sh` passes.

JIRA Issue: FR-3924

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in packages/backend.ai-ui with the SessionStatusTag entry point and review the existing status_info tooltip, status-to-variant lookups, and Astryx Popover usage. Add the documented presentational component with its .doc.ts, story, test, and BUI locale keys, then run the relevant test and bash scripts/verify.sh; done means the stated multi-node transitional cases show the correct breakdown while single-node and RUNNING sessions do not.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.