Feat/fix ux copy kafka view (#5814)

* feat: add view templates option to dashboard menu * feat: increase dropdown overlay width Set the dropdown overlay width to 200px to provide breathing space for the dropdown button. Added flex to wrap the dropdown button to create space between the right icon and the left elements. * feat: add localization for messaging queues Kafka overview page Added localization support for the messaging queues Kafka overview page. Closes #1735 --------- Co-authored-by: Pranay Prateek <pranay@signoz.io>
SigNoz · Sep 2, 2024 · e4753e6 · e4753e6
1 parent 6f7999a
commit e4753e6
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>