Skip to content

Commit

Permalink
chore: add functionality to open entity details from nested table ite…
Browse files Browse the repository at this point in the history 
…ms in groupby mode (#6981)
  • Loading branch information
@amlannandy
amlannandy authored Jan 31, 2025
1 parent 93a8f97 commit 5783f15
Show file tree
Hide file tree
Showing 10 changed files with 181 additions and 11 deletions.
20 changes: 19 additions & 1 deletion frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
{
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand Down
26 changes: 24 additions & 2 deletions frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand Down
25 changes: 24 additions & 1 deletion frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
]);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -884,3 +884,7 @@
.ant-table-content {
margin-bottom: 60px !important;
}

.expanded-clickable-row {
cursor: pointer;
}
17 changes: 15 additions & 2 deletions frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
{
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand Down
25 changes: 24 additions & 1 deletion frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand Down
18 changes: 17 additions & 1 deletion frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand Down
16 changes: 15 additions & 1 deletion frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 22 additions & 1 deletion frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
{
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 &&
Expand Down
Loading

0 comments on commit 5783f15

Please sign in to comment.