Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Usage Collection] Home Page UI Metrics #81827

Merged
merged 7 commits into from
Nov 2, 2020
Merged

[Usage Collection] Home Page UI Metrics #81827

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b89130c
Added telemetry for the home page
cqliu1 Oct 26, 2020
b634530
Added check for click handlers in overview page footer
cqliu1 Oct 26, 2020
b068689
Fixed ts error
cqliu1 Oct 28, 2020
2122b89
Updated snapshots
cqliu1 Oct 28, 2020
5202400
Merge branch 'master' into telemetry/home-page
kibanamachine Nov 2, 2020
8a65deb
Applied feedback
cqliu1 Nov 2, 2020
6aac860
Merge branch 'master' into telemetry/home-page
cqliu1 Nov 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions src/plugins/home/public/application/components/add_data/add_data.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ jest.mock('../app_navigation_handler', () => {
};
});

jest.mock('../../kibana_services', () => ({
getServices: () => ({
trackUiMetric: jest.fn(),
}),
}));

beforeEach(() => {
jest.clearAllMocks();
});
Expand Down
101 changes: 55 additions & 46 deletions src/plugins/home/public/application/components/add_data/add_data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,69 +17,78 @@
* under the License.
*/

import React, { FC } from 'react';
import React, { FC, MouseEvent } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { METRIC_TYPE } from '@kbn/analytics';
// @ts-expect-error untyped service
import { FeatureCatalogueEntry } from '../../services';
import { createAppNavigationHandler } from '../app_navigation_handler';
// @ts-expect-error untyped component
import { Synopsis } from '../synopsis';
import { getServices } from '../../kibana_services';

interface Props {
addBasePath: (path: string) => string;
features: FeatureCatalogueEntry[];
}

export const AddData: FC<Props> = ({ addBasePath, features }) => (
<section className="homDataAdd" aria-labelledby="homDataAdd__title">
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={1}>
<EuiTitle size="s">
<h2 id="homDataAdd__title">
<FormattedMessage id="home.addData.sectionTitle" defaultMessage="Ingest your data" />
</h2>
</EuiTitle>
</EuiFlexItem>
export const AddData: FC<Props> = ({ addBasePath, features }) => {
const { trackUiMetric } = getServices();

<EuiFlexItem className="homDataAdd__actions" grow={false}>
<div>
<EuiButtonEmpty
className="homDataAdd__actionButton"
flush="left"
href="#/tutorial_directory/sampleData"
iconType="visTable"
size="xs"
>
<FormattedMessage
id="home.addData.sampleDataButtonLabel"
defaultMessage="Try our sample data"
/>
</EuiButtonEmpty>
</div>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="m" />
return (
<section className="homDataAdd" aria-labelledby="homDataAdd__title">
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={1}>
<EuiTitle size="s">
<h2 id="homDataAdd__title">
<FormattedMessage id="home.addData.sectionTitle" defaultMessage="Ingest your data" />
</h2>
</EuiTitle>
</EuiFlexItem>

<EuiFlexGroup className="homDataAdd__content">
{features.map((feature) => (
<EuiFlexItem key={feature.id}>
<Synopsis
id={feature.id}
onClick={createAppNavigationHandler(feature.path)}
description={feature.description}
iconType={feature.icon}
title={feature.title}
url={addBasePath(feature.path)}
wrapInPanel
/>
<EuiFlexItem className="homDataAdd__actions" grow={false}>
<div>
<EuiButtonEmpty
className="homDataAdd__actionButton"
flush="left"
href="#/tutorial_directory/sampleData"
iconType="visTable"
size="xs"
>
<FormattedMessage
id="home.addData.sampleDataButtonLabel"
defaultMessage="Try our sample data"
/>
</EuiButtonEmpty>
</div>
</EuiFlexItem>
))}
</EuiFlexGroup>
</section>
);
</EuiFlexGroup>

<EuiSpacer size="m" />

<EuiFlexGroup className="homDataAdd__content">
{features.map((feature) => (
<EuiFlexItem key={feature.id}>
<Synopsis
id={feature.id}
onClick={(event: MouseEvent) => {
createAppNavigationHandler(feature.path)(event);
trackUiMetric(METRIC_TYPE.CLICK, `ingest_data_card_${feature.id}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we want to swap these two lines?

createAppNavigationHandler bails if someone goes to open the link in a new tab but we could still collect that metric.

}}
description={feature.description}
iconType={feature.icon}
title={feature.title}
url={addBasePath(feature.path)}
wrapInPanel
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
</section>
);
};

AddData.propTypes = {
addBasePath: PropTypes.func.isRequired,
Expand Down
14 changes: 12 additions & 2 deletions src/plugins/home/public/application/components/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
import { METRIC_TYPE } from '@kbn/analytics';
import { i18n } from '@kbn/i18n';
import {
OverviewPageFooter,
Expand Down Expand Up @@ -120,7 +121,7 @@ export class Home extends Component {

renderNormal() {
const { addBasePath, solutions, directories } = this.props;

const { trackUiMetric } = getServices();
const devTools = this.findDirectoryById('console');
const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
const manageDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
Expand Down Expand Up @@ -171,7 +172,16 @@ export class Home extends Component {

<EuiHorizontalRule margin="xl" aria-hidden="true" />

<OverviewPageFooter addBasePath={addBasePath} path={HOME_APP_BASE_PATH} />
<OverviewPageFooter
addBasePath={addBasePath}
path={HOME_APP_BASE_PATH}
onSetDefaultRoute={() => {
trackUiMetric(METRIC_TYPE.CLICK, 'set_home_as_default_route');
}}
onChangeDefaultRoute={() => {
trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
}}
/>
</div>
</main>
);
Expand Down
6 changes: 6 additions & 0 deletions src/plugins/home/public/application/components/manage_data/manage_data.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ jest.mock('../app_navigation_handler', () => {
};
});

jest.mock('../../kibana_services', () => ({
getServices: () => ({
trackUiMetric: jest.fn(),
}),
}));

beforeEach(() => {
jest.clearAllMocks();
});
Expand Down
Loading