chore: added kakfa analytics (#7127)

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx

@@ -2,6 +2,7 @@
 import '../MQDetails.style.scss';
 
 import { Table, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { MessagingQueueServicePayload } from 'api/messagingQueues/getConsumerLagDetails';
 import { getKafkaSpanEval } from 'api/messagingQueues/getKafkaSpanEval';
 import axios from 'axios';
@@ -15,7 +16,7 @@ import {
 	MessagingQueuesViewType,
 	RowData,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -93,6 +94,9 @@ export function getColumns(
 											className="traceid-text"
 											onClick={(): void => {
 												window.open(`${ROUTES.TRACE}/${item}`, '_blank');
+												logEvent(`MQ Kafka: Drop Rate - traceid navigation`, {
+													item,
+												});
 											}}
 										>
 											{item}
@@ -227,6 +231,22 @@ function DropRateView(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, evaluationTime]);
 
+	const prevTableDataRef = useRef<string>();
+
+	useEffect(() => {
+		if (tableData.length > 0) {
+			const currentTableData = JSON.stringify(tableData);
+
+			if (currentTableData !== prevTableDataRef.current) {
+				logEvent(`MQ Kafka: Drop Rate View`, {
+					dataRender: tableData.length,
+				});
+				prevTableDataRef.current = currentTableData;
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [JSON.stringify(tableData)]);
+
 	return (
 		<div className={cx('mq-overview-container', 'droprate-view')}>
 			<div className="mq-overview-title">

frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx

@@ -3,6 +3,7 @@
 import './MQTables.styles.scss';
 
 import { Skeleton, Table, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import {
 	MessagingQueueServicePayload,
 	MessagingQueuesPayloadProps,
@@ -23,11 +24,12 @@ import {
 	MessagingQueueServiceDetailType,
 	MessagingQueuesViewType,
 	MessagingQueuesViewTypeOptions,
+	ProducerLatencyOptions,
 	RowData,
 	SelectedTimelineQuery,
 	setConfigDetail,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useHistory, useLocation } from 'react-router-dom';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -130,6 +132,7 @@ function MessagingQueuesTable({
 	tableApi,
 	validConfigPresent = false,
 	type = 'Detail',
+	option = ProducerLatencyOptions.Producers,
 }: {
 	currentTab?: MessagingQueueServiceDetailType;
 	selectedView: MessagingQueuesViewTypeOptions;
@@ -141,6 +144,7 @@ function MessagingQueuesTable({
 	>;
 	validConfigPresent?: boolean;
 	type?: 'Detail' | 'Overview';
+	option?: ProducerLatencyOptions;
 }): JSX.Element {
 	const [columns, setColumns] = useState<any[]>([]);
 	const [tableData, setTableData] = useState<any[]>([]);
@@ -262,6 +266,43 @@ function MessagingQueuesTable({
 					configDetailQueryData?.topic || ''
 			  } ${configDetailQueryData?.partition || ''}`;
 
+	const prevTableDataRef = useRef<string>();
+
+	useEffect(() => {
+		if (tableData.length > 0 && type === 'Overview') {
+			const currentTableData = JSON.stringify(tableData);
+
+			if (currentTableData !== prevTableDataRef.current) {
+				logEvent(`MQ Kafka: ${MessagingQueuesViewType[selectedView].label}`, {
+					dataRender: tableData.length,
+				});
+				prevTableDataRef.current = currentTableData;
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [option, JSON.stringify(tableData), selectedView]);
+
+	useEffect(() => {
+		if (tableData.length > 0 && type === 'Detail') {
+			const currentTableData = JSON.stringify(tableData);
+
+			if (currentTableData !== prevTableDataRef.current) {
+				logEvent(
+					`MQ Kafka: ${MessagingQueuesViewType[selectedView].label} - details`,
+					{
+						dataRender: tableData.length,
+						activeTab: currentTab,
+						topic: configDetailQueryData?.topic,
+						partition: configDetailQueryData?.partition,
+						serviceName: configDetailQueryData?.service_name,
+					},
+				);
+				prevTableDataRef.current = currentTableData;
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentTab, JSON.stringify(tableData), selectedView]);
+
 	return (
 		<div className="mq-tables-container">
 			{!validConfigPresent ? (

frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx

@@ -112,6 +112,7 @@ function MessagingQueueOverview({
 				tableApi={getTableApi(selectedView)}
 				validConfigPresent
 				type="Overview"
+				option={option}
 			/>
 		</div>
 	);

frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricColumnGraphs.tsx

@@ -26,12 +26,14 @@ interface MetricSectionProps {
 	title: string;
 	description: string;
 	graphCount: Widgets[];
+	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }
 
 function MetricSection({
 	title,
 	description,
 	graphCount,
+	checkIfDataExists,
 }: MetricSectionProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -50,6 +52,7 @@ function MetricSection({
 					<MetricPageGridGraph
 						key={`graph-${widgetData.id}`}
 						widgetData={widgetData}
+						checkIfDataExists={checkIfDataExists}
 					/>
 				))}
 			</div>
@@ -57,7 +60,15 @@ function MetricSection({
 	);
 }
 
-function MetricColumnGraphs(): JSX.Element {
+MetricSection.defaultProps = {
+	checkIfDataExists: (): void => {},
+};
+
+function MetricColumnGraphs({
+	checkIfDataExists,
+}: {
+	checkIfDataExists: (isDataAvailable: boolean) => void;
+}): JSX.Element {
 	const { t } = useTranslation('messagingQueues');
 
 	const metricsData = [
@@ -106,6 +117,7 @@ function MetricColumnGraphs(): JSX.Element {
 					title={metric.title}
 					description={metric.description}
 					graphCount={metric?.graphCount || []}
+					checkIfDataExists={checkIfDataExists}
 				/>
 			))}
 		</div>

frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPage.tsx

@@ -1,11 +1,12 @@
 import './MetricPage.styles.scss';
 
 import { Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Widgets } from 'types/api/dashboard/getAll';
 
@@ -28,6 +29,7 @@ interface CollapsibleMetricSectionProps {
 	graphCount: Widgets[];
 	isCollapsed: boolean;
 	onToggle: () => void;
+	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }
 
 function CollapsibleMetricSection({
@@ -36,6 +38,7 @@ function CollapsibleMetricSection({
 	graphCount,
 	isCollapsed,
 	onToggle,
+	checkIfDataExists,
 }: CollapsibleMetricSectionProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -63,6 +66,7 @@ function CollapsibleMetricSection({
 							<MetricPageGridGraph
 								key={`graph-${widgetData.id}`}
 								widgetData={widgetData}
+								checkIfDataExists={checkIfDataExists}
 							/>
 						))}
 					</div>
@@ -72,6 +76,10 @@ function CollapsibleMetricSection({
 	);
 }
 
+CollapsibleMetricSection.defaultProps = {
+	checkIfDataExists: undefined,
+};
+
 function MetricPage(): JSX.Element {
 	const [collapsedSections, setCollapsedSections] = useState<{
 		[key: string]: boolean;
@@ -114,9 +122,27 @@ function MetricPage(): JSX.Element {
 		},
 	];
 
+	const [renderedGraphCount, setRenderedGraphCount] = useState(0);
+	const hasLoggedRef = useRef(false);
+
+	const checkIfDataExists = (isDataAvailable: boolean): void => {
+		if (isDataAvailable) {
+			const newCount = renderedGraphCount + 1;
+			setRenderedGraphCount(newCount);
+
+			// Only log when first graph has rendered and we haven't logged yet
+			if (newCount === 1 && !hasLoggedRef.current) {
+				logEvent('MQ Kafka: Metric view', {
+					graphRendered: true,
+				});
+				hasLoggedRef.current = true;
+			}
+		}
+	};
+
 	return (
 		<div className="metric-page">
-			<MetricColumnGraphs />
+			<MetricColumnGraphs checkIfDataExists={checkIfDataExists} />
 			{metricSections.map(({ key, title, description, graphCount }) => (
 				<CollapsibleMetricSection
 					key={key}
@@ -125,6 +151,7 @@ function MetricPage(): JSX.Element {
 					graphCount={graphCount}
 					isCollapsed={collapsedSections[key]}
 					onToggle={(): void => toggleCollapse(key)}
+					checkIfDataExists={checkIfDataExists}
 				/>
 			))}
 		</div>

frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageGraph.tsx

@@ -15,8 +15,10 @@ import { Widgets } from 'types/api/dashboard/getAll';
 
 function MetricPageGridGraph({
 	widgetData,
+	checkIfDataExists,
 }: {
 	widgetData: Widgets;
+	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
@@ -51,9 +53,14 @@ function MetricPageGridGraph({
 				widget={widgetData}
 				headerMenuList={[...ViewMenuAction]}
 				onDragSelect={onDragSelect}
+				dataAvailable={checkIfDataExists}
 			/>
 		</Card>
 	);
 }
 
+MetricPageGridGraph.defaultProps = {
+	checkIfDataExists: (): void => {},
+};
+
 export default MetricPageGridGraph;