fix(Node): fix developer ui link in dev mode (#1979)

artemmufazalov · web-flow · commit ad64c8c8e3aa · 2025-02-24T15:11:32.000Z
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
@@ -1,7 +1,7 @@
 import {PopoverBehavior} from '@gravity-ui/uikit';
 
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
-import type {NodeAddress} from '../../types/additionalProps';
+import type {GetNodeRefFunc, NodeAddress} from '../../types/additionalProps';
 import type {TNodeInfo, TSystemStateInfo} from '../../types/api/nodes';
 import {
     createDeveloperUIInternalPageHref,
@@ -23,7 +23,7 @@ export type StatusForIcon = 'SystemState' | 'ConnectStatus';
 
 interface NodeHostWrapperProps {
     node: NodeHostData;
-    getNodeRef?: (node?: NodeAddress) => string | null;
+    getNodeRef?: GetNodeRefFunc;
     database?: string;
     statusForIcon?: StatusForIcon;
 }
diff --git a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx
@@ -11,11 +11,14 @@ 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';
+import {useAdditionalNodesProps} from '../../../utils/hooks/useAdditionalNodesProps';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring';
 import {getCleanBalancerValue, removeViewerPathname} from '../../../utils/parseBalancer';
 import {getBackendFromNodeHost, getBackendFromRawNodeData} from '../../../utils/prepareBackend';
 import type {Cluster} from '../../Cluster/Cluster';
-import {useClusterData} from '../useClusterData';
+import {useClusterVersions} from '../useClusterData';
 
 import './ExtendedCluster.scss';
 
@@ -123,10 +126,12 @@ export function ExtendedCluster({
     getMonitoringLink,
     getMonitoringClusterLink,
 }: ExtendedClusterProps) {
-    const {versions, useClusterBalancerAsBackend, additionalNodesProps} = useClusterData();
-
+    const versions = useClusterVersions();
+    const additionalNodesProps = useAdditionalNodesProps();
     const {name, balancer, monitoring} = useClusterBaseInfo();
 
+    const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
+
     return (
         <div className={b()}>
             <ClusterComponent
diff --git a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx
@@ -1,8 +1,8 @@
 import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
 import type {ETenantType} from '../../../types/api/tenant';
+import {useAdditionalNodesProps} from '../../../utils/hooks/useAdditionalNodesProps';
 import type {GetMonitoringLink} from '../../../utils/monitoring';
 import type {Tenant} from '../../Tenant/Tenant';
-import {useAdditionalNodeProps} from '../useClusterData';
 
 export interface ExtendedTenantProps {
     component: typeof Tenant;
@@ -13,8 +13,8 @@ export function ExtendedTenant({
     component: TenantComponent,
     getMonitoringLink,
 }: ExtendedTenantProps) {
-    const {balancer, monitoring} = useClusterBaseInfo();
-    const {additionalNodesProps} = useAdditionalNodeProps({balancer});
+    const {monitoring} = useClusterBaseInfo();
+    const additionalNodesProps = useAdditionalNodesProps();
 
     const additionalTenantProps = {
         getMonitoringLink: (dbName?: string, dbType?: ETenantType) => {
diff --git a/src/containers/AppWithClusters/useClusterData.ts b/src/containers/AppWithClusters/useClusterData.ts
@@ -3,34 +3,15 @@ import React from 'react';
 import {StringParam, useQueryParam} from 'use-query-params';
 
 import {clustersApi} from '../../store/reducers/clusters/clusters';
-import {getAdditionalNodesProps} from '../../utils/additionalProps';
-import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../utils/constants';
-import {useSetting} from '../../utils/hooks';
 
-export function useClusterData() {
+export function useClusterVersions() {
     const [clusterName] = useQueryParam('clusterName', StringParam);
 
     const {data} = clustersApi.useGetClustersListQuery(undefined);
 
-    const info = React.useMemo(() => {
+    return React.useMemo(() => {
         const clusters = data || [];
-        return clusters.find((cluster) => cluster.name === clusterName);
+        const info = clusters.find((cluster) => cluster.name === clusterName);
+        return info?.versions;
     }, [data, clusterName]);
-
-    const {solomon: monitoring, balancer, versions} = info || {};
-
-    return {
-        monitoring,
-        balancer,
-        versions,
-        ...useAdditionalNodeProps({balancer}),
-    };
-}
-
-export function useAdditionalNodeProps({balancer}: {balancer?: string}) {
-    const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
-
-    const additionalNodesProps = getAdditionalNodesProps(balancer, useClusterBalancerAsBackend);
-
-    return {additionalNodesProps, useClusterBalancerAsBackend};
 }
diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx
@@ -168,7 +168,6 @@ export function Cluster({
                 >
                     <ClusterInfo
                         cluster={cluster}
-                        versionToColor={versionToColor}
                         loading={infoLoading}
                         error={clusterError}
                         additionalClusterProps={additionalClusterProps}
diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
@@ -6,7 +6,6 @@ import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
 import type {AdditionalClusterProps} from '../../../types/additionalProps';
 import type {TClusterInfo} from '../../../types/api/cluster';
 import type {IResponseError} from '../../../types/api/error';
-import type {VersionToColorMap} from '../../../types/versions';
 import i18n from '../i18n';
 
 import {b} from './shared';
@@ -17,7 +16,6 @@ import './ClusterInfo.scss';
 
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
-    versionToColor?: VersionToColorMap;
     loading?: boolean;
     error?: IResponseError;
     additionalClusterProps?: AdditionalClusterProps;
diff --git a/src/containers/Storage/PaginatedStorageNodes.tsx b/src/containers/Storage/PaginatedStorageNodes.tsx
@@ -8,11 +8,10 @@ import {
     useCapabilitiesLoaded,
     useViewerNodesHandlerHasGrouping,
 } from '../../store/reducers/capabilities/hooks';
-import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import {storageApi} from '../../store/reducers/storage/storage';
 import {useAutoRefreshInterval} from '../../utils/hooks';
+import {useAdditionalNodesProps} from '../../utils/hooks/useAdditionalNodesProps';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
-import {useAdditionalNodeProps} from '../AppWithClusters/useClusterData';
 
 import type {PaginatedStorageProps} from './PaginatedStorage';
 import {StorageNodesControls} from './StorageControls/StorageControls';
@@ -210,8 +209,7 @@ function useStorageNodesColumnsToSelect({
     database?: string;
     viewContext?: StorageViewContext;
 }) {
-    const {balancer} = useClusterBaseInfo();
-    const {additionalNodesProps} = useAdditionalNodeProps({balancer});
+    const additionalNodesProps = useAdditionalNodesProps();
     const {visibleEntities} = useStorageQueryParams();
 
     return useStorageNodesSelectedColumns({
diff --git a/src/containers/Versions/NodesTable/NodesTable.tsx b/src/containers/Versions/NodesTable/NodesTable.tsx
@@ -10,10 +10,9 @@ import {
     getUptimeColumn,
 } from '../../../components/nodesColumns/columns';
 import type {GetNodesColumnsParams} from '../../../components/nodesColumns/types';
-import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
 import type {NodesPreparedEntity} from '../../../store/reducers/nodes/types';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {useAdditionalNodeProps} from '../../AppWithClusters/useClusterData';
+import {useAdditionalNodesProps} from '../../../utils/hooks/useAdditionalNodesProps';
 
 const VERSIONS_COLUMNS_WIDTH_LS_KEY = 'versionsTableColumnsWidth';
 
@@ -33,10 +32,9 @@ interface NodesTableProps {
 }
 
 export const NodesTable = ({nodes}: NodesTableProps) => {
-    const {balancer} = useClusterBaseInfo();
-    const {additionalNodesProps} = useAdditionalNodeProps({balancer});
+    const additionalNodesProps = useAdditionalNodesProps();
 
-    const columns = getColumns({getNodeRef: additionalNodesProps.getNodeRef});
+    const columns = getColumns({getNodeRef: additionalNodesProps?.getNodeRef});
 
     return (
         <ResizeableDataTable
diff --git a/src/types/additionalProps.ts b/src/types/additionalProps.ts
@@ -24,7 +24,7 @@ export interface AdditionalTenantsProps {
 
 export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints' | 'NodeId'>;
 
-export type GetNodeRefFunc = (node?: NodeAddress) => string | null;
+export type GetNodeRefFunc = (node?: NodeAddress) => string | undefined;
 
 export interface AdditionalNodesProps extends Record<string, unknown> {
     getNodeRef?: GetNodeRefFunc;
diff --git a/src/utils/hooks/useAdditionalNodesProps.ts b/src/utils/hooks/useAdditionalNodesProps.ts
@@ -0,0 +1,17 @@
+import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
+import {getAdditionalNodesProps} from '../additionalProps';
+import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../constants';
+
+import {useSetting} from './useSetting';
+import {useTypedSelector} from './useTypedSelector';
+
+/** For multi-cluster version */
+export function useAdditionalNodesProps() {
+    const {balancer} = useClusterBaseInfo();
+    const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+
+    const additionalNodesProps = getAdditionalNodesProps(balancer, useClusterBalancerAsBackend);
+
+    return singleClusterMode ? undefined : additionalNodesProps;
+}
diff --git a/src/utils/hooks/useNodeDeveloperUIHref.ts b/src/utils/hooks/useNodeDeveloperUIHref.ts
@@ -1,16 +1,14 @@
-import {useAdditionalNodeProps} from '../../containers/AppWithClusters/useClusterData';
-import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import type {PreparedNode} from '../../store/reducers/node/types';
 import {
     createDeveloperUIInternalPageHref,
     createDeveloperUILinkWithNodeId,
 } from '../developerUI/developerUI';
 
+import {useAdditionalNodesProps} from './useAdditionalNodesProps';
 import {useIsUserAllowedToMakeChanges} from './useIsUserAllowedToMakeChanges';
 
 export function useNodeDeveloperUIHref(node?: PreparedNode) {
-    const {balancer} = useClusterBaseInfo();
-    const {additionalNodesProps} = useAdditionalNodeProps({balancer});
+    const additionalNodesProps = useAdditionalNodesProps();
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     if (!isUserAllowedToMakeChanges) {
diff --git a/src/utils/prepareBackend.ts b/src/utils/prepareBackend.ts
@@ -20,6 +20,7 @@ export const getBackendFromNodeHost = (nodeHost: string, balancer: string) => {
     return https + preparedHost;
 };
 
+/** For multi-cluster version */
 export const getBackendFromRawNodeData = (
     node: NodeAddress,
     balancer: string,
@@ -36,7 +37,7 @@ export const getBackendFromRawNodeData = (
         const nodePort = Endpoints.find((endpoint) => endpoint.Name === 'http-mon')?.Address;
 
         if (!nodePort || !Host) {
-            return null;
+            return undefined;
         }
 
         const hostWithPort = Host + nodePort;
@@ -46,5 +47,5 @@ export const getBackendFromRawNodeData = (
         return getBackendFromNodeHost(hostWithPort, balancer);
     }
 
-    return null;
+    return undefined;
 };

Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,6 @@ export function Cluster({`
`168`	`168`	`>`
`169`	`169`	`<ClusterInfo`
`170`	`170`	`cluster={cluster}`
`171`		`- versionToColor={versionToColor}`
`172`	`171`	`loading={infoLoading}`
`173`	`172`	`error={clusterError}`
`174`	`173`	`additionalClusterProps={additionalClusterProps}`