From 689440bcfbdce374bbc048d7107c80606357a0b3 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 21 Oct 2024 15:56:52 +0530 Subject: [PATCH] feat: added global time range and order by for cpu,memory,iowait,load --- .../src/api/infraMonitoring/getHostLists.ts | 2 -- .../TopNav/DateTimeSelectionV2/config.ts | 2 +- .../pages/InfraMonitoringHosts/HostsList.tsx | 20 ++++++----- .../src/pages/InfraMonitoringHosts/utils.tsx | 35 ++++++++++++++----- 4 files changed, 39 insertions(+), 20 deletions(-) diff --git a/frontend/src/api/infraMonitoring/getHostLists.ts b/frontend/src/api/infraMonitoring/getHostLists.ts index 393d6592f8..35124241b8 100644 --- a/frontend/src/api/infraMonitoring/getHostLists.ts +++ b/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; diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts index 7624cda283..750536a03e 100644 --- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts +++ b/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]; diff --git a/frontend/src/pages/InfraMonitoringHosts/HostsList.tsx b/frontend/src/pages/InfraMonitoringHosts/HostsList.tsx index 755f27b248..60599940f9 100644 --- a/frontend/src/pages/InfraMonitoringHosts/HostsList.tsx +++ b/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( + (state) => state.globalTime, + ); const [currentPage, setCurrentPage] = useState(1); const [filters, setFilters] = useState({ 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 && } - {isDataPresent && !isFilterApplied && ( + {isDataPresent && filters.items.length === 0 && ( )} - {isDataPresent && isFilterApplied && ( + {isDataPresent && filters.items.length > 0 && (
No hosts match the applied filters.
)} diff --git a/frontend/src/pages/InfraMonitoringHosts/utils.tsx b/frontend/src/pages/InfraMonitoringHosts/utils.tsx index a87e095ab6..87a5721586 100644 --- a/frontend/src/pages/InfraMonitoringHosts/utils.tsx +++ b/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: , key: PANEL_TYPES.LIST, - children: , + children: , }, ]; @@ -55,18 +48,41 @@ export const getHostsListColumns = (): ColumnType[] => [ 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[] => /> ), + ioWait: host.wait, load15: host.load15, }));