fix: kafka - misc fix and features (#6379)

* feat: fixed multiple fixes and chores in kafka 2.0

* feat: fixed producer latency - producer-detail call

* feat: fixed mq-detail page layout and pagination

* feat: resolved comments

frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx

@@ -116,12 +116,7 @@ const checkValidityOfDetailConfigs = (
 			return false;
 		}
 
-		if (currentTab === MessagingQueueServiceDetailType.ConsumerDetails) {
+		return Boolean(configDetails?.topic && configDetails?.partition);
-			return Boolean(configDetails?.topic && configDetails?.partition);
-		}
-		return Boolean(
-			configDetails?.group && configDetails?.topic && configDetails?.partition,
-		);
 	}
 
 	if (selectedView === MessagingQueuesViewType.producerLatency.value) {

frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx

@@ -33,6 +33,8 @@ import {
 	MessagingQueuesPayloadProps,
 } from './getConsumerLagDetails';
 
+const INITIAL_PAGE_SIZE = 10;
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function getColumns(
 	data: MessagingQueuesPayloadProps['payload'],
@@ -155,8 +157,8 @@ function MessagingQueuesTable({
 
 	const paginationConfig = useMemo(
 		() =>
-			tableData?.length > 20 && {
+			tableData?.length > INITIAL_PAGE_SIZE && {
-				pageSize: 20,
+				pageSize: INITIAL_PAGE_SIZE,
 				showTotal: showPaginationItem,
 				showSizeChanger: false,
 				hideOnSinglePage: true,

frontend/src/pages/MessagingQueues/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import './MessagingQueueHealthCheck.styles.scss';
 
 import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
@@ -11,10 +13,20 @@ import {
 	Typography,
 } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { History } from 'history';
 import { Bolt, Check, OctagonAlert, X } from 'lucide-react';
 import { ReactNode, useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { isCloudUser } from 'utils/app';
 import { v4 as uuid } from 'uuid';
 
+import {
+	KAFKA_SETUP_DOC_LINK,
+	MessagingQueueHealthCheckService,
+} from '../MessagingQueuesUtils';
+
 interface AttributeCheckListProps {
 	visible: boolean;
 	onClose: () => void;
@@ -34,13 +46,42 @@ export enum AttributesFilters {
 
 function ErrorTitleAndKey({
 	title,
+	parentTitle,
+	history,
+	isCloudUserVal,
 	errorMsg,
 	isLeaf,
 }: {
 	title: string;
+	parentTitle: string;
+	isCloudUserVal: boolean;
+	history: History<unknown>;
 	errorMsg?: string;
 	isLeaf?: boolean;
 }): TreeDataNode {
+	const handleRedirection = (): void => {
+		let link = '';
+
+		switch (parentTitle) {
+			case 'Consumers':
+				link = `${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Consumers}`;
+				break;
+			case 'Producers':
+				link = `${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Producers}`;
+				break;
+			case 'Kafka':
+				link = `${ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Kafka}`;
+				break;
+			default:
+				link = '';
+		}
+
+		if (isCloudUserVal && !!link) {
+			history.push(link);
+		} else {
+			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+		}
+	};
 	return {
 		key: `${title}-key-${uuid()}`,
 		title: (
@@ -49,7 +90,13 @@ function ErrorTitleAndKey({
 					{title}
 				</Typography.Text>
 				<Tooltip title={errorMsg}>
-					<div className="attribute-error-warning">
+					<div
+						className="attribute-error-warning"
+						onClick={(e): void => {
+							e.preventDefault();
+							handleRedirection();
+						}}
+					>
 						<OctagonAlert size={14} />
 						Fix
 					</div>
@@ -98,6 +145,9 @@ function treeTitleAndKey({
 
 function generateTreeDataNodes(
 	response: OnboardingStatusResponse['data'],
+	parentTitle: string,
+	isCloudUserVal: boolean,
+	history: History<unknown>,
 ): TreeDataNode[] {
 	return response
 		.map((item) => {
@@ -109,6 +159,9 @@ function generateTreeDataNodes(
 					return ErrorTitleAndKey({
 						title: item.attribute,
 						errorMsg: item.error_message || '',
+						parentTitle,
+						history,
+						isCloudUserVal,
 					});
 				}
 			}
@@ -129,6 +182,8 @@ function AttributeCheckList({
 	const handleFilterChange = (value: AttributesFilters): void => {
 		setFilter(value);
 	};
+	const isCloudUserVal = isCloudUser();
+	const history = useHistory();
 
 	useEffect(() => {
 		const filteredData = onboardingStatusResponses.map((response) => {
@@ -137,6 +192,9 @@ function AttributeCheckList({
 					title: response.title,
 					errorMsg: response.errorMsg,
 					isLeaf: true,
+					parentTitle: response.title,
+					history,
+					isCloudUserVal,
 				});
 			}
 			let filteredData = response.data;
@@ -149,11 +207,17 @@ function AttributeCheckList({
 
 			return {
 				...treeTitleAndKey({ title: response.title }),
-				children: generateTreeDataNodes(filteredData),
+				children: generateTreeDataNodes(
+					filteredData,
+					response.title,
+					isCloudUserVal,
+					history,
+				),
 			};
 		});
 
 		setTreeData(filteredData);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [filter, onboardingStatusResponses]);
 
 	return (

frontend/src/pages/MessagingQueues/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss

@@ -68,6 +68,8 @@
 
 			.ant-tree {
 				.ant-tree-title {
+					cursor: default;
+
 					.attribute-error-title {
 						display: flex;
 						align-items: center;
@@ -88,6 +90,7 @@
 							font-style: normal;
 							font-weight: 400;
 							line-height: 16px;
+							cursor: pointer;
 						}
 					}
 

frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss

@@ -45,28 +45,22 @@
 
 		border-bottom: 1px solid var(--bg-slate-500);
 
-		.header-content {
+		.header-config {
 			display: flex;
 			gap: 12px;
 			align-items: center;
 
-			.header-config {
+			.messaging-queue-options {
-				display: flex;
+				.ant-select-selector {
-				gap: 10px;
+					display: flex;
-				align-items: center;
+					height: 32px;
+					padding: 6px 6px 6px 8px;
+					align-items: center;
+					gap: 4px;
 
-				.messaging-queue-options {
+					border-radius: 2px;
-					.ant-select-selector {
+					border: 1px solid var(--bg-slate-400);
-						display: flex;
+					background: var(--bg-ink-300);
-						height: 32px;
-						padding: 6px 6px 6px 8px;
-						align-items: center;
-						gap: 4px;
-
-						border-radius: 2px;
-						border: 1px solid var(--bg-slate-400);
-						background: var(--bg-ink-300);
-					}
 				}
 			}
 		}

frontend/src/pages/MessagingQueues/MessagingQueues.tsx

@@ -60,8 +60,8 @@ function MessagingQueues(): JSX.Element {
 				{t('breadcrumb')}
 			</div>
 			<div className="messaging-header">
-				<div className="header-content">
+				<div className="header-config">
-					<div className="header-config">{t('header')}</div>
+					{t('header')} /
 					<MessagingQueueHealthCheck
 						serviceToInclude={[
 							MessagingQueueHealthCheckService.Consumers,