mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-14 03:15:53 +08:00
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>
This commit is contained in:
Sudeep MP
GitHub
parent
6f7999acb2
commit
e4753e6b44
@ -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"
|
||||
}
|
||||
}
|
||||
30
frontend/public/locales/en/messagingQueuesKafkaOverview.json
Normal file
30
frontend/public/locales/en/messagingQueuesKafkaOverview.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
@ -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: <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', {
|
||||
@ -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 {
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user