diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx index 3b849b39dd..e13206aa1b 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx +++ b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx @@ -137,7 +137,7 @@ export const getMetaDataAndAPIPerView = ( minTime, maxTime, selectedTimelineQuery, - // configDetails, + configDetails, } = metaDataProps; return { [MessagingQueuesViewType.consumerLag.value]: { @@ -158,14 +158,14 @@ export const getMetaDataAndAPIPerView = ( start: minTime, end: maxTime, variables: { - // partition: configDetails?.partition, - // topic: configDetails?.topic, - // consumer_group: configDetails?.group, + partition: configDetails?.partition, + topic: configDetails?.topic, + consumer_group: configDetails?.group, // todo-sagar: look at above props - partition: selectedTimelineQuery?.partition, - topic: selectedTimelineQuery?.topic, - consumer_group: selectedTimelineQuery?.group, + // partition: selectedTimelineQuery?.partition, + // topic: selectedTimelineQuery?.topic, + // consumer_group: selectedTimelineQuery?.group, }, detailType, }, @@ -176,14 +176,14 @@ export const getMetaDataAndAPIPerView = ( start: minTime, end: maxTime, variables: { - // partition: configDetails?.partition, - // topic: configDetails?.topic, - // service_name: configDetails?.service_name, + partition: configDetails?.partition, + topic: configDetails?.topic, + service_name: configDetails?.service_name, - // todo-sagar: look at above props - partition: selectedTimelineQuery?.partition, - topic: selectedTimelineQuery?.topic, - service_name: 'consumer-svc-1', // todo-sagar remove hardcode + // // todo-sagar: look at above props + // partition: selectedTimelineQuery?.partition, + // topic: selectedTimelineQuery?.topic, + // service_name: 'consumer-svc-1', // todo-sagar remove hardcode }, detailType, }, @@ -196,9 +196,9 @@ const checkValidityOfDetailConfigs = ( selectedTimelineQuery: SelectedTimelineQuery, selectedView: string, currentTab: MessagingQueueServiceDetailType, - // configDetails?: { - // [key: string]: string; - // }, + configDetails?: { + [key: string]: string; + }, // eslint-disable-next-line sonarjs/cognitive-complexity ): boolean => { if (selectedView === MessagingQueuesViewType.consumerLag.value) { @@ -211,35 +211,31 @@ const checkValidityOfDetailConfigs = ( } if (selectedView === MessagingQueuesViewType.partitionLatency.value) { - // todo-sagar - change to configdetails - if (isEmpty(selectedTimelineQuery)) { + if (isEmpty(configDetails)) { return false; } if (currentTab === MessagingQueueServiceDetailType.ConsumerDetails) { - return Boolean( - selectedTimelineQuery?.topic && selectedTimelineQuery?.partition, - ); + return Boolean(configDetails?.topic && configDetails?.partition); } return Boolean( - selectedTimelineQuery?.group && - selectedTimelineQuery?.topic && - selectedTimelineQuery?.partition, + configDetails?.group && configDetails?.topic && configDetails?.partition, ); } if (selectedView === MessagingQueuesViewType.producerLatency.value) { - // todo-sagar - change to configdetails and add service_name - if (isEmpty(selectedTimelineQuery)) { + if (isEmpty(configDetails)) { return false; } if (currentTab === MessagingQueueServiceDetailType.ProducerDetails) { return Boolean( - selectedTimelineQuery?.topic && selectedTimelineQuery?.partition, + configDetails?.topic && + configDetails?.partition && + configDetails?.service_name, ); } - return Boolean(selectedTimelineQuery?.topic); + return Boolean(configDetails?.topic && configDetails?.service_name); } return false; @@ -321,7 +317,7 @@ function MessagingQueuesDetails({ timelineQueryData, selectedView, currentTab, - // configDetailQueryData, + configDetailQueryData, )} tableApiPayload={serviceConfigDetails[selectedView].tableApiPayload} /> diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss index 547f5e5c63..ad665d61f5 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss +++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss @@ -64,14 +64,16 @@ } .mq-table { - .ant-table-row { - background-color: var(--bg-ink-400); - - &:hover { - cursor: pointer; - background-color: var(--bg-slate-400) !important; - color: var(--bg-vanilla-400); - transition: background-color 0.3s ease, color 0.3s ease; + &.mq-overview-row-clickable { + .ant-table-row { + background-color: var(--bg-ink-400); + + &:hover { + cursor: pointer; + background-color: var(--bg-slate-400) !important; + color: var(--bg-vanilla-400); + transition: background-color 0.3s ease, color 0.3s ease; + } } } } diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx index a8164861d4..229fd9bc18 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx +++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx @@ -4,12 +4,14 @@ import './MQTables.styles.scss'; import { Skeleton, Table, Typography } from 'antd'; import axios from 'axios'; import { isNumber } from 'chart.js/helpers'; +import cx from 'classnames'; import { ColumnTypeRender } from 'components/Logs/TableView/types'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import { QueryParams } from 'constants/query'; import { History } from 'history'; import { useNotifications } from 'hooks/useNotifications'; import useUrlQuery from 'hooks/useUrlQuery'; +import { isEmpty } from 'lodash-es'; import { ConsumerLagDetailTitle, convertToTitleCase, @@ -17,10 +19,11 @@ import { MessagingQueuesViewType, RowData, SelectedTimelineQuery, + setConfigDetail, } from 'pages/MessagingQueues/MessagingQueuesUtils'; import { useEffect, useMemo, useState } from 'react'; import { useMutation } from 'react-query'; -import { useHistory } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { @@ -104,12 +107,14 @@ const showPaginationItem = (total: number, range: number[]): JSX.Element => ( ); +// eslint-disable-next-line sonarjs/cognitive-complexity function MessagingQueuesTable({ currentTab, selectedView, tableApiPayload, tableApi, validConfigPresent = false, + type = 'Detail', }: { currentTab?: MessagingQueueServiceDetailType; selectedView: string; @@ -120,6 +125,7 @@ function MessagingQueuesTable({ SuccessResponse | ErrorResponse >; validConfigPresent?: boolean; + type?: 'Detail' | 'Overview'; }): JSX.Element { const [columns, setColumns] = useState([]); const [tableData, setTableData] = useState([]); @@ -135,6 +141,16 @@ function MessagingQueuesTable({ [timelineQuery], ); + const configDetails = decodeURIComponent( + urlQuery.get(QueryParams.configDetail) || '', + ); + + const configDetailQueryData: { + [key: string]: string; + } = useMemo(() => (configDetails ? JSON.parse(configDetails) : {}), [ + configDetails, + ]); + const paginationConfig = useMemo( () => tableData?.length > 20 && { @@ -172,6 +188,36 @@ function MessagingQueuesTable({ [currentTab, selectedView, tableApiPayload], ); + const [selectedRowKey, setSelectedRowKey] = useState(); + const [, setSelectedRows] = useState(); + const location = useLocation(); + + const onRowClick = (record: { [key: string]: string }): void => { + const selectedKey = record.key; + + if (`${selectedKey}_${selectedView}` === selectedRowKey) { + setSelectedRowKey(undefined); + setSelectedRows({}); + setConfigDetail(urlQuery, location, history, {}); + } else { + setSelectedRowKey(`${selectedKey}_${selectedView}`); + setSelectedRows(record); + + if (!isEmpty(record)) { + setConfigDetail(urlQuery, location, history, record); + } + } + }; + + const subtitle = + selectedView === MessagingQueuesViewType.consumerLag.value + ? `${timelineQueryData?.group || ''} ${timelineQueryData?.topic || ''} ${ + timelineQueryData?.partition || '' + }` + : `${configDetailQueryData?.service_name || ''} ${ + configDetailQueryData?.topic || '' + } ${configDetailQueryData?.partition || ''}`; + return (
{!validConfigPresent ? ( @@ -188,19 +234,32 @@ function MessagingQueuesTable({ {currentTab && (
{ConsumerLagDetailTitle[currentTab]} -
{`${timelineQueryData?.group || ''} ${ - timelineQueryData?.topic || '' - } ${timelineQueryData?.partition || ''}`}
+
{subtitle}
)} + type !== 'Detail' + ? { + onClick: (): void => onRowClick(record), + } + : {} + } + rowClassName={(record): any => + `${record.key}_${selectedView}` === selectedRowKey + ? 'ant-table-row-selected' + : '' + } /> )} diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx index 7d623db287..0c51ecaaa7 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx +++ b/frontend/src/pages/MessagingQueues/MQDetails/MessagingQueueOverview.tsx @@ -93,6 +93,7 @@ function MessagingQueueOverview({ tableApiPayload={tableApiPayload} tableApi={getTableApi(selectedView)} validConfigPresent + type="Overview" /> ); diff --git a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts index 80761dd7af..4a0166015c 100644 --- a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts +++ b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts @@ -237,7 +237,6 @@ export function setConfigDetail( ): void { // remove "key" and its value from the paramsToSet object const { key, ...restParamsToSet } = paramsToSet || {}; - console.log(restParamsToSet); if (!isEmpty(restParamsToSet)) { const configDetail = { @@ -247,6 +246,8 @@ export function setConfigDetail( QueryParams.configDetail, encodeURIComponent(JSON.stringify(configDetail)), ); + } else { + urlQuery.delete(QueryParams.configDetail); } const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; history.replace(generatedUrl);