IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus: Add report interaction for editor modes (#47940)

Browse Source 
* Prometheus: Add report interaction for editor modes

* Add new query

* Fix test

* Update public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx

* Add app to feature tracking

* Update
This commit is contained in:
Ivana Huckova 2022-04-22 10:46:16 +02:00 committed by GitHub
parent 6899f23a22
commit 28665a869b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
View File

@ -18,6 +18,13 @@ jest.mock('../../components/monaco-query-field/MonacoQueryFieldWrapper', () => {
}; };
}); });
jest.mock('@grafana/runtime', () => {
return {
...jest.requireActual('@grafana/runtime'),
reportInteraction: jest.fn(),
};
});
const defaultQuery = { const defaultQuery = {
refId: 'A', refId: 'A',
expr: 'metric{label1="foo", label2="bar"}', expr: 'metric{label1="foo", label2="bar"}',

14
public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
View File

@ -1,5 +1,6 @@
import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'; import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
import { LoadingState } from '@grafana/data'; import { LoadingState } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental'; import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
import { Button, ConfirmModal } from '@grafana/ui'; import { Button, ConfirmModal } from '@grafana/ui';
import { PromQueryEditorProps } from '../../components/types'; import { PromQueryEditorProps } from '../../components/types';
@ -17,15 +18,22 @@ import { PromQuery } from '../../types';
import { FeedbackLink } from '../shared/FeedbackLink'; import { FeedbackLink } from '../shared/FeedbackLink';
export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props) => { export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props) => {
const { onChange, onRunQuery, data } = props; const { onChange, onRunQuery, data, app } = props;
const [parseModalOpen, setParseModalOpen] = useState(false); const [parseModalOpen, setParseModalOpen] = useState(false);
const [dataIsStale, setDataIsStale] = useState(false); const [dataIsStale, setDataIsStale] = useState(false);
const query = getQueryWithDefaults(props.query, props.app); const query = getQueryWithDefaults(props.query, app);
const editorMode = query.editorMode!; const editorMode = query.editorMode!;
const onEditorModeChange = useCallback( const onEditorModeChange = useCallback(
(newMetricEditorMode: QueryEditorMode) => { (newMetricEditorMode: QueryEditorMode) => {
reportInteraction('user_grafana_prometheus_editor_mode_clicked', {
newEditor: newMetricEditorMode,
previousEditor: query.editorMode ?? '',
newQuery: !query.expr,
app: app ?? '',
});
if (newMetricEditorMode === QueryEditorMode.Builder) { if (newMetricEditorMode === QueryEditorMode.Builder) {
const result = buildVisualQueryFromString(query.expr || ''); 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. // If there are errors, give user a chance to decide if they want to go to builder as that can loose some data.
@ -36,7 +44,7 @@ export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props)
} }
changeEditorMode(query, newMetricEditorMode, onChange); changeEditorMode(query, newMetricEditorMode, onChange);
}, },
[onChange, query] [onChange, query, app]
); );
useEffect(() => { useEffect(() => {