feat: implement clusters list table for infra monitoring

frontend/src/api/infraMonitoring/getK8sClustersList.ts

@@ -0,0 +1,69 @@
+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 K8sClustersListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
+
+export interface K8sClustersData {
+	clusterName: string;
+	cpuUsage: number;
+	memoryUsage: number;
+	desiredPods: number;
+	availablePods: number;
+	cpuRequest: number;
+	memoryRequest: number;
+	cpuLimit: number;
+	memoryLimit: number;
+	restarts: number;
+	meta: {
+		k8s_cluster_name: string;
+		k8s_namespace_name: string;
+	};
+}
+
+export interface K8sClustersListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: K8sClustersData[];
+		groups: null;
+		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
+	};
+}
+
+export const getK8sClustersList = async (
+	props: K8sClustersListPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<K8sClustersListResponse> | ErrorResponse> => {
+	try {
+		const response = await ApiBaseInstance.post('/clusters/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/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -0,0 +1,245 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import '../InfraMonitoringK8s.styles.scss';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import {
+	Skeleton,
+	Spin,
+	Table,
+	TablePaginationConfig,
+	TableProps,
+	Typography,
+} from 'antd';
+import { SorterResult } from 'antd/es/table/interface';
+import logEvent from 'api/common/logEvent';
+import { K8sClustersListPayload } from 'api/infraMonitoring/getK8sClustersList';
+import { useGetK8sClustersList } from 'hooks/infraMonitoring/useGetK8sClustersList';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import K8sHeader from '../K8sHeader';
+import {
+	defaultAddedColumns,
+	formatDataForTable,
+	getK8sClustersListColumns,
+	getK8sClustersListQuery,
+	K8sClustersRowData,
+} from './utils';
+
+function K8sClustersList({
+	isFiltersVisible,
+	handleFilterVisibilityChange,
+}: {
+	isFiltersVisible: boolean;
+	handleFilterVisibilityChange: () => void;
+}): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const [currentPage, setCurrentPage] = useState(1);
+
+	const [filters, setFilters] = useState<IBuilderQuery['filters']>({
+		items: [],
+		op: 'and',
+	});
+
+	const [orderBy, setOrderBy] = useState<{
+		columnName: string;
+		order: 'asc' | 'desc';
+	} | null>(null);
+
+	// const [selectedClusterUID, setselectedClusterUID] = useState<string | null>(null);
+
+	const pageSize = 10;
+
+	const query = useMemo(() => {
+		const baseQuery = getK8sClustersListQuery();
+		return {
+			...baseQuery,
+			limit: pageSize,
+			offset: (currentPage - 1) * pageSize,
+			filters,
+			start: Math.floor(minTime / 1000000),
+			end: Math.floor(maxTime / 1000000),
+			orderBy,
+		};
+	}, [currentPage, filters, minTime, maxTime, orderBy]);
+
+	const { data, isFetching, isLoading, isError } = useGetK8sClustersList(
+		query as K8sClustersListPayload,
+		{
+			queryKey: ['hostList', query],
+			enabled: !!query,
+		},
+	);
+
+	const ClustersData = useMemo(() => data?.payload?.data?.records || [], [data]);
+	const totalCount = data?.payload?.data?.total || 0;
+
+	const formattedClustersData = useMemo(() => formatDataForTable(ClustersData), [
+		ClustersData,
+	]);
+
+	const columns = useMemo(() => getK8sClustersListColumns(), []);
+
+	const handleTableChange: TableProps<K8sClustersRowData>['onChange'] = useCallback(
+		(
+			pagination: TablePaginationConfig,
+			_filters: Record<string, (string | number | boolean)[] | null>,
+			sorter:
+				| SorterResult<K8sClustersRowData>
+				| SorterResult<K8sClustersRowData>[],
+		): void => {
+			if (pagination.current) {
+				setCurrentPage(pagination.current);
+			}
+
+			if ('field' in sorter && sorter.order) {
+				setOrderBy({
+					columnName: sorter.field as string,
+					order: sorter.order === 'ascend' ? 'asc' : 'desc',
+				});
+			} else {
+				setOrderBy(null);
+			}
+		},
+		[],
+	);
+
+	const handleFiltersChange = useCallback(
+		(value: IBuilderQuery['filters']): void => {
+			const isNewFilterAdded = value.items.length !== filters.items.length;
+			if (isNewFilterAdded) {
+				setFilters(value);
+				setCurrentPage(1);
+
+				logEvent('Infra Monitoring: K8s list filters applied', {
+					filters: value,
+				});
+			}
+		},
+		[filters],
+	);
+
+	useEffect(() => {
+		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 handleRowClick = (record: K8sClustersRowData): void => {
+		// setselectedClusterUID(record.ClusterUID);
+
+		logEvent('Infra Monitoring: K8s cluster list item clicked', {
+			clusterName: record.clusterName,
+		});
+	};
+
+	// const handleCloseClusterDetail = (): void => {
+	// 	setselectedClusterUID(null);
+	// };
+
+	const showsClustersTable =
+		!isError &&
+		!isLoading &&
+		!isFetching &&
+		!(formattedClustersData.length === 0 && filters.items.length > 0);
+
+	const showNoFilteredClustersMessage =
+		!isFetching &&
+		!isLoading &&
+		formattedClustersData.length === 0 &&
+		filters.items.length > 0;
+
+	return (
+		<div className="k8s-list">
+			<K8sHeader
+				isFiltersVisible={isFiltersVisible}
+				handleFilterVisibilityChange={handleFilterVisibilityChange}
+				defaultAddedColumns={defaultAddedColumns}
+				addedColumns={[]}
+				availableColumns={[]}
+				handleFiltersChange={handleFiltersChange}
+				onAddColumn={() => {}}
+				onRemoveColumn={() => {}}
+			/>
+			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+
+			{showNoFilteredClustersMessage && (
+				<div className="no-filtered-hosts-message-cluster">
+					<div className="no-filtered-hosts-message-content">
+						<img
+							src="/Icons/emptyState.svg"
+							alt="thinking-emoji"
+							className="empty-state-svg"
+						/>
+
+						<Typography.Text className="no-filtered-hosts-message">
+							This query had no results. Edit your query and try again!
+						</Typography.Text>
+					</div>
+				</div>
+			)}
+
+			{(isFetching || isLoading) && (
+				<div className="k8s-list-loading-state">
+					<Skeleton.Input
+						className="k8s-list-loading-state-item"
+						size="large"
+						block
+						active
+					/>
+					<Skeleton.Input
+						className="k8s-list-loading-state-item"
+						size="large"
+						block
+						active
+					/>
+					<Skeleton.Input
+						className="k8s-list-loading-state-item"
+						size="large"
+						block
+						active
+					/>
+				</div>
+			)}
+
+			{showsClustersTable && (
+				<Table
+					className="k8s-list-table"
+					dataSource={isFetching || isLoading ? [] : formattedClustersData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: false,
+						hideOnSinglePage: true,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: isFetching || isLoading,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					tableLayout="fixed"
+					rowKey={(record): string => record.clusterName}
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+				/>
+			)}
+			{/* TODO - Handle Cluster Details flow */}
+		</div>
+	);
+}
+
+export default K8sClustersList;