From 0b6f503d5337a8387c37cc2c8e544f67c68f7dad Mon Sep 17 00:00:00 2001
From: zsxwing <zsxwing@gmail.com>
Date: Mon, 18 May 2015 13:34:43 -0700
Subject: [PATCH] [SPARK-7658] [STREAMING] [WEBUI] Update the mouse behaviors
for the timeline graphs
1. If the user click one point of a batch, scroll down to the corresponding batch row and highlight it. And recovery the batch row after 3 seconds if necessary.
2. Add "#batches" in the histogram graphs.
Author: zsxwing <zsxwing@gmail.com>
Closes #6168 from zsxwing/SPARK-7658 and squashes the following commits:
c242b00 [zsxwing] Change 5 seconds to 3 seconds
31fd0aa [zsxwing] Remove the mouseover highlight feature
06c6f6f [zsxwing] Merge branch 'master' into SPARK-7658
2eaff06 [zsxwing] Merge branch 'master' into SPARK-7658
108d56c [zsxwing] Update the mouse behaviors for the timeline graphs
---
.../streaming/ui/static/streaming-page.css | 4 ++
.../streaming/ui/static/streaming-page.js | 42 ++++++++++++++++++-
.../spark/streaming/ui/AllBatchesTable.scala | 3 +-
3 files changed, 47 insertions(+), 2 deletions(-)
diff --git a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.css b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.css
index 19abe889ad..b22c884bfe 100644
--- a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.css
+++ b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.css
@@ -60,3 +60,7 @@
span.expand-input-rate {
cursor: pointer;
}
+
+tr.batch-table-cell-highlight > td {
+ background-color: #D6FFE4 !important;
+}
diff --git a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js
index 0ee6752b29..75251f493a 100644
--- a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js
+++ b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js
@@ -146,6 +146,12 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) {
.attr("class", "line")
.attr("d", line);
+ // If the user click one point in the graphs, jump to the batch row and highlight it. And
+ // recovery the batch row after 3 seconds if necessary.
+ // We need to remember the last clicked batch so that we can recovery it.
+ var lastClickedBatch = null;
+ var lastTimeout = null;
+
// Add points to the line. However, we make it invisible at first. But when the user moves mouse
// over a point, it will be displayed with its detail.
svg.selectAll(".point")
@@ -154,6 +160,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) {
.attr("stroke", "white") // white and opacity = 0 make it invisible
.attr("fill", "white")
.attr("opacity", "0")
+ .style("cursor", "pointer")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", function(d) { return 3; })
@@ -175,7 +182,29 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) {
.attr("opacity", "0");
})
.on("click", function(d) {
- window.location.href = "batch/?id=" + d.x;
+ if (lastTimeout != null) {
+ window.clearTimeout(lastTimeout);
+ }
+ if (lastClickedBatch != null) {
+ clearBatchRow(lastClickedBatch);
+ lastClickedBatch = null;
+ }
+ lastClickedBatch = d.x;
+ highlightBatchRow(lastClickedBatch)
+ lastTimeout = window.setTimeout(function () {
+ lastTimeout = null;
+ if (lastClickedBatch != null) {
+ clearBatchRow(lastClickedBatch);
+ lastClickedBatch = null;
+ }
+ }, 3000); // Clean up after 3 seconds
+
+ var batchSelector = $("#batch-" + d.x);
+ var topOffset = batchSelector.offset().top - 15;
+ if (topOffset < 0) {
+ topOffset = 0;
+ }
+ $('html,body').animate({scrollTop: topOffset}, 200);
});
}
@@ -218,6 +247,9 @@ function drawHistogram(id, values, minY, maxY, unitY, batchInterval) {
svg.append("g")
.attr("class", "x axis")
.call(xAxis)
+ .append("text")
+ .attr("transform", "translate(" + (margin.left + width - 40) + ", 15)")
+ .text("#batches");
svg.append("g")
.attr("class", "y axis")
@@ -279,3 +311,11 @@ $(function() {
$(this).find('.expand-input-rate-arrow').toggleClass('arrow-open').toggleClass('arrow-closed');
}
});
+
+function highlightBatchRow(batch) {
+ $("#batch-" + batch).parent().addClass("batch-table-cell-highlight");
+}
+
+function clearBatchRow(batch) {
+ $("#batch-" + batch).parent().removeClass("batch-table-cell-highlight");
+}
diff --git a/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala b/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala
index 00cc47d6a3..f702bd5bc9 100644
--- a/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala
+++ b/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala
@@ -44,8 +44,9 @@ private[ui] abstract class BatchTableBase(tableId: String, batchInterval: Long)
val formattedSchedulingDelay = schedulingDelay.map(SparkUIUtils.formatDuration).getOrElse("-")
val processingTime = batch.processingDelay
val formattedProcessingTime = processingTime.map(SparkUIUtils.formatDuration).getOrElse("-")
+ val batchTimeId = s"batch-$batchTime"
- <td sorttable_customkey={batchTime.toString}>
+ <td id={batchTimeId} sorttable_customkey={batchTime.toString}>
<a href={s"batch?id=$batchTime"}>
{formattedBatchTime}
</a>
--
GitLab