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