AMBARI-1222. DAG, Jobs Timeline, and Tasks graphs UI cleanup. (yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1435444 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -17,6 +17,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1222. DAG, Jobs Timeline, and Tasks graphs UI cleanup. (yusaku)
+
  AMBARI-1221. There is no default sort order on Hosts table and the order
  changes on every page refresh - should sort by hostname. (yusaku)
 

ambari-web/app/styles/application.less

@@ -1035,7 +1035,10 @@ a:focus {
     z-index: 3;
   }
   .rickshaw_legend {
-    background-color: #999999 !important;
+    background-color: #999 !important;
+    li:hover {
+      background-color: #999 !important;
+    }
   }
   .rickshaw_graph {
     .x_tick{

ambari-web/app/styles/apps.less

@@ -239,6 +239,7 @@
     top: -999px;
     left: -999px;
     .modal-body {
+      min-height: 430px;
       max-height: none;
     }
     width: 1150px;
@@ -282,20 +283,59 @@
     }
   }
 
+  .rickshaw_legend {
+    background-color: #999 !important;
+    li:hover {
+      background-color: #999 !important;
+    }
+  }
+  #graph1, #graph2 {
+    svg {
+      g {
+        g:nth-child(1) {
+          display: none;
+        }
+      }
+    }
+  }
   #graph1 {
     margin-left: 30px;
     width: 440px;
+    #chart {
+      left: 30px;
+      overflow: visible;
+      position: relative;
+    }
     #legend_container {
       margin: 40px 0 0 20px;
     }
+    #y-axis {
+      position: absolute;
+      top: 182px;
+      bottom: 0;
+      width: 30px;
+    }
   }
 
   #graph2 {
     margin-right: 30px;
     width: 500px;
+    #job_tasks {
+      left: 30px;
+      overflow: visible;
+      position: relative;
+    }
     #tasks_legend_container {
       margin: 40px 0 0 20px;
     }
+    #y-axis2 {
+      position: absolute;
+      top: 182px;
+      bottom: 0;
+      width: 30px;
+      overflow: hidden;
+      height: 210px;
+    }
   }
 
   ul.nav-tabs{

ambari-web/app/templates/main/apps/item/bar.hbs

@@ -33,6 +33,7 @@
     <div id="graph1_desc" class="graph_desc">
       <h4>Job Timeline</h4>
     </div>
+    <div id="y-axis"></div>
     <div id="chart"></div>
     <div id="timeline1"></div>
   </div>
@@ -45,6 +46,7 @@
     <div id="graph2_desc" class="graph_desc">
       <h4>Job Tasks' View</h4>
     </div>
+    <div id="y-axis2"></div>
     <div id="job_tasks"></div>
     <div id="timeline2"></div>
   </div>

ambari-web/app/utils/graph.js

@@ -45,6 +45,8 @@ module.exports = {
       height:h,
       element:document.querySelector(element),
       renderer:'area',
+      interpolation: 'step-after',
+      strokeWidth: 2,
       stroke:true,
       series:[
         {
@@ -65,7 +67,6 @@ module.exports = {
       ]
       }
     );
-
     graph.render();
 
     var legend = new Rickshaw.Graph.Legend({
@@ -89,13 +90,18 @@ module.exports = {
     });
 
     var xAxis = new Rickshaw.Graph.Axis.Time({
-
-      graph:graph
+      graph:graph,
+      timeUnit: {
+        name: '1 min',
+        seconds: 60,
+        formatter: function(d) { return d.toUTCString().match(/(\d+:\d+):/)[1] }
+      }
     });
     xAxis.render();
 
     var yAxis = new Rickshaw.Graph.Axis.Y({
-
+      orientation: 'left',
+      element: document.querySelector('#y-axis'),
       graph:graph
     });
     yAxis.render();
@@ -107,10 +113,10 @@ module.exports = {
       }
     });
 
-    var annotator = new Rickshaw.Graph.Annotate({
+    /*var annotator = new Rickshaw.Graph.Annotate({
       graph:graph,
-      element:document.getElementById(timeline_id)
-    });
+      //element:document.getElementById(timeline_id)
+    });*/
   },
   drawJobTasks:function (mapNodeLocal, mapRackLocal, mapOffSwitch, reduceOffSwitch, submitTime, w, h, element, legend_id, timeline_id) {
     mapNodeLocal = $.parseJSON(mapNodeLocal);
@@ -122,7 +128,7 @@ module.exports = {
       return;
     }
     this.uniformSeries(mapNodeLocal, mapRackLocal, mapOffSwitch, reduceOffSwitch);
-
+    console.warn(submitTime);
     var graph = new Rickshaw.Graph({
       width:w,
       height:h,
@@ -147,7 +153,7 @@ module.exports = {
         },
         {
           data:reduceOffSwitch,
-          color:'red',
+          color:'steelblue',
           name:'reduce'
         }
       ]
@@ -177,6 +183,11 @@ module.exports = {
 
     var xAxis = new Rickshaw.Graph.Axis.Time({
       graph:graph,
+      timeUnit: {
+        name: '30 seconds',
+        seconds: 30,
+        formatter: function(d) { return (new Date(d)).getTime() / 1000 - submitTime + 's' }
+      },
       ticksTreatment:ticksTreatment
     });
     xAxis.render();
@@ -184,6 +195,8 @@ module.exports = {
     var yAxis = new Rickshaw.Graph.Axis.Y({
       graph:graph,
       ticksTreatment:ticksTreatment,
+      orientation: 'left',
+      element: document.querySelector('#y-axis2'),
       tickFormat: function(y) { return y / 1000 + 's' }
     });
     yAxis.render();
@@ -212,10 +225,9 @@ module.exports = {
       }
 
     });
-    var annotator = new Rickshaw.Graph.Annotate({
+    /*var annotator = new Rickshaw.Graph.Annotate({
       graph:graph,
       element:document.getElementById(timeline_id)
-    });
-    graph.update();
+    });*/
   }
 }