This is an automated email from the ASF dual-hosted git repository.
yao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/spark.git
The following commit(s) were added to refs/heads/master by this push:
new 93ab1960354f [SPARK-55772][UI] Replace jQuery show/hide with Bootstrap
5 d-none utility class
93ab1960354f is described below
commit 93ab1960354f380041123f198855e20bd5adfab1
Author: Kent Yao <[email protected]>
AuthorDate: Wed Mar 4 15:24:28 2026 +0800
[SPARK-55772][UI] Replace jQuery show/hide with Bootstrap 5 d-none utility
class
### What changes were proposed in this pull request?
Replaces jQuery `.show()`, `.hide()`, `.toggle()`, `.css("display", ...)`,
and inline `style="display:none"` with Bootstrap 5 `d-none` utility class
across the Spark Web UI.
**JS changes (5 files):**
- `environmentpage.js`: `.show()`/`.hide()` →
`.removeClass("d-none")`/`.addClass("d-none")`
- `stagepage.js`: 6 `.show()`/`.hide()` calls for speculation summary and
accumulator table
- `executorspage.js`: `.hide()`/`.show()` for active-process-container and
flamegraph toggle
- `streaming-page.js`: `.toggle("collapsed")` → `.toggleClass("d-none")`
- `log-view.js`: `.css("display", ...)` → `d-none` class add/remove
**Scala changes (6 files):**
- 4 LogPage variants: `style="display: none;"` → `class="d-none"`
- `UIUtils.scala`: dag-viz-metadata div
- `StreamingPage.scala`: inputs-table row
### Why are the changes needed?
Using `d-none` consistently across the codebase:
- Aligns with Bootstrap 5 conventions (no inline styles)
- Makes visibility state inspectable via class (easier debugging)
- Removes reliance on jQuery `.show()`/`.hide()` which manipulate inline
styles
Part of SPARK-55760 (Spark Web UI Modernization).
### Does this PR introduce _any_ user-facing change?
No. Visibility behavior is identical.
### How was this patch tested?
- `lint-js` passes
- `scalastyle` passes
- Manual UI verification
### Was this patch authored or co-authored using generative AI tooling?
Yes, co-authored with GitHub Copilot.
Closes #54613 from yaooqinn/SPARK-55772.
Authored-by: Kent Yao <[email protected]>
Signed-off-by: Kent Yao <[email protected]>
---
.../resources/org/apache/spark/ui/static/environmentpage.js | 4 ++--
.../resources/org/apache/spark/ui/static/executorspage.js | 6 +++---
.../main/resources/org/apache/spark/ui/static/log-view.js | 4 ++--
.../main/resources/org/apache/spark/ui/static/stagepage.js | 12 ++++++------
.../resources/org/apache/spark/ui/static/streaming-page.js | 4 ++--
.../main/scala/org/apache/spark/deploy/history/LogPage.scala | 2 +-
.../scala/org/apache/spark/deploy/master/ui/LogPage.scala | 2 +-
.../scala/org/apache/spark/deploy/worker/ui/LogPage.scala | 2 +-
core/src/main/scala/org/apache/spark/ui/DriverLogPage.scala | 2 +-
core/src/main/scala/org/apache/spark/ui/UIUtils.scala | 2 +-
.../scala/org/apache/spark/streaming/ui/StreamingPage.scala | 2 +-
11 files changed, 21 insertions(+), 21 deletions(-)
diff --git
a/core/src/main/resources/org/apache/spark/ui/static/environmentpage.js
b/core/src/main/resources/org/apache/spark/ui/static/environmentpage.js
index 0bced49a52fe..943c120f490a 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/environmentpage.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/environmentpage.js
@@ -53,9 +53,9 @@ $(document).ready(function(){
}
}
if (showRow) {
- $(this).show();
+ $(this).removeClass('d-none');
} else {
- $(this).hide();
+ $(this).addClass('d-none');
}
});
});
diff --git
a/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
b/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
index 78a0cb663db1..9867e69ebd98 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
@@ -145,7 +145,7 @@ function initOffcanvasFlamegraph(fgData, fgChart,
offcanvasEl) {
$(header).off('click').on('click', function() {
var arrow = $('#executor-flamegraph-arrow');
arrow.toggleClass('arrow-open arrow-closed');
- $(fgChart).toggle(arrow.hasClass('arrow-open'));
+ $(fgChart).toggleClass('d-none', !arrow.hasClass('arrow-open'));
});
}
});
@@ -765,7 +765,7 @@ $(document).ready(function () {
execDataTable.column('heapHistogramCol:name').visible(getHeapHistogramEnabled());
// This section should be visible once API gives the response.
- $('.active-process-container').hide();
+ $('.active-process-container').addClass('d-none');
var endPoint = createRESTEndPointForMiscellaneousProcess(appId);
$.getJSON(endPoint, function( response, _ignored_status,
_ignored_jqXHR ) {
if (response.length) {
@@ -801,7 +801,7 @@ $(document).ready(function () {
}
};
$("#active-process-table").DataTable(processSummaryConf);
- $('.active-process-container').show()
+ $('.active-process-container').removeClass('d-none')
}
});
diff --git a/core/src/main/resources/org/apache/spark/ui/static/log-view.js
b/core/src/main/resources/org/apache/spark/ui/static/log-view.js
index 0b917ee5c8d8..f1fc6c915d5c 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/log-view.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/log-view.js
@@ -49,8 +49,8 @@ function disableMoreButton() {
function noNewAlert() {
var alert = $(".no-new-alert");
- alert.css("display", "block");
- window.setTimeout(function () {alert.css("display", "none");}, 4000);
+ alert.removeClass("d-none");
+ window.setTimeout(function () {alert.addClass("d-none");}, 4000);
}
diff --git a/core/src/main/resources/org/apache/spark/ui/static/stagepage.js
b/core/src/main/resources/org/apache/spark/ui/static/stagepage.js
index 1f2142f4f808..90ec6a74f194 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/stagepage.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/stagepage.js
@@ -634,8 +634,8 @@ $(document).ready(function () {
});
// Prepare data for speculation metrics
- $("#speculationSummaryTitle").hide();
- $("#speculationSummary").hide();
+ $("#speculationSummaryTitle").addClass("d-none");
+ $("#speculationSummary").addClass("d-none");
var speculationSummaryInfo = responseBody.speculationSummary;
var speculationData;
if(speculationSummaryInfo) {
@@ -648,8 +648,8 @@ $(document).ready(function () {
]];
if (speculationSummaryInfo.numTasks > 0) {
// Show speculationSummary if there is atleast one speculated task
that ran
- $("#speculationSummaryTitle").show();
- $("#speculationSummary").show();
+ $("#speculationSummaryTitle").removeClass("d-none");
+ $("#speculationSummary").removeClass("d-none");
}
}
var speculationMetricsTableConf = {
@@ -1127,10 +1127,10 @@ $(document).ready(function () {
// hide or show the accumulate update table
if (accumulatorTable.length == 0) {
- $("#accumulator-update-table").hide();
+ $("#accumulator-update-table").addClass("d-none");
} else {
taskTableSelector.column(18).visible(true);
- $("#accumulator-update-table").show();
+ $("#accumulator-update-table").removeClass("d-none");
}
// Showing relevant stage data depending on stage type for task table
and executor
// summary table
diff --git
a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js
b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js
index 1342f70577cc..c8d7fa4c4dcf 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js
@@ -344,7 +344,7 @@ $(function () {
$("span.expand-input-rate").click(function () {
status = !status;
- $("#inputs-table").toggle('collapsed');
+ $("#inputs-table").toggleClass("d-none");
// Toggle the class of the arrow between open and closed
$(this).find('.expand-input-rate-arrow').toggleClass('arrow-open').toggleClass('arrow-closed');
if (window.localStorage) {
@@ -353,7 +353,7 @@ $(function () {
});
if (status) {
- $("#inputs-table").toggle('collapsed');
+ $("#inputs-table").toggleClass("d-none");
// Toggle the class of the arrow between open and closed
$(this).find('.expand-input-rate-arrow').toggleClass('arrow-open').toggleClass('arrow-closed');
}
diff --git a/core/src/main/scala/org/apache/spark/deploy/history/LogPage.scala
b/core/src/main/scala/org/apache/spark/deploy/history/LogPage.scala
index c7f02ea0ab36..f5762abd26ac 100644
--- a/core/src/main/scala/org/apache/spark/deploy/history/LogPage.scala
+++ b/core/src/main/scala/org/apache/spark/deploy/history/LogPage.scala
@@ -52,7 +52,7 @@ private[history] class LogPage(conf: SparkConf) extends
WebUIPage("logPage") wit
</button>
val alert =
- <div class="no-new-alert alert alert-info" style="display: none;">
+ <div class="no-new-alert alert alert-info d-none">
End of Log
</div>
diff --git
a/core/src/main/scala/org/apache/spark/deploy/master/ui/LogPage.scala
b/core/src/main/scala/org/apache/spark/deploy/master/ui/LogPage.scala
index 7d2613ad5fa3..1969888504d8 100644
--- a/core/src/main/scala/org/apache/spark/deploy/master/ui/LogPage.scala
+++ b/core/src/main/scala/org/apache/spark/deploy/master/ui/LogPage.scala
@@ -51,7 +51,7 @@ private[ui] class LogPage(parent: MasterWebUI) extends
WebUIPage("logPage") with
</button>
val alert =
- <div class="no-new-alert alert alert-info" style="display: none;">
+ <div class="no-new-alert alert alert-info d-none">
End of Log
</div>
diff --git
a/core/src/main/scala/org/apache/spark/deploy/worker/ui/LogPage.scala
b/core/src/main/scala/org/apache/spark/deploy/worker/ui/LogPage.scala
index 06fe1f841613..48213d04ddb5 100644
--- a/core/src/main/scala/org/apache/spark/deploy/worker/ui/LogPage.scala
+++ b/core/src/main/scala/org/apache/spark/deploy/worker/ui/LogPage.scala
@@ -101,7 +101,7 @@ private[ui] class LogPage(parent: WorkerWebUI) extends
WebUIPage("logPage") with
</button>
val alert =
- <div class="no-new-alert alert alert-info" style="display: none;">
+ <div class="no-new-alert alert alert-info d-none">
End of Log
</div>
diff --git a/core/src/main/scala/org/apache/spark/ui/DriverLogPage.scala
b/core/src/main/scala/org/apache/spark/ui/DriverLogPage.scala
index 294e9491c04d..b563d0c49232 100644
--- a/core/src/main/scala/org/apache/spark/ui/DriverLogPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/DriverLogPage.scala
@@ -66,7 +66,7 @@ private[ui] class DriverLogPage(
</button>
val alert =
- <div class="no-new-alert alert alert-info" style="display: none;">
+ <div class="no-new-alert alert alert-info d-none">
End of Log
</div>
diff --git a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
index 229561bc5081..da8733222c4a 100644
--- a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
+++ b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
@@ -519,7 +519,7 @@ private[spark] object UIUtils extends Logging {
if (forJob) ToolTips.JOB_DAG else ToolTips.STAGE_DAG)}
</span>
<div id="dag-viz-graph"></div>
- <div id="dag-viz-metadata" style="display:none">
+ <div id="dag-viz-metadata" class="d-none">
{
graphs.map { g =>
val stageId =
g.rootCluster.id.replaceAll(RDDOperationGraph.STAGE_CLUSTER_PREFIX, "")
diff --git
a/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala
b/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala
index 11ab7ccc4e61..3ec24f738092 100644
--- a/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala
+++ b/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala
@@ -301,7 +301,7 @@ private[ui] class StreamingPage(parent: StreamingTab)
<td
class="histogram">{graphUIDataForRecordRateOfAllStreams.generateHistogramHtml(jsCollector)}</td>
</tr>
{if (hasStream) {
- <tr id="inputs-table" style="display: none;" >
+ <tr id="inputs-table" class="d-none" >
<td colspan="3">
{generateInputDStreamsTable(jsCollector, minBatchTime,
maxBatchTime, minRecordRate.toDouble)}
</td>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
