feat: Kafka UI feedbacks (#5801)

* fix: solved kafka feature feedbacks

* fix: changed coming soon text to - join slack community

frontend/src/container/SideNav/NavItem/NavItem.styles.scss

@@ -75,6 +75,10 @@
 			text-overflow: ellipsis;
 		}
 	}
+
+	.beta-tag {
+		padding-right: 0;
+	}
 }
 
 .lightMode {

frontend/src/container/SideNav/NavItem/NavItem.tsx

@@ -24,7 +24,7 @@ export default function NavItem({
 			onClick={(event): void => onClick(event)}
 		>
 			<div className="nav-item-active-marker" />
-			<div className="nav-item-data">
+			<div className={cx('nav-item-data', isBeta ? 'beta-tag' : '')}>
 				<div className="nav-item-icon">{icon}</div>
 
 				<div className="nav-item-label">{label}</div>

frontend/src/container/SideNav/menuItems.tsx

@@ -91,6 +91,7 @@ const menuItems: SidebarItem[] = [
 		key: ROUTES.MESSAGING_QUEUES,
 		label: 'Messaging Queues',
 		icon: <ListMinus size={16} />,
+		isBeta: true,
 	},
 	{
 		key: ROUTES.LIST_ALL_ALERT,

frontend/src/pages/MessagingQueues/MQCommon/MQCommon.tsx

@@ -9,7 +9,19 @@ import { Info } from 'lucide-react';
 export function ComingSoon(): JSX.Element {
 	return (
 		<Tooltip
-			title="Contact us at cloud-support@signoz.io for more details."
+			title={
+				<div>
+					Join our Slack community for more details:{' '}
+					<a
+						href="https://signoz.io/slack"
+						rel="noopener noreferrer"
+						target="_blank"
+						onClick={(e): void => e.stopPropagation()}
+					>
+						SigNoz Community
+					</a>
+				</div>
+			}
 			placement="top"
 			overlayClassName="tooltip-overlay"
 		>

frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx

@@ -6,17 +6,12 @@ import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { ListMinus } from 'lucide-react';
 import { useHistory } from 'react-router-dom';
 
+import { MessagingQueuesViewType } from '../MessagingQueuesUtils';
 import { SelectLabelWithComingSoon } from '../MQCommon/MQCommon';
 import MessagingQueuesDetails from '../MQDetails/MQDetails';
 import MessagingQueuesConfigOptions from '../MQGraph/MQConfigOptions';
 import MessagingQueuesGraph from '../MQGraph/MQGraph';
 
-enum MessagingQueueViewType {
-	consumerLag = 'consumerLag',
-	avgPartitionLatency = 'avgPartitionLatency',
-	avgProducerLatency = 'avgProducerLatency',
-}
-
 function MQDetailPage(): JSX.Element {
 	const history = useHistory();
 
@@ -36,21 +31,38 @@ function MQDetailPage(): JSX.Element {
 					Kafka / views /
 					<Select
 						className="messaging-queue-options"
-						defaultValue="consumerLag"
+						defaultValue={MessagingQueuesViewType.consumerLag.value}
 						popupClassName="messaging-queue-options-popup"
 						options={[
 							{
-								label: 'Consumer Lag view',
-								value: MessagingQueueViewType.consumerLag,
+								label: MessagingQueuesViewType.consumerLag.label,
+								value: MessagingQueuesViewType.consumerLag.value,
 							},
 							{
-								label: <SelectLabelWithComingSoon label="Avg. Partition latency" />,
-								value: MessagingQueueViewType.avgPartitionLatency,
+								label: (
+									<SelectLabelWithComingSoon
+										label={MessagingQueuesViewType.partitionLatency.label}
+									/>
+								),
+								value: MessagingQueuesViewType.partitionLatency.value,
 								disabled: true,
 							},
 							{
-								label: <SelectLabelWithComingSoon label="Avg. Producer latency" />,
-								value: MessagingQueueViewType.avgProducerLatency,
+								label: (
+									<SelectLabelWithComingSoon
+										label={MessagingQueuesViewType.producerLatency.label}
+									/>
+								),
+								value: MessagingQueuesViewType.producerLatency.value,
+								disabled: true,
+							},
+							{
+								label: (
+									<SelectLabelWithComingSoon
+										label={MessagingQueuesViewType.consumerLatency.label}
+									/>
+								),
+								value: MessagingQueuesViewType.consumerLatency.value,
 								disabled: true,
 							},
 						]}

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

@@ -132,7 +132,7 @@
 }
 
 .messaging-queue-options-popup {
-	width: 260px !important;
+	width: 264px !important;
 }
 
 .messaging-overview {

frontend/src/pages/MessagingQueues/MessagingQueues.tsx

@@ -9,7 +9,10 @@ import { Calendar, ListMinus } from 'lucide-react';
 import { useHistory } from 'react-router-dom';
 import { isCloudUser } from 'utils/app';
 
-import { KAFKA_SETUP_DOC_LINK } from './MessagingQueuesUtils';
+import {
+	KAFKA_SETUP_DOC_LINK,
+	MessagingQueuesViewType,
+} from './MessagingQueuesUtils';
 import { ComingSoon } from './MQCommon/MQCommon';
 
 function MessagingQueues(): JSX.Element {
@@ -114,7 +117,7 @@ function MessagingQueues(): JSX.Element {
 				<div className="summary-section">
 					<div className="summary-card">
 						<div className="summary-title">
-							<p>Consumer Lag</p>
+							<p>{MessagingQueuesViewType.consumerLag.label}</p>
 							<div className="time-value">
 								<Calendar size={14} color={Color.BG_SLATE_200} />
 								<p className="time-value">1D</p>
@@ -128,7 +131,7 @@ function MessagingQueues(): JSX.Element {
 					</div>
 					<div className="summary-card coming-soon-card">
 						<div className="summary-title">
-							<p>Avg. Partition latency</p>
+							<p>{MessagingQueuesViewType.partitionLatency.label}</p>
 							<div className="time-value">
 								<Calendar size={14} color={Color.BG_SLATE_200} />
 								<p className="time-value">1D</p>
@@ -140,7 +143,7 @@ function MessagingQueues(): JSX.Element {
 					</div>
 					<div className="summary-card coming-soon-card">
 						<div className="summary-title">
-							<p>Avg. Partition latency</p>
+							<p>{MessagingQueuesViewType.producerLatency.label}</p>
 							<div className="time-value">
 								<Calendar size={14} color={Color.BG_SLATE_200} />
 								<p className="time-value">1D</p>
@@ -152,7 +155,7 @@ function MessagingQueues(): JSX.Element {
 					</div>
 					<div className="summary-card coming-soon-card">
 						<div className="summary-title">
-							<p>Avg. Partition latency</p>
+							<p>{MessagingQueuesViewType.consumerLatency.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

@@ -204,3 +204,22 @@ export function setSelectedTimelineQuery(
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
 	history.replace(generatedUrl);
 }
+
+export const MessagingQueuesViewType = {
+	consumerLag: {
+		label: 'Consumer Lag view',
+		value: 'consumerLag',
+	},
+	partitionLatency: {
+		label: 'Partition Latency view',
+		value: 'partitionLatency',
+	},
+	producerLatency: {
+		label: 'Producer Latency view',
+		value: 'producerLatency',
+	},
+	consumerLatency: {
+		label: 'Consumer latency view',
+		value: 'consumerLatency',
+	},
+};