[FLINK-2357] [web dashboard] Added tooltips to timeline

flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee

@@ -83,11 +83,6 @@ angular.module('flinkApp')
       .datum(testData)
       .call(chart)
 
-      svgG = svg.select("g")
-
-      bbox = svgG[0][0].getBBox()
-      svg.attr('height', bbox.height + 30)
-
     analyzeTime(scope.data)
 
     return
@@ -159,11 +154,6 @@ angular.module('flinkApp')
       .datum(testData)
       .call(chart)
 
-      svgG = svg.select("g")
-
-      bbox = svgG[0][0].getBBox()
-      svg.attr('height', bbox.height + 30)
-
     scope.$watch attrs.job, (data) ->
       analyzeTime(data) if data
 

flink-runtime-web/web-dashboard/app/styles/timeline.styl

@@ -33,3 +33,6 @@
     .timeline-insidelabel, .timeline-series
       cursor: auto
 
+.qtip-timeline-bar
+  font-size: 14px
+  line-height: 1.4

flink-runtime-web/web-dashboard/bower.json

@@ -21,7 +21,8 @@
     "dagre-d3": "~0.4.8",
     "font-awesome": "~4.3.0",
     "angular-moment": "~0.9.2",
-    "moment-duration-format": "~1.3.0"
+    "moment-duration-format": "~1.3.0",
+    "qtip2": "~2.2.1"
   },
   "overrides": {
     "dagre-d3": {

flink-runtime-web/web-dashboard/gulpfile.js

@@ -44,7 +44,7 @@ var environment = 'development';
 var paths = {
   src: './app/',
   dest: './web/',
-  vendor: './vendor/',
+  vendor: './bower_components/',
   vendorLocal: './vendor-local/',
   assets: './assets/',
   tmp: './tmp/'
@@ -76,7 +76,7 @@ gulp.task('bootstrap', function () {
 });
 
 gulp.task('vendor-styles', [ 'bootstrap' ], function() {
-  stream = gulp.src(mainBowerFiles().concat([paths.tmp + 'css/bootstrap_custom.css']))
+  stream = gulp.src(mainBowerFiles().concat([paths.tmp + 'css/bootstrap_custom.css']).concat([paths.vendor + 'qtip2/jquery.qtip.css']))
     .pipe(filter(['*.css', '!bootstrap.css']))
     .pipe(sourcemaps.init())
     .pipe(concat("vendor.css"))

flink-runtime-web/web-dashboard/vendor-local/d3-timeline.js

@@ -159,8 +159,6 @@
       }
 
       if (timeAxisTick) {
-        console.log('here');
-
         g.append("g")
           .attr("class", "axis axis-tick")
           .attr("transform", "translate(" + 0 +","+
@@ -215,7 +213,7 @@
             .attr("width", getTextWidth)
             .attr("height", itemHeight);
 
-          nel
+          var bar = nel
             .append(function(d, i) {
               return document.createElementNS(d3.ns.prefix.svg, "display" in d? d.display:display);
             })
@@ -273,11 +271,6 @@
             .attr("width", getTextWidth)
             .attr("height", itemHeight)
             .attr("clip-path", "url(#" + prefix + "-timeline-textclip-" + i + "-" + index + ")")
-
-            // .attr("width", function (d, i) {
-            //   // console.log((d.ending_time - d.starting_time) * scaleFactor);
-            //   return (d.ending_time - d.starting_time) * scaleFactor;
-            // })
             .text(function(d) {
               return d.label;
             })
@@ -286,6 +279,22 @@
             });
           ;
 
+          g.selectAll("svg .bar-container").each(function(d, i) {
+            $(this).qtip({
+              content: {
+                text: d.label
+              },
+              position: {
+                my: 'bottom left',
+                at: 'top left'
+              },
+              style: {
+                classes: 'qtip-light qtip-timeline-bar'
+              }
+            });
+          });
+
+
           if (rowSeperatorsColor) {
             var lineYAxis = ( itemHeight + itemMargin / 2 + margin.top + (itemHeight + itemMargin) * yAxisMapping[index]);
             gParent.append("svg:line")
@@ -357,6 +366,8 @@
       });
 
       var move = function() {
+        $('.qtip.qtip-timeline-bar').qtip('hide');
+
         g.selectAll(".bar-type-scheduled .timeline-series")
           .attr("x", getXPos);
 
@@ -414,6 +425,9 @@
       var gSize = g[0][0].getBoundingClientRect();
       setHeight();
 
+      bbox = g[0][0].getBBox();
+      gParent.attr('height', bbox.height + 30);
+
       function getBorderStart(d, i) {
         return xScale(d.starting_time);
       }

flink-runtime-web/web-dashboard/web/css/index.css

@@ -408,6 +408,10 @@ svg.graph .node-label {
 .timeline-canvas.secondary .timeline-series {
   cursor: auto;
 }
+.qtip-timeline-bar {
+  font-size: 14px;
+  line-height: 1.4;
+}
 @media (min-width: 768px) {
   #sidebar {
     left: 0;