From c9fee276048adf9c70968077211abfbd63906ae3 Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Wed, 6 Nov 2024 14:44:39 +0530 Subject: [PATCH] feat: updated the design for Messaging Queue - summary section (#6319) * feat: updated the design for Messaging Queue - summary section * feat: resolved comments * feat: added better logic for switch options and resolved query --- .../en/messagingQueuesKafkaOverview.json | 78 +++++++---- frontend/src/constants/query.ts | 1 + .../MQDetailPage/MQDetailPage.tsx | 28 +++- .../MessagingQueues.styles.scss | 17 +++ .../pages/MessagingQueues/MessagingQueues.tsx | 129 ++++++++++-------- .../MessagingQueues/MessagingQueuesUtils.ts | 2 +- 6 files changed, 166 insertions(+), 89 deletions(-) diff --git a/frontend/public/locales/en/messagingQueuesKafkaOverview.json b/frontend/public/locales/en/messagingQueuesKafkaOverview.json index 5061a5ddcb..de67d0b3e9 100644 --- a/frontend/public/locales/en/messagingQueuesKafkaOverview.json +++ b/frontend/public/locales/en/messagingQueuesKafkaOverview.json @@ -1,30 +1,50 @@ { - "breadcrumb": "Messaging Queues", - "header": "Kafka / Overview", - "overview": { - "title": "Start sending data in as little as 20 minutes", - "subtitle": "Connect and Monitor Your Data Streams" - }, - "configureConsumer": { - "title": "Configure Consumer", - "description": "Add consumer data sources to gain insights and enhance monitoring.", - "button": "Get Started" - }, - "configureProducer": { - "title": "Configure Producer", - "description": "Add producer data sources to gain insights and enhance monitoring.", - "button": "Get Started" - }, - "monitorKafka": { - "title": "Monitor kafka", - "description": "Add your Kafka source to gain insights and enhance activity tracking.", - "button": "Get Started" - }, - "summarySection": { - "viewDetailsButton": "View Details" - }, - "confirmModal": { - "content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.", - "okText": "Proceed" - } -} \ No newline at end of file + "breadcrumb": "Messaging Queues", + "header": "Kafka / Overview", + "overview": { + "title": "Start sending data in as little as 20 minutes", + "subtitle": "Connect and Monitor Your Data Streams" + }, + "configureConsumer": { + "title": "Configure Consumer", + "description": "Add consumer data sources to gain insights and enhance monitoring.", + "button": "Get Started" + }, + "configureProducer": { + "title": "Configure Producer", + "description": "Add producer data sources to gain insights and enhance monitoring.", + "button": "Get Started" + }, + "monitorKafka": { + "title": "Monitor kafka", + "description": "Add your Kafka source to gain insights and enhance activity tracking.", + "button": "Get Started" + }, + "summarySection": { + "viewDetailsButton": "View Details", + "consumer": { + "title": "Consumer lag view", + "description": "Connect and Monitor Your Data Streams" + }, + "producer": { + "title": "Producer latency view", + "description": "Connect and Monitor Your Data Streams" + }, + "partition": { + "title": "Partition Latency view", + "description": "Connect and Monitor Your Data Streams" + }, + "dropRate": { + "title": "Drop Rate view", + "description": "Connect and Monitor Your Data Streams" + } + }, + "confirmModal": { + "content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.", + "okText": "Proceed" + }, + "overviewSummarySection": { + "title": "Monitor Your Data Streams", + "subtitle": "Monitor key Kafka metrics like consumer lag and latency to ensure efficient data flow and troubleshoot in real time." + } +} diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts index 7d3cb2603d..56fbd737b5 100644 --- a/frontend/src/constants/query.ts +++ b/frontend/src/constants/query.ts @@ -40,4 +40,5 @@ export enum QueryParams { configDetail = 'configDetail', getStartedSource = 'getStartedSource', getStartedSourceService = 'getStartedSourceService', + mqServiceView = 'mqServiceView', } diff --git a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx index be8aec1da1..b87a5abc7a 100644 --- a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx +++ b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx @@ -2,8 +2,10 @@ import '../MessagingQueues.styles.scss'; import { Select, Typography } from 'antd'; import logEvent from 'api/common/logEvent'; +import { QueryParams } from 'constants/query'; import ROUTES from 'constants/routes'; import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; +import useUrlQuery from 'hooks/useUrlQuery'; import { ListMinus } from 'lucide-react'; import { useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; @@ -32,10 +34,30 @@ function MQDetailPage(): JSX.Element { setproducerLatencyOption, ] = useState(ProducerLatencyOptions.Producers); + const mqServiceView = useUrlQuery().get( + QueryParams.mqServiceView, + ) as MessagingQueuesViewTypeOptions; + useEffect(() => { logEvent('Messaging Queues: Detail page visited', {}); }, []); + useEffect(() => { + if (mqServiceView) { + setSelectedView(mqServiceView); + } + }, [mqServiceView]); + + const updateUrlQuery = (query: Record): void => { + const searchParams = new URLSearchParams(history.location.search); + Object.keys(query).forEach((key) => { + searchParams.set(key, query[key].toString()); + }); + history.push({ + search: searchParams.toString(), + }); + }; + return (
@@ -54,7 +76,11 @@ function MQDetailPage(): JSX.Element { className="messaging-queue-options" defaultValue={MessagingQueuesViewType.consumerLag.value} popupClassName="messaging-queue-options-popup" - onChange={(value): void => setSelectedView(value)} + onChange={(value): void => { + setSelectedView(value); + updateUrlQuery({ [QueryParams.mqServiceView]: value }); + }} + value={mqServiceView} options={[ { label: MessagingQueuesViewType.consumerLag.label, diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss b/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss index ef54e329e4..bcfd62c773 100644 --- a/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss +++ b/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss @@ -227,6 +227,23 @@ } } } + + &.summary-section { + .overview-info-card { + min-height: 144px; + + .card-title { + color: var(--bg-vanilla-400); + font-family: Inter; + font-size: 13px; + font-style: normal; + font-weight: 500; + line-height: 22px; + letter-spacing: 0.52px; + text-transform: uppercase; + } + } + } } .summary-section { diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx index 0bd930363c..9e2c630bb0 100644 --- a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx +++ b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx @@ -1,13 +1,13 @@ +/* eslint-disable sonarjs/no-duplicate-string */ import './MessagingQueues.styles.scss'; -import { ExclamationCircleFilled } from '@ant-design/icons'; -import { Color } from '@signozhq/design-tokens'; -import { Button, Modal } from 'antd'; +import { Button } from 'antd'; import logEvent from 'api/common/logEvent'; +import cx from 'classnames'; import { QueryParams } from 'constants/query'; import ROUTES from 'constants/routes'; import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; -import { Calendar, ListMinus } from 'lucide-react'; +import { ListMinus } from 'lucide-react'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; @@ -19,32 +19,20 @@ import { MessagingQueueHealthCheckService, MessagingQueuesViewType, } from './MessagingQueuesUtils'; -import { ComingSoon } from './MQCommon/MQCommon'; function MessagingQueues(): JSX.Element { const history = useHistory(); const { t } = useTranslation('messagingQueuesKafkaOverview'); - const { confirm } = Modal; - - const showConfirm = (): void => { + const redirectToDetailsPage = (callerView?: string): void => { logEvent('Messaging Queues: View details clicked', { page: 'Messaging Queues Overview', - source: 'Consumer Latency view', + source: callerView, }); - confirm({ - icon: , - content: t('confirmModal.content'), - className: 'overview-confirm-modal', - onOk() { - logEvent('Messaging Queues: Proceed button clicked', { - page: 'Messaging Queues Overview', - }); - history.push(ROUTES.MESSAGING_QUEUES_DETAIL); - }, - okText: t('confirmModal.okText'), - }); + history.push( + `${ROUTES.MESSAGING_QUEUES_DETAIL}?${QueryParams.mqServiceView}=${callerView}`, + ); }; const isCloudUserVal = isCloudUser(); @@ -146,55 +134,80 @@ function MessagingQueues(): JSX.Element {
-
-
-
-

{MessagingQueuesViewType.consumerLag.label}

-
- -

1D

-
+ +

{t('overviewSummarySection.title')}

+

{t('overviewSummarySection.subtitle')}

+
+
+
+

{t('summarySection.consumer.title')}

+

+ {t('summarySection.consumer.description')} +

-
-
-
-
-

{MessagingQueuesViewType.partitionLatency.label}

-
- -

1D

-
+
+
+

{t('summarySection.producer.title')}

+

+ {t('summarySection.producer.description')} +

-
- +
+
-
-
-

{MessagingQueuesViewType.producerLatency.label}

-
- -

1D

-
+
+
+

{t('summarySection.partition.title')}

+

+ {t('summarySection.partition.description')} +

-
- +
+
-
-
-

{MessagingQueuesViewType.dropRate.label}

-
- -

1D

-
+
+
+

{t('summarySection.dropRate.title')}

+

+ {t('summarySection.dropRate.description')} +

-
- +
+
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts index 0270258b33..024c2dfb1c 100644 --- a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts +++ b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts @@ -239,7 +239,7 @@ export const MessagingQueuesViewType = { value: MessagingQueuesViewTypeOptions.ProducerLatency, }, dropRate: { - label: 'Drop Rate', + label: 'Drop Rate view', value: 'dropRate', }, };