From a99d7f09a1e4fb091d237484bd77d5dcdeec15b4 Mon Sep 17 00:00:00 2001
From: Raj Kamal Singh <1133322+rkssisodiya@users.noreply.github.com>
Date: Wed, 15 Nov 2023 14:38:30 +0530
Subject: [PATCH] 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
---
 .../Layouts/Pipeline/CreatePipelineButton.tsx   | 13 ++++++++++++-
 .../PipelineListsView/PipelineExpandView.tsx    |  5 +++++
 .../PipelineListsView/PipelineListsView.tsx     | 17 +++++++++++++++--
 .../components/PreviewAction.tsx                | 10 +++++++++-
 4 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
index 04358c39b7..bcd4e2c2b2 100644
--- 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
index bcd1e37670..22003fc4eb 100644
--- 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
index e7211c059c..a9bf96d4dc 100644
--- 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/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx
index 353feec486..0236a04737 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx
+++ b/frontend/src/container/PipelinePage/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}