chore: add functionality to open entity details from nested table items in groupby mode (#6981)

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -201,6 +201,11 @@ function K8sClustersList({
 		[groupedByRowData, groupBy],
 	);
 
+	const nestedClustersData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sClustersList(
 		query as K8sClustersListPayload,
 		{
@@ -283,12 +288,21 @@ function K8sClustersList({
 
 	const selectedClusterData = useMemo(() => {
 		if (!selectedClusterName) return null;
+		if (groupBy.length > 0) {
+			// If grouped by, return the cluster from the formatted grouped by clusters data
+			return (
+				nestedClustersData.find(
+					(cluster) => cluster.meta.k8s_cluster_name === selectedClusterName,
+				) || null
+			);
+		}
+		// If not grouped by, return the cluster from the clusters data
 		return (
 			clustersData.find(
 				(cluster) => cluster.meta.k8s_cluster_name === selectedClusterName,
 			) || null
 		);
-	}, [selectedClusterName, clustersData]);
+	}, [selectedClusterName, groupBy.length, clustersData, nestedClustersData]);
 
 	const handleRowClick = (record: K8sClustersRowData): void => {
 		if (groupBy.length === 0) {
@@ -341,6 +355,10 @@ function K8sClustersList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedClusterName(record.clusterUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -220,6 +220,11 @@ function K8sDaemonSetsList({
 		[daemonSetsData, groupBy],
 	);
 
+	const nestedDaemonSetsData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const columns = useMemo(() => getK8sDaemonSetsListColumns(groupBy), [groupBy]);
 
 	const handleGroupByRowClick = (record: K8sDaemonSetsRowData): void => {
@@ -285,13 +290,26 @@ function K8sDaemonSetsList({
 	}, []);
 
 	const selectedDaemonSetData = useMemo(() => {
-		if (!selectedDaemonSetUID) return null;
+		if (groupBy.length > 0) {
+			// If grouped by, return the daemonset from the formatted grouped by data
+			return (
+				nestedDaemonSetsData.find(
+					(daemonSet) => daemonSet.daemonSetName === selectedDaemonSetUID,
+				) || null
+			);
+		}
+		// If not grouped by, return the daemonset from the daemonsets data
 		return (
 			daemonSetsData.find(
 				(daemonSet) => daemonSet.daemonSetName === selectedDaemonSetUID,
 			) || null
 		);
-	}, [selectedDaemonSetUID, daemonSetsData]);
+	}, [
+		selectedDaemonSetUID,
+		groupBy.length,
+		daemonSetsData,
+		nestedDaemonSetsData,
+	]);
 
 	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
 		if (groupBy.length === 0) {
@@ -344,6 +362,10 @@ function K8sDaemonSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedDaemonSetUID(record.daemonsetUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -220,6 +220,11 @@ function K8sDeploymentsList({
 		[deploymentsData, groupBy],
 	);
 
+	const nestedDeploymentsData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const columns = useMemo(() => getK8sDeploymentsListColumns(groupBy), [
 		groupBy,
 	]);
@@ -288,12 +293,26 @@ function K8sDeploymentsList({
 
 	const selectedDeploymentData = useMemo(() => {
 		if (!selectedDeploymentUID) return null;
+		if (groupBy.length > 0) {
+			// If grouped by, return the deployment from the formatted grouped by deployments data
+			return (
+				nestedDeploymentsData.find(
+					(deployment) => deployment.deploymentName === selectedDeploymentUID,
+				) || null
+			);
+		}
+		// If not grouped by, return the deployment from the deployments data
 		return (
 			deploymentsData.find(
 				(deployment) => deployment.deploymentName === selectedDeploymentUID,
 			) || null
 		);
-	}, [selectedDeploymentUID, deploymentsData]);
+	}, [
+		selectedDeploymentUID,
+		groupBy.length,
+		deploymentsData,
+		nestedDeploymentsData,
+	]);
 
 	const handleRowClick = (record: K8sDeploymentsRowData): void => {
 		if (groupBy.length === 0) {
@@ -346,6 +365,10 @@ function K8sDeploymentsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedDeploymentUID(record.deploymentUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -884,3 +884,7 @@
 .ant-table-content {
 	margin-bottom: 60px !important;
 }
+
+.expanded-clickable-row {
+	cursor: pointer;
+}

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -195,6 +195,11 @@ function K8sJobsList({
 		[groupedByRowData, groupBy],
 	);
 
+	const nestedJobsData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sJobsList(
 		query as K8sJobsListPayload,
 		{
@@ -274,9 +279,13 @@ function K8sJobsList({
 	}, []);
 
 	const selectedJobData = useMemo(() => {
-		if (!selectedJobUID) return null;
+		if (groupBy.length > 0) {
+			// If grouped by, return the job from the formatted grouped by data
+			return nestedJobsData.find((job) => job.jobName === selectedJobUID) || null;
+		}
+		// If not grouped by, return the job from the jobs data
 		return jobsData.find((job) => job.jobName === selectedJobUID) || null;
-	}, [selectedJobUID, jobsData]);
+	}, [selectedJobUID, groupBy.length, jobsData, nestedJobsData]);
 
 	const handleRowClick = (record: K8sJobsRowData): void => {
 		if (groupBy.length === 0) {
@@ -329,6 +338,10 @@ function K8sJobsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedJobUID(record.jobUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -219,6 +219,11 @@ function K8sNamespacesList({
 		[namespacesData, groupBy],
 	);
 
+	const nestedNamespacesData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const columns = useMemo(() => getK8sNamespacesListColumns(groupBy), [groupBy]);
 
 	const handleGroupByRowClick = (record: K8sNamespacesRowData): void => {
@@ -285,12 +290,26 @@ function K8sNamespacesList({
 
 	const selectedNamespaceData = useMemo(() => {
 		if (!selectedNamespaceUID) return null;
+		if (groupBy.length > 0) {
+			// If grouped by, return the namespace from the formatted grouped by namespaces data
+			return (
+				nestedNamespacesData.find(
+					(namespace) => namespace.namespaceName === selectedNamespaceUID,
+				) || null
+			);
+		}
+		// If not grouped by, return the node from the nodes data
 		return (
 			namespacesData.find(
 				(namespace) => namespace.namespaceName === selectedNamespaceUID,
 			) || null
 		);
-	}, [selectedNamespaceUID, namespacesData]);
+	}, [
+		selectedNamespaceUID,
+		groupBy.length,
+		namespacesData,
+		nestedNamespacesData,
+	]);
 
 	const handleRowClick = (record: K8sNamespacesRowData): void => {
 		if (groupBy.length === 0) {
@@ -343,6 +362,10 @@ function K8sNamespacesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedNamespaceUID(record.namespaceUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -188,6 +188,11 @@ function K8sNodesList({
 		return queryPayload;
 	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
+	const nestedNodesData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const formattedGroupedByNodesData = useMemo(
 		() =>
 			formatDataForTable(groupedByRowData?.payload?.data?.records || [], groupBy),
@@ -274,8 +279,15 @@ function K8sNodesList({
 
 	const selectedNodeData = useMemo(() => {
 		if (!selectedNodeUID) return null;
+		if (groupBy.length > 0) {
+			// If grouped by, return the node from the formatted grouped by nodes data
+			return (
+				nestedNodesData.find((node) => node.nodeUID === selectedNodeUID) || null
+			);
+		}
+		// If not grouped by, return the node from the nodes data
 		return nodesData.find((node) => node.nodeUID === selectedNodeUID) || null;
-	}, [selectedNodeUID, nodesData]);
+	}, [selectedNodeUID, groupBy.length, nodesData, nestedNodesData]);
 
 	const handleRowClick = (record: K8sNodesRowData): void => {
 		if (groupBy.length === 0) {
@@ -329,6 +341,10 @@ function K8sNodesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedNodeUID(record.nodeUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -227,6 +227,11 @@ function K8sPodsList({
 	const podsData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;
 
+	const nestedPodsData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const formattedPodsData = useMemo(
 		() => formatDataForTable(podsData, groupBy),
 		[podsData, groupBy],
@@ -313,8 +318,13 @@ function K8sPodsList({
 
 	const selectedPodData = useMemo(() => {
 		if (!selectedPodUID) return null;
+		if (groupBy.length > 0) {
+			// If grouped by, return the pod from the formatted grouped by pods data
+			return nestedPodsData.find((pod) => pod.podUID === selectedPodUID) || null;
+		}
+		// If not grouped by, return the node from the nodes data
 		return podsData.find((pod) => pod.podUID === selectedPodUID) || null;
-	}, [selectedPodUID, podsData]);
+	}, [selectedPodUID, groupBy.length, podsData, nestedPodsData]);
 
 	const handleGroupByRowClick = (record: K8sPodsRowData): void => {
 		setSelectedRowData(record);
@@ -425,6 +435,10 @@ function K8sPodsList({
 							spinning: isFetchingGroupedByRowData || isLoadingGroupedByRowData,
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setSelectedPodUID(record.podUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -202,6 +202,11 @@ function K8sStatefulSetsList({
 		[groupedByRowData, groupBy],
 	);
 
+	const nestedStatefulSetsData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sStatefulSetsList(
 		query as K8sStatefulSetsListPayload,
 		{
@@ -288,12 +293,24 @@ function K8sStatefulSetsList({
 
 	const selectedStatefulSetData = useMemo(() => {
 		if (!selectedStatefulSetUID) return null;
+		if (groupBy.length > 0) {
+			return (
+				nestedStatefulSetsData.find(
+					(statefulSet) => statefulSet.statefulSetName === selectedStatefulSetUID,
+				) || null
+			);
+		}
 		return (
 			statefulSetsData.find(
 				(statefulSet) => statefulSet.statefulSetName === selectedStatefulSetUID,
 			) || null
 		);
-	}, [selectedStatefulSetUID, statefulSetsData]);
+	}, [
+		selectedStatefulSetUID,
+		groupBy.length,
+		statefulSetsData,
+		nestedStatefulSetsData,
+	]);
 
 	const handleRowClick = (record: K8sStatefulSetsRowData): void => {
 		if (groupBy.length === 0) {
@@ -346,6 +363,10 @@ function K8sStatefulSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedStatefulSetUID(record.statefulsetUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -198,6 +198,11 @@ function K8sVolumesList({
 		[groupedByRowData, groupBy],
 	);
 
+	const nestedVolumesData = useMemo(() => {
+		if (!selectedRowData || !groupedByRowData?.payload?.data.records) return [];
+		return groupedByRowData?.payload?.data?.records || [];
+	}, [groupedByRowData, selectedRowData]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sVolumesList(
 		query as K8sVolumesListPayload,
 		{
@@ -278,12 +283,19 @@ function K8sVolumesList({
 
 	const selectedVolumeData = useMemo(() => {
 		if (!selectedVolumeUID) return null;
+		if (groupBy.length > 0) {
+			return (
+				nestedVolumesData.find(
+					(volume) => volume.persistentVolumeClaimName === selectedVolumeUID,
+				) || null
+			);
+		}
 		return (
 			volumesData.find(
 				(volume) => volume.persistentVolumeClaimName === selectedVolumeUID,
 			) || null
 		);
-	}, [selectedVolumeUID, volumesData]);
+	}, [selectedVolumeUID, volumesData, groupBy.length, nestedVolumesData]);
 
 	const handleRowClick = (record: K8sVolumesRowData): void => {
 		if (groupBy.length === 0) {
@@ -336,6 +348,10 @@ function K8sVolumesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => setselectedVolumeUID(record.volumeUID),
+							className: 'expanded-clickable-row',
+						})}
 					/>
 
 					{groupedByRowData?.payload?.data?.total &&