fix(Header): fix developer ui link for embedded UI with proxy

Author: artemmufazalov

src/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -6,7 +6,10 @@ import {Icon} from '@gravity-ui/uikit';
 import type {PreparedNode} from '../../store/reducers/node/types';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
-import {createDeveloperUILinkWithNodeId} from '../../utils/developerUI/developerUI';
+import {
+    createDeveloperUIInternalHref,
+    createDeveloperUILinkWithNodeId,
+} from '../../utils/developerUI/developerUI';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {Tags} from '../Tags';
 
@@ -21,12 +24,16 @@ interface BasicNodeViewerProps {
 }
 
 export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNodeViewerProps) => {
-    let nodeHref: string | undefined;
+    let developerUIInternalHref: string | undefined;
 
     if (additionalNodesProps?.getNodeRef) {
-        nodeHref = additionalNodesProps.getNodeRef(node) + '/internal';
+        const developerUIHref = additionalNodesProps.getNodeRef(node);
+        developerUIInternalHref = developerUIHref
+            ? createDeveloperUIInternalHref(developerUIHref)
+            : undefined;
     } else if (node.NodeId) {
-        nodeHref = createDeveloperUILinkWithNodeId(node.NodeId) + '/internal';
+        const developerUIHref = createDeveloperUILinkWithNodeId(node.NodeId);
+        developerUIInternalHref = createDeveloperUIInternalHref(developerUIHref);
     }
 
     return (
@@ -35,11 +42,11 @@ export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNo
                 <React.Fragment>
                     <div className={b('title')}>Node</div>
                     <EntityStatus status={node.SystemState} name={node.Host} />
-                    {nodeHref && (
+                    {developerUIInternalHref && (
                         <a
                             rel="noopener noreferrer"
                             className={b('link', {external: true})}
-                            href={nodeHref}
+                            href={developerUIInternalHref}
                             target="_blank"
                         >
                             <Icon data={ArrowUpRightFromSquare} />

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -3,7 +3,10 @@ import {PopoverBehavior} from '@gravity-ui/uikit';
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import type {NodeAddress} from '../../types/additionalProps';
 import type {TSystemStateInfo} from '../../types/api/nodes';
-import {createDeveloperUILinkWithNodeId} from '../../utils/developerUI/developerUI';
+import {
+    createDeveloperUIInternalHref,
+    createDeveloperUILinkWithNodeId,
+} from '../../utils/developerUI/developerUI';
 import {isUnavailableNode} from '../../utils/nodes';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
@@ -28,11 +31,15 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
 
     const isNodeAvailable = !isUnavailableNode(node);
 
-    let nodeHref: string | undefined;
+    let developerUIInternalHref: string | undefined;
     if (getNodeRef) {
-        nodeHref = getNodeRef(node) + '/internal';
+        const developerUIHref = getNodeRef(node);
+        developerUIInternalHref = developerUIHref
+            ? createDeveloperUIInternalHref(developerUIHref)
+            : undefined;
     } else if (node.NodeId) {
-        nodeHref = createDeveloperUILinkWithNodeId(node.NodeId) + '/internal';
+        const developerUIHref = createDeveloperUILinkWithNodeId(node.NodeId);
+        developerUIInternalHref = createDeveloperUIInternalHref(developerUIHref);
     }
 
     const nodePath = isNodeAvailable
@@ -44,7 +51,7 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
     return (
         <CellWithPopover
             disabled={!isNodeAvailable}
-            content={<NodeEndpointsTooltipContent data={node} nodeHref={nodeHref} />}
+            content={<NodeEndpointsTooltipContent data={node} nodeHref={developerUIInternalHref} />}
             placement={['top', 'bottom']}
             behavior={PopoverBehavior.Immediate}
         >

src/containers/Header/Header.tsx

@@ -4,10 +4,10 @@ import {Breadcrumbs} from '@gravity-ui/uikit';
 
 import {InternalLink} from '../../components/InternalLink';
 import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
-import {backend, customBackend} from '../../store';
 import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import {cn} from '../../utils/cn';
 import {DEVELOPER_UI_TITLE} from '../../utils/constants';
+import {createDeveloperUIInternalHref} from '../../utils/developerUI/developerUI';
 import {useTypedSelector} from '../../utils/hooks';
 
 import type {RawBreadcrumbItem} from './breadcrumbs';
@@ -17,20 +17,11 @@ import './Header.scss';
 
 const b = cn('header');
 
-const getInternalLink = (singleClusterMode: boolean) => {
-    if (singleClusterMode && !customBackend) {
-        return `/internal`;
-    }
-
-    return backend + '/internal';
-};
-
 interface HeaderProps {
     mainPage?: RawBreadcrumbItem;
 }
 
 function Header({mainPage}: HeaderProps) {
-    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
 
     const clusterInfo = useClusterBaseInfo();
@@ -87,7 +78,7 @@ function Header({mainPage}: HeaderProps) {
                     }}
                 />
 
-                <LinkWithIcon title={DEVELOPER_UI_TITLE} url={getInternalLink(singleClusterMode)} />
+                <LinkWithIcon title={DEVELOPER_UI_TITLE} url={createDeveloperUIInternalHref()} />
             </header>
         );
     };

src/utils/developerUI/__test__/developerUI.test.ts

@@ -1,10 +1,39 @@
 import {
+    createDeveloperUIInternalHref,
     createDeveloperUILinkWithNodeId,
     createPDiskDeveloperUILink,
     createVDiskDeveloperUILink,
 } from '../developerUI';
 
 describe('Developer UI links generators', () => {
+    describe('createDeveloperUILinkForCurrentHost', () => {
+        it('should create correct link for embedded UI', () => {
+            expect(createDeveloperUIInternalHref('')).toBe('/internal');
+        });
+        it('should create correct link for embedded UI with node', () => {
+            expect(createDeveloperUIInternalHref('/node/5')).toBe('/node/5/internal');
+        });
+        it('should create correct link for embedded UI with proxy', () => {
+            expect(createDeveloperUIInternalHref('/my-ydb-host.net:8765')).toBe(
+                '/my-ydb-host.net:8765/internal',
+            );
+        });
+        it('should create correct link for UI with custom host', () => {
+            expect(createDeveloperUIInternalHref('http://my-ydb-host.net:8765')).toBe(
+                'http://my-ydb-host.net:8765/internal',
+            );
+        });
+        it('should create correct link for UI with custom host and node', () => {
+            expect(createDeveloperUIInternalHref('http://my-ydb-host.net:8765/node/5')).toBe(
+                'http://my-ydb-host.net:8765/node/5/internal',
+            );
+        });
+        it('should create correct link for UI with custom host and proxy', () => {
+            expect(createDeveloperUIInternalHref('https://my-ydb-proxy/my-ydb-host.net:8765')).toBe(
+                'https://my-ydb-proxy/my-ydb-host.net:8765/internal',
+            );
+        });
+    });
     describe('createDeveloperUILinkWithNodeId', () => {
         it('should create relative link with no host', () => {
             expect(createDeveloperUILinkWithNodeId(1)).toBe('/node/1');

src/utils/developerUI/developerUI.ts

@@ -1,6 +1,10 @@
 import {backend} from '../../store';
 import {pad9} from '../utils';
 
+export function createDeveloperUIInternalHref(host = backend) {
+    return host + '/internal';
+}
+
 // Current node connects with target node by itself using nodeId
 export const createDeveloperUILinkWithNodeId = (nodeId: number | string, host = backend) => {
     const nodePathRegexp = /\/node\/\d+\/?$/g;