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 /