GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 22:08:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Amlan Kumar Nandy 2025-01-31 13:24:14 +05:30 committed by GitHub
parent 93a8f97355
commit 5783f1555f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 181 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx
View File

@ -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 &&

26
frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx
View File

@ -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 &&

25
frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx
View File

@ -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 &&

4
frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
View File

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

17
frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx
View File

@ -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 &&

25
frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx
View File

@ -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 &&

18
frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx
View File

@ -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 &&

16
frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx generated
View File

@ -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 &&

23
frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx
View File

@ -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 &&

18
frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx
View File

@ -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 &&