feat: add localization for messaging queues Kafka overview page

Added localization support for the messaging queues Kafka overview page. Closes #1735
SigNoz · Aug 30, 2024 · 4604018 · 4604018
1 parent 28e6bbb
commit 4604018
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 25 deletions.
diff --git a/frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json 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"
+  }
+}
diff --git a/frontend/public/locales/en/messagingQueuesKafkaOverview.json 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"
+  }
+}
diff --git 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,16 +32,15 @@ function MessagingQueues(): JSX.Element {
 
 		confirm({
 			icon: <ExclamationCircleFilled />,
-			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', {
 					page: 'Messaging Queues Overview',
 				});
 				history.push(ROUTES.MESSAGING_QUEUES_DETAIL);
 			},
-			okText: 'Proceed',
+			okText: t('confirmModal.okText'),
 		});
 	};
 
@@ -65,24 +66,20 @@ function MessagingQueues(): JSX.Element {
 		<div className="messaging-queue-container">
 			<div className="messaging-breadcrumb">
 				<ListMinus size={16} />
-				Messaging Queues
+				{t('breadcrumb')}
 			</div>
 			<div className="messaging-header">
-				<div className="header-config">Kafka / Overview</div>
+				<div className="header-config">{t('header')}</div>
 				<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 			</div>
 			<div className="messaging-overview">
-				<p className="overview-text">
-					Start sending data in as little as 20 minutes
-				</p>
-				<p className="overview-subtext">Connect and Monitor Your Data Streams</p>
+				<p className="overview-text">{t('overview.title')}</p>
+				<p className="overview-subtext">{t('overview.subtitle')}</p>
 				<div className="overview-doc-area">
 					<div className="overview-info-card">
 						<div>
-							<p className="card-title">Configure Consumer</p>
-							<p className="card-info-text">
-								Connect your consumer and producer data sources to start monitoring.
-							</p>
+							<p className="card-title">{t('configureConsumer.title')}</p>
+							<p className="card-info-text">{t('configureConsumer.description')}</p>
 						</div>
 						<div className="button-grp">
 							<Button
@@ -94,16 +91,14 @@ function MessagingQueues(): JSX.Element {
 									)
 								}
 							>
-								Get Started
+								{t('configureConsumer.button')}
 							</Button>
 						</div>
 					</div>
 					<div className="overview-info-card middle-card">
 						<div>
-							<p className="card-title">Configure Producer</p>
-							<p className="card-info-text">
-								Connect your consumer and producer data sources to start monitoring.
-							</p>
+							<p className="card-title">{t('configureProducer.title')}</p>
+							<p className="card-info-text">{t('configureProducer.description')}</p>
 						</div>
 						<div className="button-grp">
 							<Button
@@ -115,16 +110,14 @@ function MessagingQueues(): JSX.Element {
 									)
 								}
 							>
-								Get Started
+								{t('configureProducer.button')}
 							</Button>
 						</div>
 					</div>
 					<div className="overview-info-card">
 						<div>
-							<p className="card-title">Monitor kafka</p>
-							<p className="card-info-text">
-								Set up your Kafka monitoring to track consumer and producer activities.
-							</p>
+							<p className="card-title">{t('monitorKafka.title')}</p>
+							<p className="card-info-text">{t('monitorKafka.description')}</p>
 						</div>
 						<div className="button-grp">
 							<Button
@@ -136,7 +129,7 @@ function MessagingQueues(): JSX.Element {
 									)
 								}
 							>
-								Get Started
+								{t('monitorKafka.button')}
 							</Button>
 						</div>
 					</div>
@@ -152,7 +145,7 @@ function MessagingQueues(): JSX.Element {
 						</div>
 						<div className="view-detail-btn">
 							<Button type="primary" onClick={showConfirm}>
-								View Details
+								{t('summarySection.viewDetailsButton')}
 							</Button>
 						</div>
 					</div>