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');
}