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