TEZ-3570. Tez UI: Wait for sometime before tooltips are displayed (sree)

mrkatebzadeh · Jan 9, 2017 · e1f5288 · e1f5288
1 parent 8a0da34
commit e1f5288
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 18 deletions.
diff --git a/CHANGES.txt b/CHANGES.txt
@@ -155,6 +155,7 @@ ALL CHANGES:
   TEZ-3502. Tez UI: Search in All DAGs page doesn't work with numeric values
   TEZ-3546. Tez UI: On sorting asc - Not Available must be at the top
   TEZ-3555. Tez UI: Build is failing in RHEL6
+  TEZ-3570. Tez UI: Wait for sometime before tooltips are displayed
 
 Release 0.8.5: Unreleased
 

diff --git a/tez-ui/src/main/webapp/app/components/em-tooltip.js b/tez-ui/src/main/webapp/app/components/em-tooltip.js
@@ -64,10 +64,10 @@ export default Ember.Component.extend({
       }
       this.set("_contents", contents);
 
+      this.set("show", true);
       Ember.run.later(this, function () {
         this.set("bubbles", this.$(".bubble"));
-        this.set("show", true);
-        this.renderTip();
+        Ember.run.debounce(this, "renderTip", 500);
       });
     }
     else if(tip){
@@ -95,7 +95,7 @@ export default Ember.Component.extend({
       y: event.clientY
     });
 
-    if(Ember.get(event, "data.tip")) {
+    if(Ember.get(event, "data.tip") && event.data.get("tip").is(":visible")) {
       event.data.renderTip();
     }
   },
@@ -115,7 +115,7 @@ export default Ember.Component.extend({
   },
 
   renderTip: function () {
-    if(this.get("show")) {
+    if(this.get("show") && !this.get("isDestroyed")) {
       let x = this.get("x"),
           y = this.get("y"),
 

diff --git a/tez-ui/src/main/webapp/app/initializers/jquery.js b/tez-ui/src/main/webapp/app/initializers/jquery.js
@@ -20,7 +20,6 @@ import Ember from 'ember';
 
 export function initialize(/* application */) {
   Ember.$(document).tooltip({
-    delay: 20,
     tooltipClass: 'generic-tooltip'
   });
 

diff --git a/tez-ui/src/main/webapp/app/routes/application.js b/tez-ui/src/main/webapp/app/routes/application.js
@@ -41,7 +41,9 @@ export default Ember.Route.extend({
     resetTooltip: function () {
       Ember.$(document).tooltip("destroy");
       Ember.$(document).tooltip({
-        delay: 20,
+        show: {
+          delay: 500
+        },
         tooltipClass: 'generic-tooltip'
       });
     },

diff --git a/tez-ui/src/main/webapp/app/utils/vertex-process.js b/tez-ui/src/main/webapp/app/utils/vertex-process.js
@@ -195,6 +195,8 @@ export default Process.extend({
         vertexDescription = `Contribution ${options.contribution}%`;
         /* falls through */
       case "process-name":
+      case "event-bar":
+      case "process-line":
         let properties = this.getVisibleProps().map(function (definition) {
           return {
             name: definition.get("headerTitle"),
@@ -210,12 +212,6 @@ export default Process.extend({
           description: vertexDescription
         }];
       break;
-      case "event-bar":
-      case "process-line":
-        contents = [{
-          title: this.get("name"),
-        }];
-      break;
       case "event":
         var edge;
         contents = options.events.map(function (event) {

diff --git a/tez-ui/src/main/webapp/package.json b/tez-ui/src/main/webapp/package.json
@@ -59,6 +59,6 @@
   "dependencies": {
     "em-helpers": "0.5.14",
     "em-table": "0.4.0",
-    "em-tgraph": "0.0.7"
+    "em-tgraph": "0.0.9"
   }
 }
diff --git a/tez-ui/src/main/webapp/tests/unit/initializers/jquery-test.js b/tez-ui/src/main/webapp/tests/unit/initializers/jquery-test.js
@@ -31,8 +31,9 @@ module('Unit | Initializer | jquery', {
   }
 });
 
-test('it works', function(assert) {
+test('Basic creation test', function(assert) {
   JqueryInitializer.initialize(application);
 
-  assert.ok(true);
+  assert.ok(Ember.$(document).tooltip( "instance" ));
+  assert.equal(Ember.$.ajaxSetup().cache, false);
 });
diff --git a/tez-ui/src/main/webapp/tests/unit/utils/vertex-process-test.js b/tez-ui/src/main/webapp/tests/unit/utils/vertex-process-test.js
@@ -231,7 +231,11 @@ test('getTooltipContents-process test', function(assert) {
       return [Ember.Object.create({
         id: "prop1",
         headerTitle: "Prop 1",
-        contentPath: "prop1"
+        contentPath: "prop1",
+        cellDefinition: {
+          type: "Type1",
+          format: "Format1"
+        }
       }), Ember.Object.create({
         id: "prop2",
         headerTitle: "Prop 2",
@@ -242,10 +246,24 @@ test('getTooltipContents-process test', function(assert) {
 
   var processTooltip = process.getTooltipContents("event-bar")[0];
   assert.equal(processTooltip.title, "TestName");
-  assert.notOk(processTooltip.properties);
+  assert.equal(processTooltip.properties[0].name, "Prop 1");
+  assert.equal(processTooltip.properties[0].value, "val1");
+  assert.equal(processTooltip.properties[0].type, "Type1");
+  assert.equal(processTooltip.properties[0].format, "Format1");
+  assert.equal(processTooltip.properties[1].name, "Prop 2");
 
   processTooltip = process.getTooltipContents("process-line")[0];
   assert.equal(processTooltip.title, "TestName");
-  assert.notOk(processTooltip.properties);
+  assert.equal(processTooltip.properties[0].name, "Prop 1");
+  assert.equal(processTooltip.properties[0].value, "val1");
+  assert.equal(processTooltip.properties[0].type, "Type1");
+  assert.equal(processTooltip.properties[0].format, "Format1");
+  assert.equal(processTooltip.properties[1].name, "Prop 2");
+
+  processTooltip = process.getTooltipContents("consolidated-process", {
+    contribution: 10
+  })[0];
+  assert.equal(processTooltip.title, "TestName");
+  assert.equal(processTooltip.description, "Contribution 10%");
 
 });