diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx b/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx
index bf0d275986..c75cc47c46 100644
--- a/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedClusterName(record.clusterUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx b/frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx
index 7044f10fd2..773bdf55d3 100644
--- a/frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedDaemonSetUID(record.daemonsetUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx b/frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx
index 5635522d93..f51f566b8a 100644
--- a/frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedDeploymentUID(record.deploymentUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
index f207511401..7386529cf5 100644
--- a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
+++ b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
@@ -884,3 +884,7 @@
.ant-table-content {
margin-bottom: 60px !important;
}
+
+.expanded-clickable-row {
+ cursor: pointer;
+}
diff --git a/frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx b/frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx
index c3f3ac5429..d5b778e14e 100644
--- a/frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedJobUID(record.jobUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx b/frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx
index af6833a1b0..8f4fb8d924 100644
--- a/frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedNamespaceUID(record.namespaceUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx b/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx
index 80efef725d..370461db07 100644
--- a/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedNodeUID(record.nodeUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx b/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx
index 35a2046d25..91baa27f7a 100644
--- a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx
+++ b/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: } />,
}}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setSelectedPodUID(record.podUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx b/frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx
index b5c08997da..cb6d3ff253 100644
--- a/frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedStatefulSetUID(record.statefulsetUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&
diff --git a/frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx b/frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx
index c2e8f393e2..4bdc9ce821 100644
--- a/frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx
+++ b/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: } />,
}}
showHeader={false}
+ onRow={(record): { onClick: () => void; className: string } => ({
+ onClick: (): void => setselectedVolumeUID(record.volumeUID),
+ className: 'expanded-clickable-row',
+ })}
/>
{groupedByRowData?.payload?.data?.total &&