chore: added mq overview page analytics (#7128)

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -15,6 +15,7 @@ import {
 	Typography,
 } from 'antd';
 import { FilterDropdownProps } from 'antd/lib/table/interface';
+import logEvent from 'api/common/logEvent';
 import {
 	getQueueOverview,
 	QueueOverviewResponse,
@@ -458,6 +459,7 @@ export default function CeleryOverviewTable({
 
 	const handleRowClick = (record: RowData): void => {
 		onRowClick(record);
+		logEvent('MQ Overview Page: Right Panel', { ...record });
 	};
 
 	const getFilteredData = useCallback(
@@ -481,6 +483,22 @@ export default function CeleryOverviewTable({
 		tableData,
 	]);
 
+	const prevTableDataRef = useRef<string>();
+
+	useEffect(() => {
+		if (tableData.length > 0) {
+			const currentTableData = JSON.stringify(tableData);
+
+			if (currentTableData !== prevTableDataRef.current) {
+				logEvent(`MQ Overview Page: List rendered`, {
+					dataRender: tableData.length,
+				});
+				prevTableDataRef.current = currentTableData;
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [JSON.stringify(tableData)]);
+
 	return (
 		<div className="celery-overview-table-container">
 			<Input.Search

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/OverviewRightPanelGraph.tsx

@@ -1,5 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Card } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { useGetGraphCustomSeries } from 'components/CeleryTask/useGetGraphCustomSeries';
 import { useNavigateToTraces } from 'components/CeleryTask/useNavigateToTraces';
 import { QueryParams } from 'constants/query';
@@ -9,7 +10,7 @@ import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { onGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
@@ -123,6 +124,26 @@ export default function OverviewRightPanelGraph({
 		},
 	});
 
+	const [requestRateStatus, setRequestRateStatus] = useState<boolean | null>(
+		null,
+	);
+	const [errorRateStatus, setErrorRateStatus] = useState<boolean | null>(null);
+	const [avgLatencyStatus, setAvgLatencyStatus] = useState<boolean | null>(null);
+
+	useEffect(() => {
+		if (
+			requestRateStatus !== null &&
+			errorRateStatus !== null &&
+			avgLatencyStatus !== null
+		) {
+			logEvent('MQ Overview Page: Right Drawer - graphs', {
+				requestRate: requestRateStatus,
+				errorRate: errorRateStatus,
+				avgLatency: avgLatencyStatus,
+			});
+		}
+	}, [requestRateStatus, errorRateStatus, avgLatencyStatus]);
+
 	return (
 		<Card className="overview-right-panel-graph-card">
 			<div className="request-rate-card">
@@ -130,7 +151,9 @@ export default function OverviewRightPanelGraph({
 					type="default"
 					size="small"
 					id="Celery_request_rate_button"
-					onClick={(): void => goToTraces(requestRateWidget)}
+					onClick={(): void => {
+						goToTraces(requestRateWidget);
+					}}
 				>
 					View Traces
 				</Button>
@@ -140,6 +163,9 @@ export default function OverviewRightPanelGraph({
 					onDragSelect={onDragSelect}
 					onClickHandler={handleGraphClick('Celery_request_rate')}
 					customSeries={getCustomSeries}
+					dataAvailable={(isDataAvailable: boolean): void => {
+						setRequestRateStatus(isDataAvailable);
+					}}
 				/>
 			</div>
 			<div className="error-rate-card">
@@ -157,6 +183,9 @@ export default function OverviewRightPanelGraph({
 					onDragSelect={onDragSelect}
 					onClickHandler={handleGraphClick('Celery_error_rate')}
 					customSeries={getCustomSeries}
+					dataAvailable={(isDataAvailable: boolean): void => {
+						setErrorRateStatus(isDataAvailable);
+					}}
 				/>
 			</div>
 			<div className="avg-latency-card">
@@ -173,6 +202,9 @@ export default function OverviewRightPanelGraph({
 					headerMenuList={[...ViewMenuAction]}
 					onDragSelect={onDragSelect}
 					onClickHandler={handleGraphClick('Celery_avg_latency')}
+					dataAvailable={(isDataAvailable: boolean): void => {
+						setAvgLatencyStatus(isDataAvailable);
+					}}
 				/>
 			</div>
 		</Card>

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.tsx

@@ -2,6 +2,7 @@ import './ValueInfo.styles.scss';
 
 import { FileSearchOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Row } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { useNavigateToTraces } from 'components/CeleryTask/useNavigateToTraces';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -113,6 +114,9 @@ export default function ValueInfo({
 		return 'red';
 	};
 
+	const mqAnalyticsTitle =
+		'MQ Overview Page: Right drawer navigation to trace page';
+
 	return (
 		<Card className="value-info-card">
 			<Row gutter={16}>
@@ -133,7 +137,15 @@ export default function ValueInfo({
 						icon={<FileSearchOutlined />}
 						className="trace-button"
 						disabled={isLoading}
-						onClick={(): void => navigateToTrace(filters ?? [])}
+						onClick={(): void => {
+							logEvent(mqAnalyticsTitle, {
+								filters,
+								minTime,
+								maxTime,
+								source: 'request rate',
+							});
+							navigateToTrace(filters ?? []);
+						}}
 					>
 						View Traces
 					</Button>
@@ -155,7 +167,13 @@ export default function ValueInfo({
 						icon={<FileSearchOutlined />}
 						className="trace-button"
 						disabled={isLoading}
-						onClick={(): void =>
+						onClick={(): void => {
+							logEvent(mqAnalyticsTitle, {
+								filters,
+								minTime,
+								maxTime,
+								source: 'error rate',
+							});
 							navigateToTrace([
 								...(filters ?? []),
 								{
@@ -171,8 +189,8 @@ export default function ValueInfo({
 									op: '=',
 									value: 'true',
 								},
-							])
-						}
+							]);
+						}}
 					>
 						View Traces
 					</Button>
@@ -194,7 +212,15 @@ export default function ValueInfo({
 						icon={<FileSearchOutlined />}
 						className="trace-button"
 						disabled={isLoading}
-						onClick={(): void => navigateToTrace(filters ?? [])}
+						onClick={(): void => {
+							logEvent(mqAnalyticsTitle, {
+								filters,
+								minTime,
+								maxTime,
+								source: 'average latency',
+							});
+							navigateToTrace(filters ?? []);
+						}}
 					>
 						View Traces
 					</Button>