adjust the page structure,

Author: CodingCat

core/src/main/resources/org/apache/spark/ui/static/table.js

@@ -31,38 +31,40 @@ function stripeSummaryTable() {
     });
 }
 
-function toggleThreadStackTrace(threadId) {
-    var threadCell = $("#" + threadId + "_stacktrace");
-    var columnHeader = $('#stacktrace_column');
-    var bindNum = parseInt(columnHeader.attr('bind'));
-    if (threadCell.hasClass('hidden')) {
-        // expand thread cell
-        columnHeader.attr("bind", bindNum + 1);
-        columnHeader.removeClass("hidden");
-        threadCell.removeClass('hidden');
+function toggleThreadStackTrace(threadId, forceAdd) {
+    var stackTrace = $("#" + threadId + "_stacktrace")
+    if (stackTrace.length == 0) {
+        var stackTraceText = $('#' + threadId + "_td_stacktrace").html()
+        var threadCell = $("#thread_" + threadId + "_tr")
+        threadCell.after("<tr id=\"" + threadId +"_stacktrace\" class=\"accordion-body\"><td colspan=\"3\"><pre>" +
+            stackTraceText +  "</pre></td></tr>")
     } else {
-        // collapse thread cell
-        columnHeader.attr("bind", bindNum - 1);
-        if (bindNum - 1 == 0) {
-            columnHeader.addClass("hidden");
+        if (!forceAdd) {
+            stackTrace.remove()
         }
-        threadCell.addClass('hidden');
     }
 }
 
 // expandOrCollapse - true: expand, false: collapse
-function expandOrCollapseAllThreadStackTrace(expandOrCollapse) {
-    var columnHeader = $('#stacktrace_column');
+function expandOrCollapseAllThreadStackTrace(expandOrCollapse, toggleButton) {
     if (expandOrCollapse) {
-        columnHeader.removeClass('hidden');
-        $('.accordion-body').removeClass('hidden');
-        columnHeader.attr("bind", $('.accordion-body').length);
-        $('.expandbutton').toggleClass('hidden')
+        $('.accordion-heading').each(function() {
+            //get thread ID
+            if (!$(this).hasClass("hidden")) {
+                var trId = $(this).attr('id').match(/thread_([0-9]+)_tr/m)[1]
+                toggleThreadStackTrace(trId, true)
+            }
+        })
+        if (toggleButton) {
+            $('.expandbutton').toggleClass('hidden')
+        }
     } else {
-        columnHeader.addClass('hidden');
-        $('.accordion-body').addClass('hidden');
-        columnHeader.attr("bind", 0);
-        $('.expandbutton').toggleClass('hidden');
+        $('.accordion-body').each(function() {
+            $(this).remove()
+        })
+        if (toggleButton) {
+            $('.expandbutton').toggleClass('hidden');
+        }
     }
 }
 
@@ -75,6 +77,8 @@ function onMouseOverAndOut(threadId) {
 
 function onSearchStringChange() {
     var searchString = $('#search').val()
+    //remove the stacktrace
+    expandOrCollapseAllThreadStackTrace(false, false)
     if (searchString.length == 0) {
         $('tr').each(function() {
             $(this).removeClass('hidden')

core/src/main/scala/org/apache/spark/ui/exec/ExecutorThreadDumpPage.scala

@@ -63,26 +63,24 @@ private[ui] class ExecutorThreadDumpPage(parent: ExecutorsTab) extends WebUIPage
       }.map { thread =>
         val threadId = thread.threadId
         <tr id={s"thread_${threadId}_tr"} class="accordion-heading"
-            onclick={s"toggleThreadStackTrace($threadId)"}
+            onclick={s"toggleThreadStackTrace($threadId, false)"}
             onmouseover={s"onMouseOverAndOut($threadId)"}
             onmouseout={s"onMouseOverAndOut($threadId)"}>
           <td id={s"${threadId}_td_id"}>{threadId}</td>
           <td id={s"${threadId}_td_name"}>{thread.threadName}</td>
           <td id={s"${threadId}_td_state"}>{thread.threadState}</td>
-          <td id={threadId + "_stacktrace"} class="accordion-body hidden">
-            <pre>{thread.stackTrace}</pre>
-          </td>
+          <td id={s"${threadId}_td_stacktrace"} class="hidden">{thread.stackTrace}</td>
         </tr>
       }
 
     <div class="row-fluid">
       <p>Updated at {UIUtils.formatDate(time)}</p>
       {
         // scalastyle:off
-        <p><a class="expandbutton" onClick="expandOrCollapseAllThreadStackTrace(true)">
+        <p><a class="expandbutton" onClick="expandOrCollapseAllThreadStackTrace(true, true)">
           Expand All
         </a></p>
-        <p><a class="expandbutton hidden" onClick="expandOrCollapseAllThreadStackTrace(false)">
+        <p><a class="expandbutton hidden" onClick="expandOrCollapseAllThreadStackTrace(false, true)">
           Collapse All
         </a></p>
         <div class="form-inline">
@@ -99,10 +97,9 @@ private[ui] class ExecutorThreadDumpPage(parent: ExecutorsTab) extends WebUIPage
       }
       <table class={UIUtils.TABLE_CLASS_STRIPED + " accordion-group" + " sortable"}>
         <thead>
-          <th>Thread ID</th>
-          <th>Thread Name</th>
-          <th>Thread State</th>
-          <th id='stacktrace_column' bind='0' class="hidden">Thread Stacktrace</th>
+          <th onClick="expandOrCollapseAllThreadStackTrace(false, false)">Thread ID</th>
+          <th onClick="expandOrCollapseAllThreadStackTrace(false, false)">Thread Name</th>
+          <th onClick="expandOrCollapseAllThreadStackTrace(false, false)">Thread State</th>
         </thead>
         <tbody>{dumpRows}</tbody>
       </table>