Repository: ambari Updated Branches: refs/heads/trunk 33c6e2278 -> 0134fb666
AMBARI-4903. Selection of operation in Tez vertex should highlight operator plan. (srimanth) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/0134fb66 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/0134fb66 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/0134fb66 Branch: refs/heads/trunk Commit: 0134fb666cc85286f1d5f555e9341a55698fdcaf Parents: 33c6e22 Author: Srimanth Gunturi <[email protected]> Authored: Fri Feb 28 17:55:06 2014 -0800 Committer: Srimanth Gunturi <[email protected]> Committed: Fri Feb 28 18:04:07 2014 -0800 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 10 ++- ambari-web/app/templates/main/jobs.hbs | 5 +- .../templates/main/jobs/hive_job_details.hbs | 4 +- .../main/jobs/hive_job_details_tez_dag.hbs | 2 +- .../main/jobs/hive_job_details_tez_dag_view.js | 76 +++++++++++++++++--- 5 files changed, 81 insertions(+), 16 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/0134fb66/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index bba9ad1..ca14848 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -5640,8 +5640,15 @@ i.icon-asterisks { display: block; } #tez-vertices-table-container { - max-height: 400px; + max-height: 300px; overflow-y: auto; + margin-bottom: 7px; + border-bottom: 1px solid #dddddd; + border-top: 1px solid #dddddd; + border-radius: 4px; + table { + margin-bottom: 0px; + } } #tez-vertex-details-section-body { table { @@ -5753,6 +5760,7 @@ i.icon-asterisks { .operation { fill: #3F66E8; opacity: 0.5; + cursor: pointer; text { font-size: 80%; } http://git-wip-us.apache.org/repos/asf/ambari/blob/0134fb66/ambari-web/app/templates/main/jobs.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/jobs.hbs b/ambari-web/app/templates/main/jobs.hbs index 498899b..ebebd2e 100644 --- a/ambari-web/app/templates/main/jobs.hbs +++ b/ambari-web/app/templates/main/jobs.hbs @@ -21,10 +21,7 @@ <div class="jobs_head"> <div>{{t menu.item.jobs}}</div> <div class="jobs-type"> - {{t jobs.type}} : - <button class="btn single-btn-group"> - {{t jobs.type.hive}} - </button> + {{t jobs.type}} : <span class="label label-info">{{t jobs.type.hive}}</span> </div> </div> <table id="jobs-table" class="table table-bordered table-striped"> http://git-wip-us.apache.org/repos/asf/ambari/blob/0134fb66/ambari-web/app/templates/main/jobs/hive_job_details.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/jobs/hive_job_details.hbs b/ambari-web/app/templates/main/jobs/hive_job_details.hbs index d795cc6..871b3c2 100644 --- a/ambari-web/app/templates/main/jobs/hive_job_details.hbs +++ b/ambari-web/app/templates/main/jobs/hive_job_details.hbs @@ -128,7 +128,7 @@ <h4>{{view.selectedVertex.name}}</h4> </div> <div id="tez-vertex-details-section-body"> - <table class="table"> + <table class="table no-borders table-condensed"> <tr> <td>{{t common.status}}</td> <td>{{view.selectedVertexIODisplay.status}}</td> @@ -172,7 +172,7 @@ <td></td> </tr> </table> - {{view Ember.TextArea valueBinding="view.selectedVertex.operationPlan" rows="15"}} + {{view Ember.TextArea valueBinding="view.selectedVertex.operationPlan" rows="15" id="tez-vertex-operator-plan-textarea"}} </div> </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/0134fb66/ambari-web/app/templates/main/jobs/hive_job_details_tez_dag.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/jobs/hive_job_details_tez_dag.hbs b/ambari-web/app/templates/main/jobs/hive_job_details_tez_dag.hbs index e012324..4d8d9e7 100644 --- a/ambari-web/app/templates/main/jobs/hive_job_details_tez_dag.hbs +++ b/ambari-web/app/templates/main/jobs/hive_job_details_tez_dag.hbs @@ -31,7 +31,7 @@ </feMerge> </filter> <clipPath id="operatorClipPath"> - <rect x="0" y="0" width="44" height="16"> + <rect x="0" y="0" width="50" height="16"> </rect> </clipPath> <font-face xmlns="http://www.w3.org/2000/svg"; font-family="FontAwesome" unicode-range="U+0-7F"> http://git-wip-us.apache.org/repos/asf/ambari/blob/0134fb66/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js b/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js index ed22f50..a395c59 100644 --- a/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js +++ b/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js @@ -183,8 +183,8 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ value = ''; } switch (summaryMetricType) { - case "Input": - case "Output": + case "input": + case "output": value = numberUtils.bytesToSize(value); break; default: @@ -509,19 +509,79 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ }); node.each(function(n, nodeIndex) { var ops = n.operations; + var opCount = {}; var opGroups = d3.select(this).selectAll(".operation").data(ops).enter().append("g").attr("class", "operation").attr("transform", function(op, opIndex) { var row = Math.floor(opIndex / 3); var column = opIndex % 3; - return "translate(" + (10 + column * 50) + "," + (37 + row * 20) + ")"; - }).attr("clip-path", "url(#operatorClipPath)"); - opGroups.append("rect").attr("class", "operation svg-tooltip ").attr("width", "44").attr("height", "16").attr("title", function(op) { + return "translate(" + (10 + column * 55) + "," + (37 + row * 20) + ")"; + }).attr("clip-path", "url(#operatorClipPath)").attr("opIndex", function(op){ + if(!opCount[op]) { + opCount[op] = 1; + } else { + opCount[op] = opCount[op]+1; + } + return opCount[op]; + }).on('mousedown', function(op) { + var opIndex = this.getAttribute ? this.getAttribute("opIndex") : null; + if (numberUtils.validateInteger(opIndex) == null) { + console.log("Clicked on operator: ", op, " [", opIndex, "]"); + var textArea = document.getElementById('tez-vertex-operator-plan-textarea'); + if (textArea && textArea.value) { + var text = textArea.value; + var opText = "\"" + op + "\""; + var count = 1; + var index = text.indexOf(opText); + while (index > -1 && count < opIndex) { + index = text.indexOf(opText, index + 1); + count++; + } + if (index > -1) { + var start = index; + var end = index; + var matchCount = 0; + var splits = text.substring(start).split(/({|})/); + splits.every(function(s) { + if (s == '{') { + matchCount++; + } else if (s == '}') { + matchCount--; + if (matchCount == 0) { + end += s.length; + return false; + } + } + end += s.length; + return true; + }); + textArea.setSelectionRange(start, end); + // Now scroll to the selection + var lines = 0; + var totalLines = 0; + var index = text.indexOf("\n"); + while (index > 0) { + index = text.indexOf("\n", index + 1); + if (index < start) { + lines++; + } + totalLines++; + } + console.log("Selection is from row ", lines, " out of ", totalLines); + lines -= 5; + var lineHeight = Math.floor(textArea.scrollHeight / totalLines); + var scrollHeight = Math.round(lines * lineHeight); + textArea.scrollTop = scrollHeight; + } + } + } + }); + opGroups.append("rect").attr("class", "operation svg-tooltip ").attr("width", "50").attr("height", "16").attr("title", function(op) { return op; }); opGroups.append("text").attr("x", "2").attr("dy", "1em").text(function(op) { return op != null ? op.split(' ')[0] : ''; - }) - }) - var metricNodes = node.append("g").attr("class", "metric").attr("transform", "translate(92,7)"); + }); + }); + var metricNodes = node.append("g").attr("class", "metric").attr("transform", "translate(112,7)"); metricNodes.append("rect").attr("width", 60).attr("height", 18).attr("rx", "3").attr("class", "metric-title svg-tooltip"); metricNodes.append("text").attr("class", "metric-text").attr("x", "2").attr("dy", "1em"); node.append("text").attr("x", "1.9em").attr("dy", "1.5em").text(function(d) {
