From 5dc5b2e3668e4452b27dd30b1fe3ddbfea9ac3d8 Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:16:44 +0530 Subject: [PATCH] chore: added logeEvents in Kafka-ui (#5810) * chore: added logeEvents in Kafka-ui * chore: changed event logic for graph data fetch --- .../GridCardLayout/GridCard/index.tsx | 4 +++ .../GridCardLayout/GridCard/types.ts | 1 + .../MQDetailPage/MQDetailPage.tsx | 6 ++++ .../MQDetails/MQTables/MQTables.tsx | 30 ++++++++++++---- .../pages/MessagingQueues/MQGraph/MQGraph.tsx | 14 +++++++- .../pages/MessagingQueues/MessagingQueues.tsx | 35 ++++++++++++++++--- 6 files changed, 79 insertions(+), 11 deletions(-) diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx index d7d2e729cb..444978f61d 100644 --- a/frontend/src/container/GridCardLayout/GridCard/index.tsx +++ b/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(); @@ -180,6 +181,9 @@ function GridCardGraph({ onError: (error) => { setErrorMessage(error.message); }, + onSettled: (data) => { + dataAvailable?.(Boolean(data?.payload?.data?.result?.length)); + }, }, ); diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts index d0edede5a1..05d3368096 100644 --- a/frontend/src/container/GridCardLayout/GridCard/types.ts +++ b/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 { diff --git a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx index f82a2f605d..8fa697f6af 100644 --- a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx +++ b/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 (
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx index 3de380cc2d..9555f7f228 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx +++ b/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(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 (
diff --git a/frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx b/frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx index cd7cdd74c4..7d00fbf69f 100644 --- a/frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx +++ b/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(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 ( ); diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx index 727dc514b9..103fc15827 100644 --- a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx +++ b/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: , 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,7 +45,11 @@ 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 { @@ -43,6 +57,10 @@ function MessagingQueues(): JSX.Element { } }; + useEffect(() => { + logEvent('Messaging Queues: Overview page visited', {}); + }, []); + return (
@@ -70,7 +88,10 @@ function MessagingQueues(): JSX.Element {