feat: added table row clicks func

SigNoz · Oct 28, 2024 · b8f2ee6 · b8f2ee6
1 parent e775ef6
commit b8f2ee6
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 44 deletions.
diff --git 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
@@ -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
@@ -4,23 +4,26 @@ 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,
 	MessagingQueueServiceDetailType,
 	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<MessagingQueuesPayloadProps['payload']> | ErrorResponse
 	>;
 	validConfigPresent?: boolean;
+	type?: 'Detail' | 'Overview';
 }): JSX.Element {
 	const [columns, setColumns] = useState<any[]>([]);
 	const [tableData, setTableData] = useState<any[]>([]);
@@ -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<React.Key>();
+	const [, setSelectedRows] = useState<any>();
+	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 (
 		<div className="mq-tables-container">
 			{!validConfigPresent ? (
@@ -188,19 +234,32 @@ function MessagingQueuesTable({
 					{currentTab && (
 						<div className="mq-table-title">
 							{ConsumerLagDetailTitle[currentTab]}
-							<div className="mq-table-subtitle">{`${timelineQueryData?.group || ''} ${
-								timelineQueryData?.topic || ''
-							} ${timelineQueryData?.partition || ''}`}</div>
+							<div className="mq-table-subtitle">{subtitle}</div>
 						</div>
 					)}
 					<Table
-						className="mq-table"
+						className={cx(
+							'mq-table',
+							type !== 'Detail' ? 'mq-overview-row-clickable' : '',
+						)}
 						pagination={paginationConfig}
 						size="middle"
 						columns={columns}
 						dataSource={tableData}
 						bordered={false}
 						loading={isLoading}
+						onRow={(record): any =>
+							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
@@ -93,6 +93,7 @@ function MessagingQueueOverview({
 				tableApiPayload={tableApiPayload}
 				tableApi={getTableApi(selectedView)}
 				validConfigPresent
+				type="Overview"
 			/>
 		</div>
 	);

diff --git 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);