diff --git a/packages/grafana-runtime/src/services/EchoSrv.ts b/packages/grafana-runtime/src/services/EchoSrv.ts index 2804574af85..641f4aaae68 100644 --- a/packages/grafana-runtime/src/services/EchoSrv.ts +++ b/packages/grafana-runtime/src/services/EchoSrv.ts @@ -24,17 +24,25 @@ export interface EchoMeta { */ sessionId: string; /** - * The current users username used to login into Grafana e.g. email. + * The current user's username used to login into Grafana e.g. email. */ userLogin: string; /** - * The current users unique identifier. + * The current user's unique identifier. */ userId: number; /** * True when user is logged in into Grafana. */ userSignedIn: boolean; + /** + * Current user's role + */ + orgRole: string | ''; + /** + * Current user's org + */ + orgId: number; /** * A millisecond epoch */ diff --git a/public/app/core/services/echo/Echo.ts b/public/app/core/services/echo/Echo.ts index 5640e870cc9..baa22c22aa4 100644 --- a/public/app/core/services/echo/Echo.ts +++ b/public/app/core/services/echo/Echo.ts @@ -72,6 +72,8 @@ export class Echo implements EchoSrv { userId: contextSrv.user.id, userLogin: contextSrv.user.login, userSignedIn: contextSrv.user.isSignedIn, + orgRole: contextSrv.user.orgRole, + orgId: contextSrv.user.orgId, screenSize: { width: window.innerWidth, height: window.innerHeight, diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx index 62033211381..30e999ca90d 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx @@ -11,7 +11,7 @@ import { PluginType, } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { config, locationService } from '@grafana/runtime'; +import { config, locationService, reportInteraction } from '@grafana/runtime'; import { DeepPartial, SceneComponentProps, @@ -33,6 +33,7 @@ import { isUsingAngularPanelPlugin } from '../scene/angular/AngularDeprecation'; import { PanelOptions } from './PanelOptions'; import { PanelVizTypePicker } from './PanelVizTypePicker'; +import { INTERACTION_EVENT_NAME, INTERACTION_ITEM } from './interaction'; export interface PanelOptionsPaneState extends SceneObjectState { isVizPickerOpen?: boolean; @@ -50,6 +51,10 @@ export class PanelOptionsPane extends SceneObjectBase { private _cachedPluginOptions: Record = {}; onToggleVizPicker = () => { + reportInteraction(INTERACTION_EVENT_NAME, { + item: INTERACTION_ITEM.TOGGLE_DROPDOWN, + open: !this.state.isVizPickerOpen, + }); this.setState({ isVizPickerOpen: !this.state.isVizPickerOpen }); }; @@ -57,6 +62,10 @@ export class PanelOptionsPane extends SceneObjectBase { const panel = this.state.panelRef.resolve(); const { options: prevOptions, fieldConfig: prevFieldConfig, pluginId: prevPluginId } = panel.state; const pluginId = options.pluginId; + reportInteraction(INTERACTION_EVENT_NAME, { + item: INTERACTION_ITEM.SELECT_PANEL_PLUGIN, + plugin_id: pluginId, + }); // clear custom options let newFieldConfig: FieldConfigSource = { diff --git a/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx b/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx index 2e180642bc9..aee54b2f90e 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx @@ -4,6 +4,7 @@ import { useLocalStorage } from 'react-use'; import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; +import { reportInteraction } from '@grafana/runtime'; import { VizPanel } from '@grafana/scenes'; import { Button, CustomScrollbar, Field, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui'; import { LS_VISUALIZATION_SELECT_TAB_KEY, LS_WIDGET_SELECT_TAB_KEY } from 'app/core/constants'; @@ -14,6 +15,8 @@ import { VizTypeChangeDetails } from 'app/features/panel/components/VizTypePicke import { PanelModelCompatibilityWrapper } from '../utils/PanelModelCompatibilityWrapper'; +import { INTERACTION_EVENT_NAME, INTERACTION_ITEM } from './interaction'; + export interface Props { data?: PanelData; panel: VizPanel; @@ -25,6 +28,13 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose }: Props) { const styles = useStyles2(getStyles); const [searchQuery, setSearchQuery] = useState(''); + const handleSearchChange = (value: string) => { + if (value) { + reportInteraction(INTERACTION_EVENT_NAME, { item: INTERACTION_ITEM.SEARCH, query: value }); + } + setSearchQuery(value); + }; + const isWidgetEnabled = false; const tabKey = isWidgetEnabled ? LS_WIDGET_SELECT_TAB_KEY : LS_VISUALIZATION_SELECT_TAB_KEY; const defaultTab = isWidgetEnabled ? VisualizationSelectPaneTab.Widgets : VisualizationSelectPaneTab.Visualizations; @@ -40,6 +50,14 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose }: Props) { [] ); const [listMode, setListMode] = useLocalStorage(tabKey, defaultTab); + const handleListModeChange = (value: VisualizationSelectPaneTab) => { + reportInteraction(INTERACTION_EVENT_NAME, { + item: INTERACTION_ITEM.CHANGE_TAB, + tab: VisualizationSelectPaneTab[value], + }); + setListMode(value); + }; + useEffect(() => { if (listMode && !supportedListModes.has(listMode)) { setListMode(defaultTab); @@ -57,7 +75,7 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose }: Props) { @@ -71,7 +89,7 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose }: Props) { /> - + {listMode === VisualizationSelectPaneTab.Visualizations && ( diff --git a/public/app/features/dashboard-scene/panel-edit/interaction.ts b/public/app/features/dashboard-scene/panel-edit/interaction.ts new file mode 100644 index 00000000000..4ba515b5223 --- /dev/null +++ b/public/app/features/dashboard-scene/panel-edit/interaction.ts @@ -0,0 +1,7 @@ +export const INTERACTION_EVENT_NAME = 'dashboards_panel_plugin_picker_clicked'; +export const INTERACTION_ITEM = { + TOGGLE_DROPDOWN: 'toggle_panel_plugin_picker', + SELECT_PANEL_PLUGIN: 'select_panel_plugin', + CHANGE_TAB: 'change_tab', // for ref - PanelVizTypePicker + SEARCH: 'search', // for ref - PanelVizTypePicker +};