fixing brush in discover (#26609) (#26625)

src/legacy/core_plugins/kibana/public/discover/controllers/discover.js

@@ -50,7 +50,7 @@ import { StateProvider } from 'ui/state_management/state';
 import { migrateLegacyQuery } from 'ui/utils/migrate_legacy_query';
 import { FilterManagerProvider } from 'ui/filter_manager';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
-import { visualizationLoader } from 'ui/visualize/loader/visualization_loader';
+import { VisualizeLoaderProvider } from 'ui/visualize/loader/visualize_loader';
 import { recentlyAccessed } from 'ui/persisted_log';
 import { getDocLink } from 'ui/documentation_links';
 import '../components/fetch_error';
@@ -158,6 +158,8 @@ function discoverController(
   localStorage,
   i18n,
 ) {
+  const visualizeLoader = Private(VisualizeLoaderProvider);
+  let visualizeHandler;
   const Vis = Private(VisProvider);
   const docTitle = Private(DocTitleProvider);
   const HitSortFn = Private(PluginsKibanaDiscoverHitSortFnProvider);
@@ -745,9 +747,7 @@ function discoverController(
         Promise
           .resolve(responseHandler(tabifiedData))
           .then(resp => {
-            $scope.visData = resp;
-            const visEl = $element.find('#discoverHistogram')[0];
-            visualizationLoader.render(visEl, $scope.vis, $scope.visData, $scope.uiState, { listenOnChange: true });
+            visualizeHandler.render(resp);
           });
       }
 
@@ -870,7 +870,7 @@ function discoverController(
     $scope.minimumVisibleRows = $scope.hits;
   };
 
-  function setupVisualization() {
+  async function setupVisualization() {
     // If no timefield has been specified we don't create a histogram of messages
     if (!$scope.opts.timefield) return;
 
@@ -890,35 +890,48 @@ function discoverController(
       }
     ];
 
-    // we have a vis, just modify the aggs
     if ($scope.vis) {
       const visState = $scope.vis.getEnabledState();
       visState.aggs = visStateAggs;
 
       $scope.vis.setState(visState);
-    } else {
-      $scope.vis = new Vis($scope.indexPattern, {
-        title: savedSearch.title,
+      return;
+    }
+
+
+    const visSavedObject = {
+      indexPattern: $scope.indexPattern.id,
+      visState: {
         type: 'histogram',
+        title: savedSearch.title,
         params: {
           addLegend: false,
           addTimeMarker: true
         },
         aggs: visStateAggs
-      });
-
-      $scope.searchSource.onRequestStart((searchSource, searchRequest) => {
-        return $scope.vis.getAggConfig().onSearchRequestStart(searchSource, searchRequest);
-      });
-
-      $scope.searchSource.setField('aggs', function () {
-        return $scope.vis.getAggConfig().toDsl();
-      });
-    }
-
-    $scope.vis.filters = {
-      timeRange: timefilter.getTime()
+      }
     };
+
+    $scope.vis = new Vis(
+      $scope.searchSource.getField('index'),
+      visSavedObject.visState
+    );
+    visSavedObject.vis = $scope.vis;
+
+    $scope.searchSource.onRequestStart((searchSource, searchRequest) => {
+      return $scope.vis.getAggConfig().onSearchRequestStart(searchSource, searchRequest);
+    });
+
+    $scope.searchSource.setField('aggs', function () {
+      return $scope.vis.getAggConfig().toDsl();
+    });
+
+    $timeout(async () => {
+      const visEl = $element.find('#discoverHistogram')[0];
+      visualizeHandler = await visualizeLoader.embedVisualizationWithSavedObject(visEl, visSavedObject, {
+        autoFetch: false,
+      });
+    });
   }
 
   function resolveIndexPatternLoading() {

src/legacy/core_plugins/kibana/public/discover/index.html

@@ -151,7 +151,7 @@
               </header>
 
               <div id="discoverHistogram"
-                 ng-if="vis && rows.length !== 0"
+                 ng-show="vis && rows.length !== 0"
                  style="display: flex; height: 200px"
                 >
               </div>

src/ui/public/visualize/loader/embedded_visualize_handler.ts

@@ -39,6 +39,7 @@ import { VisSavedObject, VisualizeLoaderParams, VisualizeUpdateParams } from './
 interface EmbeddedVisualizeHandlerParams extends VisualizeLoaderParams {
   Private: IPrivate;
   queryFilter: any;
+  autoFetch?: boolean;
 }
 
 const RENDER_COMPLETE_EVENT = 'render_complete';
@@ -83,6 +84,7 @@ export class EmbeddedVisualizeHandler {
   private readonly inspectorAdapters: Adapters = {};
   private actions: any = {};
   private events$: Rx.Observable<any>;
+  private autoFetch: boolean;
 
   constructor(
     private readonly element: HTMLElement,
@@ -91,7 +93,16 @@ export class EmbeddedVisualizeHandler {
   ) {
     const { searchSource, vis } = savedObject;
 
-    const { appState, uiState, queryFilter, timeRange, filters, query, Private } = params;
+    const {
+      appState,
+      uiState,
+      queryFilter,
+      timeRange,
+      filters,
+      query,
+      Private,
+      autoFetch,
+    } = params;
 
     this.dataLoaderParams = {
       searchSource,
@@ -104,6 +115,8 @@ export class EmbeddedVisualizeHandler {
       forceFetch: false,
     };
 
+    this.autoFetch = !(autoFetch === false);
+
     // Listen to the first RENDER_COMPLETE_EVENT to resolve this promise
     this.firstRenderComplete = new Promise(resolve => {
       this.listeners.once(RENDER_COMPLETE_EVENT, resolve);
@@ -218,6 +231,25 @@ export class EmbeddedVisualizeHandler {
     return this.element;
   }
 
+  /**
+   * renders visualization with provided data
+   * @param visData: visualization data
+   */
+  public render = (visData: any = null) => {
+    return visualizationLoader
+      .render(this.element, this.vis, visData, this.uiState, {
+        listenOnChange: false,
+      })
+      .then(() => {
+        if (!this.loaded) {
+          this.loaded = true;
+          if (this.autoFetch) {
+            this.fetchAndRender();
+          }
+        }
+      });
+  };
+
   /**
    * Opens the inspector for the embedded visualization. This will return an
    * handler to the inspector to close and interact with it.
@@ -351,17 +383,4 @@ export class EmbeddedVisualizeHandler {
       return data;
     });
   };
-
-  private render = (visData: any = null) => {
-    return visualizationLoader
-      .render(this.element, this.vis, visData, this.uiState, {
-        listenOnChange: false,
-      })
-      .then(() => {
-        if (!this.loaded) {
-          this.loaded = true;
-          this.fetchAndRender();
-        }
-      });
-  };
 }

test/functional/apps/discover/_discover.js

@@ -130,7 +130,22 @@ export default function ({ getService, getPageObjects }) {
         expect(ticks).to.eql(['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00', '2015-09-23 00:00']);
       });
 
+      it('should modify the time range when a bar is clicked', async function () {
+        await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+        await PageObjects.discover.clickHistogramBar(0);
+        const actualTimeString = await PageObjects.header.getPrettyDuration();
+        expect(actualTimeString).to.be('September 20th 2015, 00:00:00.000 to September 20th 2015, 03:00:00.000');
+      });
+
+      it('should modify the time range when the histogram is brushed', async function () {
+        await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+        await PageObjects.discover.brushHistogram(0, 1);
+        const actualTimeString = await PageObjects.header.getPrettyDuration();
+        expect(actualTimeString).to.be('September 19th 2015, 23:52:17.080 to September 20th 2015, 02:59:51.112');
+      });
+
       it('should show correct initial chart interval of Auto', async function () {
+        await PageObjects.header.setAbsoluteRange(fromTime, toTime);
         const actualInterval = await PageObjects.discover.getChartInterval();
 
         const expectedInterval = 'Auto';

test/functional/page_objects/discover_page.js

@@ -26,6 +26,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
   const find = getService('find');
   const flyout = getService('flyout');
   const PageObjects = getPageObjects(['header', 'common']);
+  const browser = getService('browser');
 
   class DiscoverPage {
     async getQueryField() {
@@ -112,6 +113,19 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       await testSubjects.click('discoverOpenButton');
     }
 
+    async clickHistogramBar(i) {
+      const bars = await find.allByCssSelector(`.series.histogram rect`);
+      await bars[i].click();
+    }
+
+    async brushHistogram(from, to) {
+      const bars = await find.allByCssSelector('.series.histogram rect');
+      await browser.moveMouseTo(bars[from], 0, -5);
+      await browser.pressMouseButton();
+      await browser.moveMouseTo(bars[to], 0, -5);
+      await browser.releaseMouseButton();
+    }
+
     async getCurrentQueryName() {
       return await testSubjects.getVisibleText('discoverCurrentQuery');
     }