diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx index 184aa8bdd2..09dfc5cc30 100644 --- a/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx +++ b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx @@ -85,12 +85,12 @@ function ClusterDetails({ { id: uuidv4(), key: { - key: 'cluster.name', + key: QUERY_KEYS.K8S_CLUSTER_NAME, dataType: DataTypes.String, type: 'resource', isColumn: false, isJSON: false, - id: 'cluster.name--string--resource--false', + id: 'k8s_cluster_name--string--resource--false', }, op: '=', value: cluster?.meta.k8s_cluster_name || '', @@ -115,7 +115,7 @@ function ClusterDetails({ id: 'k8s.object.kind--string--resource--false', }, op: '=', - value: 'cluster', + value: 'Cluster', }, { id: uuidv4(), @@ -148,7 +148,7 @@ function ClusterDetails({ ); useEffect(() => { - logEvent('Infra Monitoring: Pods list details page visited', { + logEvent('Infra Monitoring: Clusters list details page visited', { cluster: cluster?.clusterUID, }); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -195,7 +195,7 @@ function ClusterDetails({ }); } - logEvent('Infra Monitoring: Cluster list details time updated', { + logEvent('Infra Monitoring: Clusters list details time updated', { cluster: cluster?.clusterUID, interval, }); @@ -208,11 +208,12 @@ function ClusterDetails({ (value: IBuilderQuery['filters']) => { setLogFilters((prevFilters) => { const hostNameFilter = prevFilters.items.find( - (item) => item.key?.key === 'host.name', + (item) => item.key?.key === QUERY_KEYS.K8S_CLUSTER_NAME, ); const paginationFilter = value.items.find((item) => item.key?.key === 'id'); const newFilters = value.items.filter( - (item) => item.key?.key !== 'id' && item.key?.key !== 'host.name', + (item) => + item.key?.key !== 'id' && item.key?.key !== QUERY_KEYS.K8S_CLUSTER_NAME, ); logEvent('Infra Monitoring: Clusters list details logs filters applied', { @@ -237,7 +238,7 @@ function ClusterDetails({ (value: IBuilderQuery['filters']) => { setTracesFilters((prevFilters) => { const hostNameFilter = prevFilters.items.find( - (item) => item.key?.key === 'host.name', + (item) => item.key?.key === QUERY_KEYS.K8S_CLUSTER_NAME, ); logEvent('Infra Monitoring: Clusters list details traces filters applied', { @@ -248,7 +249,9 @@ function ClusterDetails({ op: 'AND', items: [ hostNameFilter, - ...value.items.filter((item) => item.key?.key !== 'host.name'), + ...value.items.filter( + (item) => item.key?.key !== QUERY_KEYS.K8S_CLUSTER_NAME, + ), ].filter((item): item is TagFilterItem => item !== undefined), }; }); @@ -370,15 +373,6 @@ function ClusterDetails({ onClose(); }; - console.log({ - isModalTimeSelection, - eventsFilters, - handleTimeChange, - handleChangeLogFilters, - handleChangeTracesFilters, - handleChangeEventsFilters, - }); - return ( Cluster Name - - Cluster Name -
@@ -425,9 +413,6 @@ function ClusterDetails({ {cluster.meta.k8s_cluster_name} - - {cluster.meta.k8s_cluster_name} -
diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts index 240ce9fd6f..9aeacbe887 100644 --- a/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts +++ b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts @@ -15,4 +15,5 @@ export const VIEW_TYPES = { export const QUERY_KEYS = { K8S_OBJECT_KIND: 'k8s.object.kind', K8S_OBJECT_NAME: 'k8s.object.name', + K8S_CLUSTER_NAME: 'k8s.cluster.name', }; diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx b/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx index 9378031e12..9539bf57af 100644 --- a/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx +++ b/frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx @@ -29,6 +29,7 @@ import { K8sCategory } from '../constants'; import K8sHeader from '../K8sHeader'; import LoadingContainer from '../LoadingContainer'; import { dummyColumnConfig } from '../utils'; +import ClusterDetails from './ClusterDetails'; import { defaultAddedColumns, formatDataForTable, @@ -57,7 +58,9 @@ function K8sClustersList({ order: 'asc' | 'desc'; } | null>(null); - // const [selectedClusterUID, setselectedClusterUID] = useState(null); + const [selectedClusterUID, setselectedClusterUID] = useState( + null, + ); const pageSize = 10; @@ -261,21 +264,25 @@ function K8sClustersList({ logEvent('Infra Monitoring: K8s list page visited', {}); }, []); - // const selectedClusterData = useMemo(() => { - // if (!selectedClusterUID) return null; - // return clustersData.find((cluster) => cluster.clusterUID === selectedClusterUID) || null; - // }, [selectedClusterUID, clustersData]); + const selectedClusterData = useMemo(() => { + if (!selectedClusterUID) return null; + return ( + clustersData.find( + (cluster) => cluster.meta.k8s_cluster_name === selectedClusterUID, + ) || null + ); + }, [selectedClusterUID, clustersData]); const handleRowClick = (record: K8sClustersRowData): void => { if (groupBy.length === 0) { setSelectedRowData(null); - // setselectedClusterUID(record.clusterUID); + setselectedClusterUID(record.clusterUID); } else { handleGroupByRowClick(record); } logEvent('Infra Monitoring: K8s cluster list item clicked', { - clusterUID: record.clusterName, + clusterName: record.clusterName, }); }; @@ -379,9 +386,9 @@ function K8sClustersList({ ); }; - // const handleCloseClusterDetail = (): void => { - // setselectedClusterUID(null); - // }; + const handleCloseClusterDetail = (): void => { + setselectedClusterUID(null); + }; const showsClustersTable = !isError && @@ -428,6 +435,8 @@ function K8sClustersList({ } }, [groupByFiltersData]); + console.log({ selectedClusterData }); + return (
)} - {/* TODO - Handle Cluster Details flow */} +
); } diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx b/frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx index 6359a1812d..3733cbd9b0 100644 --- a/frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx +++ b/frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx @@ -161,7 +161,7 @@ export const formatDataForTable = ( ): K8sClustersRowData[] => data.map((cluster, index) => ({ key: `${cluster.meta.k8s_cluster_name}-${index}`, - clusterUID: cluster.clusterUID, + clusterUID: cluster.meta.k8s_cluster_name, clusterName: ( {cluster.meta.k8s_cluster_name}