feat: added global time range and order by for cpu,memory,iowait,load

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -6,8 +6,6 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface HostListPayload {
-	start: number;
-	end: number;
 	filters: TagFilter;
 	groupBy: BaseAutocompleteData[];
 	offset?: number;

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

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

frontend/src/pages/InfraMonitoringHosts/HostsList.tsx

@@ -4,8 +4,11 @@ import { HostMetricsLoading } from 'container/HostMetricsLoading/HostMetricsLoad
 import NoLogs from 'container/NoLogs/NoLogs';
 import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 import HostsListControls from './HostsListControls';
 import {
@@ -14,11 +17,10 @@ import {
 	getHostsListColumns,
 } from './utils';
 
-interface HostsListProps {
-	isFilterApplied: boolean;
-}
-
-function HostsList({ isFilterApplied }: HostsListProps): JSX.Element {
+function HostsList(): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 	const [currentPage, setCurrentPage] = useState(1);
 	const [filters, setFilters] = useState<IBuilderQuery['filters']>({
 		items: [],
@@ -34,8 +36,10 @@ function HostsList({ isFilterApplied }: HostsListProps): JSX.Element {
 			limit: pageSize,
 			offset: (currentPage - 1) * pageSize,
 			filters,
+			start: Math.floor(minTime / 1000000),
+			end: Math.floor(maxTime / 1000000),
 		};
-	}, [currentPage, filters]);
+	}, [currentPage, filters, minTime, maxTime]);
 
 	const { data, isFetching, isLoading, isError } = useGetHostList(
 		query as HostListPayload,
@@ -80,11 +84,11 @@ function HostsList({ isFilterApplied }: HostsListProps): JSX.Element {
 
 			{isLoading && <HostMetricsLoading />}
 
-			{isDataPresent && !isFilterApplied && (
+			{isDataPresent && filters.items.length === 0 && (
 				<NoLogs dataSource={DataSource.METRICS} />
 			)}
 
-			{isDataPresent && isFilterApplied && (
+			{isDataPresent && filters.items.length > 0 && (
 				<div>No hosts match the applied filters.</div>
 			)}
 

frontend/src/pages/InfraMonitoringHosts/utils.tsx

@@ -3,26 +3,19 @@ import { ColumnType } from 'antd/es/table';
 import { HostData, HostListPayload } from 'api/infraMonitoring/getHostLists';
 import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getTimeRange } from 'utils/getTimeRange';
 
 import HostsList from './HostsList';
 
-// interface GetTabsItemsProps {
-// 	isListViewDisabled: boolean;
-// 	isFilterApplied: boolean;
-// }
-
 export interface HostRowData {
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
+	ioWait: number;
 	load15: number;
 	active: React.ReactNode;
 }
 
 export const getHostListsQuery = (): HostListPayload => ({
-	start: getTimeRange().startTime * 1e3,
-	end: getTimeRange().endTime * 1e3,
 	filters: {
 		items: [],
 		op: 'and',
@@ -33,7 +26,7 @@ export const getTabsItems = (): TabsProps['items'] => [
 	{
 		label: <TabLabel label="List View" isDisabled={false} tooltipText="" />,
 		key: PANEL_TYPES.LIST,
-		children: <HostsList isFilterApplied={false} />,
+		children: <HostsList />,
 	},
 ];
 
@@ -55,18 +48,41 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		dataIndex: 'cpu',
 		key: 'cpu',
 		width: 100,
+		sorter: (a, b): number => {
+			const getCpuValue = (cpuElement: React.ReactElement): number =>
+				cpuElement.props.children.props.percent;
+			const aCpu = getCpuValue(a.cpu as React.ReactElement);
+			const bCpu = getCpuValue(b.cpu as React.ReactElement);
+			return aCpu - bCpu;
+		},
 	},
 	{
 		title: 'Memory Usage',
 		dataIndex: 'memory',
 		key: 'memory',
 		width: 100,
+		sorter: (a, b): number => {
+			const getMemoryValue = (memoryElement: React.ReactElement): number =>
+				memoryElement.props.children.props.percent;
+
+			const aMemory = getMemoryValue(a.memory as React.ReactElement);
+			const bMemory = getMemoryValue(b.memory as React.ReactElement);
+			return aMemory - bMemory;
+		},
+	},
+	{
+		title: 'IO Wait',
+		dataIndex: 'ioWait',
+		key: 'ioWait',
+		width: 100,
+		sorter: (a, b): number => a.ioWait - b.ioWait,
 	},
 	{
 		title: 'Load Avg',
 		dataIndex: 'load15',
 		key: 'load15',
 		width: 100,
+		sorter: (a, b): number => a.load15 - b.load15,
 	},
 ];
 
@@ -99,5 +115,6 @@ export const formatDataForTable = (data: HostData[]): HostRowData[] =>
 				/>
 			</div>
 		),
+		ioWait: host.wait,
 		load15: host.load15,
 	}));