chore: add analytics events for trace funnels (#7638)

frontend/src/pages/TraceDetailV2/index.tsx

@@ -1,6 +1,7 @@
 import './TraceDetailV2.styles.scss';
 
 import { Button, Tabs } from 'antd';
+import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Compass, Cone, TowerControl, Undo } from 'lucide-react';
@@ -34,6 +35,7 @@ function NewTraceDetail(props: INewTraceDetailProps): JSX.Element {
 						history.push(ROUTES.TRACES_EXPLORER);
 					}
 					if (activeKey === 'funnels') {
+						logEvent('Trace Funnels: visited from trace details page', {});
 						history.push(ROUTES.TRACES_FUNNELS);
 					}
 				}}

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/StepsContent.tsx

@@ -1,6 +1,7 @@
 import './StepsContent.styles.scss';
 
 import { Button, Steps } from 'antd';
+import logEvent from 'api/common/logEvent';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { PlusIcon, Undo2 } from 'lucide-react';
 import { useFunnelContext } from 'pages/TracesFunnels/FunnelContext';
@@ -28,6 +29,10 @@ function StepsContent({
 		if (stepWasAdded) {
 			handleReplaceStep(steps.length, span.serviceName, span.name);
 		}
+		logEvent(
+			'Trace Funnels: span added for a new step from trace details page',
+			{},
+		);
 	}, [span, handleAddStep, handleReplaceStep, steps.length]);
 
 	return (

frontend/src/pages/TracesFunnels/FunnelContext.tsx

@@ -1,3 +1,4 @@
+import logEvent from 'api/common/logEvent';
 import { ValidateFunnelResponse } from 'api/traceFunnels';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { Time } from 'container/TopNav/DateTimeSelection/config';
@@ -152,6 +153,7 @@ export function FunnelProvider({
 				service_name: serviceName,
 				span_name: spanName,
 			});
+			logEvent('Trace Funnels: span added (replaced) from trace details page', {});
 		},
 		[handleStepUpdate],
 	);

frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx

@@ -1,6 +1,7 @@
 import '../RenameFunnel/RenameFunnel.styles.scss';
 
 import { Input } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { AxiosError } from 'axios';
 import SignozModal from 'components/SignozModal/SignozModal';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -11,7 +12,7 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Check, X } from 'lucide-react';
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { generatePath } from 'react-router-dom';
+import { generatePath, matchPath, useLocation } from 'react-router-dom';
 
 interface CreateFunnelProps {
 	isOpen: boolean;
@@ -29,6 +30,7 @@ function CreateFunnel({
 	const { notifications } = useNotifications();
 	const queryClient = useQueryClient();
 	const { safeNavigate } = useSafeNavigate();
+	const { pathname } = useLocation();
 
 	const handleCreate = (): void => {
 		createFunnelMutation.mutate(
@@ -41,6 +43,13 @@ function CreateFunnel({
 					notifications.success({
 						message: 'Funnel created successfully',
 					});
+
+					const eventMessage = matchPath(pathname, ROUTES.TRACE_DETAIL)
+						? 'Trace Funnels: Funnel created from trace details page'
+						: 'Trace Funnels: Funnel created from trace funnels list page';
+
+					logEvent(eventMessage, {});
+
 					setFunnelName('');
 					queryClient.invalidateQueries([REACT_QUERY_KEY.GET_FUNNELS_LIST]);
 					onClose(data?.payload?.funnel_id);

frontend/src/pages/TracesModulePage/TracesModulePage.tsx

@@ -1,5 +1,6 @@
 import './TracesModulePage.styles.scss';
 
+import logEvent from 'api/common/logEvent';
 import RouteTab from 'components/RouteTab';
 import { TabRoutes } from 'components/RouteTab/types';
 import ROUTES from 'constants/routes';
@@ -18,6 +19,12 @@ function TracesModulePage(): JSX.Element {
 		tracesSaveView,
 	].filter(Boolean) as TabRoutes[];
 
+	const handleTabChange = (activeRoute: string): void => {
+		if (activeRoute === ROUTES.TRACES_FUNNELS) {
+			logEvent('Trace Funnels: visited from trace explorer page', {});
+		}
+	};
+
 	return (
 		<div className="traces-module-container">
 			<RouteTab
@@ -26,6 +33,7 @@ function TracesModulePage(): JSX.Element {
 					pathname.includes(ROUTES.TRACES_FUNNELS) ? ROUTES.TRACES_FUNNELS : pathname
 				}
 				history={history}
+				onChangeHandler={handleTabChange}
 			/>
 		</div>
 	);