From 1f52139ed3176b6061cba2733fb072ed357253cb Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Mon, 17 Feb 2025 15:04:57 +0530 Subject: [PATCH] chore: added kakfa analytics (#7127) --- .../MQDetails/DropRateView/DropRateView.tsx | 22 +++++++++- .../MQDetails/MQTables/MQTables.tsx | 43 ++++++++++++++++++- .../MQDetails/MessagingQueueOverview.tsx | 1 + .../MetricPage/MetricColumnGraphs.tsx | 14 +++++- .../MQDetails/MetricPage/MetricPage.tsx | 31 ++++++++++++- .../MQDetails/MetricPage/MetricPageGraph.tsx | 7 +++ 6 files changed, 113 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx b/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx index c30f1bb1ef..5fc65e16e9 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx +++ b/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(); + + 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 (
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx index 1430682bce..33dd4269b5 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx +++ b/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([]); const [tableData, setTableData] = useState([]); @@ -262,6 +266,43 @@ function MessagingQueuesTable({ configDetailQueryData?.topic || '' } ${configDetailQueryData?.partition || ''}`; + const prevTableDataRef = useRef(); + + 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 (
{!validConfigPresent ? ( diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx index 4046226cd0..8dc8a844bf 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx +++ b/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx @@ -112,6 +112,7 @@ function MessagingQueueOverview({ tableApi={getTableApi(selectedView)} validConfigPresent type="Overview" + option={option} />
); diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricColumnGraphs.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricColumnGraphs.tsx index a88db1efc7..a2c1cdc48f 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricColumnGraphs.tsx +++ b/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({ ))}
@@ -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} /> ))}
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPage.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPage.tsx index 3c997da459..43c83fd018 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPage.tsx +++ b/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({ ))} @@ -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 (
- + {metricSections.map(({ key, title, description, graphCount }) => ( toggleCollapse(key)} + checkIfDataExists={checkIfDataExists} /> ))}
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageGraph.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageGraph.tsx index 248dc35178..a8064a1bfc 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageGraph.tsx +++ b/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} /> ); } +MetricPageGridGraph.defaultProps = { + checkIfDataExists: (): void => {}, +}; + export default MetricPageGridGraph;