[SPARK-25577][Web UI] Add an on-off switch to display the executor additional columns

Author: LantaoJin

core/src/main/resources/org/apache/spark/ui/static/executorspage-common.js

@@ -0,0 +1,24 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$("#show-additional-columns").change(function () {
+    if ($(this).is(':checked')) {
+        $(".additional_column").css("display", "table-cell");
+    } else {
+        $(".additional_column").css("display", "none");
+    }
+});

core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html

@@ -26,11 +26,11 @@ <h4 style="clear: left; display: inline-block;">Summary</h4>
         <th><span data-toggle="tooltip"
                   title="Memory used / total available memory for storage of data like RDD partitions cached in memory.">Storage Memory</span>
         </th>
-        <th class="on_heap_memory">
+        <th class="on_heap_memory additional_column">
           <span data-toggle="tooltip"
                 title="Memory used / total available memory for on heap storage of data like RDD partitions cached in memory.">On Heap Storage Memory</span>
         </th>
-        <th class="off_heap_memory">
+        <th class="off_heap_memory additional_column">
           <span data-toggle="tooltip"
                 title="Memory used / total available memory for off heap storage of data like RDD partitions cached in memory.">Off Heap Storage Memory</span>
         </th>
@@ -81,11 +81,11 @@ <h4 style="clear: left; display: inline-block;">Executors</h4>
             <span data-toggle="tooltip" data-placement="top"
                   title="Memory used / total available memory for storage of data like RDD partitions cached in memory.">
               Storage Memory</span></th>
-          <th class="on_heap_memory">
+          <th class="on_heap_memory additional_column">
             <span data-toggle="tooltip" data-placement="top"
                   title="Memory used / total available memory for on heap storage of data like RDD partitions cached in memory.">
               On Heap Storage Memory</span></th>
-          <th class="off_heap_memory">
+          <th class="off_heap_memory additional_column">
             <span data-toggle="tooltip"
                   title="Memory used / total available memory for off heap storage of data like RDD partitions cached in memory.">
               Off Heap Storage Memory</span></th>

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

@@ -446,7 +446,7 @@ $(document).ready(function () {
                                         formatBytes(row.memoryMetrics.totalOnHeapStorageMemory, type));
                             },
                             "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('on_heap_memory')
+                                $(nTd).addClass('on_heap_memory additional_column')
                             }
                         },
                         {
@@ -458,7 +458,7 @@ $(document).ready(function () {
                                         formatBytes(row.memoryMetrics.totalOffHeapStorageMemory, type));
                             },
                             "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('off_heap_memory')
+                                $(nTd).addClass('off_heap_memory additional_column')
                             }
                         },
                         {data: 'diskUsed', render: formatBytes},
@@ -512,7 +512,6 @@ $(document).ready(function () {
                 dt.column('executorLogsCol:name').visible(logsExist(response));
                 dt.column('threadDumpCol:name').visible(getThreadDumpEnabled());
                 $('#active-executors [data-toggle="tooltip"]').tooltip();
-    
                 var sumSelector = "#summary-execs-table";
                 var sumConf = {
                     "data": [activeSummary, deadSummary, totalSummary],
@@ -542,7 +541,7 @@ $(document).ready(function () {
                                         formatBytes(row.allOnHeapMaxMemory, type));
                             },
                             "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('on_heap_memory')
+                                $(nTd).addClass('on_heap_memory additional_column')
                             }
                         },
                         {
@@ -554,7 +553,7 @@ $(document).ready(function () {
                                         formatBytes(row.allOffHeapMaxMemory, type));
                             },
                             "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('off_heap_memory')
+                                $(nTd).addClass('off_heap_memory additional_column')
                             }
                         },
                         {data: 'allDiskUsed', render: formatBytes},

core/src/main/resources/org/apache/spark/ui/static/webui.css

@@ -210,6 +210,11 @@ span.additional-metric-title {
   display: none;
 }
 
+/* Additional columns will be hidden by default */
+.additional_column {
+  display: none;
+}
+
 .accordion-inner {
   background: #f5f5f5;
 }

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

@@ -48,8 +48,12 @@ private[ui] class ExecutorsPage(
     val content =
       <div>
         {
+          <div><input type="checkbox" id="show-additional-columns">
+            Show additional columns</input></div> ++
           <div id="active-executors" class="row-fluid"></div> ++
           <script src={UIUtils.prependBaseUri(request, "/static/utils.js")}></script> ++
+          <script src={UIUtils.prependBaseUri(request,
+              "/static/executorspage-common.js")}></script> ++
           <script src={UIUtils.prependBaseUri(request, "/static/executorspage.js")}></script> ++
           <script>setThreadDumpEnabled({threadDumpEnabled})</script>
         }