Chore: logs pipelines UI telemetry (#3964)

* chore: emit event when user saves pipelines * chore: emit tracking event for entered edit mode * chore: emit tracking event for clicking add new processor * chore: emit tracking event for clicking preview pipeline btn * chore: address PR feedback
SigNoz · Nov 15, 2023 · a99d7f0 · a99d7f0
1 parent 2ae75e6
commit a99d7f0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
@@ -3,6 +3,7 @@ import TextToolTip from 'components/TextToolTip';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionMode, ActionType, Pipeline } from 'types/api/pipeline/def';
+import { trackEvent } from 'utils/segmentAnalytics';
 
 import { ButtonContainer, CustomButton } from '../../styles';
 import { checkDataLength } from '../utils';
@@ -21,10 +22,20 @@ function CreatePipelineButton({
 	);
 	const isDisabled = isActionMode === ActionMode.Editing;
 
-	const onEnterEditMode = (): void => setActionMode(ActionMode.Editing);
+	const onEnterEditMode = (): void => {
+		setActionMode(ActionMode.Editing);
+
+		trackEvent('Logs: Pipelines: Entered Edit Mode', {
+			source: 'signoz-ui',
+		});
+	};
 	const onAddNewPipeline = (): void => {
 		setActionMode(ActionMode.Editing);
 		setActionType(ActionType.AddPipeline);
+
+		trackEvent('Logs: Pipelines: Clicked Add New Pipeline', {
+			source: 'signoz-ui',
+		});
 	};
 
 	return (

diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx
@@ -11,6 +11,7 @@ import {
 	PipelineData,
 	ProcessorData,
 } from 'types/api/pipeline/def';
+import { trackEvent } from 'utils/segmentAnalytics';
 
 import { tableComponents } from '../config';
 import { ModalFooterTitle } from '../styles';
@@ -189,6 +190,10 @@ function PipelineExpandView({
 
 	const addNewProcessorHandler = useCallback((): void => {
 		setActionType(ActionType.AddProcessor);
+
+		trackEvent('Logs: Pipelines: Clicked Add New Processor', {
+			source: 'signoz-ui',
+		});
 	}, [setActionType]);
 
 	const footer = useCallback((): JSX.Element | undefined => {

diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
@@ -15,6 +15,7 @@ import {
 	PipelineData,
 	ProcessorData,
 } from 'types/api/pipeline/def';
+import { trackEvent } from 'utils/segmentAnalytics';
 import { v4 } from 'uuid';
 
 import { tableComponents } from '../config';
@@ -329,6 +330,10 @@ function PipelineListsView({
 
 	const addNewPipelineHandler = useCallback((): void => {
 		setActionType(ActionType.AddPipeline);
+
+		trackEvent('Logs: Pipelines: Clicked Add New Pipeline', {
+			source: 'signoz-ui',
+		});
 	}, [setActionType]);
 
 	const footer = useCallback((): JSX.Element | undefined => {
@@ -359,8 +364,16 @@ function PipelineListsView({
 			refetchPipelineLists();
 			setActionMode(ActionMode.Viewing);
 			setShowSaveButton(undefined);
-			setCurrPipelineData(response.payload?.pipelines || []);
-			setPrevPipelineData(response.payload?.pipelines || []);
+
+			const pipelinesInDB = response.payload?.pipelines || [];
+			setCurrPipelineData(pipelinesInDB);
+			setPrevPipelineData(pipelinesInDB);
+
+			trackEvent('Logs: Pipelines: Saved Pipelines', {
+				count: pipelinesInDB.length,
+				enabled: pipelinesInDB.filter((p) => p.enabled).length,
+				source: 'signoz-ui',
+			});
 		} else {
 			modifiedPipelineData.forEach((item: PipelineData) => {
 				const pipelineData = item;

diff --git a/...pelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx b/...pelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx
@@ -3,6 +3,7 @@ import { Divider, Modal } from 'antd';
 import PipelineProcessingPreview from 'container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview';
 import { useState } from 'react';
 import { PipelineData } from 'types/api/pipeline/def';
+import { trackEvent } from 'utils/segmentAnalytics';
 
 import { iconStyle } from '../../../config';
 
@@ -18,9 +19,16 @@ function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null {
 		return null;
 	}
 
+	const onOpenPreview = (): void => {
+		openModal();
+		trackEvent('Logs: Pipelines: Clicked Preview Pipeline', {
+			source: 'signoz-ui',
+		});
+	};
+
 	return (
 		<>
-			<EyeFilled style={iconStyle} onClick={openModal} />
+			<EyeFilled style={iconStyle} onClick={onOpenPreview} />
 			<Modal
 				open={isModalOpen}
 				onCancel={closeModal}