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

[Fleet] Add telemetry for integration cards #115413

Merged
merged 4 commits into from
Oct 19, 2021
Merged

[Fleet] Add telemetry for integration cards #115413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba350bc
add data test subject
thomasneirynck Oct 18, 2021
99ab557
add application tracker
thomasneirynck Oct 18, 2021
a79d747
Merge branch 'master' of github.com:elastic/kibana into fleet/telemetry
thomasneirynck Oct 18, 2021
218face
do not use shortcut import
thomasneirynck Oct 18, 2021
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
2 changes: 1 addition & 1 deletion x-pack/plugins/fleet/kibana.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
"requiredPlugins": ["licensing", "data", "encryptedSavedObjects", "navigation", "customIntegrations", "share"],
"optionalPlugins": ["security", "features", "cloud", "usageCollection", "home", "globalSearch"],
"extraPublicDirs": ["common"],
"requiredBundles": ["kibanaReact", "esUiShared", "home", "infra", "kibanaUtils"]
"requiredBundles": ["kibanaReact", "esUiShared", "home", "infra", "kibanaUtils", "usageCollection"]
}
23 changes: 13 additions & 10 deletions x-pack/plugins/fleet/public/applications/integrations/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,21 @@ export function renderApp(
{ element, appBasePath, history, setHeaderActionMenu }: AppMountParameters,
config: FleetConfigType,
kibanaVersion: string,
extensions: UIExtensionsStorage
extensions: UIExtensionsStorage,
UsageTracker: React.FC
) {
ReactDOM.render(
<IntegrationsApp
basepath={appBasePath}
startServices={startServices}
config={config}
history={history}
kibanaVersion={kibanaVersion}
extensions={extensions}
setHeaderActionMenu={setHeaderActionMenu}
/>,
<UsageTracker>
<IntegrationsApp
basepath={appBasePath}
startServices={startServices}
config={config}
history={history}
kibanaVersion={kibanaVersion}
extensions={extensions}
setHeaderActionMenu={setHeaderActionMenu}
/>
</UsageTracker>,
element
);

Expand Down
47 changes: 27 additions & 20 deletions ...k/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import React from 'react';
import styled from 'styled-components';
import { EuiCard, EuiFlexItem, EuiBadge, EuiToolTip, EuiSpacer } from '@elastic/eui';

import { TrackApplicationView } from '../../../../../../../../../src/plugins/usage_collection/public';

import { CardIcon } from '../../../../../components/package_icon';
import type { IntegrationCardItem } from '../../../../../../common/types/models/epm';

Expand All @@ -31,6 +33,7 @@ export function PackageCard({
integration,
url,
release,
id,
}: PackageCardProps) {
let releaseBadge: React.ReactNode | null = null;

Expand All @@ -47,26 +50,30 @@ export function PackageCard({
);
}

const testid = `integration-card:${id}`;
return (
<Card
layout="horizontal"
title={title || ''}
titleSize="xs"
description={description}
hasBorder
icon={
<CardIcon
icons={icons}
packageName={name}
integrationName={integration}
version={version}
size="xl"
/>
}
href={url}
target={url.startsWith('http') || url.startsWith('https') ? '_blank' : undefined}
>
{releaseBadge}
</Card>
<TrackApplicationView viewId={testid}>
<Card
data-test-subj={testid}
layout="horizontal"
title={title || ''}
titleSize="xs"
description={description}
hasBorder
icon={
<CardIcon
icons={icons}
packageName={name}
integrationName={integration}
version={version}
size="xl"
/>
}
href={url}
target={url.startsWith('http') || url.startsWith('https') ? '_blank' : undefined}
>
{releaseBadge}
</Card>
</TrackApplicationView>
);
}
2 changes: 1 addition & 1 deletion ...s/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const packageListToIntegrationsList = (packages: PackageList): PackageList => {
const allCategories = [...topCategories, ...categories];
return {
...restOfPackage,
id: `${restOfPackage}-${name}`,
id: `${restOfPackage.id}-${name}`,
integration: name,
title,
description,
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const mapToCard = (
}

return {
id: `${item.type === 'ui_link' ? 'ui_link' : 'epr'}-${item.id}`,
id: `${item.type === 'ui_link' ? 'ui_link' : 'epr'}:${item.id}`,
description: item.description,
icons: !item.icons || !item.icons.length ? [] : item.icons,
title: item.title,
Expand Down
16 changes: 15 additions & 1 deletion x-pack/plugins/fleet/public/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* 2.0.
*/

import React from 'react';
import type {
AppMountParameters,
CoreSetup,
Expand All @@ -23,6 +24,8 @@ import type {

import type { SharePluginStart } from 'src/plugins/share/public';

import type { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';

import { DEFAULT_APP_CATEGORIES, AppNavLinkStatus } from '../../../../src/core/public';

import type {
Expand Down Expand Up @@ -77,6 +80,7 @@ export interface FleetSetupDeps {
cloud?: CloudSetup;
globalSearch?: GlobalSearchPluginSetup;
customIntegrations: CustomIntegrationsSetup;
usageCollection?: UsageCollectionSetup;
}

export interface FleetStartDeps {
Expand Down Expand Up @@ -141,7 +145,17 @@ export class FleetPlugin implements Plugin<FleetSetup, FleetStart, FleetSetupDep
cloud: deps.cloud,
};
const { renderApp, teardownIntegrations } = await import('./applications/integrations');
const unmount = renderApp(startServices, params, config, kibanaVersion, extensions);

const Tracker =
deps.usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting little trick here with React.Fragment. Any risks to using this vs. a simple 'passthrough' component like:

const Passthrough: React.FC = ({ children }) => children

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is boilerplate from the telemetry-docs

kibana/src/plugins/kibana_usage_collection/server/collectors/application_usage/README.md

Line 34 in d230720

const ApplicationUsageTrackingProvider = plugins.usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;

The same syntax is used also in the ML, SIEM, and Maps plugins.

kibana/x-pack/plugins/maps/public/plugin.ts

Line 186 in a67eef4

plugins.usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;
,

kibana/x-pack/plugins/ml/public/application/app.tsx

Line 92 in 95cd74d

deps.usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;
,

kibana/x-pack/plugins/security_solution/public/app/index.tsx

Line 28 in c0ceb06

usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;

So I think it should be OK.

const unmount = renderApp(
startServices,
params,
config,
kibanaVersion,
extensions,
Tracker
);

return () => {
unmount();
Expand Down