Skip to content

[SPARK-55753][UI] Upgrade Bootstrap from 4.6.2 to 5.3.8#54552

Open
yaooqinn wants to merge 1 commit intoapache:masterfrom
yaooqinn:ui-upgrade-bootstrap5
Open

[SPARK-55753][UI] Upgrade Bootstrap from 4.6.2 to 5.3.8#54552
yaooqinn wants to merge 1 commit intoapache:masterfrom
yaooqinn:ui-upgrade-bootstrap5

Conversation

@yaooqinn
Copy link
Member

What changes were proposed in this pull request?

Upgrade the Spark Web UI from Bootstrap 4.6.2 (EOL Jan 2024) to Bootstrap 5.3.8:

  • Replace bootstrap.bundle.min.js and bootstrap.min.css with v5.3.8
  • Replace dataTables.bootstrap4 files with dataTables.bootstrap5
  • Migrate data-toggle/data-target/data-placement/data-html/data-container to data-bs-* prefix across all Scala, JS, and HTML template files
  • Migrate CSS classes: mr-autome-auto, mr-2me-2, float-rightfloat-end, form-inlined-flex, form-groupmb-3
  • Update tooltip initialization to use Bootstrap 5 Tooltip constructor instead of jQuery .tooltip() plugin
  • Update docs/_layouts/global.html for BS5 data attributes
  • jQuery is retained as it is still required by DataTables, dagre-d3, and custom Spark JS

Why are the changes needed?

Bootstrap 4.6.2 reached end-of-life in January 2024 and no longer receives security patches or bug fixes. Bootstrap 5 is the current LTS with active maintenance.

Does this PR introduce any user-facing change?

No. The UI should look and behave identically. Bootstrap 5 is visually backward-compatible with Bootstrap 4.

How was this patch tested?

  • All 12 Jest UI tests pass
  • Scalastyle passes
  • core/compile and streaming/compile succeed
  • UIUtilsSuite (8 tests) and StoragePageSuite (5 tests) pass
  • Live verification via spark-shell: all 4 main pages (/, /jobs/, /stages/, /executors/) serve correct BS5 markup with zero old BS4 attributes or CSS classes

Was this patch authored or co-authored using generative AI tooling?

Yes, GitHub Copilot was used.

@dongjoon-hyun
Copy link
Member

Oh, for this one, do we need to visit all web UI functions manually?

@yaooqinn
Copy link
Member Author

image image

@yaooqinn yaooqinn force-pushed the ui-upgrade-bootstrap5 branch 4 times, most recently from cfe3bbd to 5fe6716 Compare February 28, 2026 18:28
Upgrade the Spark Web UI from Bootstrap 4.6.2 (EOL Jan 2024) to Bootstrap 5.3.8:

- Replace bootstrap.bundle.min.js and bootstrap.min.css with v5.3.8
- Replace dataTables.bootstrap4 files with dataTables.bootstrap5
- Migrate data-toggle/data-target/data-placement/data-html/data-container to data-bs-* prefix across all Scala, JS, and HTML template files
- Migrate CSS classes: mr-auto→me-auto, mr-2→me-2, float-right→float-end, form-inline→d-flex, form-group→mb-3
- Update tooltip initialization to use Bootstrap 5 Tooltip constructor instead of jQuery .tooltip() plugin
- Update docs/_layouts/global.html for BS5 data attributes
- Migrate PagedTable and StagePage pagination to BS5 flex layout with properly sized inputs
- jQuery is retained as it is still required by DataTables, dagre-d3, and custom Spark JS

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@yaooqinn yaooqinn force-pushed the ui-upgrade-bootstrap5 branch from 5fe6716 to c1ba5a5 Compare February 28, 2026 19:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants