diff --git a/frontend/src/api/infraMonitoring/getInfraAttributeValues.ts b/frontend/src/api/infraMonitoring/getInfraAttributeValues.ts index c1a9531b84..0e6b17ce11 100644 --- a/frontend/src/api/infraMonitoring/getInfraAttributeValues.ts +++ b/frontend/src/api/infraMonitoring/getInfraAttributeValues.ts @@ -1,4 +1,4 @@ -import { ApiBaseInstance } from 'api'; +import axios from 'api'; import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; import { AxiosError } from 'axios'; import createQueryParams from 'lib/createQueryParams'; @@ -19,7 +19,7 @@ export const getInfraAttributesValues = async ({ SuccessResponse | ErrorResponse > => { try { - const response = await ApiBaseInstance.get( + const response = await axios.get( `/hosts/attribute_values?${createQueryParams({ dataSource, attributeKey, diff --git a/frontend/src/api/infraMonitoring/getK8sClustersList.ts b/frontend/src/api/infraMonitoring/getK8sClustersList.ts new file mode 100644 index 0000000000..2da1b214b3 --- /dev/null +++ b/frontend/src/api/infraMonitoring/getK8sClustersList.ts @@ -0,0 +1,64 @@ +import axios 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 K8sClustersListPayload { + filters: TagFilter; + groupBy?: BaseAutocompleteData[]; + offset?: number; + limit?: number; + orderBy?: { + columnName: string; + order: 'asc' | 'desc'; + }; +} + +export interface K8sClustersData { + clusterUID: string; + cpuUsage: number; + cpuAllocatable: number; + memoryUsage: number; + memoryAllocatable: number; + meta: { + k8s_cluster_name: string; + k8s_cluster_uid: string; + }; +} + +export interface K8sClustersListResponse { + status: string; + data: { + type: string; + records: K8sClustersData[]; + groups: null; + total: number; + sentAnyHostMetricsData: boolean; + isSendingK8SAgentMetrics: boolean; + }; +} + +export const getK8sClustersList = async ( + props: K8sClustersListPayload, + signal?: AbortSignal, + headers?: Record, +): Promise | ErrorResponse> => { + try { + const response = await axios.post('/clusters/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/api/infraMonitoring/getK8sDeploymentsList.ts b/frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts new file mode 100644 index 0000000000..b991ce22e7 --- /dev/null +++ b/frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts @@ -0,0 +1,70 @@ +import axios 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 K8sDeploymentsListPayload { + filters: TagFilter; + groupBy?: BaseAutocompleteData[]; + offset?: number; + limit?: number; + orderBy?: { + columnName: string; + order: 'asc' | 'desc'; + }; +} + +export interface K8sDeploymentsData { + deploymentName: string; + cpuUsage: number; + memoryUsage: number; + desiredPods: number; + availablePods: number; + cpuRequest: number; + memoryRequest: number; + cpuLimit: number; + memoryLimit: number; + restarts: number; + meta: { + k8s_cluster_name: string; + k8s_deployment_name: string; + k8s_namespace_name: string; + }; +} + +export interface K8sDeploymentsListResponse { + status: string; + data: { + type: string; + records: K8sDeploymentsData[]; + groups: null; + total: number; + sentAnyHostMetricsData: boolean; + isSendingK8SAgentMetrics: boolean; + }; +} + +export const getK8sDeploymentsList = async ( + props: K8sDeploymentsListPayload, + signal?: AbortSignal, + headers?: Record, +): Promise | ErrorResponse> => { + try { + const response = await axios.post('/deployments/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/api/infraMonitoring/getK8sNamespacesList.ts b/frontend/src/api/infraMonitoring/getK8sNamespacesList.ts new file mode 100644 index 0000000000..bba2249f4e --- /dev/null +++ b/frontend/src/api/infraMonitoring/getK8sNamespacesList.ts @@ -0,0 +1,62 @@ +import axios 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 K8sNamespacesListPayload { + filters: TagFilter; + groupBy?: BaseAutocompleteData[]; + offset?: number; + limit?: number; + orderBy?: { + columnName: string; + order: 'asc' | 'desc'; + }; +} + +export interface K8sNamespacesData { + namespaceName: string; + cpuUsage: number; + memoryUsage: number; + meta: { + k8s_cluster_name: string; + k8s_namespace_name: string; + }; +} + +export interface K8sNamespacesListResponse { + status: string; + data: { + type: string; + records: K8sNamespacesData[]; + groups: null; + total: number; + sentAnyHostMetricsData: boolean; + isSendingK8SAgentMetrics: boolean; + }; +} + +export const getK8sNamespacesList = async ( + props: K8sNamespacesListPayload, + signal?: AbortSignal, + headers?: Record, +): Promise | ErrorResponse> => { + try { + const response = await axios.post('/namespaces/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/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx b/frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx index 3b8fc88a35..bb5c17a506 100644 --- a/frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx +++ b/frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx @@ -127,6 +127,18 @@ function HostMetricsLogs({ data={logToRender} linesPerRow={5} fontSize={FontSize.MEDIUM} + selectedFields={[ + { + dataType: 'string', + type: '', + name: 'body', + }, + { + dataType: 'string', + type: '', + name: 'timestamp', + }, + ]} /> ), [], diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts index 5520872201..30da4e1362 100644 --- a/frontend/src/constants/reactQueryKeys.ts +++ b/frontend/src/constants/reactQueryKeys.ts @@ -22,4 +22,8 @@ export const REACT_QUERY_KEY = { UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE', GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3', GET_POD_LIST: 'GET_POD_LIST', + GET_NODE_LIST: 'GET_NODE_LIST', + GET_DEPLOYMENT_LIST: 'GET_DEPLOYMENT_LIST', + GET_CLUSTER_LIST: 'GET_CLUSTER_LIST', + GET_NAMESPACE_LIST: 'GET_NAMESPACE_LIST', }; diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.interfaces.ts b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.interfaces.ts new file mode 100644 index 0000000000..8126d50fba --- /dev/null +++ b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.interfaces.ts @@ -0,0 +1,7 @@ +import { K8sClustersData } from 'api/infraMonitoring/getK8sClustersList'; + +export type ClusterDetailsProps = { + cluster: K8sClustersData | null; + isModalTimeSelection: boolean; + onClose: () => void; +}; diff --git a/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx new file mode 100644 index 0000000000..17080f7d8e --- /dev/null +++ b/frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx @@ -0,0 +1,558 @@ +/* eslint-disable sonarjs/no-identical-functions */ +import '../../EntityDetailsUtils/entityDetails.styles.scss'; + +import { Color, Spacing } from '@signozhq/design-tokens'; +import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd'; +import { RadioChangeEvent } from 'antd/lib'; +import logEvent from 'api/common/logEvent'; +import { K8sClustersData } from 'api/infraMonitoring/getK8sClustersList'; +import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants'; +import { QueryParams } from 'constants/query'; +import { + initialQueryBuilderFormValuesMap, + initialQueryState, +} from 'constants/queryBuilder'; +import ROUTES from 'constants/routes'; +import { filterDuplicateFilters } from 'container/InfraMonitoringK8s/commonUtils'; +import { K8sCategory } from 'container/InfraMonitoringK8s/constants'; +import { QUERY_KEYS } from 'container/InfraMonitoringK8s/EntityDetailsUtils/utils'; +import { + CustomTimeType, + Time, +} from 'container/TopNav/DateTimeSelectionV2/config'; +import { useIsDarkMode } from 'hooks/useDarkMode'; +import useUrlQuery from 'hooks/useUrlQuery'; +import GetMinMax from 'lib/getMinMax'; +import { + BarChart2, + ChevronsLeftRight, + Compass, + DraftingCompass, + ScrollText, + X, +} from 'lucide-react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { AppState } from 'store/reducers'; +import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; +import { + IBuilderQuery, + TagFilterItem, +} from 'types/api/queryBuilder/queryBuilderData'; +import { + LogsAggregatorOperator, + TracesAggregatorOperator, +} from 'types/common/queryBuilder'; +import { GlobalReducer } from 'types/reducer/globalTime'; +import { v4 as uuidv4 } from 'uuid'; + +import ClusterEvents from '../../EntityDetailsUtils/EntityEvents'; +import ClusterLogs from '../../EntityDetailsUtils/EntityLogs'; +import ClusterMetrics from '../../EntityDetailsUtils/EntityMetrics'; +import ClusterTraces from '../../EntityDetailsUtils/EntityTraces'; +import { ClusterDetailsProps } from './ClusterDetails.interfaces'; +import { clusterWidgetInfo, getClusterMetricsQueryPayload } from './constants'; + +function ClusterDetails({ + cluster, + onClose, + isModalTimeSelection, +}: ClusterDetailsProps): JSX.Element { + const { maxTime, minTime, selectedTime } = useSelector< + AppState, + GlobalReducer + >((state) => state.globalTime); + + const startMs = useMemo(() => Math.floor(Number(minTime) / 1000000000), [ + minTime, + ]); + const endMs = useMemo(() => Math.floor(Number(maxTime) / 1000000000), [ + maxTime, + ]); + + const urlQuery = useUrlQuery(); + + const [modalTimeRange, setModalTimeRange] = useState(() => ({ + startTime: startMs, + endTime: endMs, + })); + + const [selectedInterval, setSelectedInterval] = useState