Prepare for the demo

apache · Apr 29, 2015 · 8e4363c · 8e4363c
1 parent c81a1ee
commit 8e4363c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css
@@ -43,7 +43,8 @@
 
 .bar rect:hover {
   //fill: rgb(49, 91, 125);
-  fill: #005580;
+  //fill: #005580;
+  fill: rgb(0, 194, 255);
 }
 
 .timeline {

diff --git a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js
@@ -223,3 +223,24 @@ function prepareDistribution(values, minY, maxY) {
     var maxBarSize = d3.max(data, function(d) { return d.y; });
     distributionMaxX = maxBarSize > distributionMaxX? maxBarSize : distributionMaxX;
 }
+
+function getUrlParameter(sParam)
+{
+    var sPageURL = window.location.search.substring(1);
+    var sURLVariables = sPageURL.split('&');
+    for (var i = 0; i < sURLVariables.length; i++)
+    {
+        var sParameterName = sURLVariables[i].split('=');
+        if (sParameterName[0] == sParam)
+        {
+            return sParameterName[1];
+        }
+    }
+}
+
+$(function() {
+    if (getUrlParameter("show-receivers-detail") == "true") {
+        $('#inputs-table').toggle('collapsed');
+        $('#triangle').html('&#9660;');
+    }
+});
diff --git a/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala b/streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala
@@ -142,8 +142,9 @@ private[ui] class StreamingPage(parent: StreamingTab)
       since
       <strong>
         {UIUtils.formatDate(startTime)}
-      </strong>.
+      </strong>
     </div>
+    <div> </div>
   }
 
   private def generateTimeMap(times: Seq[Long]): Seq[Node] = {
@@ -197,9 +198,11 @@ private[ui] class StreamingPage(parent: StreamingTab)
     // JavaScript to show/hide the receiver sub table.
     val triangleJs =
       s"""$$('#inputs-table').toggle('collapsed');
-         |if ($$(this).html() == '$BLACK_RIGHT_TRIANGLE_HTML')
-         |$$(this).html('$BLACK_DOWN_TRIANGLE_HTML');
-         |else $$(this).html('$BLACK_RIGHT_TRIANGLE_HTML');""".stripMargin.replaceAll("\\n", "")
+         |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-receivers-detail=' + status);""".stripMargin.replaceAll("\\n", "")
 
     val timelineDataForEventRateOfAllReceivers =
       new TimelineUIData(
@@ -282,9 +285,9 @@ private[ui] class StreamingPage(parent: StreamingTab)
       <tbody>
         <tr>
           <td style="vertical-align: middle; width: 160px;">
-            <div  style="width: 160px;">
+            <div style="width: 160px;">
             <div>
-              <span onclick={Unparsed(triangleJs)}>{Unparsed(BLACK_RIGHT_TRIANGLE_HTML)}</span>
+              <span id="triangle" onclick={Unparsed(triangleJs)}>{Unparsed(BLACK_RIGHT_TRIANGLE_HTML)}</span>
               <strong>Input Rate</strong>
             </div>
             <div>Avg: {eventRateForAllReceivers.formattedAvg} events/sec</div>
@@ -376,12 +379,12 @@ private[ui] class StreamingPage(parent: StreamingTab)
     }.getOrElse(emptyCell)
     val receiverLastErrorTime =
       listener.receiverLastErrorTime(receiverId).map(UIUtils.formatDate).getOrElse(emptyCell)
-    val receivedRecords = listener.receivedRecordsWithBatchTime.get(receiverId).getOrElse(Seq())
+    val receivedRecords = new DoubleStatUIData(listener.receivedRecordsWithBatchTime.get(receiverId).getOrElse(Seq()))
 
     val timelineForEventRate =
       new TimelineUIData(
         s"receiver-$receiverId-events-timeline",
-        receivedRecords,
+        receivedRecords.data,
         minX,
         maxX,
         minY,
@@ -391,7 +394,7 @@ private[ui] class StreamingPage(parent: StreamingTab)
     val distributionForEventsRate =
       new DistributionUIData(
         s"receiver-$receiverId-events-distribution",
-        receivedRecords.map(_._2),
+        receivedRecords.data.map(_._2),
         minY,
         maxY,
         "events/sec").toHtml(jsCollector)
@@ -402,13 +405,13 @@ private[ui] class StreamingPage(parent: StreamingTab)
         <div>
           <strong>{receiverName}</strong>
         </div>
-        <div>Avg: {avgReceiverEvents.map(_.toString).getOrElse(emptyCell)} events/sec</div>
+        <div>Avg: {receivedRecords.formattedAvg} events/sec</div>
           </div>
       </td>
       <td>{receiverActive}</td>
       <td>{receiverLocation}</td>
       <td>{receiverLastErrorTime}</td>
-      <td>{receiverLastError}</td>
+      <td><div style="width: 292px;">{receiverLastError}</div></td>
     </tr>
       <tr>
         <td colspan="3" class="timeline">