InfluxDB: Add tracking events to v1 config page (#105911)

* Add tracking events to orginial influxdb config page

* Add tracking file

* Lint

* Remove unused import

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, SelectableValue<InfluxVersion>> = {
   [InfluxVersion.InfluxQL]: {
@@ -117,6 +118,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
               options={versions}
               defaultValue={versionMap[InfluxVersion.InfluxQL]}
               onChange={this.onVersionChanged}
+              onBlur={() =>
+                trackInfluxDBConfigV1QueryLanguageSelection({ version: this.props.options.jsonData.version || '' })
+              }
             />
           </Field>
         </FieldSet>

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<InfluxOptions, InfluxSecureJsonData>;
 
@@ -29,6 +34,7 @@ export const InfluxFluxConfig = (props: Props) => {
             className="width-20"
             value={jsonData.organization || ''}
             onChange={onUpdateDatasourceJsonDataOption(props, 'organization')}
+            onBlur={trackInfluxDBConfigV1FluxOrgInputField}
           />
         </InlineField>
       </InlineFieldRow>
@@ -42,6 +48,7 @@ export const InfluxFluxConfig = (props: Props) => {
             className="width-20"
             onReset={() => updateDatasourcePluginResetOption(props, 'token')}
             onChange={onUpdateDatasourceSecureJsonDataOption(props, 'token')}
+            onBlur={trackInfluxDBConfigV1FluxTokenInputField}
           />
         </InlineField>
       </InlineFieldRow>
@@ -52,6 +59,7 @@ export const InfluxFluxConfig = (props: Props) => {
             placeholder="default bucket"
             value={jsonData.defaultBucket || ''}
             onChange={onUpdateDatasourceJsonDataOption(props, 'defaultBucket')}
+            onBlur={trackInfluxDBConfigV1FluxDefaultBucketInputField}
           />
         </InlineField>
       </InlineFieldRow>

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}
         />
       </Field>
       <Field
@@ -80,6 +86,7 @@ export const InfluxInfluxQLConfig = (props: Props) => {
           className="width-20"
           value={options.user || ''}
           onChange={onUpdateDatasourceOption(props, 'user')}
+          onBlur={trackInfluxDBConfigV1InfluxQLUserInputField}
         />
       </Field>
       <Field
@@ -96,6 +103,7 @@ export const InfluxInfluxQLConfig = (props: Props) => {
           className="width-20"
           onReset={() => updateDatasourcePluginResetOption(props, 'password')}
           onChange={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
+          onBlur={trackInfluxDBConfigV1InfluxQLPasswordInputField}
         />
       </Field>
       <Field

public/app/plugins/datasource/influxdb/components/editor/config/InfluxSQLConfig.tsx

@@ -12,6 +12,7 @@ import { Field, InlineLabel, InlineSwitch, Input, SecretInput, useStyles2 } from
 import { InfluxOptions, InfluxSecureJsonData } from '../../../types';
 
 import { WIDTH_SHORT } from './constants';
+import { trackInfluxDBConfigV1SQLDatabaseInputField, trackInfluxDBConfigV1SQLTokenInputField } from './trackingv1';
 
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>;
 
@@ -43,6 +44,7 @@ export const InfluxSqlConfig = (props: Props) => {
               },
             });
           }}
+          onBlur={trackInfluxDBConfigV1SQLDatabaseInputField}
         />
       </Field>
       <Field horizontal label={<InlineLabel width={WIDTH_SHORT}>Token</InlineLabel>} 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}
         />
       </Field>
       <Field

public/app/plugins/datasource/influxdb/components/editor/config/trackingv1.ts

@@ -0,0 +1,40 @@
+import { reportInteraction } from '@grafana/runtime';
+
+export const trackInfluxDBConfigV1QueryLanguageSelection = (props: { version: string }) => {
+  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');
+};