chore: infra monitoring bug fixes (#6795)

Author: amlannandy

frontend/src/api/infraMonitoring/getK8sNodesList.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -47,7 +47,7 @@ export const getK8sNodesList = async (
 	headers?: Record<string, string>,
 ): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
 	try {
-		const response = await ApiBaseInstance.post('/nodes/list', props, {
+		const response = await axios.post('/nodes/list', props, {
 			signal,
 			headers,
 		});

frontend/src/api/infraMonitoring/getK8sPodsList.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -75,7 +75,7 @@ export const getK8sPodsList = async (
 	headers?: Record<string, string>,
 ): Promise<SuccessResponse<K8sPodsListResponse> | ErrorResponse> => {
 	try {
-		const response = await ApiBaseInstance.post('/pods/list', props, {
+		const response = await axios.post('/pods/list', props, {
 			signal,
 			headers,
 		});

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -39,10 +39,6 @@
 		.ant-collapse-header {
 			border-bottom: 1px solid var(--bg-slate-400);
 			padding: 12px 8px;
-
-			&[aria-expanded='true'] {
-				background: var(--bg-ink-400);
-			}
 		}
 
 		.ant-collapse-content-box {
@@ -271,8 +267,6 @@
 
 				.group-by-label {
 					min-width: max-content;
-
-					color: var(--bg-vanilla-100, #c0c1c3);
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 400;
@@ -282,7 +276,6 @@
 					border-radius: 2px 0px 0px 2px;
 					border: 1px solid var(--bg-slate-400, #1d212d);
 					border-right: none;
-					background: var(--bg-ink-100, #16181d);
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 
@@ -488,7 +481,7 @@
 		.expanded-table-container {
 			border: 1px solid var(--bg-ink-400);
 			overflow-x: auto;
-			padding-left: 16px;
+			padding-left: 48px;
 
 			&::-webkit-scrollbar {
 				width: 0.1rem;
@@ -710,8 +703,34 @@
 }
 
 .ant-table-cell {
-	min-width: 170px !important;
-	max-width: 170px !important;
+	min-width: 140px !important;
+	max-width: 140px !important;
+}
+
+.ant-table-cell {
+	&:has(.pod-name-header) {
+		min-width: 250px !important;
+		max-width: 250px !important;
+	}
+}
+
+.ant-table-cell {
+	&:has(.med-col) {
+		min-width: 180px !important;
+		max-width: 180px !important;
+	}
+}
+
+.expanded-k8s-list-table {
+	.ant-table-cell {
+		min-width: 180px !important;
+		max-width: 180px !important;
+	}
+
+	.ant-table-row-expand-icon-cell {
+		min-width: 30px !important;
+		max-width: 30px !important;
+	}
 }
 
 .ant-table-row-expand-icon-cell {
@@ -808,6 +827,24 @@
 }
 
 .lightMode {
+	.infra-monitoring-container {
+		.k8s-list-table {
+			.ant-table-expanded-row {
+				&:hover {
+					background: var(--bg-vanilla-100) !important;
+				}
+
+				.ant-table-cell {
+					background: var(--bg-vanilla-100) !important;
+				}
+
+				.ant-table .ant-table-thead > tr > th {
+					padding: 4px 16px !important;
+				}
+			}
+		}
+	}
+
 	.event-content-container {
 		.ant-table {
 			background: var(--bg-vanilla-100);
@@ -831,4 +868,11 @@
 			}
 		}
 	}
+
+	.entity-group-header {
+		.ant-tag {
+			background-color: var(--bg-vanilla-300) !important;
+			color: var(--bg-slate-400) !important;
+		}
+	}
 }

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -9,7 +9,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { Container, Workflow } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
@@ -24,6 +24,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
 
 	const [selectedCategory, setSelectedCategory] = useState(K8sCategories.PODS);
+	const [quickFiltersLastUpdated, setQuickFiltersLastUpdated] = useState(-1);
 
 	const { currentQuery } = useQueryBuilder();
 
@@ -37,14 +38,12 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		entityVersion: '',
 	});
 
-	const handleFilterChange = useCallback(
-		(query: Query): void => {
-			// update the current query with the new filters
-			// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
-			handleChangeQueryData('filters', query.builder.queryData[0].filters);
-		},
-		[handleChangeQueryData],
-	);
+	const handleFilterChange = (query: Query): void => {
+		// update the current query with the new filters
+		// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
+		handleChangeQueryData('filters', query.builder.queryData[0].filters);
+		setQuickFiltersLastUpdated(Date.now());
+	};
 
 	const items: CollapseProps['items'] = [
 		{
@@ -262,6 +261,8 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const handleCategoryChange = (key: string | string[]): void => {
 		if (Array.isArray(key) && key.length > 0) {
 			setSelectedCategory(key[0] as string);
+			// Reset filters
+			handleChangeQueryData('filters', { items: [], op: 'and' });
 		}
 	};
 
@@ -302,13 +303,15 @@ export default function InfraMonitoringK8s(): JSX.Element {
 							<K8sPodLists
 								isFiltersVisible={showFilters}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
+								quickFiltersLastUpdated={quickFiltersLastUpdated}
 							/>
 						)}
 
 						{selectedCategory === K8sCategories.NODES && (
 							<K8sNodesList
 								isFiltersVisible={showFilters}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
+								quickFiltersLastUpdated={quickFiltersLastUpdated}
 							/>
 						)}
 					</div>

frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx

@@ -7,7 +7,7 @@ import { Button, Input } from 'antd';
 import { GripVertical, TableColumnsSplit, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 
-import { IPodColumn } from '../utils';
+import { IEntityColumn } from '../utils';
 
 function K8sFiltersSidePanel({
 	defaultAddedColumns,
@@ -17,12 +17,12 @@ function K8sFiltersSidePanel({
 	onAddColumn = () => {},
 	onRemoveColumn = () => {},
 }: {
-	defaultAddedColumns: IPodColumn[];
+	defaultAddedColumns: IEntityColumn[];
 	onClose: () => void;
-	addedColumns?: IPodColumn[];
-	availableColumns?: IPodColumn[];
-	onAddColumn?: (column: IPodColumn) => void;
-	onRemoveColumn?: (column: IPodColumn) => void;
+	addedColumns?: IEntityColumn[];
+	availableColumns?: IEntityColumn[];
+	onAddColumn?: (column: IEntityColumn) => void;
+	onRemoveColumn?: (column: IEntityColumn) => void;
 }): JSX.Element {
 	const [searchValue, setSearchValue] = useState('');
 	const sidePanelRef = useRef<HTMLDivElement>(null);

frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx

@@ -12,19 +12,19 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import { K8sCategory } from './constants';
 import K8sFiltersSidePanel from './K8sFiltersSidePanel/K8sFiltersSidePanel';
-import { IPodColumn } from './utils';
+import { IEntityColumn } from './utils';
 
 interface K8sHeaderProps {
 	selectedGroupBy: BaseAutocompleteData[];
 	groupByOptions: { value: string; label: string }[];
 	isLoadingGroupByFilters: boolean;
 	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
 	handleGroupByChange: (value: IBuilderQuery['groupBy']) => void;
-	defaultAddedColumns: IPodColumn[];
-	addedColumns?: IPodColumn[];
-	availableColumns?: IPodColumn[];
-	onAddColumn?: (column: IPodColumn) => void;
-	onRemoveColumn?: (column: IPodColumn) => void;
+	defaultAddedColumns: IEntityColumn[];
+	addedColumns?: IEntityColumn[];
+	availableColumns?: IEntityColumn[];
+	onAddColumn?: (column: IEntityColumn) => void;
+	onRemoveColumn?: (column: IEntityColumn) => void;
 	handleFilterVisibilityChange: () => void;
 	isFiltersVisible: boolean;
 	entity: K8sCategory;