GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 22:49:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated the design for Messaging Queue - summary section (#6319)

Browse Source 
* feat: updated the design for Messaging Queue - summary section

* feat: resolved comments

* feat: added better logic for switch options and resolved query
This commit is contained in:
SagarRajput-7 2024-11-06 14:44:39 +05:30 committed by GitHub
parent f1b6b2d3d8
commit c9fee27604
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 166 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/public/locales/en/messagingQueuesKafkaOverview.json
View File

@ -1,30 +1,50 @@
{ {
"breadcrumb": "Messaging Queues", "breadcrumb": "Messaging Queues",
"header": "Kafka / Overview", "header": "Kafka / Overview",
"overview": { "overview": {
"title": "Start sending data in as little as 20 minutes", "title": "Start sending data in as little as 20 minutes",
"subtitle": "Connect and Monitor Your Data Streams" "subtitle": "Connect and Monitor Your Data Streams"
}, },
"configureConsumer": { "configureConsumer": {
"title": "Configure Consumer", "title": "Configure Consumer",
"description": "Add consumer data sources to gain insights and enhance monitoring.", "description": "Add consumer data sources to gain insights and enhance monitoring.",
"button": "Get Started" "button": "Get Started"
}, },
"configureProducer": { "configureProducer": {
"title": "Configure Producer", "title": "Configure Producer",
"description": "Add producer data sources to gain insights and enhance monitoring.", "description": "Add producer data sources to gain insights and enhance monitoring.",
"button": "Get Started" "button": "Get Started"
}, },
"monitorKafka": { "monitorKafka": {
"title": "Monitor kafka", "title": "Monitor kafka",
"description": "Add your Kafka source to gain insights and enhance activity tracking.", "description": "Add your Kafka source to gain insights and enhance activity tracking.",
"button": "Get Started" "button": "Get Started"
}, },
"summarySection": { "summarySection": {
"viewDetailsButton": "View Details" "viewDetailsButton": "View Details",
}, "consumer": {
"confirmModal": { "title": "Consumer lag view",
"content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.", "description": "Connect and Monitor Your Data Streams"
"okText": "Proceed" },
} "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."
}
} }

1
frontend/src/constants/query.ts
View File

@ -40,4 +40,5 @@ export enum QueryParams {
configDetail = 'configDetail', configDetail = 'configDetail',
getStartedSource = 'getStartedSource', getStartedSource = 'getStartedSource',
getStartedSourceService = 'getStartedSourceService', getStartedSourceService = 'getStartedSourceService',
mqServiceView = 'mqServiceView',
} }

28
frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
View File

@ -2,8 +2,10 @@ import '../MessagingQueues.styles.scss';
import { Select, Typography } from 'antd'; import { Select, Typography } from 'antd';
import logEvent from 'api/common/logEvent'; import logEvent from 'api/common/logEvent';
import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
import useUrlQuery from 'hooks/useUrlQuery';
import { ListMinus } from 'lucide-react'; import { ListMinus } from 'lucide-react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
@ -32,10 +34,30 @@ function MQDetailPage(): JSX.Element {
setproducerLatencyOption, setproducerLatencyOption,
] = useState<ProducerLatencyOptions>(ProducerLatencyOptions.Producers); ] = useState<ProducerLatencyOptions>(ProducerLatencyOptions.Producers);
const mqServiceView = useUrlQuery().get(
QueryParams.mqServiceView,
) as MessagingQueuesViewTypeOptions;
useEffect(() => { useEffect(() => {
logEvent('Messaging Queues: Detail page visited', {}); logEvent('Messaging Queues: Detail page visited', {});
}, []); }, []);
useEffect(() => {
if (mqServiceView) {
setSelectedView(mqServiceView);
}
}, [mqServiceView]);
const updateUrlQuery = (query: Record<string, string | number>): 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 ( return (
<div className="messaging-queue-container"> <div className="messaging-queue-container">
<div className="messaging-breadcrumb"> <div className="messaging-breadcrumb">
@ -54,7 +76,11 @@ function MQDetailPage(): JSX.Element {
className="messaging-queue-options" className="messaging-queue-options"
defaultValue={MessagingQueuesViewType.consumerLag.value} defaultValue={MessagingQueuesViewType.consumerLag.value}
popupClassName="messaging-queue-options-popup" popupClassName="messaging-queue-options-popup"
onChange={(value): void => setSelectedView(value)} onChange={(value): void => {
setSelectedView(value);
updateUrlQuery({ [QueryParams.mqServiceView]: value });
}}
value={mqServiceView}
options={[ options={[
{ {
label: MessagingQueuesViewType.consumerLag.label, label: MessagingQueuesViewType.consumerLag.label,

17
frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss
View File

@ -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 { .summary-section {

129
frontend/src/pages/MessagingQueues/MessagingQueues.tsx
View File

@ -1,13 +1,13 @@
/* eslint-disable sonarjs/no-duplicate-string */
import './MessagingQueues.styles.scss'; import './MessagingQueues.styles.scss';
import { ExclamationCircleFilled } from '@ant-design/icons'; import { Button } from 'antd';
import { Color } from '@signozhq/design-tokens';
import { Button, Modal } from 'antd';
import logEvent from 'api/common/logEvent'; import logEvent from 'api/common/logEvent';
import cx from 'classnames';
import { QueryParams } from 'constants/query'; import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
import { Calendar, ListMinus } from 'lucide-react'; import { ListMinus } from 'lucide-react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
@ -19,32 +19,20 @@ import {
MessagingQueueHealthCheckService, MessagingQueueHealthCheckService,
MessagingQueuesViewType, MessagingQueuesViewType,
} from './MessagingQueuesUtils'; } from './MessagingQueuesUtils';
import { ComingSoon } from './MQCommon/MQCommon';
function MessagingQueues(): JSX.Element { function MessagingQueues(): JSX.Element {
const history = useHistory(); const history = useHistory();
const { t } = useTranslation('messagingQueuesKafkaOverview'); const { t } = useTranslation('messagingQueuesKafkaOverview');
const { confirm } = Modal; const redirectToDetailsPage = (callerView?: string): void => {
const showConfirm = (): void => {
logEvent('Messaging Queues: View details clicked', { logEvent('Messaging Queues: View details clicked', {
page: 'Messaging Queues Overview', page: 'Messaging Queues Overview',
source: 'Consumer Latency view', source: callerView,
}); });
confirm({ history.push(
icon: <ExclamationCircleFilled />, `${ROUTES.MESSAGING_QUEUES_DETAIL}?${QueryParams.mqServiceView}=${callerView}`,
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'),
});
}; };
const isCloudUserVal = isCloudUser(); const isCloudUserVal = isCloudUser();
@ -146,55 +134,80 @@ function MessagingQueues(): JSX.Element {
</div> </div>
</div> </div>
</div> </div>
<div className="summary-section">
<div className="summary-card"> <p className="overview-text">{t('overviewSummarySection.title')}</p>
<div className="summary-title"> <p className="overview-subtext">{t('overviewSummarySection.subtitle')}</p>
<p>{MessagingQueuesViewType.consumerLag.label}</p> <div className={cx('overview-doc-area', 'summary-section')}>
<div className="time-value"> <div className="overview-info-card">
<Calendar size={14} color={Color.BG_SLATE_200} /> <div>
<p className="time-value">1D</p> <p className="card-title">{t('summarySection.consumer.title')}</p>
</div> <p className="card-info-text">
{t('summarySection.consumer.description')}
</p>
</div> </div>
<div className="view-detail-btn"> <div className="button-grp">
<Button type="primary" onClick={showConfirm}> <Button
type="default"
onClick={(): void =>
redirectToDetailsPage(MessagingQueuesViewType.consumerLag.value)
}
>
{t('summarySection.viewDetailsButton')} {t('summarySection.viewDetailsButton')}
</Button> </Button>
</div> </div>
</div> </div>
<div className="summary-card coming-soon-card"> <div className="overview-info-card middle-card">
<div className="summary-title"> <div>
<p>{MessagingQueuesViewType.partitionLatency.label}</p> <p className="card-title">{t('summarySection.producer.title')}</p>
<div className="time-value"> <p className="card-info-text">
<Calendar size={14} color={Color.BG_SLATE_200} /> {t('summarySection.producer.description')}
<p className="time-value">1D</p> </p>
</div>
</div> </div>
<div className="view-detail-btn"> <div className="button-grp">
<ComingSoon /> <Button
type="default"
onClick={(): void =>
redirectToDetailsPage(MessagingQueuesViewType.producerLatency.value)
}
>
{t('summarySection.viewDetailsButton')}
</Button>
</div> </div>
</div> </div>
<div className="summary-card coming-soon-card"> <div className="overview-info-card middle-card">
<div className="summary-title"> <div>
<p>{MessagingQueuesViewType.producerLatency.label}</p> <p className="card-title">{t('summarySection.partition.title')}</p>
<div className="time-value"> <p className="card-info-text">
<Calendar size={14} color={Color.BG_SLATE_200} /> {t('summarySection.partition.description')}
<p className="time-value">1D</p> </p>
</div>
</div> </div>
<div className="view-detail-btn"> <div className="button-grp">
<ComingSoon /> <Button
type="default"
onClick={(): void =>
redirectToDetailsPage(MessagingQueuesViewType.partitionLatency.value)
}
>
{t('summarySection.viewDetailsButton')}
</Button>
</div> </div>
</div> </div>
<div className="summary-card coming-soon-card"> <div className="overview-info-card">
<div className="summary-title"> <div>
<p>{MessagingQueuesViewType.dropRate.label}</p> <p className="card-title">{t('summarySection.dropRate.title')}</p>
<div className="time-value"> <p className="card-info-text">
<Calendar size={14} color={Color.BG_SLATE_200} /> {t('summarySection.dropRate.description')}
<p className="time-value">1D</p> </p>
</div>
</div> </div>
<div className="view-detail-btn"> <div className="button-grp">
<ComingSoon /> <Button
type="default"
onClick={(): void =>
redirectToDetailsPage(MessagingQueuesViewType.dropRate.value)
}
>
{t('summarySection.viewDetailsButton')}
</Button>
</div> </div>
</div> </div>
</div> </div>

2
frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
View File

@ -239,7 +239,7 @@ export const MessagingQueuesViewType = {
value: MessagingQueuesViewTypeOptions.ProducerLatency, value: MessagingQueuesViewTypeOptions.ProducerLatency,
}, },
dropRate: { dropRate: {
label: 'Drop Rate', label: 'Drop Rate view',
value: 'dropRate', value: 'dropRate',
}, },
}; };