From 363d0e70fb1539802783e23a5c6681d604fc0d7b Mon Sep 17 00:00:00 2001 From: amlannandy Date: Sun, 22 Dec 2024 16:48:22 +0530 Subject: [PATCH] chore: removes nodes data --- .../api/infraMonitoring/getK8sNodesList.ts | 64 ----- .../InfraMonitoringK8s/Nodes/K8sNodesList.tsx | 240 ------------------ .../InfraMonitoringK8s/Nodes/utils.tsx | 126 --------- .../infraMonitoring/useGetK8sNodesList.ts | 45 ---- 4 files changed, 475 deletions(-) delete mode 100644 frontend/src/api/infraMonitoring/getK8sNodesList.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/utils.tsx delete mode 100644 frontend/src/hooks/infraMonitoring/useGetK8sNodesList.ts diff --git a/frontend/src/api/infraMonitoring/getK8sNodesList.ts b/frontend/src/api/infraMonitoring/getK8sNodesList.ts deleted file mode 100644 index 18fc3ce42a3..00000000000 --- a/frontend/src/api/infraMonitoring/getK8sNodesList.ts +++ /dev/null @@ -1,64 +0,0 @@ -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 K8sNodesListPayload { - filters: TagFilter; - groupBy?: BaseAutocompleteData[]; - offset?: number; - limit?: number; - orderBy?: { - columnName: string; - order: 'asc' | 'desc'; - }; -} - -export interface K8sNodesData { - nodeUID: string; - nodeCPUUsage: number; - nodeCPUAllocatable: number; - nodeMemoryUsage: number; - nodeMemoryAllocatable: number; - meta: { - k8s_node_name: string; - k8s_node_uid: string; - }; -} - -export interface K8sNodesListResponse { - status: string; - data: { - type: string; - records: K8sNodesData[]; - groups: null; - total: number; - sentAnyHostMetricsData: boolean; - isSendingK8SAgentMetrics: boolean; - }; -} - -export const getK8sNodesList = async ( - props: K8sNodesListPayload, - signal?: AbortSignal, - headers?: Record, -): Promise | ErrorResponse> => { - try { - const response = await ApiBaseInstance.post('/nodes/list', props, { - signal, - headers, - }); - - return { - statusCode: 200, - error: null, - message: 'Success', - payload: response.data, - params: props, - }; - } catch (error) { - return ErrorResponseHandler(error as AxiosError); - } -}; diff --git a/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx b/frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx deleted file mode 100644 index ae75ea16dda..00000000000 --- 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 b11633d9cfc..00000000000 --- 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, - })); diff --git a/frontend/src/hooks/infraMonitoring/useGetK8sNodesList.ts b/frontend/src/hooks/infraMonitoring/useGetK8sNodesList.ts deleted file mode 100644 index 4e2ac964d2e..00000000000 --- a/frontend/src/hooks/infraMonitoring/useGetK8sNodesList.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { - getK8sNodesList, - K8sNodesListPayload, - K8sNodesListResponse, -} from 'api/infraMonitoring/getK8sNodesList'; -import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; -import { useMemo } from 'react'; -import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query'; -import { ErrorResponse, SuccessResponse } from 'types/api'; - -type UseGetK8sNodesList = ( - requestData: K8sNodesListPayload, - options?: UseQueryOptions< - SuccessResponse | ErrorResponse, - Error - >, - headers?: Record, -) => UseQueryResult< - SuccessResponse | ErrorResponse, - Error ->; - -export const useGetK8sNodesList: UseGetK8sNodesList = ( - requestData, - options, - headers, -) => { - const queryKey = useMemo(() => { - if (options?.queryKey && Array.isArray(options.queryKey)) { - return [...options.queryKey]; - } - - if (options?.queryKey && typeof options.queryKey === 'string') { - return options.queryKey; - } - - return [REACT_QUERY_KEY.GET_HOST_LIST, requestData]; - }, [options?.queryKey, requestData]); - - return useQuery | ErrorResponse, Error>({ - queryFn: ({ signal }) => getK8sNodesList(requestData, signal, headers), - ...options, - queryKey, - }); -};