Skip to content

[SPARK-31161][WEBUI] Refactor the on-click timeline action in streagming-page.js #27921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sarutak wants to merge 4 commits into from
Closed

[SPARK-31161][WEBUI] Refactor the on-click timeline action in streagming-page.js #27921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0431f88
Make onclick function customizable for timeline.
sarutak Feb 25, 2020
7e591a7
rebase
sarutak Mar 16, 2020
96e8c58
resolve conflict
sarutak Mar 16, 2020
0a0b4b6
Merge branch 'master' of https://github.com/apache/spark into followu…
sarutak Mar 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 42 additions & 28 deletions core/src/main/resources/org/apache/spark/ui/static/streaming-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ var yValueFormat = d3.format(",.2f");

var unitLabelYOffset = -10;

var onClickTimeline = function() {};

// Show a tooltip "text" for "node"
function showBootstrapTooltip(node, text) {
$(node).tooltip({title: text, trigger: "manual", container: "body"});
Expand All @@ -44,6 +46,45 @@ function hideBootstrapTooltip(node) {
$(node).tooltip("dispose");
}

// Return the function to scroll to the corresponding
// row on clicking a point of batch in the timeline.
function getOnClickTimelineFunction() {
// 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;

return function(d) {
var batchSelector = $("#batch-" + d.x);
// If there is a corresponding batch row, scroll down to it and highlight it.
if (batchSelector.length > 0) {
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 topOffset = batchSelector.offset().top - 15;
if (topOffset < 0) {
topOffset = 0;
}
$('html,body').animate({scrollTop: topOffset}, 200);
}
}
}

// Register a timeline graph. All timeline graphs should be register before calling any
// "drawTimeline" so that we can determine the max margin left for all timeline graphs.
function registerTimeline(minY, maxY) {
Expand Down Expand Up @@ -189,34 +230,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) {
.attr("opacity", function(d) { return isFailedBatch(d.x) ? "1" : "0";})
.attr("r", function(d) { return isFailedBatch(d.x) ? "2" : "3";});
})
.on("click", function(d) {
var batchSelector = $("#batch-" + d.x);
// If there is a corresponding batch row, scroll down to it and highlight it.
if (batchSelector.length > 0) {
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 topOffset = batchSelector.offset().top - 15;
if (topOffset < 0) {
topOffset = 0;
}
$('html,body').animate({scrollTop: topOffset}, 200);
}
});
.on("click", onClickTimeline);
}

/**
Expand Down
9 changes: 8 additions & 1 deletion streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,10 @@ private[ui] class StreamingPage(parent: StreamingTab)
/** Render the page */
def render(request: HttpServletRequest): Seq[Node] = {
val resources = generateLoadResources(request)
val onClickTimelineFunc = generateOnClickTimelineFunction()
val basicInfo = generateBasicInfo()
val content = resources ++
basicInfo ++
onClickTimelineFunc ++ basicInfo ++
listener.synchronized {
generateStatTable() ++
generateBatchListTables()
Expand All @@ -101,6 +102,12 @@ private[ui] class StreamingPage(parent: StreamingTab)
// scalastyle:on
}

/** Generate html that will set onClickTimeline declared in streaming-page.js */
private def generateOnClickTimelineFunction(): Seq[Node] = {
val js = "onClickTimeline = getOnClickTimelineFunction();"
<script>{Unparsed(js)}</script>
}

/** Generate basic information of the streaming program */
private def generateBasicInfo(): Seq[Node] = {
val timeSinceStart = System.currentTimeMillis() - startTime
Expand Down