parent
0c6a9429d9
commit
343077116c
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue