Loki: Add user analytics for query editor mode (#49619)

* Add reportInteraction call

* Update public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
This commit is contained in:
Andrej Ocenas 2022-06-06 10:38:45 +02:00 committed by GitHub
parent 8cdfef4796
commit 37aedd6906
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 2 deletions

View File

@ -10,6 +10,13 @@ import { LokiQuery, LokiQueryType } from '../../types';
import { LokiQueryEditorSelector } from './LokiQueryEditorSelector';
jest.mock('@grafana/runtime', () => {
return {
...jest.requireActual('@grafana/runtime'),
reportInteraction: jest.fn(),
};
});
jest.mock('app/core/store', () => {
return {
get() {

View File

@ -2,6 +2,7 @@ import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
import { LoadingState } from '@grafana/data';
import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
import { reportInteraction } from '@grafana/runtime';
import { Button, ConfirmModal } from '@grafana/ui';
import { QueryEditorModeToggle } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle';
import { QueryHeaderSwitch } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch';
@ -19,7 +20,7 @@ import { LokiQueryBuilderOptions } from './LokiQueryBuilderOptions';
import { LokiQueryCodeEditor } from './LokiQueryCodeEditor';
export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props) => {
const { onChange, onRunQuery, data } = props;
const { onChange, onRunQuery, data, app } = props;
const [parseModalOpen, setParseModalOpen] = useState(false);
const [dataIsStale, setDataIsStale] = useState(false);
@ -30,6 +31,13 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
const onEditorModeChange = useCallback(
(newEditorMode: QueryEditorMode) => {
reportInteraction('grafana_loki_editor_mode_clicked', {
newEditor: newEditorMode,
previousEditor: query.editorMode ?? '',
newQuery: !query.expr,
app: app ?? '',
});
if (newEditorMode === QueryEditorMode.Builder) {
const result = buildVisualQueryFromString(query.expr || '');
// If there are errors, give user a chance to decide if they want to go to builder as that can loose some data.
@ -40,7 +48,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
}
changeEditorMode(query, newEditorMode, onChange);
},
[onChange, query]
[onChange, query, app]
);
useEffect(() => {