diff --git a/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx b/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx deleted file mode 100644 index ae75ea16dd..0000000000 --- a/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx +++ /dev/null @@ -1,240 +0,0 @@ -/* 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 { K8sNodesListPayload } from 'api/infraMonitoring/getK8sNodesList'; -import { useGetK8sNodesList } from 'hooks/infraMonitoring/useGetK8sNodesList'; -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, - getK8sNodesListColumns, - getK8sNodesListQuery, - K8sNodesRowData, -} from './utils'; - -// eslint-disable-next-line sonarjs/cognitive-complexity -function K8sNodesList({ - isFiltersVisible, - handleFilterVisibilityChange, -}: { - isFiltersVisible: boolean; - handleFilterVisibilityChange: () => void; -}): JSX.Element { - const { maxTime, minTime } = useSelector( - (state) => state.globalTime, - ); - - const [currentPage, setCurrentPage] = useState(1); - - const [filters, setFilters] = useState({ - items: [], - op: 'and', - }); - - const [orderBy, setOrderBy] = useState<{ - columnName: string; - order: 'asc' | 'desc'; - } | null>(null); - - // const [selectedNodeUID, setselectedNodeUID] = useState(null); - - const pageSize = 10; - - const query = useMemo(() => { - const baseQuery = getK8sNodesListQuery(); - 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 } = useGetK8sNodesList( - query as K8sNodesListPayload, - { - queryKey: ['hostList', query], - enabled: !!query, - }, - ); - - const nodesData = useMemo(() => data?.payload?.data?.records || [], [data]); - const totalCount = data?.payload?.data?.total || 0; - - const formattedNodesData = useMemo(() => formatDataForTable(nodesData), [ - nodesData, - ]); - - const columns = useMemo(() => getK8sNodesListColumns(), []); - - const handleTableChange: TableProps['onChange'] = useCallback( - ( - pagination: TablePaginationConfig, - _filters: Record, - sorter: SorterResult | SorterResult[], - ): 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 selectedNodeData = useMemo(() => { - // if (!selectedNodeUID) return null; - // return nodesData.find((node) => node.nodeUID === selectedNodeUID) || null; - // }, [selectedNodeUID, nodesData]); - - const handleRowClick = (record: K8sNodesRowData): void => { - // setselectedNodeUID(record.nodeUID); - - logEvent('Infra Monitoring: K8s node list item clicked', { - nodeUID: record.nodeUID, - }); - }; - - // const handleCloseNodeDetail = (): void => { - // setselectedNodeUID(null); - // }; - - const showsNodesTable = - !isError && - !isLoading && - !isFetching && - !(formattedNodesData.length === 0 && filters.items.length > 0); - - const showNoFilteredNodesMessage = - !isFetching && - !isLoading && - formattedNodesData.length === 0 && - filters.items.length > 0; - - return ( -
- - {isError && {data?.error || 'Something went wrong'}} - - {showNoFilteredNodesMessage && ( -
-
- thinking-emoji - - - This query had no results. Edit your query and try again! - -
-
- )} - - {(isFetching || isLoading) && ( -
- - - -
- )} - - {showsNodesTable && ( - } />, - }} - tableLayout="fixed" - rowKey={(record): string => record.nodeUID} - onChange={handleTableChange} - onRow={(record): { onClick: () => void; className: string } => ({ - onClick: (): void => handleRowClick(record), - className: 'clickable-row', - })} - /> - )} - {/* TODO - Handle Node Details flow */} - - ); -} - -export default K8sNodesList; diff --git a/frontend/src/container/InfraMonitoringK8s/Nodes/utils.tsx b/frontend/src/container/InfraMonitoringK8s/Nodes/utils.tsx deleted file mode 100644 index b11633d9cf..0000000000 --- a/frontend/src/container/InfraMonitoringK8s/Nodes/utils.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { ColumnType } from 'antd/es/table'; -import { - K8sNodesData, - K8sNodesListPayload, -} from 'api/infraMonitoring/getK8sNodesList'; - -import { IEntityColumn } from '../utils'; - -export const defaultAddedColumns: IEntityColumn[] = [ - { - label: 'Node Status', - value: 'nodeStatus', - id: 'nodeStatus', - canRemove: false, - }, - { - label: 'CPU Utilization (cores)', - value: 'cpuUtilization', - id: 'cpuUtilization', - canRemove: false, - }, - { - label: 'CPU Allocatable (cores)', - value: 'cpuAllocatable', - id: 'cpuAllocatable', - canRemove: false, - }, - { - label: 'Memory Allocatable (bytes)', - value: 'memoryAllocatable', - id: 'memoryAllocatable', - canRemove: false, - }, - { - label: 'Pods count by phase', - value: 'podsCount', - id: 'podsCount', - canRemove: false, - }, -]; - -export interface K8sNodesRowData { - key: string; - nodeUID: string; - nodeStatus: string; - cpuUtilization: React.ReactNode; - cpuAllocatable: React.ReactNode; - memoryUtilization: React.ReactNode; - memoryAllocatable: React.ReactNode; - podsCount: number; -} - -export const getK8sNodesListQuery = (): K8sNodesListPayload => ({ - filters: { - items: [], - op: 'and', - }, - orderBy: { columnName: 'cpu', order: 'desc' }, -}); - -const columnsConfig = [ - { - title:
Node Status
, - dataIndex: 'nodeStatus', - key: 'nodeStatus', - ellipsis: true, - width: 150, - sorter: true, - align: 'left', - }, - { - title:
CPU Utilization (cores)
, - dataIndex: 'cpuUtilization', - key: 'cpuUtilization', - width: 100, - sorter: true, - align: 'left', - }, - { - title:
CPU Allocatable (cores)
, - dataIndex: 'cpuAllocatable', - key: 'cpuAllocatable', - width: 100, - sorter: true, - align: 'left', - }, - { - title:
Memory Utilization (bytes)
, - dataIndex: 'memoryUtilization', - key: 'memoryUtilization', - width: 80, - sorter: true, - align: 'left', - }, - { - title:
Memory Allocatable (bytes)
, - dataIndex: 'memoryAllocatable', - key: 'memoryAllocatable', - width: 80, - sorter: true, - align: 'left', - }, - { - title:
Pods count by phase
, - dataIndex: 'containerRestarts', - key: 'containerRestarts', - width: 50, - sorter: true, - align: 'left', - }, -]; - -export const getK8sNodesListColumns = (): ColumnType[] => - columnsConfig as ColumnType[]; - -export const formatDataForTable = (data: K8sNodesData[]): K8sNodesRowData[] => - data.map((node, index) => ({ - key: `${node.nodeUID}-${index}`, - nodeUID: node.nodeUID || '', - cpuUtilization: node.nodeCPUUsage, - memoryUtilization: node.nodeMemoryUsage, - cpuAllocatable: node.nodeCPUAllocatable, - memoryAllocatable: node.nodeMemoryAllocatable, - nodeStatus: node.meta.k8s_node_name, - podsCount: node.nodeCPUAllocatable, - }));