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

[Chore] Refactor Panel Menu Rudderstack events and add missing instrumentation (#66850)

Browse Source
This commit is contained in:
Alexa V
2023-04-28 12:19:39 +02:00
committed by GitHub
parent 236862a07c
commit b4a7427f31
9 changed files with 63 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
View File

@@ -229,6 +229,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
hoverHeader={panelChromeProps.hasOverlayHeader()}
displayMode={transparent ? 'transparent' : 'default'}
onCancelQuery={panelChromeProps.onCancelQuery}
onOpenMenu={panelChromeProps.onOpenMenu}
>
{() => <div ref={(element) => (this.element = element)} className="panel-height-helper" />}
</PanelChrome>

7
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
View File

@@ -3,6 +3,7 @@ import React from 'react';
import { DataLink, GrafanaTheme2, PanelData } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { reportInteraction } from '@grafana/runtime';
import { Icon, useStyles2, ClickOutsideWrapper } from '@grafana/ui';
import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
@@ -33,6 +34,10 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
const className = cx('panel-header', !(isViewing || isEditing) ? 'grid-drag-handle' : '');
const styles = useStyles2(panelStyles);
const onOpenMenu = () => {
reportInteraction('dashboards_panelheader_menu', { item: 'menu' });
};
return (
<>
<PanelHeaderLoadingIndicator state={data.state} onClick={onCancelQuery} />
@@ -45,7 +50,7 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
error={error}
/>
<div className={className}>
<PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)}>
<PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)} onOpenMenu={onOpenMenu}>
{({ closeMenu, panelMenuOpen }) => {
return (
<ClickOutsideWrapper onClick={closeMenu} parent={document}>

8
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
View File

@@ -9,9 +9,10 @@ interface PanelHeaderMenuTriggerApi {
interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
children: (props: PanelHeaderMenuTriggerApi) => ReactElement;
onOpenMenu?: () => void;
}
export function PanelHeaderMenuTrigger({ children, ...divProps }: Props) {
export function PanelHeaderMenuTrigger({ children, onOpenMenu, ...divProps }: Props) {
const clickCoordinates = useRef<CartesianCoords2D>({ x: 0, y: 0 });
const [panelMenuOpen, setPanelMenuOpen] = useState<boolean>(false);
@@ -22,8 +23,11 @@ export function PanelHeaderMenuTrigger({ children, ...divProps }: Props) {
}
setPanelMenuOpen(!panelMenuOpen);
if (panelMenuOpen) {
onOpenMenu?.();
}
},
[panelMenuOpen, setPanelMenuOpen]
[panelMenuOpen, setPanelMenuOpen, onOpenMenu]
);
const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) => {

1
public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx
View File

@@ -646,6 +646,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
hoverHeader={panelChromeProps.hasOverlayHeader()}
displayMode={transparent ? 'transparent' : 'default'}
onCancelQuery={panelChromeProps.onCancelQuery}
onOpenMenu={panelChromeProps.onOpenMenu}
>
{(innerWidth, innerHeight) => (
<>