kubeflow / kubeflow/notebooks

[TASK] Render structured workspace status in frontend

Open
#1,195 2 comments 0 reactions 0 assignees View on GitHub
kind/plan-task
Dominant language
No language data
Stars
84
Forks
149
Avg merge
5d 15h
Merged PRs (30d)
29

Description

### Certification

- [x] I certify I am an Epic Owner for Kubeflow Notebooks 2.0 and expected to create planning-related issues.

### Description

🛑 **Depends on:** #1194

Updates the frontend to surface sub-state detail alongside the existing summary state rendering.
The summary `state` continues to be the primary rendering signal (colored label), but users gain
access to richer status information.

#### Current Rendering

The frontend renders state as a single colored ``:

```tsx

{workspace.state}

```

Color mapping in `WorkspaceUtils.ts`:
- Running → green, Pending → orange, Terminating → yellow
- Error → red, Paused → purple, Unknown → grey

#### What Changes

With structured sub-states available, the frontend can:
- Continue using the summary state for the primary label color and text
- Show sub-state detail on hover (tooltip), in an expandable section, or on the workspace detail
page
- Surface specific actionable information: "Error: ImagePullBackOff" is more useful than "Error"
- Show compound states: "Running" with a warning indicator if a restart is pending

The specific UX treatment is up to the implementer — the requirement is that sub-state information
is accessible to users who want more detail, without cluttering the default list view.

#### Related Frontend Item

The default state in the Workspace table should be "Unknown" even when a Workspace
was just created, rather than rendering an empty/broken "pill". This task should ensure the initial
state renders cleanly.

#### Goals

- Regenerate OpenAPI client: update `swagger.version`, run `npm run generate:api`
- Workspace list table: enhanced state label or tooltip showing sub-state detail
- Workspace detail view: structured display of all sub-states
- Handle the initial/empty state gracefully ("Unknown" with clean rendering)
- Graceful degradation if sub-state fields are absent (older controller version)
- Unit tests for new components
- Cypress tests for sub-state display with mock data

### Acceptance Criteria

- [ ] OpenAPI client regenerated with sub-state types from updated swagger spec
- [ ] Summary state continues to render as a colored label (primary indicator)
- [ ] Sub-state detail is accessible in the UI (tooltip, detail view, or expandable section)
- [ ] Error sub-states show specific reason information (e.g., "ImagePullBackOff" rather than
just "Error")
- [ ] Compound states are surfaced (e.g., "Running" with pending restart indicator)
- [ ] Initial/new workspace renders "Unknown" cleanly rather than an empty circle
- [ ] Graceful degradation when sub-state fields are absent in the API response
- [ ] Unit tests cover sub-state rendering with various state combinations
- [ ] Cypress tests verify sub-state display with mock data

Contributor guide

Open the contributing guide

Research direction

Start with the dependency on #1194, regenerate the client with the swagger.version update using npm run generate:api, and read WorkspaceUtils.ts plus the existing workspace table and detail views. Implement accessible sub-state display while preserving the summary label and cleanly handling absent or empty fields. Add unit tests for state combinations and Cypress tests using mock data.

Written by the indexing model from the issue text.

Assessment

Tech stack
cypress, openapi, typescript
Domain
api, frontend, testing-qa
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.