This is an automated email from the ASF dual-hosted git repository.
dongjoon 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 fab408f018e [SPARK-45955][UI] Collapse Support for Flamegraph and
thread dump details
fab408f018e is described below
commit fab408f018e8bd77574a87ec72dee194d199aebc
Author: Kent Yao <[email protected]>
AuthorDate: Thu Nov 16 10:59:19 2023 -0800
[SPARK-45955][UI] Collapse Support for Flamegraph and thread dump details
### What changes were proposed in this pull request?
This PR supports collapse flamegraph and thread dump details like other
pages
https://github.com/apache/spark/assets/8326978/ea5e224b-7edf-4bcd-bd83-c4243cdd7e58
### Why are the changes needed?
UX improvement for UI
### Does this PR introduce _any_ user-facing change?
yes， UI changes
### How was this patch tested?
As shown in the above video
### Was this patch authored or co-authored using generative AI tooling?
no
Closes #43842 from yaooqinn/SPARK-45955.
Authored-by: Kent Yao <[email protected]>
Signed-off-by: Dongjoon Hyun <[email protected]>
---
.../org/apache/spark/ui/static/flamegraph.js | 14 +++++++++++++-
.../resources/org/apache/spark/ui/static/table.js | 15 ++++++++++++++-
.../spark/ui/exec/ExecutorThreadDumpPage.scala | 20 +++++++++++++++++---
3 files changed, 44 insertions(+), 5 deletions(-)
diff --git a/core/src/main/resources/org/apache/spark/ui/static/flamegraph.js
b/core/src/main/resources/org/apache/spark/ui/static/flamegraph.js
index c298dbaeed6..aeb80b280a3 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/flamegraph.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/flamegraph.js
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-/* global d3, flamegraph */
+/* global $, d3, flamegraph */
/* eslint-disable no-unused-vars */
function drawFlamegraph() {
@@ -33,4 +33,16 @@ function drawFlamegraph() {
.call(chart);
window.onresize = () => chart.width(width);
}
+
+function toggleFlamegraph() {
+ const arrow = d3.select("#executor-flamegraph-arrow");
+ arrow.each(function () {
+ $(this).toggleClass("arrow-open").toggleClass("arrow-closed")
+ });
+ if (arrow.classed("arrow-open")) {
+ d3.select("#executor-flamegraph-chart").style("display", "block");
+ } else {
+ d3.select("#executor-flamegraph-chart").style("display", "none");
+ }
+}
/* eslint-enable no-unused-vars */
diff --git a/core/src/main/resources/org/apache/spark/ui/static/table.js
b/core/src/main/resources/org/apache/spark/ui/static/table.js
index 0203748cf7d..839746762f4 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/table.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/table.js
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-/* global $ */
+/* global $, d3, collapseTable */
/* eslint-disable no-unused-vars */
/* Adds background colors to stripe table rows in the summary table (on the
stage page). This is
* necessary (instead of using css or the table striping provided by
bootstrap) because the summary
@@ -109,3 +109,16 @@ function onSearchStringChange() {
}
}
/* eslint-enable no-unused-vars */
+
+/* eslint-disable no-unused-vars */
+function collapseTableAndButton(thisName, table) {
+ collapseTable(thisName, table);
+
+ const t = d3.select("." + table);
+ if (t.classed("collapsed")) {
+ d3.select("." + table + "-button").style("display", "none");
+ } else {
+ d3.select("." + table + "-button").style("display", "flex");
+ }
+}
+/* eslint-enable no-unused-vars */
diff --git
a/core/src/main/scala/org/apache/spark/ui/exec/ExecutorThreadDumpPage.scala
b/core/src/main/scala/org/apache/spark/ui/exec/ExecutorThreadDumpPage.scala
index 328abdb5c5f..01d29897bef 100644
--- a/core/src/main/scala/org/apache/spark/ui/exec/ExecutorThreadDumpPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/exec/ExecutorThreadDumpPage.scala
@@ -82,7 +82,13 @@ private[ui] class ExecutorThreadDumpPage(
{
// scalastyle:off
<p></p>
- <div style="display: flex; align-items: center;">
+ <span class="collapse-thead-stack-trace-table collapse-table"
onClick="collapseTableAndButton('collapse-thead-stack-trace-table',
'thead-stack-trace-table')">
+ <h4>
+ <span class="collapse-table-arrow arrow-open"></span>
+ <a>Thread Stack Trace</a>
+ </h4>
+ </span>
+ <div class="thead-stack-trace-table-button" style="display: flex;
align-items: center;">
<a class="expandbutton"
onClick="expandAllThreadStackTrace(true)">Expand All</a>
<a class="expandbutton d-none"
onClick="collapseAllThreadStackTrace(true)">Collapse All</a>
<a class="downloadbutton" href={"data:text/plain;charset=utf-8," +
threadDump.map(_.toString).mkString} download={"threaddump_" + executorId +
".txt"}>Download</a>
@@ -98,9 +104,8 @@ private[ui] class ExecutorThreadDumpPage(
</div>
</div>
<p></p>
- // scalastyle:on
}
- <table class={UIUtils.TABLE_CLASS_STRIPED + " accordion-group" + "
sortable"}>
+ <table class={UIUtils.TABLE_CLASS_STRIPED + " accordion-group" + "
sortable" + " thead-stack-trace-table collapsible-table"}>
<thead>
<th onClick="collapseAllThreadStackTrace(false)">Thread ID</th>
<th onClick="collapseAllThreadStackTrace(false)">Thread Name</th>
@@ -118,11 +123,20 @@ private[ui] class ExecutorThreadDumpPage(
</div>
}.getOrElse(Text("Error fetching thread dump"))
UIUtils.headerSparkPage(request, s"Thread dump for executor $executorId",
content, parent)
+ // scalastyle:on
}
// scalastyle:off
private def drawExecutorFlamegraph(request: HttpServletRequest, thread:
Array[ThreadStackTrace]): Seq[Node] = {
<div>
+ <div>
+ <span style="cursor: pointer;" onclick="toggleFlamegraph();">
+ <h4>
+ <span id="executor-flamegraph-arrow" class="arrow-open"></span>
+ <a>Flame Graph</a>
+ </h4>
+ </span>
+ </div>
<div id="executor-flamegraph-data"
class="d-none">{FlamegraphNode(thread).toJsonString}</div>
<div id="executor-flamegraph-chart">
<link rel="stylesheet" type="text/css" href={prependBaseUri(request,
"/static/d3-flamegraph.css")}></link>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
