Add telemetry to track total clicks on each visualization from grid (#47489)

* Add telemetry to track when a visualization is selected from grid

* Move all visualize tracking of metrics into one place

* Fix type errors
This commit is contained in:
Wylie Conlon 2019-10-08 16:29:34 -04:00 committed by GitHub
parent 6e956e3f88
commit bbdc0bf595
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 23 deletions

View file

@ -25,10 +25,10 @@ import { i18n } from '@kbn/i18n';
import chrome from 'ui/chrome';
import { VisType } from 'ui/vis';
import { VisualizeConstants } from '../visualize_constants';
import { createUiStatsReporter, METRIC_TYPE } from '../../../../ui_metric/public';
import { SearchSelection } from './search_selection';
import { TypeSelection } from './type_selection';
import { TypesStart } from '../../../../visualizations/public/np_ready/public/types';
import { TypesStart, VisTypeAlias } from '../../../../visualizations/public/np_ready/public/types';
interface TypeSelectionProps {
isOpen: boolean;
@ -50,6 +50,7 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
};
private readonly isLabsEnabled: boolean;
private readonly trackUiMetric: ReturnType<typeof createUiStatsReporter>;
constructor(props: TypeSelectionProps) {
super(props);
@ -58,6 +59,8 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
this.state = {
showSearchVisModal: false,
};
this.trackUiMetric = createUiStatsReporter('visualize');
}
public render() {
@ -101,29 +104,40 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
this.props.onClose();
};
private onVisTypeSelected = (visType: VisType) => {
if (visType.requiresSearch && visType.options.showIndexSelection) {
private onVisTypeSelected = (visType: VisType | VisTypeAlias) => {
if (!('aliasUrl' in visType) && visType.requiresSearch && visType.options.showIndexSelection) {
this.setState({
showSearchVisModal: true,
visType,
});
} else {
const params = [`type=${encodeURIComponent(visType.name)}`, ...this.props.editorParams!];
this.props.onClose();
location.assign(`${baseUrl}${params.join('&')}`);
this.redirectToVis(visType);
}
};
private onSearchSelected = (searchId: string, searchType: string) => {
this.props.onClose();
const params = [
`type=${encodeURIComponent(this.state.visType!.name)}`,
`${searchType === 'search' ? 'savedSearchId' : 'indexPattern'}=${searchId}`,
...this.props.editorParams!,
];
location.assign(`${baseUrl}${params.join('&')}`);
this.redirectToVis(this.state.visType!, searchType, searchId);
};
private redirectToVis(visType: VisType | VisTypeAlias, searchType?: string, searchId?: string) {
this.trackUiMetric(METRIC_TYPE.CLICK, visType.name);
if ('aliasUrl' in visType) {
window.location = chrome.addBasePath(visType.aliasUrl);
return;
}
let params = [`type=${encodeURIComponent(visType.name)}`];
if (searchType) {
params.push(`${searchType === 'search' ? 'savedSearchId' : 'indexPattern'}=${searchId}`);
}
params = params.concat(this.props.editorParams!);
this.props.onClose();
location.assign(`${baseUrl}${params.join('&')}`);
}
}
export { NewVisModal };

View file

@ -21,7 +21,6 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { sortByOrder } from 'lodash';
import React, { ChangeEvent } from 'react';
import chrome from 'ui/chrome';
import {
EuiFieldSearch,
@ -52,7 +51,7 @@ interface VisTypeAliasListEntry extends VisTypeAlias {
}
interface TypeSelectionProps {
onVisTypeSelected: (visType: VisType) => void;
onVisTypeSelected: (visType: VisType | VisTypeAlias) => void;
visTypesRegistry: TypesStart;
showExperimental: boolean;
}
@ -234,12 +233,7 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
}
const isDisabled = this.state.query !== '' && !visType.highlighted;
const onClick =
'aliasUrl' in visType
? () => {
window.location = chrome.addBasePath(visType.aliasUrl);
}
: () => this.props.onVisTypeSelected(visType);
const onClick = () => this.props.onVisTypeSelected(visType);
const highlightedType: HighlightedType = {
title: visType.title,