diff --git a/frontend/src/container/SideNav/NavItem/NavItem.styles.scss b/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
index aea7b3a0ee..ede4376033 100644
--- a/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
+++ b/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
@@ -75,6 +75,10 @@
text-overflow: ellipsis;
}
}
+
+ .beta-tag {
+ padding-right: 0;
+ }
}
.lightMode {
diff --git a/frontend/src/container/SideNav/NavItem/NavItem.tsx b/frontend/src/container/SideNav/NavItem/NavItem.tsx
index b3d57193f1..97a8cdb0ed 100644
--- a/frontend/src/container/SideNav/NavItem/NavItem.tsx
+++ b/frontend/src/container/SideNav/NavItem/NavItem.tsx
@@ -24,7 +24,7 @@ export default function NavItem({
onClick={(event): void => onClick(event)}
>
+
{icon}
{label}
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index 1566141735..be694227a1 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -91,6 +91,7 @@ const menuItems: SidebarItem[] = [
key: ROUTES.MESSAGING_QUEUES,
label: 'Messaging Queues',
icon:
,
+ isBeta: true,
},
{
key: ROUTES.LIST_ALL_ALERT,
diff --git a/frontend/src/pages/MessagingQueues/MQCommon/MQCommon.tsx b/frontend/src/pages/MessagingQueues/MQCommon/MQCommon.tsx
index 1d5394a14a..ce6fd1e96f 100644
--- a/frontend/src/pages/MessagingQueues/MQCommon/MQCommon.tsx
+++ b/frontend/src/pages/MessagingQueues/MQCommon/MQCommon.tsx
@@ -9,7 +9,19 @@ import { Info } from 'lucide-react';
export function ComingSoon(): JSX.Element {
return (
+ Join our Slack community for more details:{' '}
+ e.stopPropagation()}
+ >
+ SigNoz Community
+
+
+ }
placement="top"
overlayClassName="tooltip-overlay"
>
diff --git a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
index 17baff2790..f82a2f605d 100644
--- a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
+++ b/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 /
+ ),
+ value: MessagingQueuesViewType.partitionLatency.value,
+ disabled: true,
},
{
- label:
,
- value: MessagingQueueViewType.avgPartitionLatency,
+ label: (
+
+ ),
+ value: MessagingQueuesViewType.producerLatency.value,
disabled: true,
},
{
- label:
,
- value: MessagingQueueViewType.avgProducerLatency,
+ label: (
+
+ ),
+ value: MessagingQueuesViewType.consumerLatency.value,
disabled: true,
},
]}
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss b/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss
index cdf3e0023a..be2a27b50b 100644
--- a/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss
+++ b/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss
@@ -132,7 +132,7 @@
}
.messaging-queue-options-popup {
- width: 260px !important;
+ width: 264px !important;
}
.messaging-overview {
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx
index 0a7d6eebdd..727dc514b9 100644
--- a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx
+++ b/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 {
-
Consumer Lag
+
{MessagingQueuesViewType.consumerLag.label}
1D
@@ -128,7 +131,7 @@ function MessagingQueues(): JSX.Element {
-
Avg. Partition latency
+
{MessagingQueuesViewType.partitionLatency.label}
1D
@@ -140,7 +143,7 @@ function MessagingQueues(): JSX.Element {
-
Avg. Partition latency
+
{MessagingQueuesViewType.producerLatency.label}
1D
@@ -152,7 +155,7 @@ function MessagingQueues(): JSX.Element {
-
Avg. Partition latency
+
{MessagingQueuesViewType.consumerLatency.label}
1D
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
index 91501e9c5c..b0855ce524 100644
--- a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
+++ b/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',
+ },
+};