From 343077116c552e842e6a395b4109279d3c79c9f0 Mon Sep 17 00:00:00 2001 From: Peter Pisljar Date: Tue, 4 Dec 2018 14:34:00 +0100 Subject: [PATCH] fixing brush in discover (#26609) (#26625) --- .../public/discover/controllers/discover.js | 57 ++++++++++++------- .../kibana/public/discover/index.html | 2 +- .../loader/embedded_visualize_handler.ts | 47 ++++++++++----- test/functional/apps/discover/_discover.js | 15 +++++ test/functional/page_objects/discover_page.js | 14 +++++ 5 files changed, 98 insertions(+), 37 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js b/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js index a10ef78da11c..5fff20e6cd2c 100644 --- a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js +++ b/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() { diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html index a267544bdffc..b388844d9321 100644 --- a/src/legacy/core_plugins/kibana/public/discover/index.html +++ b/src/legacy/core_plugins/kibana/public/discover/index.html @@ -151,7 +151,7 @@
diff --git a/src/ui/public/visualize/loader/embedded_visualize_handler.ts b/src/ui/public/visualize/loader/embedded_visualize_handler.ts index 66a630d33139..4b6551921d91 100644 --- a/src/ui/public/visualize/loader/embedded_visualize_handler.ts +++ b/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; + 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(); - } - }); - }; } diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.js index 4265e3445d10..3c75070431b9 100644 --- a/test/functional/apps/discover/_discover.js +++ b/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'; diff --git a/test/functional/page_objects/discover_page.js b/test/functional/page_objects/discover_page.js index 06675cee9741..32c9c10ff465 100644 --- a/test/functional/page_objects/discover_page.js +++ b/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'); }