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

[Navigation] Add user events for quick actions/dashboard actions (#62220)

Browse Source 
Add fe events for quick actions/dashboard actions
This commit is contained in:
Yaelle Chaudy 2023-01-27 14:11:17 +01:00 committed by GitHub
parent 2f46317a2a
commit 3281eb9223
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/app/core/components/AppChrome/QuickAdd/QuickAdd.test.tsx
View File

@ -4,10 +4,18 @@ import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { NavModelItem, NavSection } from '@grafana/data'; import { NavModelItem, NavSection } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { configureStore } from 'app/store/configureStore'; import { configureStore } from 'app/store/configureStore';
import { QuickAdd } from './QuickAdd'; import { QuickAdd } from './QuickAdd';
jest.mock('@grafana/runtime', () => {
return {
...jest.requireActual('@grafana/runtime'),
reportInteraction: jest.fn(),
};
});
const setup = () => { const setup = () => {
const navBarTree: NavModelItem[] = [ const navBarTree: NavModelItem[] = [
{ {
@ -16,7 +24,7 @@ const setup = () => {
id: 'section1', id: 'section1',
url: 'section1', url: 'section1',
children: [ children: [
{ text: 'New child 1', id: 'child1', url: 'section1/child1', isCreateAction: true }, { text: 'New child 1', id: 'child1', url: '#', isCreateAction: true },
{ text: 'Child2', id: 'child2', url: 'section1/child2' }, { text: 'Child2', id: 'child2', url: 'section1/child2' },
], ],
}, },
@ -50,4 +58,15 @@ describe('QuickAdd', () => {
expect(screen.getByRole('link', { name: 'New child 1' })).toBeInTheDocument(); expect(screen.getByRole('link', { name: 'New child 1' })).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'New child 3' })).toBeInTheDocument(); expect(screen.getByRole('link', { name: 'New child 3' })).toBeInTheDocument();
}); });
it('reports interaction when a menu item is clicked', async () => {
setup();
await userEvent.click(screen.getByRole('button', { name: 'New' }));
await userEvent.click(screen.getByRole('link', { name: 'New child 1' }));
expect(reportInteraction).toHaveBeenCalledWith('grafana_menu_item_clicked', {
url: '#',
from: 'quickadd',
});
});
}); });

8
public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
View File

@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { Menu, Dropdown, useStyles2, useTheme2, ToolbarButton } from '@grafana/ui'; import { Menu, Dropdown, useStyles2, useTheme2, ToolbarButton } from '@grafana/ui';
import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange'; import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
import { useSelector } from 'app/types'; import { useSelector } from 'app/types';
@ -32,7 +33,12 @@ export const QuickAdd = ({}: Props) => {
return ( return (
<Menu> <Menu>
{createActions.map((createAction, index) => ( {createActions.map((createAction, index) => (
<Menu.Item key={index} url={createAction.url} label={createAction.text} /> <Menu.Item
key={index}
url={createAction.url}
label={createAction.text}
onClick={() => reportInteraction('grafana_menu_item_clicked', { url: createAction.url, from: 'quickadd' })}
/>
))} ))}
</Menu> </Menu>
); );

26
public/app/features/search/components/DashboardActions.tsx
View File

@ -1,6 +1,6 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { config } from '@grafana/runtime'; import { config, reportInteraction } from '@grafana/runtime';
import { Menu, Dropdown, Button, Icon } from '@grafana/ui'; import { Menu, Dropdown, Button, Icon } from '@grafana/ui';
import { t } from 'app/core/internationalization'; import { t } from 'app/core/internationalization';
@ -30,13 +30,31 @@ export const DashboardActions: FC<Props> = ({ folderUid, canCreateFolders = fals
return ( return (
<Menu> <Menu>
{canCreateDashboards && ( {canCreateDashboards && (
<Menu.Item url={actionUrl('new')} label={t('search.dashboard-actions.new-dashboard', 'New Dashboard')} /> <Menu.Item
url={actionUrl('new')}
label={t('search.dashboard-actions.new-dashboard', 'New Dashboard')}
onClick={() =>
reportInteraction('grafana_menu_item_clicked', { url: actionUrl('new'), from: '/dashboards' })
}
/>
)} )}
{canCreateFolders && (config.featureToggles.nestedFolders || !folderUid) && ( {canCreateFolders && (config.featureToggles.nestedFolders || !folderUid) && (
<Menu.Item url={actionUrl('new_folder')} label={t('search.dashboard-actions.new-folder', 'New Folder')} /> <Menu.Item
url={actionUrl('new_folder')}
label={t('search.dashboard-actions.new-folder', 'New Folder')}
onClick={() =>
reportInteraction('grafana_menu_item_clicked', { url: actionUrl('new_folder'), from: '/dashboards' })
}
/>
)} )}
{canCreateDashboards && ( {canCreateDashboards && (
<Menu.Item url={actionUrl('import')} label={t('search.dashboard-actions.import', 'Import')} /> <Menu.Item
url={actionUrl('import')}
label={t('search.dashboard-actions.import', 'Import')}
onClick={() =>
reportInteraction('grafana_menu_item_clicked', { url: actionUrl('import'), from: '/dashboards' })
}
/>
)} )}
</Menu> </Menu>
); );