[SPARK-4463] Add (de)select all button for add'l metrics.

This commit removes the behavior where when a user clicks
"Show additional metrics" on the stage page, all of the additional
metrics are automatically selected; now, collapsing and expanding
the additional metrics has no effect on which options are selected.
Instead, there's a "(De)select All" box at the top; checking this box
checks all additional metrics (and similarly, unchecking it unchecks
all additional metrics).

This commit is intended to be backported to 1.2, so that the additional
metrics behavior is not confusing to users.

Now when a user clicks the "Show additional metrics" menu, this is what
it looks like:
![image](https://cloud.githubusercontent.com/assets/1108612/5094347/1541ead6-6f15-11e4-8e8c-25a65ddbdfb2.png)

Author: Kay Ousterhout <kayousterhout@gmail.com>

Closes #3331 from kayousterhout/SPARK-4463 and squashes the following commits:

9e17cea [Kay Ousterhout] Added italics
b731230 [Kay Ousterhout] [SPARK-4463] Add (de)select all button for add'l metrics.
This commit is contained in:
Kay Ousterhout 2014-11-18 15:01:06 -08:00 committed by Andrew Or
parent e34f38ff1a
commit 010bc86e40
2 changed files with 14 additions and 7 deletions

View file

@ -26,13 +26,6 @@ $(function() {
// Switch the class of the arrow from open to closed.
$(this).find('.expand-additional-metrics-arrow').toggleClass('arrow-open');
$(this).find('.expand-additional-metrics-arrow').toggleClass('arrow-closed');
// If clicking caused the metrics to expand, automatically check all options for additional
// metrics (don't trigger a click when collapsing metrics, because it leads to weird
// toggling behavior).
if (!$(additionalMetricsDiv).hasClass('collapsed')) {
$(this).parent().find('input:checkbox:not(:checked)').trigger('click');
}
});
$("input:checkbox:not(:checked)").each(function() {
@ -48,6 +41,16 @@ $(function() {
stripeTables();
});
$("#select-all-metrics").click(function() {
if (this.checked) {
// Toggle all un-checked options.
$('input:checkbox:not(:checked)').trigger('click');
} else {
// Toggle all checked options.
$('input:checkbox:checked').trigger('click');
}
});
// Trigger a click on the checkbox if a user clicks the label next to it.
$("span.additional-metric-title").click(function() {
$(this).parent().find('input:checkbox').trigger('click');

View file

@ -114,6 +114,10 @@ private[ui] class StagePage(parent: JobProgressTab) extends WebUIPage("stage") {
</span>
<div class="additional-metrics collapsed">
<ul style="list-style-type:none">
<li>
<input type="checkbox" id="select-all-metrics"/>
<span class="additional-metric-title"><em>(De)select All</em></span>
</li>
<li>
<span data-toggle="tooltip"
title={ToolTips.SCHEDULER_DELAY} data-placement="right">