diff --git a/frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json b/frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json new file mode 100644 index 0000000000..5061a5ddcb --- /dev/null +++ b/frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json @@ -0,0 +1,30 @@ +{ + "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 diff --git a/frontend/public/locales/en/messagingQueuesKafkaOverview.json b/frontend/public/locales/en/messagingQueuesKafkaOverview.json new file mode 100644 index 0000000000..5061a5ddcb --- /dev/null +++ b/frontend/public/locales/en/messagingQueuesKafkaOverview.json @@ -0,0 +1,30 @@ +{ + "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 diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx index 103fc15827..ebac021fd2 100644 --- a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx +++ b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx @@ -8,6 +8,7 @@ import ROUTES from 'constants/routes'; import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; import { Calendar, ListMinus } from 'lucide-react'; import { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; import { isCloudUser } from 'utils/app'; @@ -19,6 +20,7 @@ import { ComingSoon } from './MQCommon/MQCommon'; function MessagingQueues(): JSX.Element { const history = useHistory(); + const { t } = useTranslation('messagingQueuesKafkaOverview'); const { confirm } = Modal; @@ -30,8 +32,7 @@ function MessagingQueues(): JSX.Element { confirm({ icon: , - content: - 'Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.', + content: t('confirmModal.content'), className: 'overview-confirm-modal', onOk() { logEvent('Messaging Queues: Proceed button clicked', { @@ -39,7 +40,7 @@ function MessagingQueues(): JSX.Element { }); history.push(ROUTES.MESSAGING_QUEUES_DETAIL); }, - okText: 'Proceed', + okText: t('confirmModal.okText'), }); }; @@ -65,24 +66,20 @@ function MessagingQueues(): JSX.Element {
- Messaging Queues + {t('breadcrumb')}
-
Kafka / Overview
+
{t('header')}
-

- Start sending data in as little as 20 minutes -

-

Connect and Monitor Your Data Streams

+

{t('overview.title')}

+

{t('overview.subtitle')}

-

Configure Consumer

-

- Connect your consumer and producer data sources to start monitoring. -

+

{t('configureConsumer.title')}

+

{t('configureConsumer.description')}

-

Configure Producer

-

- Connect your consumer and producer data sources to start monitoring. -

+

{t('configureProducer.title')}

+

{t('configureProducer.description')}

-

Monitor kafka

-

- Set up your Kafka monitoring to track consumer and producer activities. -

+

{t('monitorKafka.title')}

+

{t('monitorKafka.description')}

@@ -152,7 +145,7 @@ function MessagingQueues(): JSX.Element {