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 <y...@apache.org> 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 <y...@apache.org> Signed-off-by: Dongjoon Hyun <dh...@apple.com> --- .../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: commits-unsubscr...@spark.apache.org For additional commands, e-mail: commits-h...@spark.apache.org