From be98fa8e5e1685597498869e51607bcac03164bc Mon Sep 17 00:00:00 2001 From: Peter Pisljar Date: Tue, 4 Dec 2018 12:21:35 +0100 Subject: [PATCH] fixing brush in discover (#26609) # Conflicts: # src/legacy/core_plugins/kibana/public/discover/controllers/discover.js # src/legacy/core_plugins/kibana/public/discover/index.html # src/ui/public/visualize/loader/embedded_visualize_handler.ts --- .../public/discover/controllers/discover.js | 51 ++++++++++++------- .../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, 95 insertions(+), 34 deletions(-) diff --git a/src/core_plugins/kibana/public/discover/controllers/discover.js b/src/core_plugins/kibana/public/discover/controllers/discover.js index 57b40182c70a3..1f2ad7065d23d 100644 --- a/src/core_plugins/kibana/public/discover/controllers/discover.js +++ b/src/core_plugins/kibana/public/discover/controllers/discover.js @@ -49,7 +49,7 @@ import { StateProvider } from 'ui/state_management/state'; import { migrateLegacyQuery } from 'ui/utils/migrateLegacyQuery'; 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'; @@ -157,6 +157,8 @@ function discoverController( localStorage, breadcrumbState ) { + const visualizeLoader = Private(VisualizeLoaderProvider); + let visualizeHandler; const Vis = Private(VisProvider); const docTitle = Private(DocTitleProvider); const HitSortFn = Private(PluginsKibanaDiscoverHitSortFnProvider); @@ -687,9 +689,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); }); } @@ -836,33 +836,46 @@ function discoverController( 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.vis = new Vis( + $scope.searchSource.getField('index'), + visSavedObject.visState + ); + visSavedObject.vis = $scope.vis; - $scope.searchSource.setField('aggs', function () { - return $scope.vis.getAggConfig().toDsl(); - }); - } + $scope.searchSource.onRequestStart((searchSource, searchRequest) => { + return $scope.vis.getAggConfig().onSearchRequestStart(searchSource, searchRequest); + }); - $scope.vis.filters = { - timeRange: timefilter.getTime() - }; + $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() { const { loaded: loadedIndexPattern, diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 4735b852a96e0..1bdc95f371763 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -135,7 +135,7 @@

Searching

diff --git a/src/ui/public/visualize/loader/embedded_visualize_handler.ts b/src/ui/public/visualize/loader/embedded_visualize_handler.ts index 8f0c6fd31ddb0..518574d9fa47e 100644 --- a/src/ui/public/visualize/loader/embedded_visualize_handler.ts +++ b/src/ui/public/visualize/loader/embedded_visualize_handler.ts @@ -36,6 +36,7 @@ import { VisualizeDataLoader } from './visualize_data_loader'; interface EmbeddedVisualizeHandlerParams extends VisualizeLoaderParams { Private: IPrivate; queryFilter: any; + autoFetch?: boolean; } const RENDER_COMPLETE_EVENT = 'render_complete'; @@ -78,6 +79,7 @@ export class EmbeddedVisualizeHandler { private dataLoader: VisualizeDataLoader; private dataSubject: Rx.Subject; + private autoFetch: boolean; constructor( private readonly element: HTMLElement, @@ -86,7 +88,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, @@ -99,6 +110,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); @@ -193,6 +206,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. @@ -285,17 +317,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 2c12356a27637..222c44afc387e 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 81d3dd1e97721..1464c9d8b0eef 100644 --- a/test/functional/page_objects/discover_page.js +++ b/test/functional/page_objects/discover_page.js @@ -27,6 +27,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) { const find = getService('find'); const flyout = getService('flyout'); const PageObjects = getPageObjects(['header', 'common']); + const browser = getService('browser'); const getRemote = () => ( getService('remote') @@ -121,6 +122,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'); }