Merge remote-tracking branch 'origin/issue_458' into issue_458

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -15,6 +15,7 @@ import {
 	Typography,
 } from 'antd';
 import { FilterDropdownProps } from 'antd/lib/table/interface';
+import logEvent from 'api/common/logEvent';
 import {
 	getQueueOverview,
 	QueueOverviewResponse,
@@ -458,6 +459,7 @@ export default function CeleryOverviewTable({
 
 	const handleRowClick = (record: RowData): void => {
 		onRowClick(record);
+		logEvent('MQ Overview Page: Right Panel', { ...record });
 	};
 
 	const getFilteredData = useCallback(
@@ -481,6 +483,22 @@ export default function CeleryOverviewTable({
 		tableData,
 	]);
 
+	const prevTableDataRef = useRef<string>();
+
+	useEffect(() => {
+		if (tableData.length > 0) {
+			const currentTableData = JSON.stringify(tableData);
+
+			if (currentTableData !== prevTableDataRef.current) {
+				logEvent(`MQ Overview Page: List rendered`, {
+					dataRender: tableData.length,
+				});
+				prevTableDataRef.current = currentTableData;
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [JSON.stringify(tableData)]);
+
 	return (
 		<div className="celery-overview-table-container">
 			<Input.Search

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx

@@ -3,7 +3,7 @@ import './AccountActions.style.scss';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Select, Skeleton } from 'antd';
 import { SelectProps } from 'antd/lib';
-import { useAwsAccounts } from 'hooks/integrations/aws/useAwsAccounts';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Check, ChevronDown } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -6,7 +6,7 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
 	getRegionPreviewText,
 	useAccountSettingsModal,
-} from 'hooks/integrations/aws/useAccountSettingsModal';
+} from 'hooks/integration/aws/useAccountSettingsModal';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Dispatch, SetStateAction, useCallback } from 'react';

frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.tsx

@@ -3,7 +3,7 @@ import './CloudAccountSetupModal.style.scss';
 import { Color } from '@signozhq/design-tokens';
 import SignozModal from 'components/SignozModal/SignozModal';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useIntegrationModal } from 'hooks/integrations/aws/useIntegrationModal';
+import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx

@@ -1,6 +1,6 @@
 import { Form } from 'antd';
 import cx from 'classnames';
-import { useAccountStatus } from 'hooks/integrations/aws/useAccountStatus';
+import { useAccountStatus } from 'hooks/integration/aws/useAccountStatus';
 import { useRef } from 'react';
 import { AccountStatusResponse } from 'types/api/integrations/aws';
 import { regions } from 'utils/regions';

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.tsx

@@ -1,7 +1,7 @@
 import './RegionSelector.style.scss';
 
 import { Checkbox } from 'antd';
-import { useRegionSelection } from 'hooks/integrations/aws/useRegionSelection';
+import { useRegionSelection } from 'hooks/integration/aws/useRegionSelection';
 import { Dispatch, SetStateAction } from 'react';
 import { regions } from 'utils/regions';
 

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx

@@ -7,7 +7,7 @@ import {
 	ServiceConfig,
 	SupportedSignals,
 } from 'container/CloudIntegrationPage/ServicesSection/types';
-import { useUpdateServiceConfig } from 'hooks/integrations/aws/useUpdateServiceConfig';
+import { useUpdateServiceConfig } from 'hooks/integration/aws/useUpdateServiceConfig';
 import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 

frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx

@@ -5,7 +5,7 @@ import CloudServiceDashboards from 'container/CloudIntegrationPage/ServicesSecti
 import CloudServiceDataCollected from 'container/CloudIntegrationPage/ServicesSection/CloudServiceDataCollected';
 import { IServiceStatus } from 'container/CloudIntegrationPage/ServicesSection/types';
 import dayjs from 'dayjs';
-import { useServiceDetails } from 'hooks/integrations/aws/useServiceDetails';
+import { useServiceDetails } from 'hooks/integration/aws/useServiceDetails';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useMemo, useState } from 'react';
 

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx

@@ -1,5 +1,5 @@
 import Spinner from 'components/Spinner';
-import { useGetAccountServices } from 'hooks/integrations/aws/useGetAccountServices';
+import { useGetAccountServices } from 'hooks/integration/aws/useGetAccountServices';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx

@@ -3,7 +3,7 @@ import './ServicesTabs.style.scss';
 import { Color } from '@signozhq/design-tokens';
 import type { SelectProps, TabsProps } from 'antd';
 import { Select, Tabs } from 'antd';
-import { getAwsServices } from 'api/integrations/aws';
+import { getAwsServices } from 'api/integration/aws';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { ChevronDown } from 'lucide-react';

frontend/src/hooks/integrations/aws/useAccountSettingsModal.ts → frontend/src/hooks/integration/aws/useAccountSettingsModal.ts

@@ -1,7 +1,7 @@
 import { Form } from 'antd';
 import { FormInstance } from 'antd/lib';
 import { CloudAccount } from 'container/CloudIntegrationPage/ServicesSection/types';
-import { useUpdateAccountConfig } from 'hooks/integrations/aws/useUpdateAccountConfig';
+import { useUpdateAccountConfig } from 'hooks/integration/aws/useUpdateAccountConfig';
 import { isEqual } from 'lodash-es';
 import {
 	Dispatch,

frontend/src/hooks/integrations/aws/useAwsAccounts.ts → frontend/src/hooks/integration/aws/useAwsAccounts.ts

@@ -1,4 +1,4 @@
-import { getAwsAccounts } from 'api/integrations/aws';
+import { getAwsAccounts } from 'api/integration/aws';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { CloudAccount } from 'container/CloudIntegrationPage/ServicesSection/types';
 import { useQuery, UseQueryResult } from 'react-query';

frontend/src/hooks/integrations/aws/useConnectionParams.ts → frontend/src/hooks/integration/aws/useConnectionParams.ts

@@ -1,4 +1,4 @@
-import { getConnectionParams } from 'api/integrations/aws';
+import { getConnectionParams } from 'api/integration/aws';
 import { AxiosError } from 'axios';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';

frontend/src/hooks/integrations/aws/useGenerateConnectionUrl.ts → frontend/src/hooks/integration/aws/useGenerateConnectionUrl.ts

@@ -1,4 +1,4 @@
-import { generateConnectionUrl } from 'api/integrations/aws';
+import { generateConnectionUrl } from 'api/integration/aws';
 import { AxiosError } from 'axios';
 import { useMutation, UseMutationResult } from 'react-query';
 import {

frontend/src/hooks/integrations/aws/useGetAccountServices.ts → frontend/src/hooks/integration/aws/useGetAccountServices.ts

@@ -1,4 +1,4 @@
-import { getAwsServices } from 'api/integrations/aws';
+import { getAwsServices } from 'api/integration/aws';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { Service } from 'container/CloudIntegrationPage/ServicesSection/types';
 import { useQuery, UseQueryResult } from 'react-query';

frontend/src/hooks/integrations/aws/useServiceDetails.ts → frontend/src/hooks/integration/aws/useServiceDetails.ts

@@ -1,4 +1,4 @@
-import { getServiceDetails } from 'api/integrations/aws';
+import { getServiceDetails } from 'api/integration/aws';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { ServiceData } from 'container/CloudIntegrationPage/ServicesSection/types';
 import { useQuery, UseQueryResult } from 'react-query';

frontend/src/hooks/integrations/aws/useUpdateAccountConfig.ts → frontend/src/hooks/integration/aws/useUpdateAccountConfig.ts

@@ -1,4 +1,4 @@
-import { updateAccountConfig } from 'api/integrations/aws';
+import { updateAccountConfig } from 'api/integration/aws';
 import { useMutation, UseMutationResult } from 'react-query';
 import {
 	AccountConfigPayload,

frontend/src/hooks/integrations/aws/useUpdateServiceConfig.ts → frontend/src/hooks/integration/aws/useUpdateServiceConfig.ts

@@ -1,4 +1,4 @@
-import { updateServiceConfig } from 'api/integrations/aws';
+import { updateServiceConfig } from 'api/integration/aws';
 import { useMutation, UseMutationResult } from 'react-query';
 
 interface UpdateServiceConfigPayload {

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/OverviewRightPanelGraph.tsx

@@ -1,5 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Card } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { useGetGraphCustomSeries } from 'components/CeleryTask/useGetGraphCustomSeries';
 import { useNavigateToTraces } from 'components/CeleryTask/useNavigateToTraces';
 import { QueryParams } from 'constants/query';
@@ -9,7 +10,7 @@ import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { onGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
@@ -123,14 +124,36 @@ export default function OverviewRightPanelGraph({
 		},
 	});
 
+	const [requestRateStatus, setRequestRateStatus] = useState<boolean | null>(
+		null,
+	);
+	const [errorRateStatus, setErrorRateStatus] = useState<boolean | null>(null);
+	const [avgLatencyStatus, setAvgLatencyStatus] = useState<boolean | null>(null);
+
+	useEffect(() => {
+		if (
+			requestRateStatus !== null &&
+			errorRateStatus !== null &&
+			avgLatencyStatus !== null
+		) {
+			logEvent('MQ Overview Page: Right Drawer - graphs', {
+				requestRate: requestRateStatus,
+				errorRate: errorRateStatus,
+				avgLatency: avgLatencyStatus,
+			});
+		}
+	}, [requestRateStatus, errorRateStatus, avgLatencyStatus]);
+
 	return (
 		<Card className="overview-right-panel-graph-card">
 			<div className="request-rate-card">
 				<Button
 					type="default"
 					size="small"
 					id="Celery_request_rate_button"
-					onClick={(): void => goToTraces(requestRateWidget)}
+					onClick={(): void => {
+						goToTraces(requestRateWidget);
+					}}
 				>
 					View Traces
 				</Button>
@@ -140,6 +163,9 @@ export default function OverviewRightPanelGraph({
 					onDragSelect={onDragSelect}
 					onClickHandler={handleGraphClick('Celery_request_rate')}
 					customSeries={getCustomSeries}
+					dataAvailable={(isDataAvailable: boolean): void => {
+						setRequestRateStatus(isDataAvailable);
+					}}
 				/>
 			</div>
 			<div className="error-rate-card">
@@ -157,6 +183,9 @@ export default function OverviewRightPanelGraph({
 					onDragSelect={onDragSelect}
 					onClickHandler={handleGraphClick('Celery_error_rate')}
 					customSeries={getCustomSeries}
+					dataAvailable={(isDataAvailable: boolean): void => {
+						setErrorRateStatus(isDataAvailable);
+					}}
 				/>
 			</div>
 			<div className="avg-latency-card">
@@ -173,6 +202,9 @@ export default function OverviewRightPanelGraph({
 					headerMenuList={[...ViewMenuAction]}
 					onDragSelect={onDragSelect}
 					onClickHandler={handleGraphClick('Celery_avg_latency')}
+					dataAvailable={(isDataAvailable: boolean): void => {
+						setAvgLatencyStatus(isDataAvailable);
+					}}
 				/>
 			</div>
 		</Card>

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.tsx

@@ -2,6 +2,7 @@ import './ValueInfo.styles.scss';
 
 import { FileSearchOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Row } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { useNavigateToTraces } from 'components/CeleryTask/useNavigateToTraces';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -113,6 +114,9 @@ export default function ValueInfo({
 		return 'red';
 	};
 
+	const mqAnalyticsTitle =
+		'MQ Overview Page: Right drawer navigation to trace page';
+
 	return (
 		<Card className="value-info-card">
 			<Row gutter={16}>
@@ -133,7 +137,15 @@ export default function ValueInfo({
 						icon={<FileSearchOutlined />}
 						className="trace-button"
 						disabled={isLoading}
-						onClick={(): void => navigateToTrace(filters ?? [])}
+						onClick={(): void => {
+							logEvent(mqAnalyticsTitle, {
+								filters,
+								minTime,
+								maxTime,
+								source: 'request rate',
+							});
+							navigateToTrace(filters ?? []);
+						}}
 					>
 						View Traces
 					</Button>
@@ -155,7 +167,13 @@ export default function ValueInfo({
 						icon={<FileSearchOutlined />}
 						className="trace-button"
 						disabled={isLoading}
-						onClick={(): void =>
+						onClick={(): void => {
+							logEvent(mqAnalyticsTitle, {
+								filters,
+								minTime,
+								maxTime,
+								source: 'error rate',
+							});
 							navigateToTrace([
 								...(filters ?? []),
 								{
@@ -171,8 +189,8 @@ export default function ValueInfo({
 									op: '=',
 									value: 'true',
 								},
-							])
-						}
+							]);
+						}}
 					>
 						View Traces
 					</Button>
@@ -194,7 +212,15 @@ export default function ValueInfo({
 						icon={<FileSearchOutlined />}
 						className="trace-button"
 						disabled={isLoading}
-						onClick={(): void => navigateToTrace(filters ?? [])}
+						onClick={(): void => {
+							logEvent(mqAnalyticsTitle, {
+								filters,
+								minTime,
+								maxTime,
+								source: 'average latency',
+							});
+							navigateToTrace(filters ?? []);
+						}}
 					>
 						View Traces
 					</Button>

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">