Merge pull request #215 from amosproj/refactor/add-comments-for-modal…

…-components

refactor: add comments for modal components

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 shows 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<ConsumerAccordionProps> = ({
 	consumerName,
 	topicName,

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<ModalInfoProps> = ({ title, detailedInfo }) => {
 	return (
 		<div className="modal-info">

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<MessageModalProps> = ({ topic }) => {
 	const [open, setOpen] = useState(false)
 	const [amount, setAmount] = useState<number>(10)

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 producer.
+ * AverageMsgSize: Average message size published by this producer.
+ * 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<ProducerModalProps> = ({ producer }) => {
 	const { producerName, topicName } = producer
 

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<SubscriptionModalProps> = ({
 	subscription,
 	topic,