[SPARK-31128][WEBUI] Fix Uncaught TypeError in streaming statistics page

### What changes were proposed in this pull request?

There is a minor issue in https://github.com/apache/spark/pull/26201
In the streaming statistics page, there is such error
```
streaming-page.js:211 Uncaught TypeError: Cannot read property 'top' of undefined
at SVGCircleElement.<anonymous> (streaming-page.js:211)
at SVGCircleElement.__onclick (d3.min.js:1)
```
in the console after clicking the timeline graph.
![image](https://user-images.githubusercontent.com/1097932/76479745-14b26280-63ca-11ea-9079-0065321795f9.png)

This PR is to fix it.
### Why are the changes needed?

Fix the error of javascript execution.

### Does this PR introduce any user-facing change?

No, the error shows up in the console.

### How was this patch tested?

Manual test.

Closes #27883 from gengliangwang/fixSelector.

Authored-by: Gengliang Wang <gengliang.wang@databricks.com>
Signed-off-by: Gengliang Wang <gengliang.wang@databricks.com>
This commit is contained in:
Gengliang Wang 2020-03-12 20:01:17 -07:00
parent 1c8526dc87
commit 0f463258c2

View file

@ -190,29 +190,32 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) {
.attr("r", function(d) { return isFailedBatch(d.x) ? "2" : "3";});
})
.on("click", function(d) {
if (lastTimeout != null) {
window.clearTimeout(lastTimeout);
}
if (lastClickedBatch != null) {
clearBatchRow(lastClickedBatch);
lastClickedBatch = null;
}
lastClickedBatch = d.x;
highlightBatchRow(lastClickedBatch);
lastTimeout = window.setTimeout(function () {
lastTimeout = null;
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;
}
}, 3000); // Clean up after 3 seconds
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;
var topOffset = batchSelector.offset().top - 15;
if (topOffset < 0) {
topOffset = 0;
}
$('html,body').animate({scrollTop: topOffset}, 200);
}
$('html,body').animate({scrollTop: topOffset}, 200);
});
}