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

ReturnToPrevious: Add interaction reporting (#81948)

Browse Source 
* Add analytics for return to previous

* fix typos lol
This commit is contained in:
Josh Hunt 2024-02-08 15:44:22 +00:00 committed by GitHub
parent 71497c98e8
commit 732f9cacb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/core/components/AppChrome/AppChrome.tsx
View File

@ -58,9 +58,10 @@ export function AppChrome({ children }: Props) {
const shouldShowReturnToPrevious = const shouldShowReturnToPrevious =
config.featureToggles.returnToPrevious && state.returnToPrevious && url !== state.returnToPrevious.href; config.featureToggles.returnToPrevious && state.returnToPrevious && url !== state.returnToPrevious.href;
// Clear returnToPrevious when the page is manually navigated to
useEffect(() => { useEffect(() => {
if (state.returnToPrevious && url === state.returnToPrevious.href) { if (state.returnToPrevious && url === state.returnToPrevious.href) {
chrome.clearReturnToPrevious(); chrome.clearReturnToPrevious('auto_dismissed');
} }
// We only want to pay attention when the location changes // We only want to pay attention when the location changes
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps

16
public/app/core/components/AppChrome/AppChromeService.tsx
View File

@ -90,11 +90,25 @@ export class AppChromeService {
} }
public setReturnToPrevious = (returnToPrevious: ReturnToPreviousProps) => { public setReturnToPrevious = (returnToPrevious: ReturnToPreviousProps) => {
const previousPage = this.state.getValue().returnToPrevious;
reportInteraction('grafana_return_to_previous_button_created', {
page: returnToPrevious.href,
previousPage: previousPage?.href,
});
this.update({ returnToPrevious }); this.update({ returnToPrevious });
window.sessionStorage.setItem('returnToPrevious', JSON.stringify(returnToPrevious)); window.sessionStorage.setItem('returnToPrevious', JSON.stringify(returnToPrevious));
}; };
public clearReturnToPrevious = () => { public clearReturnToPrevious = (interactionAction: 'clicked' | 'dismissed' | 'auto_dismissed') => {
const existingRtp = this.state.getValue().returnToPrevious;
if (existingRtp) {
reportInteraction('grafana_return_to_previous_button_dismissed', {
action: interactionAction,
page: existingRtp.href,
});
}
this.update({ returnToPrevious: undefined }); this.update({ returnToPrevious: undefined });
window.sessionStorage.removeItem('returnToPrevious'); window.sessionStorage.removeItem('returnToPrevious');
}; };

19
public/app/core/components/AppChrome/ReturnToPrevious/ReturnToPrevious.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React from 'react'; import React, { useCallback } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { locationService } from '@grafana/runtime'; import { locationService, reportInteraction } from '@grafana/runtime';
import { useStyles2 } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui';
import { useGrafana } from 'app/core/context/GrafanaContext'; import { useGrafana } from 'app/core/context/GrafanaContext';
import { t } from 'app/core/internationalization'; import { t } from 'app/core/internationalization';
@ -17,13 +17,16 @@ export interface ReturnToPreviousProps {
export const ReturnToPrevious = ({ href, title }: ReturnToPreviousProps) => { export const ReturnToPrevious = ({ href, title }: ReturnToPreviousProps) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const { chrome } = useGrafana(); const { chrome } = useGrafana();
const handleOnClick = () => {
const handleOnClick = useCallback(() => {
locationService.push(href); locationService.push(href);
chrome.clearReturnToPrevious(); chrome.clearReturnToPrevious('clicked');
}; }, [href, chrome]);
const handleOnDismiss = () => {
chrome.clearReturnToPrevious(); const handleOnDismiss = useCallback(() => {
}; reportInteraction('grafana_return_to_previous_button_dismissed', { action: 'dismissed', page: href });
chrome.clearReturnToPrevious('dismissed');
}, [href, chrome]);
return ( return (
<div className={styles.returnToPrevious}> <div className={styles.returnToPrevious}>