diff options
author | Xin Ren <renxin.ubc@gmail.com> | 2017-01-21 13:55:35 +0000 |
---|---|---|
committer | Sean Owen <sowen@cloudera.com> | 2017-01-21 13:55:35 +0000 |
commit | bcdabaac93fc5527345754a9e10e6db5161007ef (patch) | |
tree | e943ec3f6a36baf56a164002e419e10f64f5b059 /core/src/main/resources | |
parent | 3c2ba9fcc493504c9e7d3caf0b93256ca299cbfe (diff) | |
download | spark-bcdabaac93fc5527345754a9e10e6db5161007ef.tar.gz spark-bcdabaac93fc5527345754a9e10e6db5161007ef.tar.bz2 spark-bcdabaac93fc5527345754a9e10e6db5161007ef.zip |
[SPARK-17724][STREAMING][WEBUI] Unevaluated new lines in tooltip in DAG Visualization of a job
https://issues.apache.org/jira/browse/SPARK-17724
## What changes were proposed in this pull request?
For unevaluated `\n`, evaluate it and enable line break, for Streaming WebUI `stages` page and `job` page.
(I didn't change Scala source file, since Jetty server has to somehow indicate line break and js to code display it.)
(This PR is a continue from previous PR https://github.com/apache/spark/pull/15353 for the same issue, sorry being so long time)
Two changes:
1. RDD Node tooltipText is actually showing the `<circle>` `title` property, so I set extra attribute in `spark-dag-viz.js`: `.attr("data-html", "true")`
`<circle x="-5" y="-5" r="5" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="ParallelCollectionRDD [9]\nmakeRDD at QueueStream.scala:49"></circle>`
2. Static `<tspan>` text of each stage, split by `/n`, and append an extra `<tspan>` element to its parentNode
`<text><tspan xml:space="preserve" dy="1em" x="1">reduceByKey</tspan><tspan xml:space="preserve" dy="1em" x="1">reduceByKey/n 23:34:49</tspan></text>
`
## UI changes
Screenshot **before fix**, `\n` is not evaluated in both circle tooltipText and static text:
![screen shot 2017-01-19 at 12 21 54 am](https://cloud.githubusercontent.com/assets/3925641/22098829/53c7f49c-dddd-11e6-9daa-b3ddb6044114.png)
Screenshot **after fix**:
![screen shot 2017-01-19 at 12 20 30 am](https://cloud.githubusercontent.com/assets/3925641/22098806/294910d4-dddd-11e6-9948-d942e09f545e.png)
## How was this patch tested?
Tested locally. For Streaming WebUI `stages` page and `job` page, on multiple browsers:
- Chrome
- Firefox
- Safari
Author: Xin Ren <renxin.ubc@gmail.com>
Closes #16643 from keypointt/SPARK-17724-2nd.
Diffstat (limited to 'core/src/main/resources')
-rw-r--r-- | core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js | 34 |
1 files changed, 32 insertions, 2 deletions
diff --git a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js index 1b0d4692d9..75b959fdeb 100644 --- a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js +++ b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js @@ -35,7 +35,7 @@ * primitives (e.g. take, any SQL query). * * In the visualization, an RDD is expressed as a node, and its dependencies - * as directed edges (from parent to child). operation scopes, stages, and + * as directed edges (from parent to child). Operation scopes, stages, and * jobs are expressed as clusters that may contain one or many nodes. These * clusters may be nested inside of each other in the scenarios described * above. @@ -173,6 +173,7 @@ function renderDagViz(forJob) { }); resizeSvg(svg); + interpretLineBreak(svg); } /* Render the RDD DAG visualization on the stage page. */ @@ -363,6 +364,27 @@ function resizeSvg(svg) { } /* + * Helper function to interpret line break for tag 'tspan'. + * For tag 'tspan', line break '/n' is display in UI as raw for both stage page and job page, + * here this function is to enable line break. + */ +function interpretLineBreak(svg) { + var allTSpan = svg.selectAll("tspan").each(function() { + node = d3.select(this); + var original = node[0][0].innerHTML; + if (original.indexOf("\\n") != -1) { + var arr = original.split("\\n"); + var newNode = this.cloneNode(this); + + node[0][0].innerHTML = arr[0]; + newNode.innerHTML = arr[1]; + + this.parentNode.appendChild(newNode); + } + }); +} + +/* * (Job page only) Helper function to draw edges that cross stage boundaries. * We need to do this manually because we render each stage separately in dagre-d3. */ @@ -470,15 +492,23 @@ function connectRDDs(fromRDDId, toRDDId, edgesContainer, svgContainer) { edgesContainer.append("path").datum(points).attr("d", line); } +/* + * Replace `/n` with `<br/>` + */ +function replaceLineBreak(str) { + return str.replace("\\n", "<br/>"); +} + /* (Job page only) Helper function to add tooltips for RDDs. */ function addTooltipsForRDDs(svgContainer) { svgContainer.selectAll("g.node").each(function() { var node = d3.select(this); - var tooltipText = node.attr("name"); + var tooltipText = replaceLineBreak(node.attr("name")); if (tooltipText) { node.select("circle") .attr("data-toggle", "tooltip") .attr("data-placement", "bottom") + .attr("data-html", "true") // to interpret line break, tooltipText is showing <circle> title .attr("title", tooltipText); } // Link tooltips for all nodes that belong to the same RDD |