feat: implement namespace details page

frontend/src/api/infraMonitoring/getK8sNamespacesList.ts

@@ -0,0 +1,62 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface K8sNamespacesListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
+
+export interface K8sNamespacesData {
+	namespaceName: string;
+	cpuUsage: number;
+	memoryUsage: number;
+	meta: {
+		k8s_cluster_name: string;
+		k8s_namespace_uid: string;
+	};
+}
+
+export interface K8sNamespacesListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: K8sNamespacesData[];
+		groups: null;
+		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
+	};
+}
+
+export const getK8sNamespacesList = async (
+	props: K8sNamespacesListPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<K8sNamespacesListResponse> | ErrorResponse> => {
+	try {
+		const response = await ApiBaseInstance.post('/namespaces/list', props, {
+			signal,
+			headers,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+			params: props,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/constants/reactQueryKeys.ts

@@ -21,4 +21,6 @@ export const REACT_QUERY_KEY = {
 	GET_HOST_LIST: 'GET_HOST_LIST',
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
+	GET_NAMESPACE_LIST: 'GET_NAMESPACE_LIST',
+	GET_POD_LIST: 'GET_POD_LIST',
 };

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -36,6 +36,7 @@ import {
 	StatefulsetsQuickFiltersConfig,
 	VolumesQuickFiltersConfig,
 } from './constants';
+import K8sNamespacesList from './Namespaces/K8sNamespacesList';
 import K8sPodLists from './Pods/K8sPodLists';
 import Volumes from './Volumes/Volumes';
 
@@ -323,6 +324,13 @@ export default function InfraMonitoringK8s(): JSX.Element {
 							/>
 						)}
 
+						{selectedCategory === K8sCategories.NAMESPACES && (
+							<K8sNamespacesList
+								isFiltersVisible={showFilters}
+								handleFilterVisibilityChange={handleFilterVisibilityChange}
+							/>
+						)}
+
 						{selectedCategory === K8sCategories.VOLUMES && <Volumes />}
 					</div>
 				</div>

frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import './InfraMonitoringK8s.styles.scss';
 
 import { Button, Select } from 'antd';
@@ -14,15 +15,15 @@ import { IPodColumn } from './utils';
 
 interface K8sHeaderProps {
 	selectedGroupBy: BaseAutocompleteData[];
-	defaultAddedColumns: IPodColumn[];
 	groupByOptions: { value: string; label: string }[];
-	addedColumns: IPodColumn[];
 	isLoadingGroupByFilters: boolean;
-	availableColumns: IPodColumn[];
 	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
 	handleGroupByChange: (value: IBuilderQuery['groupBy']) => void;
-	onAddColumn: (column: IPodColumn) => void;
-	onRemoveColumn: (column: IPodColumn) => void;
+	defaultAddedColumns: IPodColumn[];
+	addedColumns?: IPodColumn[];
+	availableColumns?: IPodColumn[];
+	onAddColumn?: (column: IPodColumn) => void;
+	onRemoveColumn?: (column: IPodColumn) => void;
 	handleFilterVisibilityChange: () => void;
 	isFiltersVisible: boolean;
 }
@@ -32,12 +33,12 @@ function K8sHeader({
 	defaultAddedColumns,
 	groupByOptions,
 	isLoadingGroupByFilters,
-	addedColumns,
-	availableColumns,
+	addedColumns = [],
+	availableColumns = [],
 	handleFiltersChange,
 	handleGroupByChange,
-	onAddColumn,
-	onRemoveColumn,
+	onAddColumn = () => {},
+	onRemoveColumn = () => {},
 	handleFilterVisibilityChange,
 	isFiltersVisible,
 }: K8sHeaderProps): JSX.Element {
@@ -125,7 +126,7 @@ function K8sHeader({
 				<Button
 					type="text"
 					className="periscope-btn ghost"
-					disabled={selectedGroupBy.length > 0}
+					disabled={selectedGroupBy?.length > 0}
 					onClick={(): void => setIsFiltersSidePanelOpen(true)}
 				>
 					<SlidersHorizontal size={14} />
@@ -150,4 +151,11 @@ function K8sHeader({
 	);
 }
 
+K8sHeader.defaultProps = {
+	addedColumns: [],
+	availableColumns: [],
+	onAddColumn: () => {},
+	onRemoveColumn: () => {},
+};
+
 export default K8sHeader;