github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] [Search][Onboarding] Add telemetry for Start Page code view (#193099) (#193641)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Search][Onboarding] Add telemetry for Start Page code view
(#193099)](https://github.com/elastic/kibana/pull/193099)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Rodney
Norris","email":"rodney.norris@elastic.co"},"sourceCommit":{"committedDate":"2024-09-17T18:17:34Z","message":"[Search][Onboarding]
Add telemetry for Start Page code view (#193099)\n\n##
Summary\r\n\r\nAdded telemetry tracking events for the start page code
view.\r\nSpecifically tracking when user selects a language and copies
the\r\nexample code
snippets.","sha":"f01f68e05918195cbf47e46f9bce6d0e938a3290","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"number":193099,"url":"https://github.com/elastic/kibana/pull/193099","mergeCommit":{"message":"[Search][Onboarding]
Add telemetry for Start Page code view (#193099)\n\n##
Summary\r\n\r\nAdded telemetry tracking events for the start page code
view.\r\nSpecifically tracking when user selects a language and copies
the\r\nexample code
snippets.","sha":"f01f68e05918195cbf47e46f9bce6d0e938a3290"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193099","number":193099,"mergeCommit":{"message":"[Search][Onboarding]
Add telemetry for Start Page code view (#193099)\n\n##
Summary\r\n\r\nAdded telemetry tracking events for the start page code
view.\r\nSpecifically tracking when user selects a language and copies
the\r\nexample code
snippets.","sha":"f01f68e05918195cbf47e46f9bce6d0e938a3290"}}]}]
BACKPORT-->
This commit is contained in:
Rodney Norris 2024-09-23 05:58:22 -05:00 • committed by GitHub
parent dae8f1757a
commit 156a76cb03
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 65 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

3
x-pack/plugins/search_indices/public/analytics/constants.ts
View file

@ -10,4 +10,7 @@ export enum AnalyticsEvents {
startPageShowCodeClick = 'start_page_show_code',
startPageShowCreateIndexUIClick = 'start_page_show_create_index_ui',
startCreateIndexClick = 'start_create_index',
startCreateIndexLanguageSelect = 'start_code_lang_select',
startCreateIndexCodeCopyInstall = 'start_code_copy_install',
startCreateIndexCodeCopy = 'start_code_copy',
}

37
x-pack/plugins/search_indices/public/components/start/code_sample.tsx
View file

@ -4,6 +4,8 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
// Disabled so we can track the on copy event by adding an onClick to a div
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react';
import {
@ -19,9 +21,22 @@ export interface CodeSampleProps {
title: string;
language: string;
code: string;
onCodeCopyClick?: React.MouseEventHandler<HTMLElement>;
}
export const CodeSample = ({ title, language, code }: CodeSampleProps) => {
export const CodeSample = ({ title, language, code, onCodeCopyClick }: CodeSampleProps) => {
const onCodeClick = React.useCallback(
(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
if (onCodeCopyClick === undefined) return;
if (e.target instanceof HTMLElement) {
if (e.target.dataset?.testSubj === 'euiCodeBlockCopy') {
onCodeCopyClick(e);
}
}
},
[onCodeCopyClick]
);
return (
<EuiFlexItem>
<EuiText size="s">
@ -30,15 +45,17 @@ export const CodeSample = ({ title, language, code }: CodeSampleProps) => {
<EuiSpacer size="s" />
<EuiThemeProvider colorMode="dark">
<EuiPanel color="subdued" paddingSize="none" hasShadow={false}>
<EuiCodeBlock
language={language}
fontSize="m"
paddingSize="m"
isCopyable
transparentBackground
>
{code}
</EuiCodeBlock>
<div onClick={onCodeClick}>
<EuiCodeBlock
language={language}
fontSize="m"
paddingSize="m"
isCopyable
transparentBackground
>
{code}
</EuiCodeBlock>
</div>
</EuiPanel>
</EuiThemeProvider>
</EuiFlexItem>

43
x-pack/plugins/search_indices/public/components/start/create_index_code.tsx
View file

@ -4,20 +4,22 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { useMemo, useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { TryInConsoleButton } from '@kbn/try-in-console';
import { useKibana } from '../../hooks/use_kibana';
import { CodeSample } from './code_sample';
import { CreateIndexFormState } from './types';
import { AnalyticsEvents } from '../../analytics/constants';
import { Languages, AvailableLanguages, LanguageOptions } from '../../code_examples';
import { DenseVectorSeverlessCodeExamples } from '../../code_examples/create_index';
import { useUsageTracker } from '../../hooks/use_usage_tracker';
import { useKibana } from '../../hooks/use_kibana';
import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url';
import { LanguageSelector } from '../shared/language_selector';
import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url';
import { CodeSample } from './code_sample';
import { CreateIndexFormState } from './types';
export interface CreateIndexCodeViewProps {
createIndexForm: CreateIndexFormState;
@ -28,10 +30,21 @@ const SelectedCodeExamples = DenseVectorSeverlessCodeExamples;
export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProps) => {
const { application, share, console: consolePlugin } = useKibana().services;
const usageTracker = useUsageTracker();
// TODO: initing this should be dynamic and possibly saved in the form state
const [selectedLanguage, setSelectedLanguage] = useState<AvailableLanguages>('python');
const onSelectLanguage = useCallback(
(value: AvailableLanguages) => {
setSelectedLanguage(value);
usageTracker.count([
AnalyticsEvents.startCreateIndexLanguageSelect,
`${AnalyticsEvents.startCreateIndexLanguageSelect}_${value}`,
]);
},
[usageTracker]
);
const elasticsearchUrl = useElasticsearchUrl();
const codeParams = useMemo(() => {
return {
indexName: createIndexForm.indexName || undefined,
@ -49,7 +62,7 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp
<LanguageSelector
options={LanguageOptions}
selectedLanguage={selectedLanguage}
onSelectLanguage={(value) => setSelectedLanguage(value)}
onSelectLanguage={onSelectLanguage}
/>
</EuiFlexItem>
{selectedLanguage === 'curl' && (
@ -70,6 +83,12 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp
})}
language="shell"
code={selectedCodeExample.installCommand}
onCodeCopyClick={() => {
usageTracker.click([
AnalyticsEvents.startCreateIndexCodeCopyInstall,
`${AnalyticsEvents.startCreateIndexCodeCopyInstall}_${selectedLanguage}`,
]);
}}
/>
)}
<CodeSample
@ -78,6 +97,14 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp
})}
language={Languages[selectedLanguage].codeBlockLanguage}
code={selectedCodeExample.createIndex(codeParams)}
onCodeCopyClick={() => {
usageTracker.click([
AnalyticsEvents.startCreateIndexCodeCopy,
`${AnalyticsEvents.startCreateIndexCodeCopy}_${selectedLanguage}`,
// TODO: vector should be a parameter when have multiple options
`${AnalyticsEvents.startCreateIndexCodeCopy}_${selectedLanguage}_vector`,
]);
}}
/>
</EuiFlexGroup>
);