Author: yusaku
Date: Sat Jan 19 01:29:31 2013
New Revision: 1435444
URL: http://svn.apache.org/viewvc?rev=1435444&view=rev
Log:
AMBARI-1222. DAG, Jobs Timeline, and Tasks graphs UI cleanup. (yusaku)
Modified:
incubator/ambari/trunk/CHANGES.txt
incubator/ambari/trunk/ambari-web/app/styles/application.less
incubator/ambari/trunk/ambari-web/app/styles/apps.less
incubator/ambari/trunk/ambari-web/app/templates/main/apps/item/bar.hbs
incubator/ambari/trunk/ambari-web/app/utils/graph.js
Modified: incubator/ambari/trunk/CHANGES.txt
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/CHANGES.txt?rev=1435444&r1=1435443&r2=1435444&view=diff
==============================================================================
--- incubator/ambari/trunk/CHANGES.txt (original)
+++ incubator/ambari/trunk/CHANGES.txt Sat Jan 19 01:29:31 2013
@@ -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)
Modified: incubator/ambari/trunk/ambari-web/app/styles/application.less
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/styles/application.less?rev=1435444&r1=1435443&r2=1435444&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/styles/application.less (original)
+++ incubator/ambari/trunk/ambari-web/app/styles/application.less Sat Jan 19
01:29:31 2013
@@ -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{
Modified: incubator/ambari/trunk/ambari-web/app/styles/apps.less
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/styles/apps.less?rev=1435444&r1=1435443&r2=1435444&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/styles/apps.less (original)
+++ incubator/ambari/trunk/ambari-web/app/styles/apps.less Sat Jan 19 01:29:31
2013
@@ -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{
Modified: incubator/ambari/trunk/ambari-web/app/templates/main/apps/item/bar.hbs
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/templates/main/apps/item/bar.hbs?rev=1435444&r1=1435443&r2=1435444&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/templates/main/apps/item/bar.hbs
(original)
+++ incubator/ambari/trunk/ambari-web/app/templates/main/apps/item/bar.hbs Sat
Jan 19 01:29:31 2013
@@ -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>
Modified: incubator/ambari/trunk/ambari-web/app/utils/graph.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/utils/graph.js?rev=1435444&r1=1435443&r2=1435444&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/utils/graph.js (original)
+++ incubator/ambari/trunk/ambari-web/app/utils/graph.js Sat Jan 19 01:29:31
2013
@@ -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();
+ });*/
}
}
