Public Dashboards: adding telemetry for Sharing Modal options and Public Dashboards events (#50834)

* Public Dashboards: adding telemetry for Sharing Modal options and Public Dashboards events

public/app/features/dashboard/components/ShareModal/ShareEmbed.test.tsx

@@ -1,8 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
+import { setEchoSrv } from '@grafana/runtime/src';
 import config from 'app/core/config';
 
+import { Echo } from '../../../../core/services/echo/Echo';
 import { DashboardModel, PanelModel } from '../../state';
 
 import { ShareEmbed } from './ShareEmbed';
@@ -49,6 +51,7 @@ describe('ShareEmbed', () => {
   let originalBootData: any;
 
   beforeAll(() => {
+    setEchoSrv(new Echo());
     originalBootData = config.bootData;
     config.appUrl = 'http://dashboards.grafana.com/';
 

public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx

@@ -1,6 +1,7 @@
 import React, { FormEvent, PureComponent } from 'react';
 
 import { AppEvents, SelectableValue } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime/src';
 import { ClipboardButton, Field, Modal, RadioButtonGroup, Switch, TextArea } from '@grafana/ui';
 import { appEvents } from 'app/core/core';
 
@@ -32,6 +33,7 @@ export class ShareEmbed extends PureComponent<Props, State> {
   }
 
   componentDidMount() {
+    reportInteraction('grafana_dashboards_embed_share_viewed');
     this.buildIframeHtml();
   }
 

public/app/features/dashboard/components/ShareModal/ShareExport.tsx

@@ -1,7 +1,7 @@
 import { saveAs } from 'file-saver';
 import React, { PureComponent } from 'react';
 
-import { config } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Button, Field, Modal, Switch } from '@grafana/ui';
 import { appEvents } from 'app/core/core';
 import { getBackendSrv } from 'app/core/services/backend_srv';
@@ -31,6 +31,10 @@ export class ShareExport extends PureComponent<Props, State> {
     this.exporter = new DashboardExporter();
   }
 
+  componentDidMount() {
+    reportInteraction('grafana_dashboards_export_share_viewed');
+  }
+
   onShareExternallyChange = () => {
     this.setState({
       shareExternally: !this.state.shareExternally,

public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
+import { reportInteraction } from '@grafana/runtime/src';
 import { AddLibraryPanelContents } from 'app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal';
 
 import { ShareModalTabProps } from './types';
@@ -9,6 +10,10 @@ interface Props extends ShareModalTabProps {
 }
 
 export const ShareLibraryPanel = ({ panel, initialFolderId, onDismiss }: Props) => {
+  useEffect(() => {
+    reportInteraction('grafana_dashboards_library_panel_share_viewed');
+  }, []);
+
   if (!panel) {
     return null;
   }

public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx

@@ -2,10 +2,11 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 
 import { getDefaultTimeRange } from '@grafana/data';
-import { setTemplateSrv } from '@grafana/runtime';
+import { setEchoSrv, setTemplateSrv } from '@grafana/runtime';
 import config from 'app/core/config';
 
 import { initTemplateSrv } from '../../../../../test/helpers/initTemplateSrv';
+import { Echo } from '../../../../core/services/echo/Echo';
 import { variableAdapters } from '../../../variables/adapters';
 import { createQueryVariableAdapter } from '../../../variables/query/adapter';
 import { DashboardModel, PanelModel } from '../../state';
@@ -31,7 +32,7 @@ function mockLocationHref(href: string) {
 
   //@ts-ignore
   delete window.location;
-  (window as any).location = {
+  window.location = {
     ...location,
     href,
     origin: new URL(href).origin,
@@ -102,6 +103,7 @@ describe('ShareModal', () => {
   let templateSrv = initTemplateSrv('key', []);
 
   beforeAll(() => {
+    setEchoSrv(new Echo());
     variableAdapters.register(createQueryVariableAdapter());
     setTemplateSrv(templateSrv);
   });

public/app/features/dashboard/components/ShareModal/ShareLink.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 
 import { AppEvents, SelectableValue } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime/src';
 import { Alert, ClipboardButton, Field, FieldSet, Icon, Input, RadioButtonGroup, Switch } from '@grafana/ui';
 import config from 'app/core/config';
 import { appEvents } from 'app/core/core';
@@ -38,6 +39,7 @@ export class ShareLink extends PureComponent<Props, State> {
   }
 
   componentDidMount() {
+    reportInteraction('grafana_dashboards_link_share_viewed');
     this.buildUrl();
   }
 

public/app/features/dashboard/components/ShareModal/ShareModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { reportInteraction } from '@grafana/runtime/src';
 import { Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { contextSrv } from 'app/core/core';
@@ -79,10 +80,9 @@ export class ShareModal extends React.Component<Props, State> {
     this.state = getInitialState(props);
   }
 
-  // onDismiss = () => {
-  //   //this.setState(getInitialState(this.props));
-  //   this.props.onDismiss();
-  // };
+  componentDidMount() {
+    reportInteraction('grafana_dashboards_share_modal_viewed');
+  }
 
   onSelectTab = (t: any) => {
     this.setState({ activeTab: t.value });

public/app/features/dashboard/components/ShareModal/SharePublicDashboard.test.tsx

@@ -1,10 +1,12 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { BackendSrv } from '@grafana/runtime';
+import { BackendSrv, setEchoSrv } from '@grafana/runtime';
 import config from 'app/core/config';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 
+import { Echo } from '../../../../core/services/echo/Echo';
+
 import { ShareModal } from './ShareModal';
 import { PublicDashboard } from './SharePublicDashboardUtils';
 
@@ -45,6 +47,7 @@ describe('SharePublic', () => {
   let originalBootData: any;
 
   beforeAll(() => {
+    setEchoSrv(new Echo());
     originalBootData = config.bootData;
     config.appUrl = 'http://dashboards.grafana.com/';
 

public/app/features/dashboard/components/ShareModal/SharePublicDashboard.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { AppEvents } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime/src';
 import { Alert, Button, Checkbox, ClipboardButton, Field, FieldSet, Icon, Input, Switch } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { createErrorNotification } from 'app/core/copy/appNotification';
@@ -39,10 +40,14 @@ export const SharePublicDashboard = (props: Props) => {
   });
 
   useEffect(() => {
+    reportInteraction('grafana_dashboards_public_share_viewed');
+
     getPublicDashboardConfig(props.dashboard.uid, setPublicDashboardConfig).catch();
   }, [props.dashboard.uid]);
 
   const onSavePublicConfig = () => {
+    reportInteraction('grafana_dashboards_public_create_clicked');
+
     if (dashboardHasTemplateVariables(dashboardVariables)) {
       dispatch(
         notifyApp(createErrorNotification('This dashboard cannot be made public because it has template variables'))
@@ -154,12 +159,16 @@ export const SharePublicDashboard = (props: Props) => {
                   <Switch
                     disabled={dashboardHasTemplateVariables(dashboardVariables)}
                     value={publicDashboard?.isEnabled}
-                    onChange={() =>
+                    onChange={() => {
+                      reportInteraction('grafana_dashboards_public_enable_clicked', {
+                        action: publicDashboard?.isEnabled ? 'disable' : 'enable',
+                      });
+
                       setPublicDashboardConfig({
                         ...publicDashboard,
                         isEnabled: !publicDashboard.isEnabled,
-                      })
-                    }
+                      });
+                    }}
                   />
                 </Field>
                 {publicDashboardPersisted(publicDashboard) && publicDashboard.isEnabled && (

public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx

@@ -56,6 +56,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
   }
 
   componentDidMount() {
+    reportInteraction('grafana_dashboards_snapshot_share_viewed');
     this.getSnaphotShareOptions();
   }