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

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

ambari-web/app/assets/data/apps/jobs/taskview.json

@@ -1,606 +1,92 @@
 {
-    "mapNodeLocal": [
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353963926,
-            "y": 0
-        },
-        {
-            "io": 32616,
-            "label": "attempt_201211241031_0008_m_000000_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964059,
-            "y": 11007
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964071,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964074,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964080,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964083,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964092,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964095,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964104,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964107,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964116,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964119,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964128,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964131,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964140,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964143,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964152,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964155,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964164,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964167,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964176,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964179,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964197,
-            "y": 0
-        }
-    ],
-    "mapRackLocal": [
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353963926,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964059,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964071,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964074,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964080,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964083,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964092,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964095,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964104,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964107,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964116,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964119,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964128,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964131,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964140,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964143,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964152,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964155,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964164,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964167,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964176,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964179,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964197,
-            "y": 0
-        }
-    ],
-    "mapOffSwitch": [
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353963926,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964059,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964071,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964074,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964080,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964083,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964092,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964095,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964104,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964107,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964116,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964119,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964128,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964131,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964140,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964143,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964152,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964155,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964164,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964167,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964176,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964179,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964197,
-            "y": 0
-        }
-    ],
-    "reduceOffSwitch": [
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353963926,
-            "y": 0
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964059,
-            "y": 0
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000000_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964071,
-            "y": 10572
-        },
-        {
-            "io": 31700,
-            "label": "attempt_201211241031_0008_r_000001_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964074,
-            "y": 10651
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000002_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964080,
-            "y": 15123
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000003_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964083,
-            "y": 15007
-        },
-        {
-            "io": 31706,
-            "label": "attempt_201211241031_0008_r_000004_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964092,
-            "y": 13555
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000005_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964095,
-            "y": 13326
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000006_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964104,
-            "y": 15120
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000007_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964107,
-            "y": 14947
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000008_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964116,
-            "y": 13493
-        },
-        {
-            "io": 31658,
-            "label": "attempt_201211241031_0008_r_000009_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964119,
-            "y": 13349
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000010_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964128,
-            "y": 15011
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000011_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964131,
-            "y": 11646
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000012_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964140,
-            "y": 13337
-        },
-        {
-            "io": 31701,
-            "label": "attempt_201211241031_0008_r_000013_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964143,
-            "y": 10900
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000014_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964152,
-            "y": 14688
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000015_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964155,
-            "y": 10592
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000016_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964164,
-            "y": 15100
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000017_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964167,
-            "y": 10719
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000018_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964176,
-            "y": 14973
-        },
-        {
-            "io": 31659,
-            "label": "attempt_201211241031_0008_r_000019_0",
-            "r": 12,
-            "status": "SUCCESS",
-            "x": 1353964179,
-            "y": 10534
-        },
-        {
-            "io": 0,
-            "r": 0,
-            "x": 1353964197,
-            "y": 0
-        }
-    ],
-    "submitTime": 1353963926,
-    "finishTime": 1353964197
-}
+  "mapNodeLocal": [{
+    "x": 1358508346,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508356,
+    "y": 2393,
+    "r": 24,
+    "io": 62557,
+    "label": "attempt_201301180624_0001_m_000000_0",
+    "status": "SUCCESS"
+  }, {
+    "x": 1358508358,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508371,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }],
+  "mapRackLocal": [{
+    "x": 1358508346,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508356,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508358,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508371,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }],
+  "mapOffSwitch": [{
+    "x": 1358508346,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508356,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508358,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508371,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }],
+  "reduceOffSwitch": [{
+    "x": 1358508346,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508356,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }, {
+    "x": 1358508358,
+    "y": 10407,
+    "r": 24,
+    "io": 63848,
+    "label": "attempt_201301180624_0001_r_000000_0",
+    "status": "SUCCESS"
+  }, {
+    "x": 1358508371,
+    "y": 0,
+    "r": 0,
+    "io": 0
+  }],
+  "submitTime": 1358508346,
+  "finishTime": 1358508371
+}

ambari-web/app/utils/graph.js

@@ -31,6 +31,58 @@ module.exports = {
       }
     }
   },
+  /**
+   * Get min, max for X and max for Y for provided series
+   * @param series
+   * @return {Object}
+   */
+  getExtInSeries: function(series) {
+    var maxY = 0;
+    var maxX = 0;
+    var minX = 2147465647; // max timestamp value
+    if (series.length > 0) {
+      series.forEach(function(item){
+        if (item.y > maxY) {
+          maxY = item.y;
+        }
+        if (item.x > maxX) {
+          maxX = item.x;
+        }
+        if (item.x < minX) {
+          minX = item.x;
+        }
+      });
+    }
+    return {maxX: maxX, minX: minX, maxY: maxY};
+  },
+  /**
+   * Get coordinates for new circle in the graph
+   * New circle needed to prevent cut on the borders of the graph
+   * List of arguments - series arrays
+   * @return {Object}
+   */
+  getNewCircle: function() {
+    var maxx = [];
+    var minx = [];
+    var maxy = [];
+    for (var i = 0; i < arguments.length; i++) {
+      var localExt = this.getExtInSeries(arguments[i]);
+      maxx.push(localExt.maxX);
+      minx.push(localExt.minX);
+      maxy.push(localExt.maxY);
+    }
+    var maxX = Math.max.apply(null, maxx);
+    var minX = Math.min.apply(null, minx);
+    var newX;
+    if (minX != 2147465647) {
+      newX = maxX + Math.round((maxX - minX) * 0.2);
+    }
+    else {
+      newX = (new Date()).getTime();
+    }
+    var newY = Math.max.apply(null, maxy) * 1.2;
+    return {x: newX, y: newY, r: 0, io: 0};
+  },
   drawJobTimeLine:function (map, shuffle, reduce, w, h, element, legend_id, timeline_id) {
     map = $.parseJSON(map);
     shuffle = $.parseJSON(shuffle);
@@ -128,7 +180,11 @@ module.exports = {
       return;
     }
     this.uniformSeries(mapNodeLocal, mapRackLocal, mapOffSwitch, reduceOffSwitch);
-    console.warn(submitTime);
+    var newC = this.getNewCircle(mapNodeLocal, mapRackLocal, mapOffSwitch, reduceOffSwitch);
+    mapNodeLocal.push(newC);
+    mapRackLocal.push(newC);
+    mapOffSwitch.push(newC);
+    reduceOffSwitch.push(newC);
     var graph = new Rickshaw.Graph({
       width:w,
       height:h,
@@ -225,9 +281,5 @@ module.exports = {
       }
 
     });
-    /*var annotator = new Rickshaw.Graph.Annotate({
-      graph:graph,
-      element:document.getElementById(timeline_id)
-    });*/
   }
 }