incubator-ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From srima...@apache.org
Subject svn commit: r1492438 - in /incubator/ambari/branches/branch-1.4.0/ambari-web/app: styles/apps.less templates/main/apps/item/app.hbs utils/app_graph.js
Date Wed, 12 Jun 2013 21:37:33 GMT
Author: srimanth
Date: Wed Jun 12 21:37:33 2013
New Revision: 1492438

URL: http://svn.apache.org/r1492438
Log:
AMBARI-2366. Hadoop 2 jobs UI doesn't handle zero finish time. (billie via srimanth)

Modified:
    incubator/ambari/branches/branch-1.4.0/ambari-web/app/styles/apps.less
    incubator/ambari/branches/branch-1.4.0/ambari-web/app/templates/main/apps/item/app.hbs
    incubator/ambari/branches/branch-1.4.0/ambari-web/app/utils/app_graph.js

Modified: incubator/ambari/branches/branch-1.4.0/ambari-web/app/styles/apps.less
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/branch-1.4.0/ambari-web/app/styles/apps.less?rev=1492438&r1=1492437&r2=1492438&view=diff
==============================================================================
--- incubator/ambari/branches/branch-1.4.0/ambari-web/app/styles/apps.less (original)
+++ incubator/ambari/branches/branch-1.4.0/ambari-web/app/styles/apps.less Wed Jun 12 21:37:33
2013
@@ -570,16 +570,13 @@
   font-size: 10px;
 }
 
-#app_graph circle.stage {
+#app_graph circle.stage,
+#app_graph rect.stage,
+#app_graph_legend circle.stage {
   fill: lightblue;
   stroke: black;
 }
 
-#app_graph circle.stage.first {
-  fill: lightblue;
-  stroke: white;
-}
-
 #app_graph text.stagelabel {
   stroke: black;
   pointer-events: none;
@@ -619,21 +616,17 @@
     border: 1px solid #333;
     background: #ccc;
   }
-  svg rect.jobdone {
-    stroke: 1px solid #333;
-    fill: rgba(0,128,0,0.8);
-  }
   .jobdone {
     border: 1px solid #333;
     background: rgba(0,128,0,0.8);
   }
-  #map {
-    stroke: white;
-    fill: lightblue;
+  .map {
+    border: 1px solid black;
+    background: lightblue;
   }
-  #reduce {
-    stroke: black;
-    fill: lightblue;
+  .reduce {
+    stroke: white;
+    fill: white;
   }
 }
 

Modified: incubator/ambari/branches/branch-1.4.0/ambari-web/app/templates/main/apps/item/app.hbs
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/branch-1.4.0/ambari-web/app/templates/main/apps/item/app.hbs?rev=1492438&r1=1492437&r2=1492438&view=diff
==============================================================================
--- incubator/ambari/branches/branch-1.4.0/ambari-web/app/templates/main/apps/item/app.hbs
(original)
+++ incubator/ambari/branches/branch-1.4.0/ambari-web/app/templates/main/apps/item/app.hbs
Wed Jun 12 21:37:33 2013
@@ -20,19 +20,13 @@
     <div id="app_graph_legend">
       <ul>
         <li><span class="job"></span>Unfinished Job</li>
-        <li><span class="stage">
-          <svg width="18" height="18">
-            <rect class="jobdone" x="0" y="0" width="18" height="18"/>
-            <circle id="map" r="8" cx="9" cy="9"/>
-            <text x="9" y="14" style="text-anchor:middle">#</text>
-          </svg></span>Map Stage with # Tasks</li>
+        <li><span class="map"></span>Map Stage with Task Count</li>
         <li><span class="jobdone"></span>Finished Job</li>
-        <li><span class="stage">
+        <li><span>
           <svg width="18" height="18">
-            <rect class="jobdone" x="0" y="0" width="18" height="18"/>
-            <circle id="reduce" r="8" cx="9" cy="9"/>
-            <text x="9" y="14" style="text-anchor:middle">#</text>
-          </svg></span>Reduce Stage with # Tasks</li>
+            <rect class="reduce" x="0" y="0" width="18" height="18"/>
+            <circle class="stage" r="8" cx="9" cy="9"/>
+          </svg></span>Reduce Stage with Task Count</li>
       </ul>
     </div>
 

Modified: incubator/ambari/branches/branch-1.4.0/ambari-web/app/utils/app_graph.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/branch-1.4.0/ambari-web/app/utils/app_graph.js?rev=1492438&r1=1492437&r2=1492438&view=diff
==============================================================================
--- incubator/ambari/branches/branch-1.4.0/ambari-web/app/utils/app_graph.js (original)
+++ incubator/ambari/branches/branch-1.4.0/ambari-web/app/utils/app_graph.js Wed Jun 12 21:37:33
2013
@@ -40,7 +40,6 @@ module.exports = {
         "status:"+jobData[i].status+"  \n"+
         "startTime:"+(new Date(jobData[i].submitTime).toUTCString())+"  \n"+
         "duration:"+formatDuration(jobData[i].finishTime - jobData[i].submitTime);
-console.log("info "+jobData[i].info);
       jobData[i].state = jobData[i].status==="FINISHED";
       minStartTime = Math.min(minStartTime, jobData[i].submitTime);
       maxFinishTime = Math.max(maxFinishTime, jobData[i].finishTime);
@@ -350,77 +349,61 @@ console.log("info "+jobData[i].info);
 
     // add node stage information
     var topstageg = svgg.append("svg:g");
-    var mouseg = svgg.append("svg:g");
-    var allstageg = topstageg.selectAll("g")
-      .data(nodes)
-      .enter().append("svg:g");
-    var stageg = allstageg.selectAll("g")
-      .data(function(d,i) { 
-        var stagedata = new Array(d.stages.length);
-        var cr = d.h / 2 - 2;
-        var cy = d.y + cr + 2;
-        var cxSpacing = d.w / stagedata.length;
-        if (cxSpacing < 2*cr)
-          cxSpacing = 2*cr;
-        var cxBase = d.x + cxSpacing / 2;
-        for (var j = 0; j < stagedata.length; j++)
-          stagedata[j] = {"data": d.stages[j],
-            "index": i,
-            "num": stagedata.length,
-            "cr": cr,
-            "cy": cy,
-            "cx":cxBase+j*cxSpacing,
-            "cxSpacing":cxSpacing};
-        return stagedata;
-      })
-      .enter().append("svg:g");
-    var path = stageg.append("svg:path")
-      .attr("class", function(d,i) {
-        if (i==d.num-1 || d.cxSpacing==2*d.cr) {
-          return "nopath";
+    for (var i = 0; i < numNodes; i++) {
+      var parentg = topstageg.append("svg:g")
+        .attr("class", "parent");
+      var d = nodes[i];
+      var cr = d.h / 2 - 2;
+      var cy = d.y + cr + 2;
+      var cxSpacing = d.w / d.stages.length;
+      if (cxSpacing < 2*cr)
+        cxSpacing = 2*cr;
+      var cxBase = d.x + cxSpacing / 2;
+
+      for (var j = 0; j < d.stages.length; j++) {
+        var data = d.stages[j];
+        var stageg = parentg.append("svg:g")
+          .attr("id", "child"+j);
+        var cx = cxBase + j*cxSpacing;
+        var x1 = cx + cr;
+        var x2 = cx + cxSpacing - cr;
+        if (cxSpacing!=2*cr && j!=d.stages.length-1) {
+          var path = stageg.append("svg:path")
+            .attr("class", "link stage")
+            .attr("d", "M "+x1+" "+cy+" L "+((x1+x2)/2)+" "+cy+" L "+x2+" "+cy)
+            .attr("marker-end", "url(#stage)");
+        }
+        if (j==0) {
+          stageg.append("svg:rect")
+            .attr("class", "stage")
+            .attr("x", cx - cr)
+            .attr("y", cy - cr)
+            .attr("width", 2*cr)
+            .attr("height", 2*cr)
+            .append("title")
+            .text("Map stage with "+data+" task"+(data != 1 ? "s" : ""));
         } else {
-          return "link stage";
+          stageg.append("svg:circle")
+            .attr("class", "stage")
+            .attr("r", cr)
+            .attr("cx", cx)
+            .attr("cy", cy)
+            .append("title")
+            .text("Reduce stage with "+data+" task"+(data != 1 ? "s" : ""));
         }
-      });
-    stageg.selectAll(".nopath").remove();
-    path.attr("d", function(d,i) {
-        var x1 = d.cx + d.cr;
-        var x2 = d.cx + d.cxSpacing - d.cr;
-        return "M "+x1+" "+d.cy+" L "+((x1+x2)/2)+" "+d.cy+" L "+x2+" "+d.cy;
-      } )
-      .attr("marker-end", function (d) {
-        return "url(#stage)";
-      });
-    stageg.append("svg:circle")
-      .attr("class", function(d,i) { return (i==0) ? "stage first" : "stage" })
-      .attr("r", function(d) { return d.cr })
-      .attr("cx", function(d) { return d.cx })
-      .attr("cy", function(d) { return d.cy })
-      .append("title")
-      .text(function(d,i) {
-        var t = "stage with "+d.data+" task";
-        if (d.data!=1)
-          t = t+"s";
-        if (i==0) 
-          t = "Map "+t;
-        else
-          t = "Reduce "+t;
-        return t;
-      });
-
-    stageg.append("svg:text")
-      .attr("class", "stagelabel")
-      .attr("x", function(d) { return d.cx })
-      .attr("y", function(d) { return d.cy })
-      .text(function(d) { return d.data })
-      .attr("style", function(d) {
         var fontSize = stageFontSize;
-        if (d.data > 9) fontSize = fontSize - 2;
-        if (d.data > 99) fontSize = fontSize - 4;
-        if (d.data > 999) fontSize = fontSize - 2;
-        if (d.data > 9999) fontSize = fontSize - 1;
-        return "font: "+fontSize+"px sans-serif";
-      });
+        if (data > 9) fontSize = fontSize - 2;
+        if (data > 99) fontSize = fontSize - 4;
+        if (data > 999) fontSize = fontSize - 2;
+        if (data > 9999) fontSize = fontSize - 1;
+        stageg.append("svg:text")
+          .attr("class", "stagelabel")
+          .attr("x", cx)
+          .attr("y", cy)
+          .text(data)
+          .attr("style", "font: "+fontSize+"px sans-serif");
+      }
+    }
 
     svg.call(d3.behavior.zoom().on("zoom", function() {
       var left = Math.min(Math.max(d3.event.translate[0]+margin.horizontal, margin.horizontal-w*d3.event.scale*scale),
margin.horizontal+w);



Mime
View raw message