From e815aed881b93b2d4980f171baca9cef93d13116 Mon Sep 17 00:00:00 2001 From: Ziqi He Date: Tue, 11 Jul 2023 15:41:21 +0200 Subject: [PATCH 1/3] refactor: add comments for modal components Signed-off-by: Ziqi He --- .../components/modals/ConsumerAccordion.tsx | 24 +++++++++++++++++ .../src/components/modals/ConsumerModal.tsx | 26 +++++++----------- .../src/components/modals/InformationText.tsx | 9 +++++++ .../src/components/modals/MessageModal.tsx | 27 ++++++++++++------- .../src/components/modals/ProducerModal.tsx | 27 ++++++++++++------- .../components/modals/SubscriptionModal.tsx | 20 ++++++++++++++ 6 files changed, 97 insertions(+), 36 deletions(-) diff --git a/frontend/src/components/modals/ConsumerAccordion.tsx b/frontend/src/components/modals/ConsumerAccordion.tsx index ba3802f9..fdee1846 100644 --- a/frontend/src/components/modals/ConsumerAccordion.tsx +++ b/frontend/src/components/modals/ConsumerAccordion.tsx @@ -20,6 +20,30 @@ interface ConsumerAccordionProps { isActive: boolean } +/** + * ConsumerAccordion is a react accordion component + * for displaying consumer information in pulsar. + * It show the consumer details. + * + * The following information is shown in the consumer information popup: + * address: Address of this consumer + * availablePermits: Number of available message permits for the consumer + * BytesOutCounter: Total bytes delivered to consumer (bytes) + * ClientVersion: Client library version + * ConnectedSince: Timestamp of connection + * ConsumerName: Name of the consumer + * LastAckedTimestamp: + * LastConsumedTimestamp: + * MessageOutConter: Total messages delivered to consumer (msg). + * UnackedMessages: Number of unacknowledged messages for the consumer, where an * unacknowledged message is one that has been sent to the consumer but not yet acknowledged + * isBlockedConsumerOnUnackedMsgs: Flag to verify if consumer is blocked due to reaching * threshold of unacked messages + * + * @component + * @param consumerName - The name of current consumer. + * @param topicName - The name of topic which this consumer belongs to. + * @param isActive - Whether this consumer is active (in pulsar there is only one active consumer) + * @returns The rendered ConsumerAccordion component. + */ const ConsumerAccordion: React.FC = ({ consumerName, topicName, diff --git a/frontend/src/components/modals/ConsumerModal.tsx b/frontend/src/components/modals/ConsumerModal.tsx index 36130a8f..b58d5c14 100644 --- a/frontend/src/components/modals/ConsumerModal.tsx +++ b/frontend/src/components/modals/ConsumerModal.tsx @@ -8,22 +8,6 @@ import CloseIcon from '@mui/icons-material/Close' import axios from 'axios' import config from '../../config' -/** -The following information is shown in the consumer information popup: - -address: Address of this consumer -availablePermits: Number of available message permits for the consumer -BytesOutCounter: Total bytes delivered to consumer (bytes) -ClientVersion: Client library version -ConnectedSince: Timestamp of connection -ConsumerName: Name of the consumer -LastAckedTimestamp: -LastConsumedTimestamp: -MessageOutConter: Total messages delivered to consumer (msg). -UnackedMessages: Number of unacknowledged messages for the consumer, where an unacknowledged message is one that has been sent to the consumer but not yet acknowledged -isBlockedConsumerOnUnackedMsgs: Flag to verify if consumer is blocked due to reaching threshold of unacked messages -*/ - interface ConsumerModalProps { consumer: { topicName: string @@ -31,6 +15,16 @@ interface ConsumerModalProps { } } +/** + * ConsumerModal is a react component for displaying information in pulsar. + * !!! Currently this component is replaced by ConsumerAccordion. + * + * @component + * @param consumer + * @param consumer.topicName - The name of topic it belongs to. + * @param consumer.consumerName - The name of current consumer. + * @returns The rendered ConsumerModal component. + */ const ConsumerModal: React.FC = ({ consumer }) => { const { topicName, consumerName } = consumer diff --git a/frontend/src/components/modals/InformationText.tsx b/frontend/src/components/modals/InformationText.tsx index 7a4c5eb7..69967d6d 100644 --- a/frontend/src/components/modals/InformationText.tsx +++ b/frontend/src/components/modals/InformationText.tsx @@ -5,6 +5,15 @@ interface ModalInfoProps { detailedInfo: boolean | number | string | undefined } +/** + * InformationText is a react component for displaying detailed information for other + * modals. + * + * @component + * @param title - The title of information. + * @param detailedInfo - The detail of information. + * @returns Rendered InformationText. + */ const InformationText: React.FC = ({ title, detailedInfo }) => { return (
diff --git a/frontend/src/components/modals/MessageModal.tsx b/frontend/src/components/modals/MessageModal.tsx index d60d7e78..ca3f76ea 100644 --- a/frontend/src/components/modals/MessageModal.tsx +++ b/frontend/src/components/modals/MessageModal.tsx @@ -11,16 +11,6 @@ import { ChevronRight } from '@mui/icons-material' import MessageView from '../../routes/message/MessageView' import { Masonry } from 'react-plock' -/** -The following information is shown in the producer information popup: -Address: Address of this publisher. -AverageMsgSize: Average message size published by this publisher. -ClientVersion: Client library version. -ConnectedSince: Timestamp of connection. -ProducerId: Id of this publisher. -ProducerName: Producer name. -*/ - interface MessageModalProps { topic: string } @@ -29,6 +19,23 @@ interface MessageResponse { messages: MessageInfo[] } +/** + * MessageModal is a react component for displaying message information in pulsar. + * + * The following information is shown in MessageModal: + * messageId: the id of the message + * topic: the topic this message belongs to + * payload: payload this message contains + * schema: + * namespace: the name space this message belongs to + * tenant: the tenant this message belongs to + * publishTime: + * producer: the producer this message belongs to + * + * @component + * @param topic - The name of topic + * @returns The rendered MessageModal component. + */ const MessageModal: React.FC = ({ topic }) => { const [open, setOpen] = useState(false) const [amount, setAmount] = useState(10) diff --git a/frontend/src/components/modals/ProducerModal.tsx b/frontend/src/components/modals/ProducerModal.tsx index 31b320f1..7ddd2eeb 100644 --- a/frontend/src/components/modals/ProducerModal.tsx +++ b/frontend/src/components/modals/ProducerModal.tsx @@ -10,16 +10,6 @@ import InformationText from './InformationText' import config from '../../config' import { convertTimestampToDateTime } from '../../Helpers' -/** -The following information is shown in the producer information popup: -Address: Address of this publisher. -AverageMsgSize: Average message size published by this publisher. -ClientVersion: Client library version. -ConnectedSince: Timestamp of connection. -ProducerId: Id of this publisher. -ProducerName: Producer name. -*/ - interface ProducerModalProps { producer: { producerName: string @@ -31,6 +21,23 @@ interface MessageResponse { messages: MessageInfo[] } +/** + * ProducerModal is a react component for displaying producer information in pulsar. + * + * The following information is shown in the producer information popup: + * Address: Address of this publisher. + * AverageMsgSize: Average message size published by this publisher. + * ClientVersion: Client library version. + * ConnectedSince: Timestamp of connection. + * ProducerId: Id of this publisher. + * ProducerName: Producer name. + * + * @component + * @param producer + * @param producer.producerName - The name of producer. + * @param producer.topicName - The name of topic it belongs to. + * @returns The rendered ProducerModal component. + */ const ProducerModal: React.FC = ({ producer }) => { const { producerName, topicName } = producer diff --git a/frontend/src/components/modals/SubscriptionModal.tsx b/frontend/src/components/modals/SubscriptionModal.tsx index 18079c36..724c3b06 100644 --- a/frontend/src/components/modals/SubscriptionModal.tsx +++ b/frontend/src/components/modals/SubscriptionModal.tsx @@ -34,6 +34,26 @@ interface MessageResponse { messages: MessageInfo[] } +/** + * SubscriptionModal is a react component for displaying subscription information in pulsar. + * + * The following information is shown in the subscription information popup: + * Consumers: List of connected consumers on this subscription w/ their stats. + * -> When clicked, the corresponding consumer accordion is expanded + * ConsumersCount: Number of total consumers + * BacklogSize: Size of backlog in byte + * MsgBacklog: Number of entries in the subscription backlog + * BytesOutCounter: Total bytes delivered to consumer (bytes) + * MsgOutCounter: Total messages delivered to consumer (msg) + * isReplicated: Mark that the subscription state is kept in sync across different regions + * Type: The subscription type as defined by SubscriptionType + * Messages: 10 messages in this subscription + * + * @component + * @param subscription - The name of subscription. + * @param topic - The name of topic. + * @returns The rendered SubscriptionModal component. + */ const SubscriptionModal: React.FC = ({ subscription, topic, From 51aa364aa55eef9da4b9e87e915173b634ac8d0a Mon Sep 17 00:00:00 2001 From: Ziqi He Date: Tue, 11 Jul 2023 16:08:20 +0200 Subject: [PATCH 2/3] correct typo in the comment of ConsumerAccordion component and change description detail in the comment of ProducerModal component Signed-off-by: Ziqi He --- frontend/src/components/modals/ConsumerAccordion.tsx | 2 +- frontend/src/components/modals/ProducerModal.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/modals/ConsumerAccordion.tsx b/frontend/src/components/modals/ConsumerAccordion.tsx index fdee1846..b17091a8 100644 --- a/frontend/src/components/modals/ConsumerAccordion.tsx +++ b/frontend/src/components/modals/ConsumerAccordion.tsx @@ -23,7 +23,7 @@ interface ConsumerAccordionProps { /** * ConsumerAccordion is a react accordion component * for displaying consumer information in pulsar. - * It show the consumer details. + * It shows the consumer details. * * The following information is shown in the consumer information popup: * address: Address of this consumer diff --git a/frontend/src/components/modals/ProducerModal.tsx b/frontend/src/components/modals/ProducerModal.tsx index 7ddd2eeb..7a6bb892 100644 --- a/frontend/src/components/modals/ProducerModal.tsx +++ b/frontend/src/components/modals/ProducerModal.tsx @@ -25,8 +25,8 @@ interface MessageResponse { * ProducerModal is a react component for displaying producer information in pulsar. * * The following information is shown in the producer information popup: - * Address: Address of this publisher. - * AverageMsgSize: Average message size published by this publisher. + * Address: Address of this producer. + * AverageMsgSize: Average message size published by this producer. * ClientVersion: Client library version. * ConnectedSince: Timestamp of connection. * ProducerId: Id of this publisher. From 985177093b5c09d6f8637db188727512632a6d5a Mon Sep 17 00:00:00 2001 From: Ziqi He Date: Tue, 11 Jul 2023 16:08:48 +0200 Subject: [PATCH 3/3] delete deprecated ConsumerModal component --- .../src/components/modals/ConsumerModal.tsx | 166 ------------------ 1 file changed, 166 deletions(-) delete mode 100644 frontend/src/components/modals/ConsumerModal.tsx diff --git a/frontend/src/components/modals/ConsumerModal.tsx b/frontend/src/components/modals/ConsumerModal.tsx deleted file mode 100644 index b58d5c14..00000000 --- a/frontend/src/components/modals/ConsumerModal.tsx +++ /dev/null @@ -1,166 +0,0 @@ -// SPDX-License-Identifier: MIT -// SPDX-FileCopyrightText: 2010-2021 Dirk Riehle - -import React, { useState } from 'react' -import { Modal, Box, Typography, IconButton } from '@mui/material' -import CloseIcon from '@mui/icons-material/Close' -import axios from 'axios' -import config from '../../config' - -interface ConsumerModalProps { - consumer: { - topicName: string - consumerName: string - } -} - -/** - * ConsumerModal is a react component for displaying information in pulsar. - * !!! Currently this component is replaced by ConsumerAccordion. - * - * @component - * @param consumer - * @param consumer.topicName - The name of topic it belongs to. - * @param consumer.consumerName - The name of current consumer. - * @returns The rendered ConsumerModal component. - */ -const ConsumerModal: React.FC = ({ consumer }) => { - const { topicName, consumerName } = consumer - - const [open, setOpen] = useState(false) - const [consumerDetails, setConsumerDetails] = useState() - - const handleOpen = () => { - fetchData() - setOpen(true) - } - - const handleClose = () => { - setOpen(false) - } - - const fetchData = () => { - const url = config.backendUrl + `/api/topic/consumer/${consumerName}` - - // Sending GET request - const params = { - topic: topicName, - } - axios - .get(url, { params }) - .then((response) => { - setConsumerDetails(response.data) - }) - .catch((error) => { - console.log(error) - }) - } - - return ( - <> - - {consumer.consumerName},{' '} - - - - - - - - Consumer Name: {consumer.consumerName} - - - Address:{' '} - {consumerDetails?.address ? consumerDetails.address : 'N/A'} - - - Available permits:{' '} - {consumerDetails?.availablePermits - ? consumerDetails.availablePermits - : 'N/A'} - - - Bytes out counter:{' '} - {consumerDetails?.bytesOutCounter - ? consumerDetails.bytesOutCounter - : 'N/A'} - - - Client version:{' '} - {consumerDetails?.clientVersion - ? consumerDetails.clientVersion - : 'N/A'} - - - Connected since:{' '} - {consumerDetails?.connectedSince - ? consumerDetails.connectedSince - : 'N/A'} - - - Last acked timestamp:{' '} - {consumerDetails?.lastAckedTimestamp - ? consumerDetails.lastAckedTimestamp - : 'N/A'} - - - Last consumed timestamp:{' '} - {consumerDetails?.lastConsumedTimestamp - ? consumerDetails.lastConsumedTimestamp - : 'N/A'} - - - Message out counter:{' '} - {consumerDetails?.messageOutCounter - ? consumerDetails.messageOutCounter - : 'N/A'} - - - Unacked messages:{' '} - {consumerDetails?.unackedMessages - ? consumerDetails.unackedMessages - : 'N/A'} - - - Blocked consumer on unacked msgs:{' '} - {consumerDetails?.blockedConsumerOnUnackedMsgs - ? consumerDetails.blockedConsumerOnUnackedMsgs - ? 'true' - : 'false' - : 'N/A'} - - - - - ) -} - -export default ConsumerModal