Repository: ambari Updated Branches: refs/heads/trunk bdc6a7898 -> 968ac4cdf
AMBARI-6659. Create tooltip for tez dag on job's details page. (onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/968ac4cd Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/968ac4cd Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/968ac4cd Branch: refs/heads/trunk Commit: 968ac4cdfef345a9c9d89264dfa73c7d71a310aa Parents: bdc6a78 Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Tue Jul 29 19:19:07 2014 +0300 Committer: Oleg Nechiporenko <onechipore...@apache.org> Committed: Tue Jul 29 19:19:07 2014 +0300 ---------------------------------------------------------------------- .../resources/ui/app/scripts/helpers/string.js | 2 +- .../views/job/hive_job_details_tez_dag_view.js | 66 ++++++++------------ .../ui/app/templates/job/hover_op_table.hbs | 24 +++---- 3 files changed, 38 insertions(+), 54 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/968ac4cd/contrib/views/jobs/src/main/resources/ui/app/scripts/helpers/string.js ---------------------------------------------------------------------- diff --git a/contrib/views/jobs/src/main/resources/ui/app/scripts/helpers/string.js b/contrib/views/jobs/src/main/resources/ui/app/scripts/helpers/string.js index 487f4a3..053802e 100644 --- a/contrib/views/jobs/src/main/resources/ui/app/scripts/helpers/string.js +++ b/contrib/views/jobs/src/main/resources/ui/app/scripts/helpers/string.js @@ -80,7 +80,7 @@ App.Helpers.string = { } multi = multi || ''; var value = null, - str = this.valueOf(); + str = s.valueOf(); if (typeof multi == 'object') { for ( var key in multi) { if (value != null) { http://git-wip-us.apache.org/repos/asf/ambari/blob/968ac4cd/contrib/views/jobs/src/main/resources/ui/app/scripts/views/job/hive_job_details_tez_dag_view.js ---------------------------------------------------------------------- diff --git a/contrib/views/jobs/src/main/resources/ui/app/scripts/views/job/hive_job_details_tez_dag_view.js b/contrib/views/jobs/src/main/resources/ui/app/scripts/views/job/hive_job_details_tez_dag_view.js index 7d73f06..1224d1e 100644 --- a/contrib/views/jobs/src/main/resources/ui/app/scripts/views/job/hive_job_details_tez_dag_view.js +++ b/contrib/views/jobs/src/main/resources/ui/app/scripts/views/job/hive_job_details_tez_dag_view.js @@ -125,12 +125,10 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ }, zoomScaleObserver: function () { - var tezRoot = this.get("svgTezRoot"); - var newScale = this.get('zoomScale'); - var newScaleFrom = this.get('zoomScaleFrom'); - var newScaleTo = this.get('zoomScaleTo'); - var zoomTranslate = this.get('zoomTranslate'); - var zoomBehavior = this.get('zoomBehavior'); + var tezRoot = this.get("svgTezRoot"), + newScale = this.get('zoomScale'), + zoomTranslate = this.get('zoomTranslate'), + zoomBehavior = this.get('zoomBehavior'); if (d3.event == null && this.get('svgCreated')) { // Values were set from actions instead of UI events // We need to center in on selected vertex if available. @@ -146,14 +144,14 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ }) } if (selectedNode != null) { - var cX = selectedNode.x + selectedNode.width / 2; - var cY = selectedNode.y + selectedNode.height / 2; - var mX = (cX * zoomBehavior.scale()) + zoomTranslate[0]; - var mY = (cY * zoomBehavior.scale()) + zoomTranslate[1]; - var pX = (cX * newScale) + zoomTranslate[0]; - var pY = (cY * newScale) + zoomTranslate[1]; - var nX = (mX - pX); - var nY = (mY - pY); + var cX = selectedNode.x + selectedNode.width / 2, + cY = selectedNode.y + selectedNode.height / 2, + mX = (cX * zoomBehavior.scale()) + zoomTranslate[0], + mY = (cY * zoomBehavior.scale()) + zoomTranslate[1], + pX = (cX * newScale) + zoomTranslate[0], + pY = (cY * newScale) + zoomTranslate[1], + nX = (mX - pX), + nY = (mY - pY); zoomTranslate[0] += nX; zoomTranslate[1] += nY; this.set('zoomTranslate', zoomTranslate); @@ -169,12 +167,11 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ * Summary section. */ adjustGraphHeight: function () { - var rhsDiv = document.getElementById('tez-vertices-rhs'); - var lhsDiv = document.getElementById('tez-dag-section'); + var rhsDiv = document.getElementById('tez-vertices-rhs'), + lhsDiv = document.getElementById('tez-dag-section'); if (lhsDiv && rhsDiv) { - var rhsHeight = rhsDiv.clientHeight - 26; // box boundary - var currentWidth = lhsDiv.clientWidth; - var currentHeight = lhsDiv.clientHeight; + var rhsHeight = rhsDiv.clientHeight - 26, // box boundary + currentWidth = lhsDiv.clientWidth; $(lhsDiv).attr('style', "height:" + rhsHeight + "px;"); var svgHeight = rhsHeight - 20; d3.select("#tez-dag-svg").attr('height', svgHeight).attr('width', '100%'); @@ -669,13 +666,15 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ } return opCount[op]; }).on('mouseover', function (op) { - var viewContent = { - operationName: op, - operatorPlanObj: [] - }; - /*viewContent.operatorPlanObj = self.createOperationPlanObj(n.name, op, this.getAttribute('opIndex')); - var template = App.HoverOpTable.create({content: viewContent}); - $(this).find('.svg-tooltip').attr('title', template.renderToBuffer().string()).tooltip('fixTitle').tooltip('show');*/ + var template = self.createChildView(App.HoverOpTable, { + content: { + operationName: op, + operatorPlanObj: self.createOperationPlanObj(n.name, op, this.getAttribute('opIndex')) + } + }); + $(this).find('.svg-tooltip'). + attr('title', template.renderToBuffer().string()). + tooltip('fixTitle').tooltip('show'); }); opGroups.append("rect").attr("class", "operation svg-tooltip ").attr("width", "50").attr("height", "16"); @@ -732,23 +731,12 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ } }); App.tooltip($('.svg-tooltip'), { + container: 'body', + html: true, placement: 'left', template: '<div class="tooltip jobs-tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' }); - /*if (App.supports.debugJobsDag) { - // Draws node bounding box - for debug purposes - node.append("rect").attr("width",function (n) { - return n.effectiveWidth; - }).attr("height",function (n) { - return n.height; - }).attr("x",function (n) { - return -1 * ((n.effectiveWidth - n.width) / 2); - }).attr("y",function (n) { - return 0; - }).attr("style", "opacity: 0.2;fill:yellow;"); - }*/ - // Position in center var translateX = Math.round((width - canvasWidth) / 2); if (translateX > 0) { http://git-wip-us.apache.org/repos/asf/ambari/blob/968ac4cd/contrib/views/jobs/src/main/resources/ui/app/templates/job/hover_op_table.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/jobs/src/main/resources/ui/app/templates/job/hover_op_table.hbs b/contrib/views/jobs/src/main/resources/ui/app/templates/job/hover_op_table.hbs index a2cf77d..78be2f6 100644 --- a/contrib/views/jobs/src/main/resources/ui/app/templates/job/hover_op_table.hbs +++ b/contrib/views/jobs/src/main/resources/ui/app/templates/job/hover_op_table.hbs @@ -16,24 +16,20 @@ * limitations under the License. }} -<p>{{content.operationName}}</p> +<p>{{view.content.operationName}}</p> <table id="hover-op-table" class="table table-bordered"> <thead> - <tr> - <th>{{t common.name}}</th> - <th>{{t common.value}}</th> - </tr> - </thead> - <tbody> - {{#each keys in content.operatorPlanObj}} <tr> - <td> - {{keys.name}} - </td> - <td> - {{keys.value}} - </td> + <th>{{t common.name}}</th> + <th>{{t common.value}}</th> </tr> + </thead> + <tbody> + {{#each keys in view.content.operatorPlanObj}} + <tr> + <td>{{keys.name}}</td> + <td>{{keys.value}}</td> + </tr> {{/each}} </tbody> </table>