Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jan 31, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 {
amlannandy marked this conversation as resolved.
Show resolved Hide resolved
cursor: pointer;
}
17 changes: 15 additions & 2 deletions frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

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
Open in desktop
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
Loading