HP-1696 add faro customized event (#1595)

* add faro customized event

* fix import

* fix study name

* better error handling

Author: mfshao

package-lock.json

@@ -15,6 +15,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@gen3/guppy": "^0.18.1",
     "@gen3/ui-component": "^0.11.4",
+    "@grafana/faro-core": "^1.9.1",
     "@grafana/faro-react": "^1.9.0",
     "@mantine/core": "^6.0.21",
     "@reactour/tour": "^2.12.0",

package.json

@@ -1,5 +1,6 @@
 import React from 'react';
 import { datadogRum } from '@datadog/browser-rum';
+import { faro } from '@grafana/faro-core';
 import {
   JOB_POLLING_INTERVAL, DOWNLOAD_FAIL_STATUS, DOWNLOAD_SUCCEEDED_MESSAGE,
 } from '../DiscoveryActionBarConstants';
@@ -66,19 +67,28 @@ const checkDownloadStatus = (
                 });
                 setTimeout(() => window.open(output), 2000);
                 const projectNumber = selectedResources.map(
-                  (study) => study.project_number,
+                  (study) => study.project_number || [],
                 );
                 const studyName = selectedResources.map(
-                  (study) => study.study_name,
+                  (study) => study.study_metadata?.minimal_info?.study_name || [],
                 );
                 const repositoryName = selectedResources.map(
-                  (study) => study.commons,
+                  (study) => study.commons || [],
                 );
                 datadogRum.addAction('datasetDownload', {
                   datasetDownloadProjectNumber: projectNumber,
                   datasetDownloadStudyName: studyName,
                   datasetDownloadRepositoryName: repositoryName,
                 });
+                faro.api.pushEvent(
+                  'datasetDownload',
+                  // Faro only accept string-string pairs in payload
+                  {
+                    datasetDownloadProjectNumber: projectNumber.join(','),
+                    datasetDownloadStudyName: studyName.join(','),
+                    datasetDownloadRepositoryName: repositoryName.join(','),
+                  },
+                );
               } catch {
                 // job output is not a url -> then it is an error message
                 setDownloadStatus({

src/Discovery/DiscoveryActionBar/utils/checkDownloadStatus.tsx

@@ -1,4 +1,5 @@
 import { datadogRum } from '@datadog/browser-rum';
+import { faro } from '@grafana/faro-core';
 import FileSaver from 'file-saver';
 import { DiscoveryConfig } from '../../DiscoveryConfig';
 import assembleFileManifest from './assembleFileManifest';
@@ -20,14 +21,23 @@ const handleDownloadManifestClick = (
   }
   // combine manifests from all selected studies
   const manifest = assembleFileManifest(manifestFieldName, selectedResources);
-  const projectNumber = selectedResources.map((study) => study.project_number);
-  const studyName = selectedResources.map((study) => study.study_name);
-  const repositoryName = selectedResources.map((study) => study.commons);
+  const projectNumber = selectedResources.map((study) => study.project_number || []);
+  const studyName = selectedResources.map((study) => study.study_metadata?.minimal_info?.study_name || []);
+  const repositoryName = selectedResources.map((study) => study.commons || []);
   datadogRum.addAction('manifestDownload', {
     manifestDownloadProjectNumber: projectNumber,
     manifestDownloadStudyName: studyName,
     manifestDownloadRepositoryName: repositoryName,
   });
+  faro.api.pushEvent(
+    'manifestDownload',
+    // Faro only accept string-string pairs in payload
+    {
+      manifestDownloadProjectNumber: projectNumber.join(','),
+      manifestDownloadStudyName: studyName.join(','),
+      manifestDownloadRepositoryName: repositoryName.join(','),
+    },
+  );
   // download the manifest
   const MANIFEST_FILENAME = 'manifest.json';
   const blob = new Blob([JSON.stringify(manifest, null, 2)], {

src/Discovery/DiscoveryActionBar/utils/handleDownloadManifestClick.ts

@@ -1,4 +1,5 @@
 import { datadogRum } from '@datadog/browser-rum';
+import { faro } from '@grafana/faro-core';
 import { manifestServiceApiPath, hostname } from '../../../../localconf';
 import { DiscoveryConfig } from '../../../DiscoveryConfig';
 import { fetchWithCreds } from '../../../../actions';
@@ -66,14 +67,23 @@ const handleExportToWorkspaceClick = async (
     }
   });
 
-  const projectNumber = selectedResources.map((study) => study.project_number);
-  const studyName = selectedResources.map((study) => study.study_name);
-  const repositoryName = selectedResources.map((study) => study.commons);
+  const projectNumber = selectedResources.map((study) => study.project_number || []);
+  const studyName = selectedResources.map((study) => study.study_metadata?.minimal_info?.study_name || []);
+  const repositoryName = selectedResources.map((study) => study.commons || []);
   datadogRum.addAction('exportToWorkspace', {
     exportToWorkspaceProjectNumber: projectNumber,
     exportToWorkspaceStudyName: studyName,
     exportToWorkspaceRepositoryName: repositoryName,
   });
+  faro.api.pushEvent(
+    'exportToWorkspace',
+    // Faro only accept string-string pairs in payload
+    {
+      exportToWorkspaceProjectNumber: projectNumber.join(','),
+      exportToWorkspaceStudyName: studyName.join(','),
+      exportToWorkspaceRepositoryName: repositoryName.join(','),
+    },
+  );
 
   // post exported manifest to manifestservice
   if (manifest.length) {

src/Discovery/DiscoveryActionBar/utils/handleExportToWorkspaceClick/handleExportToWorkspaceClick.ts

@@ -7,6 +7,7 @@ import {
   Menu, Dropdown, Button as Btn, Tooltip, Space,
 } from 'antd';
 import { datadogRum } from '@datadog/browser-rum';
+import { faro } from '@grafana/faro-core';
 
 import {
   DownOutlined, UserOutlined, QuestionCircleOutlined, LoadingOutlined, ExclamationCircleOutlined,
@@ -320,6 +321,12 @@ class Workspace extends React.Component {
           datadogRum.addAction('workspaceLaunch', {
             workspaceName: workspace.name,
           });
+          faro.api.pushEvent(
+            'workspaceLaunch',
+            {
+              workspaceName: workspace.name,
+            },
+          );
           this.checkWorkspaceStatus();
           break;
         default: