[SPARK-7589] [STREAMING] [WEBUI] Make "Input Rate" in the Streaming page consistent with other pages

This PR makes "Input Rate" in the Streaming page consistent with Job and Stage pages.

![screen shot 2015-05-12 at 5 03 35 pm](https://cloud.githubusercontent.com/assets/1000778/7601444/f943f8ac-f8ca-11e4-8280-a715d814f434.png)
![screen shot 2015-05-12 at 5 07 25 pm](https://cloud.githubusercontent.com/assets/1000778/7601445/f9571c0c-f8ca-11e4-9b12-9317cb55c002.png)

Author: zsxwing <zsxwing@gmail.com>

Closes #6102 from zsxwing/SPARK-7589 and squashes the following commits:

2745225 [zsxwing] Make "Input Rate" in the Streaming page consistent with other pages
This commit is contained in:
zsxwing 2015-05-13 10:01:26 -07:00 committed by Tathagata Das
parent 0da254fb29
commit bec938f777
3 changed files with 30 additions and 19 deletions

View file

@ -56,3 +56,7 @@
.histogram {
width: auto;
}
span.expand-input-rate {
cursor: pointer;
}

View file

@ -266,9 +266,19 @@ $(function() {
}
}
if (getParameterFromURL("show-streams-detail") == "true") {
// Show the details for all InputDStream
$('#inputs-table').toggle('collapsed');
$('#triangle').html('&#9660;');
var status = getParameterFromURL("show-streams-detail") == "true";
$("span.expand-input-rate").click(function() {
status = !status;
$("#inputs-table").toggle('collapsed');
// Toggle the class of the arrow between open and closed
$(this).find('.expand-input-rate-arrow').toggleClass('arrow-open').toggleClass('arrow-closed');
window.history.pushState('', document.title, window.location.pathname + '?show-streams-detail=' + status);
});
if (status) {
$("#inputs-table").toggle('collapsed');
// Toggle the class of the arrow between open and closed
$(this).find('.expand-input-rate-arrow').toggleClass('arrow-open').toggleClass('arrow-closed');
}
});

View file

@ -244,17 +244,6 @@ private[ui] class StreamingPage(parent: StreamingTab)
val maxEventRate = eventRateForAllStreams.max.map(_.ceil.toLong).getOrElse(0L)
val minEventRate = 0L
// JavaScript to show/hide the InputDStreams sub table.
val triangleJs =
s"""$$('#inputs-table').toggle('collapsed');
|var status = false;
|if ($$(this).html() == '$BLACK_RIGHT_TRIANGLE_HTML') {
|$$(this).html('$BLACK_DOWN_TRIANGLE_HTML');status = true;}
|else {$$(this).html('$BLACK_RIGHT_TRIANGLE_HTML');status = false;}
|window.history.pushState('',
| document.title, window.location.pathname + '?show-streams-detail=' + status);"""
.stripMargin.replaceAll("\\n", "") // it must be only one single line
val batchInterval = UIUtils.convertToTimeUnit(listener.batchDuration, normalizedUnit)
val jsCollector = new JsCollector
@ -326,10 +315,18 @@ private[ui] class StreamingPage(parent: StreamingTab)
<td style="vertical-align: middle;">
<div style="width: 160px;">
<div>
{if (hasStream) {
<span id="triangle" onclick={Unparsed(triangleJs)}>{Unparsed(BLACK_RIGHT_TRIANGLE_HTML)}</span>
}}
<strong>Input Rate</strong>
{
if (hasStream) {
<span class="expand-input-rate">
<span class="expand-input-rate-arrow arrow-closed"></span>
<a data-toggle="tooltip" title="Show/hide details of each receiver" data-placement="right">
<strong>Input Rate</strong>
</a>
</span>
} else {
<strong>Input Rate</strong>
}
}
</div>
<div>Avg: {eventRateForAllStreams.formattedAvg} events/sec</div>
</div>