ShareModal: Differentiate between panel and dashboard share for tracking (#86992)

2024-04-26 15:35:39 -03:00
parent d5fde99c6d
commit b77763bbcc
12 changed files with 48 additions and 18 deletions
@@ -9,7 +9,7 @@ import { Alert, ClipboardButton, Field, FieldSet, Icon, Input, Switch } from '@g
 import { t, Trans } from 'app/core/internationalization';
 import { createShortLink } from 'app/core/utils/shortLinks';
 import { ThemePicker } from 'app/features/dashboard/components/ShareModal/ThemePicker';
-import { shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
+import { getTrackingSource, shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';

 import { DashboardInteractions } from '../utils/interactions';
 import { getDashboardUrl } from '../utils/urlBuilders';
@@ -131,6 +131,7 @@ export class ShareLinkTab extends SceneObjectBase<ShareLinkTabState> {
      currentTimeRange: this.state.useLockedTime,
      theme: this.state.selectedTheme,
      shortenURL: this.state.useShortUrl,
+      shareResource: getTrackingSource(this.state.panelRef),
    });
  };
 }
@@ -7,6 +7,7 @@ import { contextSrv } from 'app/core/core';
 import { t } from 'app/core/internationalization';
 import { isPublicDashboardsEnabled } from 'app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils';

+import { getTrackingSource } from '../../dashboard/components/ShareModal/utils';
 import { DashboardScene } from '../scene/DashboardScene';
 import { LibraryVizPanel } from '../scene/LibraryVizPanel';
 import { DashboardInteractions } from '../utils/interactions';
@@ -92,7 +93,7 @@ export class ShareModal extends SceneObjectBase<ShareModalState> implements Moda
  };

  onChangeTab: ComponentProps<typeof ModalTabsHeader>['onChangeTab'] = (tab) => {
-    DashboardInteractions.sharingTabChanged({ item: tab.value });
+    DashboardInteractions.sharingTabChanged({ item: tab.value, shareResource: getTrackingSource(this.state.panelRef) });
    this.setState({ activeTab: tab.value });
  };
 }
@@ -6,7 +6,7 @@ import { getBackendSrv } from '@grafana/runtime';
 import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
 import { Button, ClipboardButton, Field, Input, Modal, RadioButtonGroup } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
-import { shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
+import { getTrackingSource, shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
 import { getDashboardSnapshotSrv, SnapshotSharingOptions } from 'app/features/dashboard/services/SnapshotSrv';

 import { transformSceneToSaveModel, trimDashboardForSnapshot } from '../serialization/transformSceneToSaveModel';
@@ -124,9 +124,15 @@ export class ShareSnapshotTab extends SceneObjectBase<ShareSnapshotTabState> {
      return await getDashboardSnapshotSrv().create(cmdData);
    } finally {
      if (external) {
-        DashboardInteractions.publishSnapshotClicked({ expires: cmdData.expires });
+        DashboardInteractions.publishSnapshotClicked({
+          expires: cmdData.expires,
+          shareResource: getTrackingSource(this.state.panelRef),
+        });
      } else {
-        DashboardInteractions.publishSnapshotLocalClicked({ expires: cmdData.expires });
+        DashboardInteractions.publishSnapshotLocalClicked({
+          expires: cmdData.expires,
+          shareResource: getTrackingSource(this.state.panelRef),
+        });
      }
    }
  };
@@ -9,7 +9,7 @@ import { DashboardInteractions } from 'app/features/dashboard-scene/utils/intera

 import { ThemePicker } from './ThemePicker';
 import { ShareModalTabProps } from './types';
-import { buildIframeHtml } from './utils';
+import { buildIframeHtml, getTrackingSource } from './utils';

 interface Props extends Omit<ShareModalTabProps, 'panel' | 'dashboard'> {
  panel?: { timeFrom?: string; id: number };
@@ -24,7 +24,7 @@ export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeH
  const [iframeHtml, setIframeHtml] = useState('');

  useEffectOnce(() => {
-    reportInteraction('grafana_dashboards_embed_share_viewed');
+    reportInteraction('grafana_dashboards_embed_share_viewed', { shareResource: getTrackingSource(panel) });
  });

  useEffect(() => {
@@ -85,6 +85,7 @@ export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeH
            DashboardInteractions.embedSnippetCopy({
              currentTimeRange: useCurrentTimeRange,
              theme: selectedTheme,
+              shareResource: getTrackingSource(panel),
            });
          }}
        >
@@ -10,6 +10,7 @@ import { ShowModalReactEvent } from 'app/types/events';

 import { ViewJsonModal } from './ViewJsonModal';
 import { ShareModalTabProps } from './types';
+import { getTrackingSource } from './utils';

 interface Props extends ShareModalTabProps {}

@@ -39,7 +40,10 @@ export class ShareExport extends PureComponent<Props, State> {
    const { dashboard } = this.props;
    const { shareExternally } = this.state;

-    DashboardInteractions.exportSaveJsonClicked({ externally: shareExternally });
+    DashboardInteractions.exportSaveJsonClicked({
+      externally: shareExternally,
+      shareResource: getTrackingSource(this.props.panel),
+    });

    if (shareExternally) {
      this.exporter.makeExportable(dashboard).then((dashboardJson) => {
@@ -53,7 +57,10 @@ export class ShareExport extends PureComponent<Props, State> {
  onViewJson = () => {
    const { dashboard } = this.props;
    const { shareExternally } = this.state;
-    DashboardInteractions.exportViewJsonClicked({ externally: shareExternally });
+    DashboardInteractions.exportViewJsonClicked({
+      externally: shareExternally,
+      shareResource: getTrackingSource(this.props.panel),
+    });

    if (shareExternally) {
      this.exporter.makeExportable(dashboard).then((dashboardJson) => {
@@ -5,6 +5,7 @@ import { Trans } from 'app/core/internationalization';
 import { AddLibraryPanelContents } from 'app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal';

 import { ShareModalTabProps } from './types';
+import { getTrackingSource } from './utils';

 interface Props extends ShareModalTabProps {
  initialFolderUid?: string;
@@ -12,8 +13,8 @@ interface Props extends ShareModalTabProps {

 export const ShareLibraryPanel = ({ panel, initialFolderUid, onDismiss }: Props) => {
  useEffect(() => {
-    reportInteraction('grafana_dashboards_library_panel_share_viewed');
-  }, []);
+    reportInteraction('grafana_dashboards_library_panel_share_viewed', { shareResource: getTrackingSource(panel) });
+  }, [panel]);

  if (!panel) {
    return null;
@@ -8,7 +8,7 @@ import { DashboardInteractions } from 'app/features/dashboard-scene/utils/intera

 import { ThemePicker } from './ThemePicker';
 import { ShareModalTabProps } from './types';
-import { buildImageUrl, buildShareUrl } from './utils';
+import { buildImageUrl, buildShareUrl, getTrackingSource } from './utils';

 export interface Props extends ShareModalTabProps {}

@@ -30,7 +30,6 @@ export class ShareLink extends PureComponent<Props, State> {
      shareUrl: '',
      imageUrl: '',
    };
-    this.onCopy = this.onCopy.bind(this);
  }

  componentDidMount() {
@@ -74,13 +73,14 @@ export class ShareLink extends PureComponent<Props, State> {
    return this.state.shareUrl;
  };

-  onCopy() {
+  onCopy = () => {
    DashboardInteractions.shareLinkCopied({
      currentTimeRange: this.state.useCurrentTimeRange,
      theme: this.state.selectedTheme,
      shortenURL: this.state.useShortUrl,
+      shareResource: getTrackingSource(this.props.panel),
    });
-  }
+  };

  render() {
    const { panel, dashboard } = this.props;
@@ -16,7 +16,7 @@ import { ShareLibraryPanel } from './ShareLibraryPanel';
 import { ShareLink } from './ShareLink';
 import { ShareSnapshot } from './ShareSnapshot';
 import { ShareModalTabModel } from './types';
-import { shareDashboardType } from './utils';
+import { getTrackingSource, shareDashboardType } from './utils';

 const customDashboardTabs: ShareModalTabModel[] = [];
 const customPanelTabs: ShareModalTabModel[] = [];
@@ -104,6 +104,7 @@ class UnthemedShareModal extends React.Component<Props, State> {
    this.setState((prevState) => ({ ...prevState, activeTab: t.value }));
    DashboardInteractions.sharingTabChanged({
      item: t.value,
+      shareResource: getTrackingSource(this.props.panel),
    });
  };

@@ -357,7 +357,10 @@ describe('SharePublic - Report interactions', () => {

    await waitFor(() => {
      expect(DashboardInteractions.sharingTabChanged).toHaveBeenCalledTimes(1);
-      expect(DashboardInteractions.sharingTabChanged).lastCalledWith({ item: shareDashboardType.publicDashboard });
+      expect(DashboardInteractions.sharingTabChanged).lastCalledWith({
+        item: shareDashboardType.publicDashboard,
+        shareResource: 'dashboard',
+      });
    });
  });

@@ -12,6 +12,7 @@ import { VariableRefresh } from '../../../variables/types';
 import { getDashboardSnapshotSrv } from '../../services/SnapshotSrv';

 import { ShareModalTabProps } from './types';
+import { getTrackingSource } from './utils';

 interface Props extends ShareModalTabProps {}

@@ -118,11 +119,13 @@ export class ShareSnapshot extends PureComponent<Props, State> {
        DashboardInteractions.publishSnapshotClicked({
          expires: snapshotExpires,
          timeout: timeoutSeconds,
+          shareResource: getTrackingSource(this.props.panel),
        });
      } else {
        DashboardInteractions.publishSnapshotLocalClicked({
          expires: snapshotExpires,
          timeout: timeoutSeconds,
+          shareResource: getTrackingSource(this.props.panel),
        });
      }
      this.setState({ isLoading: false });
@@ -1,5 +1,6 @@
 import { dateTime, locationUtil, TimeRange, urlUtil, rangeUtil } from '@grafana/data';
 import { config } from '@grafana/runtime';
+import { SceneObjectRef, VizPanel } from '@grafana/scenes';
 import { createShortLink } from 'app/core/utils/shortLinks';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';

@@ -162,6 +163,12 @@ export function getLocalTimeZone() {
  return '&tz=' + encodeURIComponent(options.timeZone);
 }

+export const getTrackingSource = (
+  panel?: PanelModel | SceneObjectRef<VizPanel> | { timeFrom?: string; id: number }
+) => {
+  return panel ? 'panel' : 'dashboard';
+};
+
 export const shareDashboardType: {
  [key: string]: string;
 } = {
@@ -23,7 +23,6 @@ export const AddLibraryPanelContents = ({ panel, initialFolderUid, onDismiss }:
  const [debouncedPanelName, setDebouncedPanelName] = useState(panel.title);
  const [waiting, setWaiting] = useState(false);

-  console.log('folderUid', folderUid);
  useEffect(() => setWaiting(true), [panelName]);
  useDebounce(() => setDebouncedPanelName(panelName), 350, [panelName]);