feat(aggregations): telemetry COMPASS-6177 (#3741)

Author: mabaasit

packages/compass-aggregations/src/components/saved-pipelines/saved-pipeline-card.spec.jsx

@@ -6,7 +6,13 @@ import SavedPipelineCard from './saved-pipeline-card';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
-const store = createStore(() => {});
+const store = createStore(() => {
+  return {
+    pipelineBuilder: {
+      pipelineMode: 'builder-ui'
+    }
+  }
+});
 
 describe('SavedPipelineCard [Component]', function() {
   context('when the component is rendered', function() {

packages/compass-aggregations/src/components/saved-pipelines/saved-pipeline-card.tsx

@@ -12,12 +12,18 @@ import {
   KeylineCard,
   spacing
 } from '@mongodb-js/compass-components';
+import type { RootState } from '../../modules';
+import {
+  type EditorViewType,
+  mapPipelineModeToEditorViewType,
+} from '../../modules/pipeline-builder/builder-helpers';
 
 const { track } = createLoggerAndTelemetry('COMPASS-AGGREGATIONS-UI');
 
 type SavePipelineCardProps = {
   id: string;
   name: string;
+  editor_view_type: EditorViewType;
   onOpenPipelineConfirm: (id: string) => void;
   onDeletePipeline: (id: string) => void;
 };
@@ -51,6 +57,7 @@ const button = css({
 const SavePipelineCard: React.FunctionComponent<SavePipelineCardProps> = ({
   id,
   name,
+  editor_view_type,
   onOpenPipelineConfirm,
   onDeletePipeline
 }) => {
@@ -59,16 +66,21 @@ const SavePipelineCard: React.FunctionComponent<SavePipelineCardProps> = ({
   const onDelete = useCallback(() => {
     track('Aggregation Deleted', {
       id,
-      screen: 'aggregations'
+      editor_view_type,
+      screen: 'aggregations',
     });
     onDeletePipeline(id);
-  }, [id, onDeletePipeline]);
+  }, [id, editor_view_type, onDeletePipeline]);
 
   const onOpenConfirm = useCallback(() => {
-    track('Aggregation Opened', { id, screen: 'aggregations' });
+    track('Aggregation Opened', {
+      id,
+      editor_view_type,
+      screen: 'aggregations',
+    });
     setShowConfirmModal(false);
     onOpenPipelineConfirm(id);
-  }, [id, onOpenPipelineConfirm]);
+  }, [id, editor_view_type, onOpenPipelineConfirm]);
 
   return (
     <>
@@ -123,7 +135,14 @@ const SavePipelineCard: React.FunctionComponent<SavePipelineCardProps> = ({
   );
 };
 
-export default connect(null, {
-  onOpenPipelineConfirm: openPipelineById,
-  onDeletePipeline: deletePipeline
-})(SavePipelineCard);
+export default connect(
+  (state: RootState) => ({
+    editor_view_type: mapPipelineModeToEditorViewType(
+      state.pipelineBuilder.pipelineMode
+    ),
+  }),
+  {
+    onOpenPipelineConfirm: openPipelineById,
+    onDeletePipeline: deletePipeline,
+  }
+)(SavePipelineCard);

packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.spec.jsx

@@ -8,7 +8,11 @@ import { createStore } from 'redux';
 
 const emptyStateTestId = 'p[data-testid="saved-pipelines-empty-state"]';
 
-const store = createStore(() => {})
+const store = createStore(() => ({
+  pipelineBuilder: {
+    pipelinMode: 'builder-ui',
+  }
+}));
 
 describe('SavedPipelines [Component]', function() {
   context('when the component is rendered', function() {

packages/compass-aggregations/src/components/stage-editor-toolbar/delete-stage.spec.jsx

@@ -54,7 +54,7 @@ describe('DeleteStage [Component]', function() {
       component = null;
     });
 
-    it('toggles the expansion and flags as modified', function() {
+    it('calls delete handler when clicked', function() {
       component.find('button').simulate('click');
       expect(spy.calledWith(1)).to.equal(true);
     });

packages/compass-aggregations/src/modules/aggregation.ts

@@ -8,7 +8,7 @@ import { aggregatePipeline } from '../utils/cancellable-aggregation';
 import { ActionTypes as WorkspaceActionTypes } from './workspace';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 import { NEW_PIPELINE } from './import-pipeline';
-import { getPipelineFromBuilderState } from './pipeline-builder/builder-helpers';
+import { getPipelineFromBuilderState, mapPipelineModeToEditorViewType } from './pipeline-builder/builder-helpers';
 import { getStageOperator } from '../utils/stage';
 
 const { log, mongoLogId, track } = createLoggerAndTelemetry(
@@ -182,7 +182,8 @@ export const runAggregation = (): PipelineBuilderThunkAction<Promise<void>> => {
       pipeline,
     })
     track('Aggregation Executed', () => ({
-      num_stages: pipeline.length
+      num_stages: pipeline.length,
+      editor_view_type: mapPipelineModeToEditorViewType(getState().pipelineBuilder.pipelineMode),
     }));
     return dispatch(fetchAggregationData());
   };

packages/compass-aggregations/src/modules/explain.ts

@@ -8,7 +8,7 @@ import type { PipelineBuilderThunkAction } from '.';
 import { DEFAULT_MAX_TIME_MS } from '../constants';
 import type { IndexInfo } from './indexes';
 import { NEW_PIPELINE } from './import-pipeline';
-import { getPipelineFromBuilderState } from './pipeline-builder/builder-helpers';
+import { getPipelineFromBuilderState, mapPipelineModeToEditorViewType } from './pipeline-builder/builder-helpers';
 
 const { log, mongoLogId, track } = createLoggerAndTelemetry(
   'COMPASS-AGGREGATIONS-UI'
@@ -132,7 +132,8 @@ export const explainAggregation = (): PipelineBuilderThunkAction<Promise<void>>
       maxTimeMS,
       dataService: { dataService },
       indexes: collectionIndexes,
-      collationString: { value: collation }
+      collationString: { value: collation },
+      pipelineBuilder: { pipelineMode },
     } = getState();
 
     if (!dataService) {
@@ -192,6 +193,7 @@ export const explainAggregation = (): PipelineBuilderThunkAction<Promise<void>>
         track('Aggregation Explained', {
           num_stages: pipeline.length,
           index_used: explain.stats?.indexes?.length ?? 0,
+          editor_view_type: mapPipelineModeToEditorViewType(pipelineMode),
         });
         // If parsing fails, we still show raw explain json.
         dispatch({

packages/compass-aggregations/src/modules/pipeline-builder/builder-helpers.ts

@@ -1,5 +1,6 @@
 import type { PipelineBuilderThunkAction, RootState } from '..';
 import type { PipelineBuilder } from './pipeline-builder';
+import type { PipelineMode } from './pipeline-mode';
 import { loadPreviewForStagesFrom } from './stage-editor';
 import { loadPreviewForPipeline } from './text-editor-pipeline';
 
@@ -74,3 +75,8 @@ export function getIsPipelineInvalidFromBuilderState(
   const { serverError, syntaxErrors } = state.pipelineBuilder.textEditor.pipeline;
   return Boolean((serverError && includeServerErrors) || syntaxErrors.length > 0);
 }
+
+export type EditorViewType = 'stage' | 'text';
+export function mapPipelineModeToEditorViewType(mode: PipelineMode): EditorViewType {
+  return mode === 'builder-ui' ? 'stage' : 'text';
+}

packages/compass-aggregations/src/modules/pipeline-builder/pipeline-mode.ts

@@ -2,9 +2,12 @@ import type { Reducer } from 'redux';
 import type { Document } from 'mongodb';
 import type { PipelineBuilderThunkAction } from '..';
 import { isAction } from '../../utils/is-action';
-import { updatePipelinePreview } from './builder-helpers';
+import { getPipelineFromBuilderState, mapPipelineModeToEditorViewType, updatePipelinePreview } from './builder-helpers';
 import type Stage from './stage';
 import type { PipelineParserError } from './pipeline-parser/utils';
+import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+
+const { track } = createLoggerAndTelemetry('COMPASS-AGGREGATIONS-UI');
 
 export type PipelineMode = 'builder-ui' | 'as-text';
 
@@ -46,6 +49,12 @@ export const changePipelineMode = (
       pipelineBuilder.sourceToStages();
     }
 
+    const num_stages = getPipelineFromBuilderState(getState(), pipelineBuilder).length;
+    track('Editor Type Changed', {
+      num_stages,
+      editor_view_type: mapPipelineModeToEditorViewType(newMode),
+    });
+
     dispatch({
       type: ActionTypes.PipelineModeToggled,
       mode: newMode,

packages/compass-aggregations/src/modules/pipeline-builder/stage-editor.ts

@@ -19,6 +19,8 @@ import { aggregatePipeline } from '../../utils/cancellable-aggregation';
 import type { PipelineParserError } from './pipeline-parser/utils';
 import { ActionTypes as PipelineModeActionTypes } from './pipeline-mode';
 import type { PipelineModeToggledAction } from './pipeline-mode';
+import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+const { track } = createLoggerAndTelemetry('COMPASS-AGGREGATIONS-UI');
 
 export const enum StageEditorActionTypes {
   StagePreviewFetch = 'compass-aggregations/pipeline-builder/stage-editor/StagePreviewFetch',
@@ -368,6 +370,12 @@ export const changeStageOperator = (
     const currentOp = stage.operator;
 
     stage.changeOperator(newVal);
+    track('Aggregation Edited', {
+      num_stages: stages.length,
+      stage_action: 'stage_renamed',
+      stage_name: stage.operator,
+      editor_view_type: 'stage',
+    });
     dispatch({ type: StageEditorActionTypes.StageOperatorChange, id, stage });
 
     // If there is no stage operator (this is a newly added stage) or current
@@ -417,6 +425,11 @@ export const addStage = (
 ): PipelineBuilderThunkAction<void, StageAddAction> => {
   return (dispatch, getState, { pipelineBuilder }) => {
     const stage = pipelineBuilder.addStage(after);
+    track('Aggregation Edited', {
+      num_stages: getState().pipelineBuilder.stageEditor.stages.length,
+      stage_action: 'stage_added',
+      editor_view_type: 'stage',
+    });
     dispatch({ type: StageEditorActionTypes.StageAdded, after, stage });
   };
 };
@@ -425,7 +438,14 @@ export const removeStage = (
   at: number
 ): PipelineBuilderThunkAction<void, StageRemoveAction> => {
   return (dispatch, getState, { pipelineBuilder }) => {
-    pipelineBuilder.removeStage(at);
+    const num_stages = getState().pipelineBuilder.stageEditor.stages.length;
+    const stage = pipelineBuilder.removeStage(at);
+    track('Aggregation Edited', {
+      num_stages,
+      stage_action: 'stage_deleted',
+      stage_name: stage.operator,
+      editor_view_type: 'stage',
+    });
     dispatch({ type: StageEditorActionTypes.StageRemoved, at });
     dispatch(loadPreviewForStagesFrom(at));
   };
@@ -439,6 +459,13 @@ export const moveStage = (
     if (from === to) {
       return;
     }
+    const pipeline = getState().pipelineBuilder.stageEditor.stages;
+    track('Aggregation Edited', {
+      num_stages: pipeline.length,
+      stage_action: 'stage_reordered',
+      stage_name: pipeline[from].stageOperator,
+      editor_view_type: 'stage',
+    });
     pipelineBuilder.moveStage(from, to);
     dispatch({ type: StageEditorActionTypes.StageMoved, from, to });
     dispatch(loadPreviewForStagesFrom(Math.min(from, to)));

packages/compass-aggregations/src/modules/saved-pipeline.ts

@@ -4,7 +4,7 @@ import type { AnyAction } from 'redux';
 import { createId } from './id';
 import type { PipelineBuilderThunkAction } from '.';
 import type { StoredPipeline } from '../utils/pipeline-storage';
-import { getPipelineFromBuilderState, getPipelineStringFromBuilderState } from './pipeline-builder/builder-helpers';
+import { getPipelineFromBuilderState, getPipelineStringFromBuilderState, mapPipelineModeToEditorViewType } from './pipeline-builder/builder-helpers';
 import { updatePipelinePreview } from './pipeline-builder/builder-helpers';
 
 const { track, debug } = createLoggerAndTelemetry('COMPASS-AGGREGATIONS-UI');
@@ -175,7 +175,8 @@ export const saveCurrentPipeline = (): PipelineBuilderThunkAction<void> => async
 
   track('Aggregation Saved', {
     id: savedPipeline.id,
-    num_stages: getPipelineFromBuilderState(getState(), pipelineBuilder).length
+    num_stages: getPipelineFromBuilderState(getState(), pipelineBuilder).length,
+    editor_view_type: mapPipelineModeToEditorViewType(getState().pipelineBuilder.pipelineMode)
   });
 
   dispatch(updatePipelineList());