chore: added logeEvents in Kafka-ui (#5810)

* chore: added logeEvents in Kafka-ui

* chore: changed event logic for graph data fetch

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -34,6 +34,7 @@ function GridCardGraph({
 	onClickHandler,
 	onDragSelect,
 	customTooltipElement,
+	dataAvailable,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -180,6 +181,9 @@ function GridCardGraph({
 			onError: (error) => {
 				setErrorMessage(error.message);
 			},
+			onSettled: (data) => {
+				dataAvailable?.(Boolean(data?.payload?.data?.result?.length));
+			},
 		},
 	);
 

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -44,6 +44,7 @@ export interface GridCardGraphProps {
 	version?: string;
 	onDragSelect: (start: number, end: number) => void;
 	customTooltipElement?: HTMLDivElement;
+	dataAvailable?: (isDataAvailable: boolean) => void;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx

@@ -1,9 +1,11 @@
 import '../MessagingQueues.styles.scss';
 
 import { Select, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { ListMinus } from 'lucide-react';
+import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { MessagingQueuesViewType } from '../MessagingQueuesUtils';
@@ -15,6 +17,10 @@ import MessagingQueuesGraph from '../MQGraph/MQGraph';
 function MQDetailPage(): JSX.Element {
 	const history = useHistory();
 
+	useEffect(() => {
+		logEvent('Messaging Queues: Detail page visited', {});
+	}, []);
+
 	return (
 		<div className="messaging-queue-container">
 			<div className="messaging-breadcrumb">

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

@@ -1,6 +1,7 @@
 import './MQTables.styles.scss';
 
 import { Skeleton, Table, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import axios from 'axios';
 import { isNumber } from 'chart.js/helpers';
 import { ColumnTypeRender } from 'components/Logs/TableView/types';
@@ -17,7 +18,7 @@ import {
 	RowData,
 	SelectedTimelineQuery,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useHistory } from 'react-router-dom';
 
@@ -169,11 +170,28 @@ function MessagingQueuesTable({
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(() => getConsumerDetails(props), [currentTab, props]);
 
-	const isEmptyDetails = (timelineQueryData: SelectedTimelineQuery): boolean =>
-		isEmpty(timelineQueryData) ||
-		(!timelineQueryData?.group &&
-			!timelineQueryData?.topic &&
-			!timelineQueryData?.partition);
+	const isLogEventCalled = useRef<boolean>(false);
+
+	const isEmptyDetails = (timelineQueryData: SelectedTimelineQuery): boolean => {
+		const isEmptyDetail =
+			isEmpty(timelineQueryData) ||
+			(!timelineQueryData?.group &&
+				!timelineQueryData?.topic &&
+				!timelineQueryData?.partition);
+
+		if (!isEmptyDetail && !isLogEventCalled.current) {
+			logEvent('Messaging Queues: More details viewed', {
+				'tab-option': ConsumerLagDetailTitle[currentTab],
+				variables: {
+					group: timelineQueryData?.group,
+					topic: timelineQueryData?.topic,
+					partition: timelineQueryData?.partition,
+				},
+			});
+			isLogEventCalled.current = true;
+		}
+		return isEmptyDetail;
+	};
 
 	return (
 		<div className="mq-tables-container">

frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx

@@ -1,3 +1,4 @@
+import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/GridCardLayout/config';
@@ -6,7 +7,7 @@ import { Card } from 'container/GridCardLayout/styles';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
@@ -34,8 +35,10 @@ function MessagingQueuesGraph(): JSX.Element {
 		() => getWidgetQueryBuilder(getWidgetQuery({ filterItems })),
 		[filterItems],
 	);
+
 	const history = useHistory();
 	const location = useLocation();
+	const isLogEventCalled = useRef<boolean>(false);
 
 	const messagingQueueCustomTooltipText = (): HTMLDivElement => {
 		const customText = document.createElement('div');
@@ -66,6 +69,14 @@ function MessagingQueuesGraph(): JSX.Element {
 		[dispatch, history, pathname, urlQuery],
 	);
 
+	const checkIfDataExists = (isDataAvailable: boolean): void => {
+		if (!isLogEventCalled.current) {
+			isLogEventCalled.current = true;
+			logEvent('Messaging Queues: Graph data fetched', {
+				isDataAvailable,
+			});
+		}
+	};
 	return (
 		<Card
 			isDarkMode={isDarkMode}
@@ -80,6 +91,7 @@ function MessagingQueuesGraph(): JSX.Element {
 				}}
 				onDragSelect={onDragSelect}
 				customTooltipElement={messagingQueueCustomTooltipText()}
+				dataAvailable={checkIfDataExists}
 			/>
 		</Card>
 	);

frontend/src/pages/MessagingQueues/MessagingQueues.tsx

@@ -3,9 +3,11 @@ import './MessagingQueues.styles.scss';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Modal } from 'antd';
+import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { Calendar, ListMinus } from 'lucide-react';
+import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { isCloudUser } from 'utils/app';
 
@@ -21,12 +23,20 @@ function MessagingQueues(): JSX.Element {
 	const { confirm } = Modal;
 
 	const showConfirm = (): void => {
+		logEvent('Messaging Queues: View details clicked', {
+			page: 'Messaging Queues Overview',
+			source: 'Consumer Latency view',
+		});
+
 		confirm({
 			icon: <ExclamationCircleFilled />,
 			content:
 				'Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.',
 			className: 'overview-confirm-modal',
 			onOk() {
+				logEvent('Messaging Queues: Proceed button clicked', {
+					page: 'Messaging Queues Overview',
+				});
 				history.push(ROUTES.MESSAGING_QUEUES_DETAIL);
 			},
 			okText: 'Proceed',
@@ -35,14 +45,22 @@ function MessagingQueues(): JSX.Element {
 
 	const isCloudUserVal = isCloudUser();
 
-	const getStartedRedirect = (link: string): void => {
+	const getStartedRedirect = (link: string, sourceCard: string): void => {
+		logEvent('Messaging Queues: Get started clicked', {
+			source: sourceCard,
+			link: isCloudUserVal ? link : KAFKA_SETUP_DOC_LINK,
+		});
 		if (isCloudUserVal) {
 			history.push(link);
 		} else {
 			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
 	};
 
+	useEffect(() => {
+		logEvent('Messaging Queues: Overview page visited', {});
+	}, []);
+
 	return (
 		<div className="messaging-queue-container">
 			<div className="messaging-breadcrumb">
@@ -70,7 +88,10 @@ function MessagingQueues(): JSX.Element {
 							<Button
 								type="default"
 								onClick={(): void =>
-									getStartedRedirect(ROUTES.GET_STARTED_APPLICATION_MONITORING)
+									getStartedRedirect(
+										ROUTES.GET_STARTED_APPLICATION_MONITORING,
+										'Configure Consumer',
+									)
 								}
 							>
 								Get Started
@@ -88,7 +109,10 @@ function MessagingQueues(): JSX.Element {
 							<Button
 								type="default"
 								onClick={(): void =>
-									getStartedRedirect(ROUTES.GET_STARTED_APPLICATION_MONITORING)
+									getStartedRedirect(
+										ROUTES.GET_STARTED_APPLICATION_MONITORING,
+										'Configure Producer',
+									)
 								}
 							>
 								Get Started
@@ -106,7 +130,10 @@ function MessagingQueues(): JSX.Element {
 							<Button
 								type="default"
 								onClick={(): void =>
-									getStartedRedirect(ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING)
+									getStartedRedirect(
+										ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING,
+										'Monitor kafka',
+									)
 								}
 							>
 								Get Started