WIP

opendatahub-io · Jun 26, 2024 · fe3beff · fe3beff
1 parent c720c3c
commit fe3beff
Show file tree

Hide file tree

Showing 19 changed files with 217 additions and 84 deletions.
diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
+import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+import { LinkTrackingEventProperties } from '~/concepts/analyticsTracking/trackingProperties';
 
 type ExternalLinkProps = {
   text: string;
@@ -14,7 +15,10 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({ text, to }) => (
     isInline
     onClick={() => {
       window.open(to);
-      fireTrackingEventRaw('ExternalLink Clicked', { href: to, from: window.location.pathname });
+      fireTrackingEvent('ExternalLink Clicked', {
+        href: to,
+        from: window.location.pathname,
+      } as LinkTrackingEventProperties);
     }}
     icon={<ExternalLinkAltIcon />}
     iconPosition="right"

diff --git a/frontend/src/components/OdhDocCard.tsx b/frontend/src/components/OdhDocCard.tsx
@@ -22,6 +22,7 @@ import {
   LaunchStatusEnum,
 } from '~/utilities/quickStartUtils';
 import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+import { DocCardTrackingEventProperties } from '~/concepts/analyticsTracking/trackingProperties';
 import BrandImage from './BrandImage';
 import DocCardBadges from './DocCardBadges';
 import { useQuickStartCardSelected } from './useQuickStartCardSelected';
@@ -46,7 +47,7 @@ const fireResourceAccessedEvent =
       {
         name,
         type,
-      },
+      } as DocCardTrackingEventProperties,
     );
   };
 

diff --git a/frontend/src/concepts/analyticsTracking/trackingProperties.ts b/frontend/src/concepts/analyticsTracking/trackingProperties.ts
@@ -0,0 +1,71 @@
+import {
+  ConfigMapCategory,
+  EnvironmentVariableType,
+  SecretCategory,
+  StorageType,
+} from '~/pages/projects/types';
+
+export interface IdentifyEventProperties {
+  anonymousID?: string;
+}
+
+export enum TrackingOutcome {
+  submit = 'submit',
+  cancel = 'cancel',
+}
+
+export interface BaseTrackingEventProperties {
+  name?: string;
+  anonymousID?: string;
+  outcome?: TrackingOutcome;
+  success?: boolean;
+  error?: string;
+}
+
+export interface WorkbenchTrackingEventProperties extends BaseTrackingEventProperties {
+  type?: string;
+  term?: string;
+  imageName?: string;
+  accelerator?: string;
+  acceleratorCount?: number;
+  lastSelectedSize?: string;
+  lastSelectedImage?: string;
+  projectName?: string;
+  notebookName?: string;
+  lastActivity?: string;
+  storageType?: StorageType;
+  storageDataSize?: string;
+  dataConnectionType?: EnvironmentVariableType | null;
+  dataConnectionCategory?: ConfigMapCategory | SecretCategory | null;
+  dataConnectionEnabled?: boolean;
+}
+
+export interface ProjectTrackingEventProperties extends BaseTrackingEventProperties {
+  projectName: string;
+}
+
+export interface LinkTrackingEventProperties extends BaseTrackingEventProperties {
+  from: string;
+  href: string;
+}
+
+export interface SearchTrackingEventProperties extends BaseTrackingEventProperties {
+  term: string;
+}
+
+export interface NotebookTrackingEventProperties extends BaseTrackingEventProperties {
+  accelerator?: string;
+  acceleratorCount?: number;
+  lastSelectedSize?: string;
+  lastSelectedImage?: string;
+}
+
+export interface DocCardTrackingEventProperties extends BaseTrackingEventProperties {
+  type: string;
+}
+
+export interface HomeCardTrackingEventProperties extends BaseTrackingEventProperties {
+  to: string;
+  type: string;
+  section: string;
+}
diff --git a/frontend/src/pages/home/projects/ProjectCard.tsx b/frontend/src/pages/home/projects/ProjectCard.tsx
@@ -23,7 +23,8 @@ import {
   getProjectDisplayName,
   getProjectOwner,
 } from '~/concepts/projects/utils';
-import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
+import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+import { HomeCardTrackingEventProperties } from '~/concepts/analyticsTracking/trackingProperties';
 
 interface ProjectCardProps {
   project: ProjectKind;
@@ -41,10 +42,10 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           isInline
           onClick={() => {
             navigate(`/projects/${project.metadata.name}`);
-            fireTrackingEventRaw('HomeCardClicked', {
+            fireTrackingEvent('HomeCardClicked', {
               to: `/projects/${project.metadata.name}`,
               type: 'project',
-            });
+            } as HomeCardTrackingEventProperties);
           }}
           style={{ fontSize: 'var(--pf-v5-global--FontSize--md)' }}
         >

diff --git a/frontend/src/pages/home/useEnableTeamSection.tsx b/frontend/src/pages/home/useEnableTeamSection.tsx
@@ -13,7 +13,8 @@ import InfoGalleryItem from '~/concepts/design/InfoGalleryItem';
 import { useBrowserStorage } from '~/components/browserStorage';
 import { SupportedArea } from '~/concepts/areas';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
-import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
+import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+import { HomeCardTrackingEventProperties } from '~/concepts/analyticsTracking/trackingProperties';
 
 export const useEnableTeamSection = (): React.ReactNode => {
   const navigate = useNavigate();
@@ -34,11 +35,11 @@ export const useEnableTeamSection = (): React.ReactNode => {
   }
 
   const trackAndNavigate = (section: string, to: string): void => {
-    fireTrackingEventRaw('HomeCardClicked', {
+    fireTrackingEvent('HomeCardClicked', {
       to: `${to}`,
       type: 'enableTeam',
       section: `${section}`,
-    });
+    } as HomeCardTrackingEventProperties);
     navigate(to);
   };
 

diff --git a/frontend/src/pages/learningCenter/LearningCenterToolbar.tsx b/frontend/src/pages/learningCenter/LearningCenterToolbar.tsx
@@ -26,6 +26,7 @@ import {
 import { removeQueryArgument, setQueryArgument } from '~/utilities/router';
 import { useQueryParams } from '~/utilities/useQueryParams';
 import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+import { SearchTrackingEventProperties } from '~/concepts/analyticsTracking/trackingProperties';
 import {
   SEARCH_FILTER_KEY,
   DOC_SORT_KEY,
@@ -60,7 +61,7 @@ const fireSearchedEvent = _.debounce((val: string) => {
   if (val) {
     fireTrackingEvent('Resource Searched', {
       term: val,
-    });
+    } as SearchTrackingEventProperties);
   }
 }, 1000);
 

diff --git a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
@@ -51,6 +51,7 @@ import StartServerModal from './StartServerModal';
 import AcceleratorProfileSelectField from './AcceleratorProfileSelectField';
 
 import '~/pages/notebookController/NotebookController.scss';
+import { NotebookTrackingEventProperties } from '~/concepts/analyticsTracking/trackingProperties';
 
 const SpawnerPage: React.FC = () => {
   const navigate = useNavigate();
@@ -240,7 +241,7 @@ const SpawnerPage: React.FC = () => {
       acceleratorCount: acceleratorProfile.useExisting ? undefined : acceleratorProfile.count,
       lastSelectedSize: selectedSize.name,
       lastSelectedImage: `${selectedImageTag.image?.name}:${selectedImageTag.tag?.name}`,
-    });
+    } as NotebookTrackingEventProperties);
   };
 
   const handleNotebookAction = async () => {

diff --git a/frontend/src/pages/projects/notebook/NotebookRouteLink.tsx b/frontend/src/pages/projects/notebook/NotebookRouteLink.tsx
@@ -3,7 +3,7 @@ import { Button, ButtonVariant, Flex, FlexItem, Icon, Tooltip } from '@patternfl
 import { ExclamationCircleIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { NotebookKind } from '~/k8sTypes';
 import { getNotebookDisplayName } from '~/pages/projects/utils';
-import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
+import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
 import useRouteForNotebook from './useRouteForNotebook';
 import { hasStopAnnotation } from './utils';
 
@@ -52,7 +52,7 @@ const NotebookRouteLink: React.FC<NotebookRouteLinkProps> = ({
               : 'var(--pf-v5-global--FontSize--sm)',
           }}
           onClick={() =>
-            fireTrackingEventRaw('Workbench Opened', { wbName: getNotebookDisplayName(notebook) })
+            fireTrackingEvent('Workbench Opened', { name: getNotebookDisplayName(notebook) })
           }
         >
           {label ?? getNotebookDisplayName(notebook)}

diff --git a/frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx b/frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx
@@ -12,6 +12,7 @@ import useRefreshNotebookUntilStartOrStop from './useRefreshNotebookUntilStartOr
 import StopNotebookConfirmModal from './StopNotebookConfirmModal';
 import useStopNotebookModalAvailability from './useStopNotebookModalAvailability';
 import NotebookStatusText from './NotebookStatusText';
+import { WorkbenchTrackingEventProperties } from '~/concepts/analyticsTracking/trackingProperties';
 
 type NotebookStatusToggleProps = {
   notebookState: NotebookState;
@@ -69,7 +70,7 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({
         ...(action === 'stopped' && {
           lastActivity: notebook.metadata.annotations?.['notebooks.kubeflow.org/last-activity'],
         }),
-      });
+      } as WorkbenchTrackingEventProperties);
     },
     [acceleratorProfile, notebook, size],
   );

diff --git a/frontend/src/pages/projects/screens/projects/DeleteProjectModal.tsx b/frontend/src/pages/projects/screens/projects/DeleteProjectModal.tsx
@@ -4,7 +4,8 @@ import { getProjectDisplayName } from '~/concepts/projects/utils';
 import { deleteProject } from '~/api';
 import DeleteModal from '~/pages/projects/components/DeleteModal';
 import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
-import { TrackingOutcome } from '~/types';
+
+import { TrackingOutcome } from '~/concepts/analyticsTracking/trackingProperties';
 
 type DeleteProjectModalProps = {
   onClose: (deleted: boolean) => void;

diff --git a/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx b/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx
@@ -8,8 +8,12 @@ import { isValidK8sName } from '~/concepts/k8s/utils';
 import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
 import { NameDescType } from '~/pages/projects/types';
 import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
-import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
-import { TrackingOutcome } from '~/types';
+import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+
+import {
+  ProjectTrackingEventProperties,
+  TrackingOutcome,
+} from '~/concepts/analyticsTracking/trackingProperties';
 
 type ManageProjectModalProps = {
   editProjectData?: ProjectKind;
@@ -49,23 +53,23 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
   const onBeforeClose = (newProjectName?: string) => {
     onClose(newProjectName);
     if (newProjectName) {
-      fireTrackingEventRaw(editProjectData ? 'Project Edited' : 'NewProject Created', {
+      fireTrackingEvent(editProjectData ? 'Project Edited' : 'NewProject Created', {
         outcome: TrackingOutcome.submit,
         success: true,
         projectName: newProjectName,
-      });
+      } as ProjectTrackingEventProperties);
     }
     setFetching(false);
     setError(undefined);
     setNameDesc({ name: '', k8sName: undefined, description: '' });
   };
   const handleError = (e: Error) => {
-    fireTrackingEventRaw(editProjectData ? 'Project Edited' : 'NewProject Created', {
+    fireTrackingEvent(editProjectData ? 'Project Edited' : 'NewProject Created', {
       outcome: TrackingOutcome.submit,
       success: false,
       projectName: '',
       error: e.message,
-    });
+    } as ProjectTrackingEventProperties);
     setError(e);
     setFetching(false);
   };
@@ -105,7 +109,7 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
           variant="link"
           onClick={() => {
             onBeforeClose();
-            fireTrackingEventRaw(editProjectData ? 'Project Edited' : 'NewProject Created', {
+            fireTrackingEvent(editProjectData ? 'Project Edited' : 'NewProject Created', {
               outcome: TrackingOutcome.cancel,
             });
           }}

diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
@@ -20,8 +20,11 @@ import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { AppContext } from '~/app/AppContext';
 import usePreferredStorageClass from '~/pages/projects/screens/spawner/storage/usePreferredStorageClass';
 import { ProjectSectionID } from '~/pages/projects/screens/detail/types';
-import { fireTrackingEvent, fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
-import { TrackingOutcome } from '~/types';
+import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+import {
+  WorkbenchTrackingEventProperties,
+  TrackingOutcome,
+} from '~/concepts/analyticsTracking/trackingProperties';
 import {
   createConfigMapsAndSecretsForNotebook,
   createPvcDataForNotebook,
@@ -84,7 +87,7 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
 
   const afterStart = (name: string, type: 'created' | 'updated') => {
     const { acceleratorProfile, notebookSize, image } = startNotebookData;
-    fireTrackingEventRaw(`Workbench ${type === 'created' ? 'Created' : 'Updated'}`, {
+    const tep: WorkbenchTrackingEventProperties = {
       acceleratorCount: acceleratorProfile.useExisting ? undefined : acceleratorProfile.count,
       accelerator: acceleratorProfile.acceleratorProfile
         ? `${acceleratorProfile.acceleratorProfile.spec.displayName} (${acceleratorProfile.acceleratorProfile.metadata.name}): ${acceleratorProfile.acceleratorProfile.spec.identifier}`
@@ -107,16 +110,18 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
       dataConnectionEnabled: dataConnection.enabled,
       outcome: TrackingOutcome.submit,
       success: true,
-    });
+    };
+    fireTrackingEvent(`Workbench ${type === 'created' ? 'Created' : 'Updated'}`, tep);
     refreshAllProjectData();
     navigate(`/projects/${projectName}?section=${ProjectSectionID.WORKBENCHES}`);
   };
   const handleError = (e: Error) => {
-    fireTrackingEvent('Workbench Created', {
+    const ep: WorkbenchTrackingEventProperties = {
       outcome: TrackingOutcome.submit,
       success: false,
       error: e.message,
-    });
+    };
+    fireTrackingEvent('Workbench Created', ep);
     setErrorMessage(e.message || 'Error creating workbench');
     setCreateInProgress(false);
   };

diff --git a/frontend/src/redux/actions/actions.ts b/frontend/src/redux/actions/actions.ts
@@ -70,3 +70,11 @@ export const forceComponentsUpdate =
       type: Actions.FORCE_COMPONENTS_UPDATE,
     });
   };
+
+export const segmentReady =
+  (): ThunkAction<void, AppState, unknown, Action<string>> =>
+  (dispatch) => {
+    dispatch({
+      type: Actions.SEGMENT_READY,
+    });
+  };
diff --git a/frontend/src/redux/reducers/appReducer.ts b/frontend/src/redux/reducers/appReducer.ts
@@ -104,6 +104,11 @@ const appReducer = (state: AppState = initialState, action: GetUserAction): AppS
         ...state,
         forceComponentsUpdate: state.forceComponentsUpdate + 1,
       };
+    case Actions.SEGMENT_READY:
+      return {
+        ...state,
+        segmentInitialised: true,
+      };
     default:
       return state;
   }

diff --git a/frontend/src/redux/types.ts b/frontend/src/redux/types.ts
@@ -10,6 +10,7 @@ export enum Actions {
   ACK_NOTIFICATION = 'ACK_NOTIFICATION',
   REMOVE_NOTIFICATION = 'REMOVE_NOTIFICATION',
   FORCE_COMPONENTS_UPDATE = 'FORCE_COMPONENTS_UPDATE',
+  SEGMENT_READY = 'SEGMENT_READY',
 }
 
 export interface AppNotification {
@@ -53,6 +54,7 @@ export type AppState = {
   dashboardNamespace?: string;
   notifications: AppNotification[];
   forceComponentsUpdate: number;
+  segmentInitialised?: boolean;
 };
 
 export type StatusResponse = {