From 468f0565305c102d35e396bd639996058cbf620f Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Wed, 6 Nov 2024 14:24:38 +0530
Subject: [PATCH] feat: added kafka - scenario - 4 (#6370)

* feat: added kafka - scenario - 4

* feat: added error handling and correct api handler for kafka apis
---
 .../MQDetailPage/MQDetailPage.tsx             | 20 +++++------
 .../MessagingQueues/MQDetails/MQDetails.tsx   |  6 ++--
 .../MQDetails/MQTables/MQTables.tsx           | 24 ++++++++-----
 .../MQTables/getConsumerLagDetails.ts         | 34 ++++++++-----------
 .../MQDetails/MQTables/getKafkaSpanEval.tsx   | 27 +++++++++++++++
 .../MQTables/getPartitionLatencyDetails.ts    | 26 ++++++--------
 .../MQTables/getPartitionLatencyOverview.ts   | 31 +++++++----------
 .../MQTables/getTopicThroughputDetails.ts     | 25 +++++---------
 .../MQTables/getTopicThroughputOverview.ts    | 34 +++++++------------
 .../MQDetails/MessagingQueueOverview.tsx      |  8 +++++
 .../pages/MessagingQueues/MessagingQueues.tsx |  2 +-
 .../MessagingQueues/MessagingQueuesUtils.ts   |  6 ++--
 12 files changed, 124 insertions(+), 119 deletions(-)
 create mode 100644 frontend/src/pages/MessagingQueues/MQDetails/MQTables/getKafkaSpanEval.tsx

diff --git a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
index 931502b8e1..be8aec1da1 100644
--- a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
+++ b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
@@ -13,7 +13,6 @@ import {
 	MessagingQueuesViewTypeOptions,
 	ProducerLatencyOptions,
 } from '../MessagingQueuesUtils';
-import { SelectLabelWithComingSoon } from '../MQCommon/MQCommon';
 import MessagingQueueOverview from '../MQDetails/MessagingQueueOverview';
 import MessagingQueuesDetails from '../MQDetails/MQDetails';
 import MessagingQueuesConfigOptions from '../MQGraph/MQConfigOptions';
@@ -70,13 +69,8 @@ function MQDetailPage(): JSX.Element {
 								value: MessagingQueuesViewType.producerLatency.value,
 							},
 							{
-								label: (
-									<SelectLabelWithComingSoon
-										label={MessagingQueuesViewType.consumerLatency.label}
-									/>
-								),
-								value: MessagingQueuesViewType.consumerLatency.value,
-								disabled: true,
+								label: MessagingQueuesViewType.dropRate.label,
+								value: MessagingQueuesViewType.dropRate.value,
 							},
 						]}
 					/>
@@ -96,10 +90,12 @@ function MQDetailPage(): JSX.Element {
 				)}
 			</div>
 			<div className="messaging-queue-details">
-				<MessagingQueuesDetails
-					selectedView={selectedView}
-					producerLatencyOption={producerLatencyOption}
-				/>
+				{selectedView !== MessagingQueuesViewType.dropRate.value && (
+					<MessagingQueuesDetails
+						selectedView={selectedView}
+						producerLatencyOption={producerLatencyOption}
+					/>
+				)}
 			</div>
 		</div>
 	);
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx
index 6ec3d45f28..40a943172f 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx
@@ -139,7 +139,7 @@ const checkValidityOfDetailConfigs = (
 		return Boolean(configDetails?.topic && configDetails?.service_name);
 	}
 
-	return false;
+	return selectedView === MessagingQueuesViewType.dropRate.value;
 };
 
 function MessagingQueuesDetails({
@@ -213,14 +213,14 @@ function MessagingQueuesDetails({
 			<MessagingQueuesTable
 				currentTab={currentTab}
 				selectedView={selectedView}
-				tableApi={serviceConfigDetails[selectedView].tableApi}
+				tableApi={serviceConfigDetails[selectedView]?.tableApi}
 				validConfigPresent={checkValidityOfDetailConfigs(
 					timelineQueryData,
 					selectedView,
 					currentTab,
 					configDetailQueryData,
 				)}
-				tableApiPayload={serviceConfigDetails[selectedView].tableApiPayload}
+				tableApiPayload={serviceConfigDetails[selectedView]?.tableApiPayload}
 			/>
 		</div>
 	);
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx
index 52c01fce45..34ab160553 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable react/require-default-props */
 import './MQTables.styles.scss';
 
@@ -169,15 +170,18 @@ function MessagingQueuesTable({
 		});
 	};
 
-	const { mutate: getViewDetails, isLoading } = useMutation(tableApi, {
-		onSuccess: (data) => {
-			if (data.payload) {
-				setColumns(getColumns(data?.payload, history));
-				setTableData(getTableData(data?.payload));
-			}
+	const { mutate: getViewDetails, isLoading, error, isError } = useMutation(
+		tableApi,
+		{
+			onSuccess: (data) => {
+				if (data.payload) {
+					setColumns(getColumns(data?.payload, history));
+					setTableData(getTableData(data?.payload));
+				}
+			},
+			onError: handleConsumerDetailsOnError,
 		},
-		onError: handleConsumerDetailsOnError,
-	});
+	);
 
 	useEffect(
 		() => {
@@ -230,6 +234,10 @@ function MessagingQueuesTable({
 					</Typography.Text>
 					<Skeleton />
 				</div>
+			) : isError ? (
+				<div className="no-data-style">
+					<Typography.Text>{error?.message || SOMETHING_WENT_WRONG}</Typography.Text>
+				</div>
 			) : (
 				<>
 					{currentTab && (
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts
index ad8a290dd7..20f9c2394b 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts
@@ -1,20 +1,18 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { MessagingQueueServiceDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
 export interface MessagingQueueServicePayload {
 	start?: number | string;
 	end?: number | string;
-	variables: {
+	variables?: {
 		partition?: string;
 		topic?: string;
 		consumer_group?: string;
 		service_name?: string;
 	};
 	detailType?: MessagingQueueServiceDetailType | 'producer' | 'consumer';
+	evalTime?: number;
 }
 
 export interface MessagingQueuesPayloadProps {
@@ -42,21 +40,17 @@ export const getConsumerLagDetails = async (
 	SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
 > => {
 	const { detailType, ...restProps } = props;
-	try {
-		const response = await axios.post(
-			`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
-			{
-				...restProps,
-			},
-		);
+	const response = await axios.post(
+		`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
+		{
+			...restProps,
+		},
+	);
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getKafkaSpanEval.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getKafkaSpanEval.tsx
new file mode 100644
index 0000000000..db0b24f9c6
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getKafkaSpanEval.tsx
@@ -0,0 +1,27 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+import {
+	MessagingQueueServicePayload,
+	MessagingQueuesPayloadProps,
+} from './getConsumerLagDetails';
+
+export const getKafkaSpanEval = async (
+	props: Omit<MessagingQueueServicePayload, 'detailType' | 'variables'>,
+): Promise<
+	SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
+> => {
+	const { start, end, evalTime } = props;
+	const response = await axios.post(`messaging-queues/kafka/span/evaluation`, {
+		start,
+		end,
+		eval_time: evalTime,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyDetails.ts b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyDetails.ts
index 8c0b26f594..1897609aa0 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyDetails.ts
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyDetails.ts
@@ -1,7 +1,4 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { MessagingQueueServiceDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
@@ -22,18 +19,15 @@ export const getPartitionLatencyDetails = async (
 	} else {
 		endpoint = `/messaging-queues/kafka/consumer-lag/producer-details`;
 	}
-	try {
-		const response = await axios.post(endpoint, {
-			...rest,
-		});
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
+	const response = await axios.post(endpoint, {
+		...rest,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyOverview.ts b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyOverview.ts
index 49c8eed757..cdc7fb0cb8 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyOverview.ts
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyOverview.ts
@@ -1,7 +1,4 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
 import {
@@ -14,21 +11,17 @@ export const getPartitionLatencyOverview = async (
 ): Promise<
 	SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
 > => {
-	try {
-		const response = await axios.post(
-			`/messaging-queues/kafka/partition-latency/overview`,
-			{
-				...props,
-			},
-		);
+	const response = await axios.post(
+		`/messaging-queues/kafka/partition-latency/overview`,
+		{
+			...props,
+		},
+	);
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputDetails.ts b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputDetails.ts
index 3a995ef590..fb5817abd0 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputDetails.ts
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputDetails.ts
@@ -1,7 +1,4 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
 import {
@@ -16,18 +13,14 @@ export const getTopicThroughputDetails = async (
 > => {
 	const { detailType, ...rest } = props;
 	const endpoint = `/messaging-queues/kafka/topic-throughput/${detailType}`;
-	try {
-		const response = await axios.post(endpoint, {
-			...rest,
-		});
+	const response = await axios.post(endpoint, {
+		...rest,
+	});
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputOverview.ts b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputOverview.ts
index 7ed896d8ca..ac955e8405 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputOverview.ts
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getTopicThroughputOverview.ts
@@ -1,7 +1,4 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
 import {
@@ -15,23 +12,18 @@ export const getTopicThroughputOverview = async (
 	SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
 > => {
 	const { detailType, start, end } = props;
-	console.log(detailType);
-	try {
-		const response = await axios.post(
-			`messaging-queues/kafka/topic-throughput/${detailType}`,
-			{
-				start,
-				end,
-			},
-		);
+	const response = await axios.post(
+		`messaging-queues/kafka/topic-throughput/${detailType}`,
+		{
+			start,
+			end,
+		},
+	);
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx
index 104b7ec237..ea55384ac3 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx
@@ -12,6 +12,7 @@ import {
 	ProducerLatencyOptions,
 } from '../MessagingQueuesUtils';
 import { MessagingQueueServicePayload } from './MQTables/getConsumerLagDetails';
+import { getKafkaSpanEval } from './MQTables/getKafkaSpanEval';
 import { getPartitionLatencyOverview } from './MQTables/getPartitionLatencyOverview';
 import { getTopicThroughputOverview } from './MQTables/getTopicThroughputOverview';
 import MessagingQueuesTable from './MQTables/MQTables';
@@ -51,6 +52,9 @@ const getTableApi = (selectedView: MessagingQueuesViewTypeOptions): any => {
 	if (selectedView === MessagingQueuesViewType.producerLatency.value) {
 		return getTopicThroughputOverview;
 	}
+	if (selectedView === MessagingQueuesViewType.dropRate.value) {
+		return getKafkaSpanEval;
+	}
 	return getPartitionLatencyOverview;
 };
 
@@ -78,6 +82,10 @@ function MessagingQueueOverview({
 					? 'producer'
 					: 'consumer'
 				: undefined,
+		evalTime:
+			selectedView === MessagingQueuesViewType.dropRate.value
+				? 2363404
+				: undefined,
 	};
 
 	return (
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx
index e64f8aba18..0bd930363c 100644
--- a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx
+++ b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx
@@ -187,7 +187,7 @@ function MessagingQueues(): JSX.Element {
 					</div>
 					<div className="summary-card coming-soon-card">
 						<div className="summary-title">
-							<p>{MessagingQueuesViewType.consumerLatency.label}</p>
+							<p>{MessagingQueuesViewType.dropRate.label}</p>
 							<div className="time-value">
 								<Calendar size={14} color={Color.BG_SLATE_200} />
 								<p className="time-value">1D</p>
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
index f92b9b6010..0270258b33 100644
--- a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
+++ b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
@@ -238,9 +238,9 @@ export const MessagingQueuesViewType = {
 		label: 'Producer Latency view',
 		value: MessagingQueuesViewTypeOptions.ProducerLatency,
 	},
-	consumerLatency: {
-		label: 'Consumer latency view',
-		value: MessagingQueuesViewTypeOptions.ConsumerLatency,
+	dropRate: {
+		label: 'Drop Rate',
+		value: 'dropRate',
 	},
 };