Skip to content

feat(FR-3008): auto-expand non-success rows and add expand/collapse-all toggle in scheduling history#7650

Merged
graphite-app[bot] merged 1 commit into
mainfrom
fr-3008-scheduling-history-expand-toggle
Jun 15, 2026
Merged

feat(FR-3008): auto-expand non-success rows and add expand/collapse-all toggle in scheduling history#7650
graphite-app[bot] merged 1 commit into
mainfrom
fr-3008-scheduling-history-expand-toggle

Conversation

@agatha197

@agatha197 agatha197 commented May 29, 2026

Copy link
Copy Markdown
Contributor

Resolves #7649 (FR-3008)

Summary

Scheduling-history tables — session, deployment, and route — make scheduling problems easy to scan. A kebab (⋮) menu in the expand-column header offers three view actions — expand all / collapse all / expand errors only — with the chosen mode persisted per user (default expand errors only). In errors-only mode, non-success rows auto-expand and their nested sub-step table is filtered to just the failing / retried steps.

Originates from a Teams thread in devops/Frontend (auto-expand non-success scheduling entries). Supersedes FR-2958 / FR-2959, which were closed as Not Planned because they targeted the wrong surface (validation / check-result views).

Behavior

  • Header kebab menu (⋮): a vertical-ellipsis hover menu in the expand-column header with three actions — Expand all, Collapse all, Expand errors only. It reads as an action menu, not a stateful toggle: no per-item icons and no "active" highlight.
  • Persisted mode: the selected mode is stored per user via useBAISettingUserState('schedulingHistoryExpandMode') and reused as the default on subsequent opens. Initial default is expand errors only.
  • Expand errors only: rows whose result !== 'SUCCESS' are expanded; SUCCESS rows stay collapsed. The expanded row's nested sub-step table hides SUCCESS sub-steps, surfacing only the failing / retried steps.
  • Per-row expand icons use Ant Design's default + / (full expand / collapse). Individual rows remain manually expandable.
  • Result column shows the result badge only (the previous hover info-icon/tooltip was removed).
  • On refetch: the current mode is re-applied.

Table presentation

  • History tables use BAITable's default muted header style, which renders correctly in both light and dark mode (token-based, dark-mode aware). The status transition is shown as two flat columns — From Status / To Status — reusing the same labels as the property filter for those fields (no grouped two-level header, no cell borders).
  • Resizable columns, drag-to-reorder, and column show/hide via tableSettings, with the per-column overrides persisted per user (table_column_overrides.*).
  • Nested sub-step table: Error Code column now precedes Message.

Implementation

  • useSchedulingHistoryExpandable(dataSource, { mode, onModeChange }) owns expandedRowKeys / onExpandedRowsChange, exposes the effective mode, and renders the kebab header menu. Reused across all three tables.
  • Feature lives in dedicated wrappers — BAISchedulingHistoryTable, BAIDeploymentSchedulingHistoryTable, BAIRouteSchedulingHistoryTable — each owning a fragment that spreads the corresponding *NodesFragment, runs the hook, and supplies the expandable config; the base *Nodes components stay pure fragment tables.
  • BAISubStepNodes gains an errorsOnly prop that filters out SUCCESS sub-steps.
  • The three host modals (SessionSchedulingHistoryModal, DeploymentSchedulingHistoryModal, RouteSchedulingHistoryModal) wire the persisted expand-mode and column-override settings.
  • The expanded-row background in BAITable is token-based (colorFillSecondary, dark-mode aware).
  • i18n: comp:BAITable.ExpandAll / CollapseAll / ExpandErrorsOnly / ExpandOptions across all languages.

Verification

bash scripts/verify.shALL PASS (Relay, Lint, Format, TypeScript).

Screenshots

Captured (light mode) against mock scheduling-history data — a NEED_RETRY and a FAILURE row, each with sub-steps mixing SUCCESS / FAILURE / NEED_RETRY, plus SUCCESS rows.

Default — "expand errors only"

Non-success rows (NEED_RETRY, FAILURE) auto-expanded, SUCCESS rows collapsed. The nested sub-step tables show only non-success steps (the FIFOSequencer / PrepareContainer SUCCESS sub-steps are filtered out). Flat From Status / To Status columns, default muted header, no cell borders, Error Code before Message, result badge only, kebab (⋮) in the header.

default — expand errors only

Header kebab menu

The ⋮ hover menu with the three plain-text actions — no icons, no active highlight.

kebab menu

Expand all

expand all

🤖 Generated with Claude Code

@github-actions github-actions Bot added the size:L 100~500 LoC label May 29, 2026

agatha197 commented May 29, 2026

Copy link
Copy Markdown
Contributor Author

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • flow:merge-queue - adds this PR to the back of the merge queue
  • flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@agatha197 agatha197 marked this pull request as ready for review May 29, 2026 03:13
Copilot AI review requested due to automatic review settings May 29, 2026 03:13
@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a shared expand/collapse controller for scheduling history tables so that non-success rows auto-expand by default, and users get an expand-all / collapse-all master toggle in the expand-column header (session, deployment, and route history modals).

Changes:

  • Added useSchedulingHistoryExpandable hook to control expandedRowKeys, default expansion behavior, and header toggle rendering.
  • Wired the hook into the three scheduling history table fragments (session/deployment/route).
  • Added comp:BAITable.ExpandAll / comp:BAITable.CollapseAll translations across backend.ai-ui locales.

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/backend.ai-ui/src/components/fragments/useSchedulingHistoryExpandable.tsx New shared hook that computes default expanded rows (non-success) and provides a header expand/collapse-all toggle.
packages/backend.ai-ui/src/components/fragments/BAISchedulingHistoryNodes.tsx Uses the shared hook to control expandable state for session scheduling history table.
packages/backend.ai-ui/src/components/fragments/BAIDeploymentSchedulingHistoryNodes.tsx Uses the shared hook to control expandable state for deployment scheduling history table.
packages/backend.ai-ui/src/components/fragments/BAIRouteSchedulingHistoryNodeTable.tsx Uses the shared hook to control expandable state for route scheduling history table.
packages/backend.ai-ui/src/locale/en.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/ko.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/ja.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/zh-CN.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/zh-TW.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/de.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/el.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/es.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/fi.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/fr.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/id.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/it.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/mn.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/ms.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/pl.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/pt.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/pt-BR.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/ru.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/th.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/tr.json Adds BAITable “Expand all” / “Collapse all” strings.
packages/backend.ai-ui/src/locale/vi.json Adds BAITable “Expand all” / “Collapse all” strings.

Comment thread packages/backend.ai-ui/src/components/fragments/BAISchedulingHistoryNodes.tsx Outdated
@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch from c768640 to bdb6bcd Compare May 29, 2026 03:33
agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
@agatha197 agatha197 marked this pull request as draft May 29, 2026 04:00
@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch 2 times, most recently from eb0d0a4 to a5854c4 Compare May 29, 2026 04:50
@github-actions github-actions Bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels May 29, 2026
@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

Coverage Report for react-coverage (./react)

Status Category Percentage Covered / Total
🔵 Lines 6.67% 1924 / 28812
🔵 Statements 5.47% 2164 / 39519
🔵 Functions 5.36% 307 / 5719
🔵 Branches 3.69% 1370 / 37093
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
react/src/components/DeploymentSchedulingHistoryModal.tsx 0% 0% 0% 0% 30-103
react/src/components/RouteSchedulingHistoryModal.tsx 0% 0% 0% 0% 30-103
react/src/components/SessionSchedulingHistoryModal.tsx 0% 0% 0% 0% 29-87
react/src/hooks/useBAISetting.tsx 18.36% 0% 0% 18.36% 71, 77, 81-86, 90-101, 106-111, 119-142, 148-153, 158-167
Generated in workflow #1950 for commit fd05a5b by the Vitest Coverage Report Action

agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
@agatha197 agatha197 marked this pull request as ready for review May 29, 2026 04:59
@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch from a5854c4 to a3f2659 Compare May 29, 2026 05:37
agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
agatha197 added a commit that referenced this pull request May 29, 2026
@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch from a3f2659 to b9e1558 Compare May 29, 2026 07:23
@agatha197 agatha197 requested a review from ironAiken2 May 29, 2026 07:24
@agatha197 agatha197 requested a review from nowgnuesLee June 9, 2026 09:55

@nowgnuesLee nowgnuesLee left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please clean up useless comments.

@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch 2 times, most recently from d5232d0 to ac5d9e5 Compare June 10, 2026 05:18
@agatha197 agatha197 requested a review from nowgnuesLee June 10, 2026 05:18

@nowgnuesLee nowgnuesLee left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please clean up the useless comments.

Comment thread packages/backend.ai-ui/src/components/fragments/BAISchedulingHistoryTable.tsx Outdated
Comment thread packages/backend.ai-ui/src/hooks/useSchedulingHistoryExpandable.tsx Outdated
Comment thread packages/backend.ai-ui/src/components/fragments/BAISchedulingHistoryNodes.tsx Outdated
Comment thread packages/backend.ai-ui/src/components/Table/BAITable.tsx Outdated
@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch from ac5d9e5 to 93f1677 Compare June 11, 2026 01:56
@agatha197 agatha197 marked this pull request as draft June 11, 2026 01:58
@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch from 93f1677 to 81c649b Compare June 11, 2026 07:47
@agatha197 agatha197 marked this pull request as ready for review June 11, 2026 07:51
@agatha197 agatha197 marked this pull request as draft June 12, 2026 07:26
agatha197 added a commit that referenced this pull request Jun 12, 2026
agatha197 added a commit that referenced this pull request Jun 12, 2026
agatha197 added a commit that referenced this pull request Jun 12, 2026
@agatha197 agatha197 marked this pull request as ready for review June 12, 2026 07:44

@nowgnuesLee nowgnuesLee left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@agatha197 agatha197 force-pushed the fr-3008-scheduling-history-expand-toggle branch from c733632 to 27dc5db Compare June 15, 2026 02:30

@yomybaby yomybaby left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@yomybaby yomybaby dismissed ironAiken2’s stale review June 15, 2026 05:25

It will handed in a separated issue

@graphite-app

graphite-app Bot commented Jun 15, 2026

Copy link
Copy Markdown

Merge activity

…ll toggle in scheduling history (#7650)

Resolves #7649 (FR-3008)

## Summary

Scheduling-history tables — **session**, **deployment**, and **route** — make scheduling problems easy to scan. A kebab (⋮) menu in the expand-column header offers three view actions — **expand all / collapse all / expand errors only** — with the chosen mode persisted per user (default **expand errors only**). In errors-only mode, non-success rows auto-expand and their nested sub-step table is filtered to just the failing / retried steps.

Originates from a Teams thread in devops/Frontend (auto-expand non-success scheduling entries). Supersedes FR-2958 / FR-2959, which were closed as *Not Planned* because they targeted the wrong surface (validation / check-result views).

## Behavior

- **Header kebab menu (⋮):** a vertical-ellipsis hover menu in the expand-column header with three actions — **Expand all**, **Collapse all**, **Expand errors only**. It reads as an action menu, not a stateful toggle: no per-item icons and no "active" highlight.
- **Persisted mode:** the selected mode is stored per user via `useBAISettingUserState('schedulingHistoryExpandMode')` and reused as the default on subsequent opens. Initial default is **expand errors only**.
- **Expand errors only:** rows whose `result !== 'SUCCESS'` are expanded; `SUCCESS` rows stay collapsed. The expanded row's **nested sub-step table hides `SUCCESS` sub-steps**, surfacing only the failing / retried steps.
- **Per-row expand icons** use Ant Design's default `+` / `−` (full expand / collapse). Individual rows remain manually expandable.
- **Result column** shows the result badge only (the previous hover info-icon/tooltip was removed).
- **On refetch:** the current mode is re-applied.

## Table presentation

- History tables use BAITable's default muted header style, which renders correctly in **both light and dark mode** (token-based, dark-mode aware). The status transition is shown as two **flat** columns — **From Status** / **To Status** — reusing the same labels as the property filter for those fields (no grouped two-level header, no cell borders).
- **Resizable** columns, **drag-to-reorder**, and **column show/hide** via `tableSettings`, with the per-column overrides persisted per user (`table_column_overrides.*`).
- **Nested sub-step table:** `Error Code` column now precedes `Message`.

## Implementation

- `useSchedulingHistoryExpandable(dataSource, { mode, onModeChange })` owns `expandedRowKeys` / `onExpandedRowsChange`, exposes the effective `mode`, and renders the kebab header menu. Reused across all three tables.
- Feature lives in dedicated wrappers — `BAISchedulingHistoryTable`, `BAIDeploymentSchedulingHistoryTable`, `BAIRouteSchedulingHistoryTable` — each owning a fragment that spreads the corresponding `*NodesFragment`, runs the hook, and supplies the `expandable` config; the base `*Nodes` components stay pure fragment tables.
- `BAISubStepNodes` gains an `errorsOnly` prop that filters out `SUCCESS` sub-steps.
- The three host modals (`SessionSchedulingHistoryModal`, `DeploymentSchedulingHistoryModal`, `RouteSchedulingHistoryModal`) wire the persisted expand-mode and column-override settings.
- The expanded-row background in `BAITable` is token-based (`colorFillSecondary`, dark-mode aware).
- i18n: `comp:BAITable.ExpandAll` / `CollapseAll` / `ExpandErrorsOnly` / `ExpandOptions` across all languages.

## Verification

`bash scripts/verify.sh` → **ALL PASS** (Relay, Lint, Format, TypeScript).

## Screenshots

Captured (light mode) against mock scheduling-history data — a `NEED_RETRY` and a `FAILURE` row, each with sub-steps mixing `SUCCESS` / `FAILURE` / `NEED_RETRY`, plus `SUCCESS` rows.

### Default — "expand errors only"
Non-success rows (`NEED_RETRY`, `FAILURE`) auto-expanded, `SUCCESS` rows collapsed. The nested sub-step tables show only non-success steps (the `FIFOSequencer` / `PrepareContainer` `SUCCESS` sub-steps are filtered out). Flat **From Status** / **To Status** columns, default muted header, no cell borders, `Error Code` before `Message`, result badge only, kebab (⋮) in the header.

![default — expand errors only](https://raw.githubusercontent.com/lablup/backend.ai-webui/assets/images/screenshots/pr-7650/20260612-073706-errors-only-light.png)

### Header kebab menu
The ⋮ hover menu with the three plain-text actions — no icons, no active highlight.

![kebab menu](https://raw.githubusercontent.com/lablup/backend.ai-webui/assets/images/screenshots/pr-7650/20260612-073712-kebab-menu-light.png)

### Expand all
![expand all](https://raw.githubusercontent.com/lablup/backend.ai-webui/assets/images/screenshots/pr-7650/20260612-073719-expand-all-light.png)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
@graphite-app graphite-app Bot force-pushed the fr-3008-scheduling-history-expand-toggle branch from 27dc5db to fd05a5b Compare June 15, 2026 05:26
@graphite-app graphite-app Bot merged commit fd05a5b into main Jun 15, 2026
13 checks passed
@graphite-app graphite-app Bot deleted the fr-3008-scheduling-history-expand-toggle branch June 15, 2026 05:27
graphite-app Bot pushed a commit that referenced this pull request Jun 15, 2026
Resolves #7793 (FR-3075)

> **Stacked on** #7650 (FR-3008). Review/merge that PR first.

## Summary

The scheduling-history modals (**session**, **deployment**, **route**) added in #7650 fetched the **entire** scheduling history in a single query with **no pagination arguments** and `fetchPolicy: 'network-only'`, eagerly loading every row's `subSteps`. For sessions/deployments/routes that went through many scheduling cycles (retries, rescheduling), this produced a large server-side aggregation and re-fetched the whole thing on every modal open — making these modals noticeably slower than the rest of the app.

This adds offset (page-number) pagination to all three modals.

## Changes

- **`SessionSchedulingHistoryModal`** (self-contained `useLazyLoadQuery`): add `$limit`/`$offset` to the query, select `count`, wire `useBAIPaginationOptionState` with deferred `limit`/`offset`, and pass the table `pagination` config.
- **`DeploymentSchedulingHistoryModal` / `RouteSchedulingHistoryModal`** (preloaded-query pattern): add `$limit`/`$offset` + `count` to the query; the modal owns page state and calls the existing `onReload` with new `limit`/`offset` on page change. Their openers (`DeploymentConfigurationSection`, `DeploymentReplicasTab`) seed the initial `loadQuery` with `limit: 10, offset: 0`.
- Changing **filter** or **order** resets to page 1 (`offset: 0`).
- Uses **`limit` + `offset`** only — the three `*ScopedSchedulingHistories` are Strawberry V2 connections that reject mixed `first`+`offset` at runtime (see `.claude/rules/graphql-pagination.md`).

## Behavior note

With pagination, the FR-3008 **"expand errors only"** default auto-expands non-success rows **on the current page only**, not across the whole history. This is the expected trade-off for paginated tables.

## Verification

`bash scripts/verify.sh` → Relay / Lint / Format / TypeScript all pass (the Relay step only flags the regenerated `__generated__` artifacts as needing commit, which are included in this PR).

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XL 500~ LoC

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Auto-expand non-success rows and add expand-all/collapse-all header toggle in scheduling history modals

5 participants