From 403043e076bf60aa4b77a7df45eed06b286f5be0 Mon Sep 17 00:00:00 2001 From: Amlan Kumar Nandy <45410599+amlannandy@users.noreply.github.com> Date: Tue, 21 Jan 2025 21:57:32 +0530 Subject: [PATCH] feat: implement deployments, clusters and namespaces in k8s infra monitoring (#6786) --- .../getInfraAttributeValues.ts | 4 +- .../api/infraMonitoring/getK8sClustersList.ts | 64 + .../infraMonitoring/getK8sDeploymentsList.ts | 70 + .../infraMonitoring/getK8sNamespacesList.ts | 62 + .../HostMetricsLogs/HostMetricsLogs.tsx | 12 + frontend/src/constants/reactQueryKeys.ts | 4 + .../ClusterDetails.interfaces.ts | 7 + .../ClusterDetails/ClusterDetails.tsx | 558 ++++ .../Clusters/ClusterDetails/constants.ts | 1530 ++++++++++ .../Clusters/ClusterDetails/index.ts | 3 + .../Clusters/K8sClustersList.styles.scss | 17 + .../Clusters/K8sClustersList.tsx | 511 ++++ .../InfraMonitoringK8s/Clusters/utils.tsx | 196 ++ .../DeploymentDetails.interfaces.ts | 7 + .../DeploymentDetails/DeploymentDetails.tsx | 604 ++++ .../DeploymentDetails/constants.ts | 544 ++++ .../Deployments/DeploymentDetails/index.ts | 3 + .../K8sDeploymentsList.styles.scss | 57 + .../Deployments/K8sDeploymentsList.tsx | 518 ++++ .../InfraMonitoringK8s/Deployments/utils.tsx | 323 ++ .../EntityEvents/EntityEvents.tsx} | 57 +- .../EntityEvents/entityEvents.styles.scss} | 21 +- .../EntityDetailsUtils/EntityEvents/index.ts | 3 + .../EntityLogs/EntityLogs.tsx} | 55 +- .../EntityLogs/EntityLogsDetailedView.tsx} | 24 +- .../EntityLogs/entityLogs.styles.scss} | 10 +- .../EntityDetailsUtils/EntityLogs/index.ts | 3 + .../EntityMetrics/EntityMetrics.tsx} | 101 +- .../EntityMetrics/entityMetrics.styles.scss} | 12 +- .../EntityDetailsUtils/EntityMetrics/index.ts | 3 + .../EntityTraces/EntityTraces.tsx} | 25 +- .../EntityTraces/entityTraces.styles.scss} | 23 +- .../EntityDetailsUtils/EntityTraces/index.ts | 3 + .../entityDetails.styles.scss | 576 ++++ .../utils.tsx} | 106 +- .../InfraMonitoringK8s.styles.scss | 4 + .../InfraMonitoringK8s/InfraMonitoringK8s.tsx | 164 +- .../Namespaces/K8sNamespacesList.styles.scss | 17 + .../Namespaces/K8sNamespacesList.tsx | 512 ++++ .../NamespaceDetails.interfaces.ts | 7 + .../NamespaceDetails.styles.scss} | 14 +- .../NamespaceDetails/NamespaceDetails.tsx | 566 ++++ .../NamespaceDetails}/constants.ts | 1757 ++++++----- .../Namespaces/NamespaceDetails/index.ts | 3 + .../InfraMonitoringK8s/Namespaces/utils.tsx | 169 ++ .../InfraMonitoringK8s/Nodes/K8sNodesList.tsx | 3 +- .../NodeDetails/Events/NoEventsContainer.tsx | 16 - .../NodeDetails/Events/NodeEvents.styles.scss | 289 -- .../Nodes/NodeDetails/Events/constants.ts | 65 - .../Nodes/NodeDetails/Events/index.ts | 3 - .../NodeDetails/Logs/NoLogsContainer.tsx | 16 - .../Nodes/NodeDetails/Logs/constants.ts | 65 - .../Nodes/NodeDetails/Logs/index.ts | 3 - .../Metrics/NodeMetrics.styles.scss | 45 - .../Nodes/NodeDetails/Metrics/NodeMetrics.tsx | 140 - .../Nodes/NodeDetails/Metrics/index.ts | 3 - .../Nodes/NodeDetails/NodeDetails.styles.scss | 247 -- .../Nodes/NodeDetails/NodeDetails.tsx | 45 +- .../NodeDetails/Traces/NodeTraces.styles.scss | 193 -- .../Nodes/NodeDetails/Traces/constants.ts | 200 -- .../Nodes/NodeDetails/Traces/index.ts | 3 - .../Nodes/NodeDetails/constants.ts | 1640 +++++++++- .../InfraMonitoringK8s/Pods/K8sPodLists.tsx | 5 +- .../Pods/PodDetails/Events/Events.tsx | 360 --- .../PodDetails/Events/NoEventsContainer.tsx | 16 - .../Pods/PodDetails/Events/constants.ts | 65 - .../Pods/PodDetails/PodDetails.tsx | 59 +- .../PodDetails/PodLogs/NoLogsContainer.tsx | 16 - .../PodDetails/PodLogs/PodLogs.styles.scss | 133 - .../Pods/PodDetails/PodLogs/PodLogs.tsx | 218 -- .../PodLogs/PodLogsDetailedView.tsx | 99 - .../Pods/PodDetails/PodLogs/constants.ts | 65 - .../Pods/PodDetails/PodTraces/PodTraces.tsx | 199 -- .../Pods/PodDetails/constants.ts | 2679 ++++++++++++++++- .../InfraMonitoringK8s/Pods/constants.ts | 2672 ---------------- .../InfraMonitoringK8s/commonUtils.tsx | 80 +- .../container/InfraMonitoringK8s/constants.ts | 63 +- .../InfraMonitoringK8s/entityDetailUtils.ts | 18 - .../infraMonitoring/useGetK8sClustersList.ts | 54 + .../useGetK8sDeploymentsList.ts | 48 + .../useGetK8sNamespacesList.ts | 48 + .../infraMonitoring/useGetK8sNodesList.ts | 2 +- 82 files changed, 12920 insertions(+), 6284 deletions(-) create mode 100644 frontend/src/api/infraMonitoring/getK8sClustersList.ts create mode 100644 frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts create mode 100644 frontend/src/api/infraMonitoring/getK8sNamespacesList.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.interfaces.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx create mode 100644 frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/index.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.styles.scss create mode 100644 frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx create mode 100644 frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx create mode 100644 frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.interfaces.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx create mode 100644 frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/constants.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/index.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.styles.scss create mode 100644 frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx create mode 100644 frontend/src/container/InfraMonitoringK8s/Deployments/utils.tsx rename frontend/src/container/InfraMonitoringK8s/{Nodes/NodeDetails/Events/NodeEvents.tsx => EntityDetailsUtils/EntityEvents/EntityEvents.tsx} (84%) rename frontend/src/container/InfraMonitoringK8s/{Pods/PodDetails/Events/Events.styles.scss => EntityDetailsUtils/EntityEvents/entityEvents.styles.scss} (94%) create mode 100644 frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/index.ts rename frontend/src/container/InfraMonitoringK8s/{Nodes/NodeDetails/Logs/NodeLogs.tsx => EntityDetailsUtils/EntityLogs/EntityLogs.tsx} (81%) rename frontend/src/container/InfraMonitoringK8s/{Nodes/NodeDetails/Logs/NodeLogsDetailedView.tsx => EntityDetailsUtils/EntityLogs/EntityLogsDetailedView.tsx} (81%) rename frontend/src/container/InfraMonitoringK8s/{Nodes/NodeDetails/Logs/NodeLogs.styles.scss => EntityDetailsUtils/EntityLogs/entityLogs.styles.scss} (94%) create mode 100644 frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/index.ts rename frontend/src/container/InfraMonitoringK8s/{Pods/PodDetails/Metrics/Metrics.tsx => EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx} (56%) rename frontend/src/container/InfraMonitoringK8s/{Pods/PodDetails/Metrics/Metrics.styles.scss => EntityDetailsUtils/EntityMetrics/entityMetrics.styles.scss} (76%) create mode 100644 frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/index.ts rename frontend/src/container/InfraMonitoringK8s/{Nodes/NodeDetails/Traces/NodeTraces.tsx => EntityDetailsUtils/EntityTraces/EntityTraces.tsx} (91%) rename frontend/src/container/InfraMonitoringK8s/{Pods/PodDetails/PodTraces/PodTraces.styles.scss => EntityDetailsUtils/EntityTraces/entityTraces.styles.scss} (88%) create mode 100644 frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/index.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss rename frontend/src/container/InfraMonitoringK8s/{Pods/PodDetails/PodTraces/constants.ts => EntityDetailsUtils/utils.tsx} (62%) create mode 100644 frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.styles.scss create mode 100644 frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx create mode 100644 frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.interfaces.ts rename frontend/src/container/InfraMonitoringK8s/{Pods/PodDetails/PodDetails.styles.scss => Namespaces/NamespaceDetails/NamespaceDetails.styles.scss} (95%) create mode 100644 frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx rename frontend/src/container/InfraMonitoringK8s/{Nodes/NodeDetails/Metrics => Namespaces/NamespaceDetails}/constants.ts (69%) create mode 100644 frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/index.ts create mode 100644 frontend/src/container/InfraMonitoringK8s/Namespaces/utils.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Events/NoEventsContainer.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Events/NodeEvents.styles.scss delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Events/constants.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Events/index.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Logs/NoLogsContainer.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Logs/constants.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Logs/index.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Metrics/NodeMetrics.styles.scss delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Metrics/NodeMetrics.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Metrics/index.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.styles.scss delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Traces/NodeTraces.styles.scss delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Traces/constants.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Traces/index.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/Events/Events.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/Events/NoEventsContainer.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/Events/constants.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodLogs/NoLogsContainer.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodLogs/PodLogs.styles.scss delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodLogs/PodLogs.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodLogs/PodLogsDetailedView.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodLogs/constants.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodTraces/PodTraces.tsx delete mode 100644 frontend/src/container/InfraMonitoringK8s/Pods/constants.ts delete mode 100644 frontend/src/container/InfraMonitoringK8s/entityDetailUtils.ts create mode 100644 frontend/src/hooks/infraMonitoring/useGetK8sClustersList.ts create mode 100644 frontend/src/hooks/infraMonitoring/useGetK8sDeploymentsList.ts create mode 100644 frontend/src/hooks/infraMonitoring/useGetK8sNamespacesList.ts diff --git a/frontend/src/api/infraMonitoring/getInfraAttributeValues.ts b/frontend/src/api/infraMonitoring/getInfraAttributeValues.ts index c1a9531b848f..0e6b17ce111f 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 000000000000..2da1b214b315 --- /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 000000000000..b991ce22e7c1 --- /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 000000000000..bba2249f4e9e --- /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 3b8fc88a3534..bb5c17a506d1 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 55208722010c..30da4e13625e 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 000000000000..8126d50fba34 --- /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 000000000000..17080f7d8eaf --- /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