You are viewing a plain text version of this content. The canonical link for it is here.
Posted to reviews@spark.apache.org by "yaooqinn (via GitHub)" <gi...@apache.org> on 2026/03/01 13:22:28 UTC
[PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
yaooqinn opened a new pull request, #54564:
URL: https://github.com/apache/spark/pull/54564
### What changes were proposed in this pull request?
Replace the custom progress bar implementation with Bootstrap 5's `progress-stacked` component for proper accessibility and modern CSS.
**Changes:**
- **CSS** (`webui.css`): Remove 21 lines of IE9 vendor-prefixed gradients (`-moz-`, `-webkit-`, `-o-`, `filter:progid`), legacy `box-shadow` border, and `background-repeat`. Replace with clean `background: linear-gradient()` rules targeting `.progress-stacked` selector.
- **Scala** (`UIUtils.scala`): Use BS5 `progress-stacked` wrapper with proper ARIA attributes (`role="progressbar"`, `aria-valuenow/min/max`). Replace inline styles with BS5 utility classes (`position-absolute`, `d-flex`, `align-items-center`, etc.). Extract label text to a `progressLabel` variable for clarity.
- **Tests**: Update `UIUtilsSuite` assertions for new BS5 markup structure. Update `UISeleniumSuite` CSS selector from `.progress` to `.progress-stacked`.
**Before → After (HTML output):**
```html
<div class="progress">
<span style="display:flex;align-items:center;...">3/4</span>
<div class="progress-bar progress-completed" style="width:75%"></div>
<div class="progress-bar progress-started" style="width:25%"></div>
</div>
<div class="progress-stacked" title="3/4 (2 running)">
<span class="position-absolute w-100 h-100 d-flex align-items-center justify-content-center">3/4</span>
<div class="progress" role="progressbar" aria-label="Completed" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%">
<div class="progress-bar progress-completed"></div>
</div>
<div class="progress" role="progressbar" aria-label="Running" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%">
<div class="progress-bar progress-started"></div>
</div>
</div>
```
### Why are the changes needed?
1. **Accessibility**: Progress bars lacked ARIA attributes, making them invisible to screen readers
2. **Dead code**: IE9 vendor prefixes (`-moz-`, `-webkit-`, `-o-`, `filter:progid`) are no longer needed
3. **BS5 alignment**: Use the standard BS5 Progress component API instead of custom markup
4. **Maintainability**: Inline styles replaced with BS5 utility classes
### Does this PR introduce _any_ user-facing change?
Yes — progress bars now have proper ARIA attributes for accessibility. Visual appearance is unchanged.
### How was this patch tested?
- `UIUtilsSuite` — progress bar markup assertions updated and passing
- `UISeleniumSuite` — CSS selector updated for new structure
- Scalastyle checks passing
### Was this patch authored or co-authored using generative AI tooling?
Yes, GitHub Copilot CLI was used.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org
Re: [PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
Posted by "sarutak (via GitHub)" <gi...@apache.org>.
sarutak commented on code in PR #54564:
URL: https://github.com/apache/spark/pull/54564#discussion_r2872843432
##########
core/src/main/resources/org/apache/spark/ui/static/webui.css:
##########
@@ -108,34 +108,19 @@ table.sortable td {
max-width: 600px;
}
-.progress {
+.progress-stacked {
font-size: 1rem;
height: 1.42rem;
margin-bottom: 0px;
position: relative;
- box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
}
Review Comment:
Got it. Thank you for explanation.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org
Re: [PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
Posted by "yaooqinn (via GitHub)" <gi...@apache.org>.
yaooqinn commented on PR #54564:
URL: https://github.com/apache/spark/pull/54564#issuecomment-3980020118
<img width="2406" height="1290" alt="image" src="https://github.com/user-attachments/assets/b912c5f7-fbb6-4294-b070-21ff64b1bc2e" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org
Re: [PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
Posted by "yaooqinn (via GitHub)" <gi...@apache.org>.
yaooqinn commented on code in PR #54564:
URL: https://github.com/apache/spark/pull/54564#discussion_r2872821826
##########
core/src/main/resources/org/apache/spark/ui/static/webui.css:
##########
@@ -108,34 +108,19 @@ table.sortable td {
max-width: 600px;
}
-.progress {
+.progress-stacked {
font-size: 1rem;
height: 1.42rem;
margin-bottom: 0px;
position: relative;
- box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
}
Review Comment:
Yes, intentionally removed. The old `box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)` was a legacy workaround for older browsers. Bootstrap 5 `.progress-stacked` has its own border/shadow styling built-in, so the custom inset shadow is no longer needed and would conflict with the BS5 look.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org
Re: [PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
Posted by "yaooqinn (via GitHub)" <gi...@apache.org>.
yaooqinn closed pull request #54564: [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component
URL: https://github.com/apache/spark/pull/54564
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org
Re: [PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
Posted by "pan3793 (via GitHub)" <gi...@apache.org>.
pan3793 commented on PR #54564:
URL: https://github.com/apache/spark/pull/54564#issuecomment-3988461213
so this causes the progress bar change, seems does not match the screenshot you pasted here https://github.com/apache/spark/pull/54564#issuecomment-3980020118
<img width="279" height="93" alt="image" src="https://github.com/user-attachments/assets/4c0f217e-8bf3-4933-9d1a-51d7506f8c2b" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org
Re: [PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
Posted by "sarutak (via GitHub)" <gi...@apache.org>.
sarutak commented on code in PR #54564:
URL: https://github.com/apache/spark/pull/54564#discussion_r2872619720
##########
core/src/main/resources/org/apache/spark/ui/static/webui.css:
##########
@@ -108,34 +108,19 @@ table.sortable td {
max-width: 600px;
}
-.progress {
+.progress-stacked {
font-size: 1rem;
height: 1.42rem;
margin-bottom: 0px;
position: relative;
- box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
Review Comment:
Is this intentionally removed?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org
Re: [PR] [SPARK-55771][UI] Modernize progress bars using Bootstrap 5 Progress component [spark]
Posted by "yaooqinn (via GitHub)" <gi...@apache.org>.
yaooqinn commented on PR #54564:
URL: https://github.com/apache/spark/pull/54564#issuecomment-3984878475
Merged to master, thank you @sarutak
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: reviews-unsubscribe@spark.apache.org
For additional commands, e-mail: reviews-help@spark.apache.org