Fixing the title removal for gauges, metric, and markdown for Time Se…

…ries Visual Builder (elastic#10707) * Fixing the title removal for gauges, metric, and markdown * Adding comment about the $timeout
dominiqueclarke · Mar 4, 2017 · 053ebfa · 053ebfa
1 parent 46c9605
commit 053ebfa
Showing 1 changed file with 20 additions and 16 deletions.
diff --git a/src/core_plugins/metrics/public/directives/visualization.js b/src/core_plugins/metrics/public/directives/visualization.js
@@ -7,7 +7,7 @@ import addScope from '../lib/add_scope';
 import modules from 'ui/modules';
 import createBrushHandler from '../lib/create_brush_handler';
 const app = modules.get('apps/metrics/directives');
-app.directive('metricsVisualization', (timefilter) => {
+app.directive('metricsVisualization', (timefilter, $timeout) => {
   return {
     restrict: 'E',
     link: ($scope, $el, $attrs) => {
@@ -19,22 +19,26 @@ app.directive('metricsVisualization', (timefilter) => {
 
       // For Metrics, Gauges and markdown visualizations we want to hide the
       // panel title because it just doens't make sense to show it.
-      const panel = $($el[0]).parents('.panel');
-      if (panel.length) {
-        const panelHeading = panel.find('.panel-heading');
-        const panelTitle = panel.find('.panel-title');
-        const matchingTypes = ['metric', 'gauge', 'markdown'];
-        if (panelHeading.length && panelTitle.length && _.contains(matchingTypes, $scope.model.type)) {
-          panel.css({ position: 'relative' });
-          panelHeading.css({
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            zIndex: 100
-          });
-          panelTitle.css({ display: 'none' });
+      // This is wrapped in a timeout so it happens after the directive is mouted.
+      // otherwise the .panel might not be available.
+      $timeout(() => {
+        const panel = $($el[0]).parents('.panel');
+        if (panel.length) {
+          const panelHeading = panel.find('.panel-heading');
+          const panelTitle = panel.find('.panel-title');
+          const matchingTypes = ['metric', 'gauge', 'markdown'];
+          if (panelHeading.length && panelTitle.length && _.contains(matchingTypes, $scope.model.type)) {
+            panel.css({ position: 'relative' });
+            panelHeading.css({
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              zIndex: 100
+            });
+            panelTitle.css({ display: 'none' });
+          }
         }
-      }
+      }, 1);
     }
   };
 });