diff --git a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx index e0d2969d1..5d99cc049 100644 --- a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx +++ b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx @@ -4,12 +4,9 @@ import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster'; import type { AdditionalClusterProps, AdditionalTenantsProps, - AdditionalVersionsProps, NodeAddress, } from '../../../types/additionalProps'; -import type {MetaClusterVersion} from '../../../types/api/meta'; import type {ETenantType} from '../../../types/api/tenant'; -import {getVersionColors, getVersionMap} from '../../../utils/clusterVersionColors'; import {cn} from '../../../utils/cn'; import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../../utils/constants'; import {useSetting} from '../../../utils/hooks'; @@ -18,7 +15,6 @@ import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/m import {getCleanBalancerValue, removeViewerPathname} from '../../../utils/parseBalancer'; import {getBackendFromNodeHost, getBackendFromRawNodeData} from '../../../utils/prepareBackend'; import type {Cluster} from '../../Cluster/Cluster'; -import {useClusterVersions} from '../useClusterData'; import './ExtendedCluster.scss'; @@ -61,16 +57,6 @@ const getAdditionalClusterProps = ( return additionalClusterProps; }; -const getAdditionalVersionsProps = ( - versions: MetaClusterVersion[] = [], -): AdditionalVersionsProps => { - return { - getVersionToColorMap: () => { - return getVersionColors(getVersionMap(versions)); - }, - }; -}; - const getAdditionalTenantsProps = ( clusterName: string | undefined, monitoring: string | undefined, @@ -126,7 +112,6 @@ export function ExtendedCluster({ getMonitoringLink, getMonitoringClusterLink, }: ExtendedClusterProps) { - const versions = useClusterVersions(); const additionalNodesProps = useAdditionalNodesProps(); const {name, balancer, monitoring} = useClusterBaseInfo(); @@ -141,7 +126,6 @@ export function ExtendedCluster({ balancer, getMonitoringClusterLink, )} - additionalVersionsProps={getAdditionalVersionsProps(versions)} additionalTenantsProps={getAdditionalTenantsProps( name, monitoring, diff --git a/src/containers/AppWithClusters/useClusterData.ts b/src/containers/AppWithClusters/useClusterData.ts deleted file mode 100644 index 3d0368c95..000000000 --- a/src/containers/AppWithClusters/useClusterData.ts +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import {StringParam, useQueryParam} from 'use-query-params'; - -import {clustersApi} from '../../store/reducers/clusters/clusters'; - -export function useClusterVersions() { - const [clusterName] = useQueryParam('clusterName', StringParam); - - const {data} = clustersApi.useGetClustersListQuery(undefined); - - return React.useMemo(() => { - const clusters = data || []; - const info = clusters.find((cluster) => cluster.name === clusterName); - return info?.versions; - }, [data, clusterName]); -} diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index 022c375a3..6ec3487d3 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -22,11 +22,9 @@ import type { AdditionalClusterProps, AdditionalNodesProps, AdditionalTenantsProps, - AdditionalVersionsProps, } from '../../types/additionalProps'; import {cn} from '../../utils/cn'; import {useTypedDispatch, useTypedSelector} from '../../utils/hooks'; -import {parseVersionsToVersionToColorMap} from '../../utils/versions'; import {Nodes} from '../Nodes/Nodes'; import {PaginatedStorage} from '../Storage/PaginatedStorage'; import {TabletsTable} from '../Tablets/TabletsTable'; @@ -46,14 +44,12 @@ interface ClusterProps { additionalTenantsProps?: AdditionalTenantsProps; additionalNodesProps?: AdditionalNodesProps; additionalClusterProps?: AdditionalClusterProps; - additionalVersionsProps?: AdditionalVersionsProps; } export function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, - additionalVersionsProps, }: ClusterProps) { const container = React.useRef(null); const isClusterDashboardAvailable = useClusterDashboardAvailable(); @@ -91,13 +87,6 @@ export function Cluster({ dispatch(setHeaderBreadcrumbs('cluster', {})); }, [dispatch]); - const versionToColor = React.useMemo(() => { - if (additionalVersionsProps?.getVersionToColorMap) { - return additionalVersionsProps?.getVersionToColorMap(); - } - return parseVersionsToVersionToColorMap(cluster?.Versions); - }, [additionalVersionsProps, cluster]); - const getClusterTitle = () => { if (infoLoading) { return ; @@ -204,7 +193,7 @@ export function Cluster({ getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions)).pathname } > - + ( diff --git a/src/containers/Versions/Versions.tsx b/src/containers/Versions/Versions.tsx index e72a08ff9..3f743cefe 100644 --- a/src/containers/Versions/Versions.tsx +++ b/src/containers/Versions/Versions.tsx @@ -5,7 +5,6 @@ import {Checkbox, RadioButton} from '@gravity-ui/uikit'; import {Loader} from '../../components/Loader'; import {nodesApi} from '../../store/reducers/nodes/nodes'; import type {TClusterInfo} from '../../types/api/cluster'; -import type {VersionToColorMap} from '../../types/versions'; import {cn} from '../../utils/cn'; import {useAutoRefreshInterval} from '../../utils/hooks'; import {VersionsBar} from '../Cluster/VersionsBar/VersionsBar'; @@ -14,19 +13,20 @@ import {GroupedNodesTree} from './GroupedNodesTree/GroupedNodesTree'; import {getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes} from './groupNodes'; import i18n from './i18n'; import {GroupByValue} from './types'; -import {useGetVersionValues} from './utils'; +import {useGetVersionValues, useVersionToColorMap} from './utils'; import './Versions.scss'; const b = cn('ydb-versions'); interface VersionsProps { - versionToColor?: VersionToColorMap; cluster?: TClusterInfo; } -export const Versions = ({versionToColor, cluster}: VersionsProps) => { +export const Versions = ({cluster}: VersionsProps) => { const [autoRefreshInterval] = useAutoRefreshInterval(); + const versionToColor = useVersionToColorMap(); + const versionsValues = useGetVersionValues(cluster, versionToColor); const {currentData, isLoading: isNodesLoading} = nodesApi.useGetNodesQuery( {tablets: false, fieldsRequired: ['SystemState']}, diff --git a/src/containers/Versions/utils.ts b/src/containers/Versions/utils.ts index e237cb003..aec364ef1 100644 --- a/src/containers/Versions/utils.ts +++ b/src/containers/Versions/utils.ts @@ -1,12 +1,20 @@ import React from 'react'; import {skipToken} from '@reduxjs/toolkit/query'; +import {StringParam, useQueryParam} from 'use-query-params'; +import {clustersApi} from '../../store/reducers/clusters/clusters'; import {nodesApi} from '../../store/reducers/nodes/nodes'; import {isClusterInfoV2} from '../../types/api/cluster'; import type {TClusterInfo} from '../../types/api/cluster'; import type {VersionToColorMap} from '../../types/versions'; -import {parseNodeGroupsToVersionsValues, parseNodesToVersionsValues} from '../../utils/versions'; +import {getVersionColors, getVersionMap} from '../../utils/clusterVersionColors'; +import {useTypedSelector} from '../../utils/hooks'; +import { + parseNodeGroupsToVersionsValues, + parseNodesToVersionsValues, + parseVersionsToVersionToColorMap, +} from '../../utils/versions'; export const useGetVersionValues = (cluster?: TClusterInfo, versionToColor?: VersionToColorMap) => { const {currentData} = nodesApi.useGetNodesQuery( @@ -42,3 +50,33 @@ export const useGetVersionValues = (cluster?: TClusterInfo, versionToColor?: Ver return versionsValues; }; + +export function useVersionToColorMap(cluster?: TClusterInfo) { + const getVersionToColorMap = useGetClusterVersionToColorMap(); + + return React.useMemo(() => { + if (getVersionToColorMap) { + return getVersionToColorMap(); + } + return parseVersionsToVersionToColorMap(cluster?.Versions); + }, [cluster?.Versions, getVersionToColorMap]); +} + +/** For multi-cluster version - with using meta handlers */ +function useGetClusterVersionToColorMap(): (() => VersionToColorMap) | undefined { + const [clusterName] = useQueryParam('clusterName', StringParam); + const singleClusterMode = useTypedSelector((state) => state.singleClusterMode); + const {data} = clustersApi.useGetClustersListQuery(undefined, {skip: singleClusterMode}); + + return React.useMemo(() => { + if (singleClusterMode) { + return undefined; + } + + const clusters = data || []; + const info = clusters.find((cluster) => cluster.name === clusterName); + const versions = info?.versions || []; + + return () => getVersionColors(getVersionMap(versions)); + }, [singleClusterMode, data, clusterName]); +} diff --git a/src/types/additionalProps.ts b/src/types/additionalProps.ts index ee22defe1..4fb917ac2 100644 --- a/src/types/additionalProps.ts +++ b/src/types/additionalProps.ts @@ -1,11 +1,6 @@ import type {TSystemStateInfo} from './api/nodes'; import type {ETenantType} from './api/tenant'; import type {InfoItem} from './components'; -import type {VersionToColorMap} from './versions'; - -export interface AdditionalVersionsProps { - getVersionToColorMap?: () => VersionToColorMap; -} export interface ClusterLink { title: string;