feat: request clusters handler only on Versions tab (#2008)

Author: artemmufazalov

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,

src/containers/AppWithClusters/useClusterData.ts

@@ -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<HTMLDivElement>(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 <Skeleton className={b('title-skeleton')} />;
@@ -204,7 +193,7 @@ export function Cluster({
                         getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions)).pathname
                     }
                 >
-                    <Versions versionToColor={versionToColor} cluster={cluster} />
+                    <Versions cluster={cluster} />
                 </Route>
                 <Route
                     render={() => (

src/containers/Cluster/Cluster.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']},

src/containers/Versions/Versions.tsx

@@ -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]);
+}

src/containers/Versions/utils.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;