From 907e3efa550bea646a0573aabe2ca9c37a36c2c6 Mon Sep 17 00:00:00 2001 From: "Alyssa (Bull) Joyner" <58453566+alyssabull@users.noreply.github.com> Date: Thu, 26 Jun 2025 13:37:15 -0600 Subject: [PATCH] InfluxDB: Add tracking events to v1 config page (#105911) * Add tracking events to orginial influxdb config page * Add tracking file * Lint * Remove unused import --- .../components/editor/config/ConfigEditor.tsx | 4 ++ .../editor/config/InfluxFluxConfig.tsx | 8 ++++ .../editor/config/InfluxInfluxQLConfig.tsx | 8 ++++ .../editor/config/InfluxSQLConfig.tsx | 3 ++ .../components/editor/config/trackingv1.ts | 40 +++++++++++++++++++ 5 files changed, 63 insertions(+) create mode 100644 public/app/plugins/datasource/influxdb/components/editor/config/trackingv1.ts diff --git a/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx index db1296ae12c..bdfa310fa66 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx @@ -16,6 +16,7 @@ import { InfluxOptions, InfluxOptionsV1, InfluxVersion } from '../../../types'; import { InfluxFluxConfig } from './InfluxFluxConfig'; import { InfluxInfluxQLConfig } from './InfluxInfluxQLConfig'; import { InfluxSqlConfig } from './InfluxSQLConfig'; +import { trackInfluxDBConfigV1QueryLanguageSelection } from './trackingv1'; const versionMap: Record> = { [InfluxVersion.InfluxQL]: { @@ -117,6 +118,9 @@ export class ConfigEditor extends PureComponent { options={versions} defaultValue={versionMap[InfluxVersion.InfluxQL]} onChange={this.onVersionChanged} + onBlur={() => + trackInfluxDBConfigV1QueryLanguageSelection({ version: this.props.options.jsonData.version || '' }) + } /> diff --git a/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx b/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx index 61a009e0798..8753ad7a9e9 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx @@ -11,6 +11,11 @@ import { InlineField, InlineFieldRow, Input, SecretInput } from '@grafana/ui'; import { InfluxOptions, InfluxSecureJsonData } from '../../../types'; import { WIDTH_SHORT } from './constants'; +import { + trackInfluxDBConfigV1FluxDefaultBucketInputField, + trackInfluxDBConfigV1FluxOrgInputField, + trackInfluxDBConfigV1FluxTokenInputField, +} from './trackingv1'; export type Props = DataSourcePluginOptionsEditorProps; @@ -29,6 +34,7 @@ export const InfluxFluxConfig = (props: Props) => { className="width-20" value={jsonData.organization || ''} onChange={onUpdateDatasourceJsonDataOption(props, 'organization')} + onBlur={trackInfluxDBConfigV1FluxOrgInputField} /> @@ -42,6 +48,7 @@ export const InfluxFluxConfig = (props: Props) => { className="width-20" onReset={() => updateDatasourcePluginResetOption(props, 'token')} onChange={onUpdateDatasourceSecureJsonDataOption(props, 'token')} + onBlur={trackInfluxDBConfigV1FluxTokenInputField} /> @@ -52,6 +59,7 @@ export const InfluxFluxConfig = (props: Props) => { placeholder="default bucket" value={jsonData.defaultBucket || ''} onChange={onUpdateDatasourceJsonDataOption(props, 'defaultBucket')} + onBlur={trackInfluxDBConfigV1FluxDefaultBucketInputField} /> diff --git a/public/app/plugins/datasource/influxdb/components/editor/config/InfluxInfluxQLConfig.tsx b/public/app/plugins/datasource/influxdb/components/editor/config/InfluxInfluxQLConfig.tsx index ae5f83dbf9d..fd839a8b986 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/config/InfluxInfluxQLConfig.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/config/InfluxInfluxQLConfig.tsx @@ -16,6 +16,11 @@ import { Alert, Field, InlineLabel, Input, SecretInput, Select, useStyles2 } fro import { InfluxOptions, InfluxSecureJsonData } from '../../../types'; import { WIDTH_SHORT } from './constants'; +import { + trackInfluxDBConfigV1InfluxQLDatabaseInputField, + trackInfluxDBConfigV1InfluxQLPasswordInputField, + trackInfluxDBConfigV1InfluxQLUserInputField, +} from './trackingv1'; const httpModes: SelectableValue[] = [ { label: 'GET', value: 'GET' }, @@ -66,6 +71,7 @@ export const InfluxInfluxQLConfig = (props: Props) => { }, }); }} + onBlur={trackInfluxDBConfigV1InfluxQLDatabaseInputField} /> { className="width-20" value={options.user || ''} onChange={onUpdateDatasourceOption(props, 'user')} + onBlur={trackInfluxDBConfigV1InfluxQLUserInputField} /> { className="width-20" onReset={() => updateDatasourcePluginResetOption(props, 'password')} onChange={onUpdateDatasourceSecureJsonDataOption(props, 'password')} + onBlur={trackInfluxDBConfigV1InfluxQLPasswordInputField} /> ; @@ -43,6 +44,7 @@ export const InfluxSqlConfig = (props: Props) => { }, }); }} + onBlur={trackInfluxDBConfigV1SQLDatabaseInputField} /> Token} className={styles.horizontalField}> @@ -54,6 +56,7 @@ export const InfluxSqlConfig = (props: Props) => { onReset={() => updateDatasourcePluginResetOption(props, 'token')} onChange={onUpdateDatasourceSecureJsonDataOption(props, 'token')} isConfigured={Boolean(secureJsonFields && secureJsonFields.token)} + onBlur={trackInfluxDBConfigV1SQLTokenInputField} /> { + reportInteraction('influxdb-configv1-query-language-dropdown', props); +}; + +// Flux Database Fields +export const trackInfluxDBConfigV1FluxOrgInputField = () => { + reportInteraction('influxdb-configv1-flux-dbdetails-organization-input-field'); +}; + +export const trackInfluxDBConfigV1FluxTokenInputField = () => { + reportInteraction('influxdb-configv1-flux-dbdetails-token-input-field'); +}; + +export const trackInfluxDBConfigV1FluxDefaultBucketInputField = () => { + reportInteraction('influxdb-configv1-flux-dbdetails-default-bucket-input-field'); +}; + +// InfluxQL Database Fields +export const trackInfluxDBConfigV1InfluxQLDatabaseInputField = () => { + reportInteraction('influxdb-configv1-influxql-dbdetails-database-input-field'); +}; + +export const trackInfluxDBConfigV1InfluxQLUserInputField = () => { + reportInteraction('influxdb-configv1-influxql-dbdetails-user-input-field'); +}; + +export const trackInfluxDBConfigV1InfluxQLPasswordInputField = () => { + reportInteraction('influxdb-configv1-influxql-dbdetails-password-input-field'); +}; + +// SQL Database Fields +export const trackInfluxDBConfigV1SQLDatabaseInputField = () => { + reportInteraction('influxdb-configv1-sql-dbdetails-database-input-field'); +}; + +export const trackInfluxDBConfigV1SQLTokenInputField = () => { + reportInteraction('influxdb-configv1-sql-dbdetails-token-input-field'); +};