feat: added the host list view and filters

frontend/src/AppRoutes/pageComponents.ts

@@ -224,3 +224,10 @@ export const MQDetailPage = Loadable(
 			/* webpackChunkName: "MQDetailPage" */ 'pages/MessagingQueues/MQDetailPage'
 		),
 );
+
+export const InfrastructureMonitoring = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "InfrastructureMonitoring" */ 'pages/InfrastructureMonitoring'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -15,6 +15,7 @@ import {
 	EditAlertChannelsAlerts,
 	EditRulesPage,
 	ErrorDetails,
+	InfrastructureMonitoring,
 	IngestionSettings,
 	InstalledIntegrations,
 	LicensePage,
@@ -383,6 +384,13 @@ const routes: AppRoutes[] = [
 		key: 'MESSAGING_QUEUES_DETAIL',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		exact: true,
+		component: InfrastructureMonitoring,
+		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -0,0 +1,73 @@
+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 HostListPayload {
+	start: number;
+	end: number;
+	filters: TagFilter;
+	groupBy: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+}
+
+interface TimeSeriesValue {
+	timestamp: number;
+	value: string;
+}
+
+interface TimeSeries {
+	labels: Record<string, string>;
+	labelsArray: Array<Record<string, string>>;
+	values: TimeSeriesValue[];
+}
+
+interface HostData {
+	hostName: string;
+	active: boolean;
+	os: string;
+	cpu: number;
+	cpuTimeSeries: TimeSeries;
+	memory: number;
+	memoryTimeSeries: TimeSeries;
+	wait: number;
+	waitTimeSeries: TimeSeries;
+	load15: number;
+	load15TimeSeries: TimeSeries;
+}
+
+export interface HostListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: HostData[];
+		groups: null;
+		total: number;
+	};
+}
+
+export const getHostLists = async (
+	props: HostListPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<HostListResponse> | ErrorResponse> => {
+	try {
+		const response = await ApiBaseInstance.post('/hosts/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/api/infraMonitoring/getInfraAttributeValues.ts

@@ -0,0 +1,38 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import createQueryParams from 'lib/createQueryParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	IAttributeValuesResponse,
+	IGetAttributeValuesPayload,
+} from 'types/api/queryBuilder/getAttributesValues';
+
+export const getInfraAttributesValues = async ({
+	dataSource,
+	attributeKey,
+	filterAttributeKeyDataType,
+	tagType,
+	searchText,
+}: IGetAttributeValuesPayload): Promise<
+	SuccessResponse<IAttributeValuesResponse> | ErrorResponse
+> => {
+	try {
+		const response = await ApiBaseInstance.get(
+			`/hosts/attribute_values?${createQueryParams({
+				dataSource,
+				attributeKey,
+				searchText,
+			})}&filterAttributeKeyDataType=${filterAttributeKeyDataType}&tagType=${tagType}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/api/queryBuilder/getAttributeKeys.ts

@@ -1,4 +1,4 @@
-import { ApiV3Instance } from 'api';
+import { ApiBaseInstance, ApiV3Instance } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError, AxiosResponse } from 'axios';
 import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
@@ -18,20 +18,25 @@ export const getAggregateKeys = async ({
 	dataSource,
 	aggregateAttribute,
 	tagType,
+	isInfraMonitoring,
 }: IGetAttributeKeysPayload): Promise<
 	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
 > => {
 	try {
+		const endpoint = isInfraMonitoring
+			? `/hosts/attribute_keys?dataSource=metrics&searchText=${searchText || ''}`
+			: `/autocomplete/attribute_keys?${createQueryParams({
+					aggregateOperator,
+					searchText,
+					dataSource,
+					aggregateAttribute,
+			  })}&tagType=${tagType}`;
+
+		const apiInstance = isInfraMonitoring ? ApiBaseInstance : ApiV3Instance;
+
 		const response: AxiosResponse<{
 			data: IQueryAutocompleteResponse;
-		}> = await ApiV3Instance.get(
-			`/autocomplete/attribute_keys?${createQueryParams({
-				aggregateOperator,
-				searchText,
-				dataSource,
-				aggregateAttribute,
-			})}&tagType=${tagType}`,
-		);
+		}> = await apiInstance.get(endpoint);
 
 		const payload: BaseAutocompleteData[] =
 			response.data.data.attributeKeys?.map(({ id: _, ...item }) => ({

frontend/src/constants/reactQueryKeys.ts

@@ -18,4 +18,5 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
+	GET_HOST_LIST: 'GET_HOST_LIST',
 };

frontend/src/constants/routes.ts

@@ -58,6 +58,7 @@ const ROUTES = {
 	INTEGRATIONS: '/integrations',
 	MESSAGING_QUEUES: '/messaging-queues',
 	MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail',
+	INFRASTRUCTURE_MONITORING_HOSTS: '/infrastructure-monitoring/hosts',
 } as const;
 
 export default ROUTES;

frontend/src/container/HostMetricsLoading/HostMetricsLoading.styles.scss

@@ -0,0 +1,19 @@
+.loading-host-metrics {
+	padding: 24px 0;
+	height: 600px;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.loading-host-metrics-content {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+
+		.loading-gif {
+			height: 72px;
+			margin-left: -24px;
+		}
+	}
+}

frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx

@@ -0,0 +1,26 @@
+import './HostMetricsLoading.styles.scss';
+
+import { Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { DataSource } from 'types/common/queryBuilder';
+
+export function HostMetricsLoading(): JSX.Element {
+	const { t } = useTranslation('common');
+	return (
+		<div className="loading-host-metrics">
+			<div className="loading-host-metrics-content">
+				<img
+					className="loading-gif"
+					src="/Icons/loading-plane.gif"
+					alt="wait-icon"
+				/>
+
+				<Typography>
+					{t('pending_data_placeholder', {
+						dataSource: `host ${DataSource.METRICS}`,
+					})}
+				</Typography>
+			</div>
+		</div>
+	);
+}

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.interfaces.ts

@@ -4,5 +4,6 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 export type GroupByFilterProps = {
 	query: IBuilderQuery;
 	onChange: (values: BaseAutocompleteData[]) => void;
-	disabled: boolean;
+	disabled?: boolean;
+	isInfraMonitoring?: boolean;
 };

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx

@@ -25,6 +25,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 	query,
 	onChange,
 	disabled,
+	isInfraMonitoring,
 }: GroupByFilterProps): JSX.Element {
 	const queryClient = useQueryClient();
 	const [searchText, setSearchText] = useState<string>('');
@@ -85,6 +86,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 				setOptionsData(options);
 			},
 		},
+		isInfraMonitoring,
 	);
 
 	const getAttributeKeys = useCallback(async () => {
@@ -96,6 +98,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 					dataSource: query.dataSource,
 					aggregateOperator: query.aggregateOperator,
 					searchText,
+					isInfraMonitoring,
 				}),
 		);
 
@@ -107,6 +110,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 		query.dataSource,
 		queryClient,
 		searchText,
+		isInfraMonitoring,
 	]);
 
 	const handleSearchKeys = (searchText: string): void => {

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -72,6 +72,7 @@ function QueryBuilderSearch({
 	className,
 	placeholder,
 	suffixIcon,
+	isInfraMonitoring,
 }: QueryBuilderSearchProps): JSX.Element {
 	const { pathname } = useLocation();
 	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
@@ -93,7 +94,12 @@ function QueryBuilderSearch({
 		searchKey,
 		key,
 		exampleQueries,
-	} = useAutoComplete(query, whereClauseConfig, isLogsExplorerPage);
+	} = useAutoComplete(
+		query,
+		whereClauseConfig,
+		isLogsExplorerPage,
+		isInfraMonitoring,
+	);
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 	const [showAllFilters, setShowAllFilters] = useState<boolean>(false);
 	const [dynamicPlacholder, setDynamicPlaceholder] = useState<string>(
@@ -105,6 +111,7 @@ function QueryBuilderSearch({
 		query,
 		searchKey,
 		isLogsExplorerPage,
+		isInfraMonitoring,
 	);
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -185,8 +192,8 @@ function QueryBuilderSearch({
 	);
 
 	const isMetricsDataSource = useMemo(
-		() => query.dataSource === DataSource.METRICS,
-		[query.dataSource],
+		() => query.dataSource === DataSource.METRICS && !isInfraMonitoring,
+		[query.dataSource, isInfraMonitoring],
 	);
 
 	const fetchValueDataType = (value: unknown, operator: string): DataTypes => {
@@ -426,13 +433,15 @@ interface QueryBuilderSearchProps {
 	className?: string;
 	placeholder?: string;
 	suffixIcon?: React.ReactNode;
+	isInfraMonitoring?: boolean;
 }
 
 QueryBuilderSearch.defaultProps = {
 	whereClauseConfig: undefined,
 	className: '',
 	placeholder: PLACEHOLDER,
 	suffixIcon: undefined,
+	isInfraMonitoring: false,
 };
 
 export interface CustomTagProps {

frontend/src/container/SideNav/menuItems.tsx

@@ -11,6 +11,7 @@ import {
 	LayoutGrid,
 	ListMinus,
 	MessageSquare,
+	PackagePlus,
 	Receipt,
 	Route,
 	ScrollText,
@@ -118,6 +119,11 @@ const menuItems: SidebarItem[] = [
 		label: 'Billing',
 		icon: <Receipt size={16} />,
 	},
+	{
+		key: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		label: 'Infrastructure Monitoring',
+		icon: <PackagePlus size={16} />,
+	},
 	{
 		key: ROUTES.SETTINGS,
 		label: 'Settings',

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -212,6 +212,7 @@ export const routesToSkip = [
 	ROUTES.ALERT_OVERVIEW,
 	ROUTES.MESSAGING_QUEUES,
 	ROUTES.MESSAGING_QUEUES_DETAIL,
+	ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];