feat: added kafka - scenario - 4 (#6370)

* feat: added kafka - scenario - 4

* feat: added error handling and correct api handler for kafka apis

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: (
+								label: MessagingQueuesViewType.dropRate.label,
-									<SelectLabelWithComingSoon
+								value: MessagingQueuesViewType.dropRate.value,
-										label={MessagingQueuesViewType.consumerLatency.label}
-									/>
-								),
-								value: MessagingQueuesViewType.consumerLatency.value,
-								disabled: true,
 							},
 						]}
 					/>
@@ -96,10 +90,12 @@ function MQDetailPage(): JSX.Element {
 				)}
 			</div>
 			<div className="messaging-queue-details">
-				<MessagingQueuesDetails
+				{selectedView !== MessagingQueuesViewType.dropRate.value && (
-					selectedView={selectedView}
+					<MessagingQueuesDetails
-					producerLatencyOption={producerLatencyOption}
+						selectedView={selectedView}
-				/>
+						producerLatencyOption={producerLatencyOption}
+					/>
+				)}
 			</div>
 		</div>
 	);

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>
 	);

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, {
+	const { mutate: getViewDetails, isLoading, error, isError } = useMutation(
-		onSuccess: (data) => {
+		tableApi,
-			if (data.payload) {
+		{
-				setColumns(getColumns(data?.payload, history));
+			onSuccess: (data) => {
-				setTableData(getTableData(data?.payload));
+				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 && (

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(
-		const response = await axios.post(
+		`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
-			`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
+		{
-			{
+			...restProps,
-				...restProps,
+		},
-			},
+	);
-		);
 
-		return {
+	return {
-			statusCode: 200,
+		statusCode: 200,
-			error: null,
+		error: null,
-			message: response.data.status,
+		message: response.data.status,
-			payload: response.data.data,
+		payload: response.data.data,
-		};
+	};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
 };

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,
+	};
+};

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 {
+	const response = await axios.post(endpoint, {
-			statusCode: 200,
+		...rest,
-			error: null,
+	});
-			message: response.data.status,
+
-			payload: response.data.data,
+	return {
-		};
+		statusCode: 200,
-	} catch (error) {
+		error: null,
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
+		message: response.data.status,
-	}
+		payload: response.data.data,
+	};
 };

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(
-		const response = await axios.post(
+		`/messaging-queues/kafka/partition-latency/overview`,
-			`/messaging-queues/kafka/partition-latency/overview`,
+		{
-			{
+			...props,
-				...props,
+		},
-			},
+	);
-		);
 
-		return {
+	return {
-			statusCode: 200,
+		statusCode: 200,
-			error: null,
+		error: null,
-			message: response.data.status,
+		message: response.data.status,
-			payload: response.data.data,
+		payload: response.data.data,
-		};
+	};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
 };

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, {
-		const response = await axios.post(endpoint, {
+		...rest,
-			...rest,
+	});
-		});
 
-		return {
+	return {
-			statusCode: 200,
+		statusCode: 200,
-			error: null,
+		error: null,
-			message: response.data.status,
+		message: response.data.status,
-			payload: response.data.data,
+		payload: response.data.data,
-		};
+	};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
 };

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);
+	const response = await axios.post(
-	try {
+		`messaging-queues/kafka/topic-throughput/${detailType}`,
-		const response = await axios.post(
+		{
-			`messaging-queues/kafka/topic-throughput/${detailType}`,
+			start,
-			{
+			end,
-				start,
+		},
-				end,
+	);
-			},
-		);
 
-		return {
+	return {
-			statusCode: 200,
+		statusCode: 200,
-			error: null,
+		error: null,
-			message: response.data.status,
+		message: response.data.status,
-			payload: response.data.data,
+		payload: response.data.data,
-		};
+	};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
 };

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 (

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>

frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts

@@ -238,9 +238,9 @@ export const MessagingQueuesViewType = {
 		label: 'Producer Latency view',
 		value: MessagingQueuesViewTypeOptions.ProducerLatency,
 	},
-	consumerLatency: {
+	dropRate: {
-		label: 'Consumer latency view',
+		label: 'Drop Rate',
-		value: MessagingQueuesViewTypeOptions.ConsumerLatency,
+		value: 'dropRate',
 	},
 };