Skip to content

Commit b5be743

Browse files
sarutaksarutak
committed
Add checkbox to ExecutorsPage for optional metrics
1 parent a8b3328 commit b5be743

File tree

3 files changed

+95
-33
lines changed

3 files changed

+95
-33
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
-->
1717

1818
<script id="executors-summary-template" type="text/html">
19+
<div id="showAdditionalMetrics"></div>
1920
<h4 class="title-table">Summary</h4>
2021
<div class="container-fluid">
2122
<div class="container-fluid">
@@ -26,11 +27,11 @@ <h4 class="title-table">Summary</h4>
2627
<th><span data-toggle="tooltip"
2728
title="Memory used / total available memory for storage of data like RDD partitions cached in memory.">Storage Memory</span>
2829
</th>
29-
<th class="on_heap_memory">
30+
<th>
3031
<span data-toggle="tooltip"
3132
title="Memory used / total available memory for on heap storage of data like RDD partitions cached in memory.">On Heap Storage Memory</span>
3233
</th>
33-
<th class="off_heap_memory">
34+
<th>
3435
<span data-toggle="tooltip"
3536
title="Memory used / total available memory for off heap storage of data like RDD partitions cached in memory.">Off Heap Storage Memory</span>
3637
</th>
@@ -81,11 +82,11 @@ <h4 class="title-table">Executors</h4>
8182
<span data-toggle="tooltip" data-placement="top"
8283
title="Memory used / total available memory for storage of data like RDD partitions cached in memory.">
8384
Storage Memory</span></th>
84-
<th class="on_heap_memory">
85+
<th>
8586
<span data-toggle="tooltip" data-placement="top"
8687
title="Memory used / total available memory for on heap storage of data like RDD partitions cached in memory.">
8788
On Heap Storage Memory</span></th>
88-
<th class="off_heap_memory">
89+
<th>
8990
<span data-toggle="tooltip"
9091
title="Memory used / total available memory for off heap storage of data like RDD partitions cached in memory.">
9192
Off Heap Storage Memory</span></th>

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

Lines changed: 90 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,31 @@ function totalDurationColor(totalGCTime, totalDuration) {
105105
return (totalGCTime > GCTimePercent * totalDuration) ? "white" : "black";
106106
}
107107

108+
var sumOptionalColumns = [3, 4];
109+
var execOptionalColumns = [5, 6];
110+
var execDataTable;
111+
var sumDataTable;
112+
113+
function reselectCheckboxesBasedOnTaskTableState() {
114+
var allChecked = true;
115+
if (typeof execDataTable !== "undefined") {
116+
for (var k = 0; k < execOptionalColumns.length; k++) {
117+
if (execDataTable.column(execOptionalColumns[k]).visible()) {
118+
$("[data-exec-col-idx=" + execOptionalColumns[k] + "]").prop("checked", true);
119+
} else {
120+
allChecked = false;
121+
}
122+
}
123+
}
124+
if (allChecked) {
125+
$("#select-all-box").prop("checked", true);
126+
}
127+
}
128+
108129
$(document).ready(function () {
109130
setDataTableDefaults();
110131

111-
executorsSummary = $("#active-executors");
132+
var executorsSummary = $("#active-executors");
112133

113134
getStandAloneAppId(function (appId) {
114135

@@ -367,9 +388,6 @@ $(document).ready(function () {
367388
else
368389
return (formatBytes(row.memoryMetrics.usedOnHeapStorageMemory, type) + ' / ' +
369390
formatBytes(row.memoryMetrics.totalOnHeapStorageMemory, type));
370-
},
371-
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
372-
$(nTd).addClass('on_heap_memory')
373391
}
374392
},
375393
{
@@ -379,9 +397,6 @@ $(document).ready(function () {
379397
else
380398
return (formatBytes(row.memoryMetrics.usedOffHeapStorageMemory, type) + ' / ' +
381399
formatBytes(row.memoryMetrics.totalOffHeapStorageMemory, type));
382-
},
383-
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
384-
$(nTd).addClass('off_heap_memory')
385400
}
386401
},
387402
{data: 'diskUsed', render: formatBytes},
@@ -428,12 +443,16 @@ $(document).ready(function () {
428443
}
429444
}
430445
],
431-
"order": [[0, "asc"]]
446+
"order": [[0, "asc"]],
447+
"columnDefs": [
448+
{"visible": false, "targets": 5},
449+
{"visible": false, "targets": 6}
450+
]
432451
};
433-
434-
var dt = $(selector).DataTable(conf);
435-
dt.column('executorLogsCol:name').visible(logsExist(response));
436-
dt.column('threadDumpCol:name').visible(getThreadDumpEnabled());
452+
453+
execDataTable = $(selector).DataTable(conf);
454+
execDataTable.column('executorLogsCol:name').visible(logsExist(response));
455+
execDataTable.column('threadDumpCol:name').visible(getThreadDumpEnabled());
437456
$('#active-executors [data-toggle="tooltip"]').tooltip();
438457

439458
var sumSelector = "#summary-execs-table";
@@ -463,9 +482,6 @@ $(document).ready(function () {
463482
else
464483
return (formatBytes(row.allOnHeapMemoryUsed, type) + ' / ' +
465484
formatBytes(row.allOnHeapMaxMemory, type));
466-
},
467-
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
468-
$(nTd).addClass('on_heap_memory')
469485
}
470486
},
471487
{
@@ -475,9 +491,6 @@ $(document).ready(function () {
475491
else
476492
return (formatBytes(row.allOffHeapMemoryUsed, type) + ' / ' +
477493
formatBytes(row.allOffHeapMaxMemory, type));
478-
},
479-
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
480-
$(nTd).addClass('off_heap_memory')
481494
}
482495
},
483496
{data: 'allDiskUsed', render: formatBytes},
@@ -520,13 +533,69 @@ $(document).ready(function () {
520533
],
521534
"paging": false,
522535
"searching": false,
523-
"info": false
536+
"info": false,
537+
"columnDefs": [
538+
{"visible": false, "targets": 3},
539+
{"visible": false, "targets": 4}
540+
]
524541

525542
};
526543

527-
$(sumSelector).DataTable(sumConf);
544+
sumDataTable = $(sumSelector).DataTable(sumConf);
528545
$('#execSummary [data-toggle="tooltip"]').tooltip();
529-
546+
547+
$("#showAdditionalMetrics").append(
548+
"<div><a id='additionalMetrics'>" +
549+
"<span class='expand-input-rate-arrow arrow-closed' id='arrowtoggle-optional-metrics'></span>" +
550+
"Show Additional Metrics" +
551+
"</a></div>" +
552+
"<div class='container-fluid container-fluid-div' id='toggle-metrics' hidden>" +
553+
"<div><input type='checkbox' class='toggle-vis' id='select-all-box'>Select All</div>" +
554+
"<div id='on_heap_memory' class='on-heap-memory-checkbox-div'><input type='checkbox' class='toggle-vis' data-sum-col-idx='3' data-exec-col-idx='5'>On Heap Memory</div>" +
555+
"<div id='off_heap_memory' class='off-heap-memory-checkbox-div'><input type='checkbox' class='toggle-vis' data-sum-col-idx='4' data-exec-col-idx='6'>Off Heap Memory</div>" +
556+
"</div>");
557+
558+
reselectCheckboxesBasedOnTaskTableState();
559+
560+
$("#additionalMetrics").click(function() {
561+
$("#arrowtoggle-optional-metrics").toggleClass("arrow-open arrow-closed");
562+
$("#toggle-metrics").toggle();
563+
if (window.localStorage) {
564+
window.localStorage.setItem("arrowtoggle-optional-metrics-class", $("#arrowtoggle-optional-metrics").attr('class'));
565+
}
566+
});
567+
568+
$(".toggle-vis").on("click", function() {
569+
var thisBox = $(this);
570+
if (thisBox.is("#select-all-box")) {
571+
var sumColumn = sumDataTable.columns(sumOptionalColumns);
572+
var execColumn = execDataTable.columns(execOptionalColumns);
573+
if (thisBox.is(":checked")) {
574+
$(".toggle-vis").prop("checked", true);
575+
sumColumn.visible(true);
576+
execColumn.visible(true);
577+
} else {
578+
$(".toggle-vis").prop("checked", false);
579+
sumColumn.visible(false);
580+
execColumn.visible(false);
581+
}
582+
} else {
583+
var execColIdx = thisBox.attr("data-exec-col-idx");
584+
var execCol = execDataTable.column(execColIdx);
585+
execCol.visible(!execCol.visible());
586+
var sumColIdx = thisBox.attr("data-sum-col-idx");
587+
var sumCol = sumDataTable.column(sumColIdx);
588+
sumCol.visible(!sumCol.visible());
589+
}
590+
});
591+
592+
if (window.localStorage) {
593+
if (window.localStorage.getItem("arrowtoggle-optional-metrics-class") != null &&
594+
window.localStorage.getItem("arrowtoggle-optional-metrics-class").includes("arrow-open")) {
595+
$("#arrowtoggle-optional-metrics").toggleClass("arrow-open arrow-closed");
596+
$("#toggle-metrics").toggle();
597+
}
598+
}
530599
});
531600
});
532601
});

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -202,14 +202,6 @@ span.expand-dag-viz, span.collapse-table {
202202
color: #777;
203203
}
204204

205-
/* Hide all additional metrics by default. This is done here rather than using JavaScript to
206-
* avoid slow page loads for stage pages with large numbers (e.g., thousands) of tasks. */
207-
.scheduler_delay, .deserialization_time, .fetch_wait_time, .shuffle_read_remote,
208-
.serialization_time, .getting_result_time, .peak_execution_memory,
209-
.on_heap_memory, .off_heap_memory {
210-
display: none;
211-
}
212-
213205
.accordion-inner {
214206
background: #f5f5f5;
215207
}

0 commit comments

Comments
 (0)