chore: fix issues

SigNoz · Dec 24, 2024 · de44425 · de44425
1 parent de61caa
commit de44425
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 39 deletions.
diff --git 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 (
 		<Drawer
 			width="70%"
@@ -412,22 +406,13 @@ function ClusterDetails({
 								>
 									Cluster Name
 								</Typography.Text>
-								<Typography.Text
-									type="secondary"
-									className="cluster-details-metadata-label"
-								>
-									Cluster Name
-								</Typography.Text>
 							</div>
 							<div className="values-row">
 								<Typography.Text className="cluster-details-metadata-value">
 									<Tooltip title={cluster.meta.k8s_cluster_name}>
 										{cluster.meta.k8s_cluster_name}
 									</Tooltip>
 								</Typography.Text>
-								<Typography.Text className="cluster-details-metadata-value">
-									<Tooltip title="Cluster name">{cluster.meta.k8s_cluster_name}</Tooltip>
-								</Typography.Text>
 							</div>
 						</div>
 					</div>

diff --git 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
@@ -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<string | null>(null);
+	const [selectedClusterUID, setselectedClusterUID] = useState<string | null>(
+		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 (
 		<div className="k8s-list">
 			<K8sHeader
@@ -490,7 +499,11 @@ function K8sClustersList({
 					}}
 				/>
 			)}
-			{/* TODO - Handle Cluster Details flow */}
+			<ClusterDetails
+				cluster={selectedClusterData}
+				isModalTimeSelection
+				onClose={handleCloseClusterDetail}
+			/>
 		</div>
 	);
 }

diff --git 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: (
 			<Tooltip title={cluster.meta.k8s_cluster_name}>
 				{cluster.meta.k8s_cluster_name}