feat(uiFactory): support developerUiFirstPathSegment (#3780)

Raubzeug · greptile-apps[bot] · Copilot · web-flow · commit 3a47390e2854 · 2026-04-13T07:59:16.000Z
Co-authored-by: greptile-apps[bot] &lt;165735046+greptile-apps[bot]@users.noreply.github.com&gt;
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/src/uiFactory/types.ts b/src/uiFactory/types.ts
@@ -93,6 +93,13 @@ export interface UIFactory<H extends string = CommonIssueType, T extends string
     hideNewFeaturesNotifications?: {
         navigationV2?: boolean;
     };
+
+    /**
+     * First URL path segment for Developer UI routes.
+     * Must be a single path segment without leading/trailing slashes, for example `devui`.
+     * Do not pass `/devui/` or nested paths like `devui/node`.
+     */
+    developerUiFirstPathSegment?: string;
 }
 
 export type HandleCreateDB = (params: {clusterName: string}) => Promise<boolean>;
diff --git a/src/utils/developerUI/__test__/developerUI.test.ts b/src/utils/developerUI/__test__/developerUI.test.ts
@@ -1,21 +1,29 @@
 import type {YdbEmbeddedAPI} from '../../../services/api';
+import {configureUIFactory} from '../../../uiFactory/uiFactory';
 import {
     createDeveloperUIInternalPageHref,
     createDeveloperUILinkWithNodeId,
+    createDeveloperUIMonitoringPageHref,
     createPDiskDeveloperUILink,
+    createTabletDeveloperUIHref,
     createVDiskDeveloperUILink,
 } from '../developerUI';
 
 describe('Developer UI links generators', () => {
     beforeAll(() => {
         const api = {
             viewer: {
-                getPath: () => '',
+                getPath: jest.fn(() => ''),
             },
         };
         window.api = api as unknown as YdbEmbeddedAPI;
     });
 
+    beforeEach(() => {
+        configureUIFactory({developerUiFirstPathSegment: undefined});
+        jest.mocked(window.api.viewer.getPath).mockReturnValue('');
+    });
+
     describe('createDeveloperUIInternalPageHref', () => {
         test('should create correct link for embedded UI', () => {
             expect(createDeveloperUIInternalPageHref('')).toBe('/internal');
@@ -48,6 +56,16 @@ describe('Developer UI links generators', () => {
         test('should create relative link with no host', () => {
             expect(createDeveloperUILinkWithNodeId(1)).toBe('/node/1');
         });
+        test('should strip existing node path from current host when no firstSegment', () => {
+            jest.mocked(window.api.viewer.getPath).mockReturnValue('/node/3');
+            expect(createDeveloperUILinkWithNodeId(1)).toBe('/node/1');
+        });
+        test('should strip existing node path from current absolute host when no firstSegment', () => {
+            jest.mocked(window.api.viewer.getPath).mockReturnValue(
+                'http://my-ydb-host.net:8765/node/3',
+            );
+            expect(createDeveloperUILinkWithNodeId(1)).toBe('http://my-ydb-host.net:8765/node/1');
+        });
         test('should create relative link with existing relative path with nodeId', () => {
             expect(createDeveloperUILinkWithNodeId(1, '/node/3/')).toBe('/node/1');
         });
@@ -86,4 +104,193 @@ describe('Developer UI links generators', () => {
             ).toBe('/node/1/actors/vdisks/vdisk000000001_000000001');
         });
     });
+
+    describe('createDeveloperUIMonitoringPageHref', () => {
+        test('should create correct link for embedded UI', () => {
+            expect(createDeveloperUIMonitoringPageHref('')).toBe('/monitoring');
+        });
+        test('should create correct link with custom host', () => {
+            expect(createDeveloperUIMonitoringPageHref('http://my-ydb-host.net:8765')).toBe(
+                'http://my-ydb-host.net:8765/monitoring',
+            );
+        });
+    });
+
+    describe('createTabletDeveloperUIHref', () => {
+        test('should create correct link with tabletId', () => {
+            expect(createTabletDeveloperUIHref(123, undefined, 'TabletID', '')).toBe(
+                '/tablets?TabletID=123',
+            );
+        });
+        test('should create correct link with tabletId and page', () => {
+            expect(createTabletDeveloperUIHref(123, 'counters', 'TabletID', '')).toBe(
+                '/tablets/counters?TabletID=123',
+            );
+        });
+        test('should create correct link with custom host', () => {
+            expect(
+                createTabletDeveloperUIHref(
+                    123,
+                    undefined,
+                    'TabletID',
+                    'http://my-ydb-host.net:8765',
+                ),
+            ).toBe('http://my-ydb-host.net:8765/tablets?TabletID=123');
+        });
+    });
+
+    describe('developerUiFirstPathSegment', () => {
+        describe('createDeveloperUIInternalPageHref', () => {
+            test('should insert first segment when configured', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(createDeveloperUIInternalPageHref()).toBe('/custom/internal');
+            });
+
+            test('should keep explicit custom host unchanged', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(createDeveloperUIInternalPageHref('http://my-ydb-host.net:8765')).toBe(
+                    'http://my-ydb-host.net:8765/internal',
+                );
+            });
+
+            test('should keep explicit custom host with existing path unchanged', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(
+                    createDeveloperUIInternalPageHref('http://my-ydb-host.net:8765/node/5'),
+                ).toBe('http://my-ydb-host.net:8765/node/5/internal');
+            });
+
+            test('should keep explicit proxy path unchanged', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'api'});
+                expect(createDeveloperUIInternalPageHref('/my-ydb-host.net:8765')).toBe(
+                    '/my-ydb-host.net:8765/internal',
+                );
+            });
+
+            test('should append first segment after existing relative path from current host', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'api'});
+                jest.mocked(window.api.viewer.getPath).mockReturnValue('/node/5');
+                expect(createDeveloperUIInternalPageHref()).toBe('/node/5/api/internal');
+            });
+
+            test('should append first segment after existing absolute path from current host', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                jest.mocked(window.api.viewer.getPath).mockReturnValue(
+                    'http://my-ydb-host.net:8765/node/5',
+                );
+                expect(createDeveloperUIInternalPageHref()).toBe(
+                    'http://my-ydb-host.net:8765/node/5/custom/internal',
+                );
+            });
+
+            test('should append first segment after proxy cluster path from current host', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'devui'});
+                jest.mocked(window.api.viewer.getPath).mockReturnValue(
+                    '/api/meta3/proxy/cluster/ru-central1',
+                );
+                expect(createDeveloperUIInternalPageHref()).toBe(
+                    '/api/meta3/proxy/cluster/ru-central1/devui/internal',
+                );
+            });
+        });
+
+        describe('createDeveloperUIMonitoringPageHref', () => {
+            test('should insert first segment when configured', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(createDeveloperUIMonitoringPageHref()).toBe('/custom/monitoring');
+            });
+
+            test('should keep explicit custom host unchanged', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'api'});
+                expect(createDeveloperUIMonitoringPageHref('http://my-ydb-host.net:8765')).toBe(
+                    'http://my-ydb-host.net:8765/monitoring',
+                );
+            });
+        });
+
+        describe('createDeveloperUILinkWithNodeId', () => {
+            test('should insert first segment when configured', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(createDeveloperUILinkWithNodeId(1)).toBe('/custom/node/1');
+            });
+
+            test('should keep explicit custom host unchanged', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'api'});
+                expect(
+                    createDeveloperUILinkWithNodeId(
+                        1,
+                        'http://ydb-vla-dev02-001.search.yandex.net:8765',
+                    ),
+                ).toBe('http://ydb-vla-dev02-001.search.yandex.net:8765/node/1');
+            });
+
+            test('should replace nodeId in path with first segment', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(createDeveloperUILinkWithNodeId(1, '/custom/node/3')).toBe('/custom/node/1');
+            });
+
+            test('should strip existing node path and append first segment before adding node path', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                jest.mocked(window.api.viewer.getPath).mockReturnValue(
+                    'http://my-ydb-host.net:8765/node/3',
+                );
+                expect(createDeveloperUILinkWithNodeId(1)).toBe(
+                    'http://my-ydb-host.net:8765/custom/node/1',
+                );
+            });
+        });
+
+        describe('createPDiskDeveloperUILink', () => {
+            test('should insert first segment when configured', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(createPDiskDeveloperUILink({nodeId: 1, pDiskId: 1})).toBe(
+                    '/custom/node/1/actors/pdisks/pdisk000000001',
+                );
+            });
+        });
+
+        describe('createVDiskDeveloperUILink', () => {
+            test('should insert first segment when configured', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(
+                    createVDiskDeveloperUILink({
+                        nodeId: 1,
+                        pDiskId: 1,
+                        vDiskSlotId: 1,
+                    }),
+                ).toBe('/custom/node/1/actors/vdisks/vdisk000000001_000000001');
+            });
+        });
+
+        describe('createTabletDeveloperUIHref', () => {
+            test('should insert first segment when configured', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(createTabletDeveloperUIHref(123)).toBe('/custom/tablets?TabletID=123');
+            });
+
+            test('should insert first segment with tablet page', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'api'});
+                expect(createTabletDeveloperUIHref(123, 'counters')).toBe(
+                    '/api/tablets/counters?TabletID=123',
+                );
+            });
+
+            test('should keep explicit custom host unchanged', () => {
+                configureUIFactory({developerUiFirstPathSegment: 'custom'});
+                expect(
+                    createTabletDeveloperUIHref(
+                        123,
+                        undefined,
+                        'TabletID',
+                        'http://my-ydb-host.net:8765',
+                    ),
+                ).toBe('http://my-ydb-host.net:8765/tablets?TabletID=123');
+            });
+
+            test('should normalize first segment slashes', () => {
+                configureUIFactory({developerUiFirstPathSegment: '/custom/'});
+                expect(createTabletDeveloperUIHref(123)).toBe('/custom/tablets?TabletID=123');
+            });
+        });
+    });
 });
diff --git a/src/utils/developerUI/developerUI.ts b/src/utils/developerUI/developerUI.ts
@@ -2,9 +2,35 @@ import {uiFactory} from '../../uiFactory/uiFactory';
 import {useIsUserAllowedToMakeChanges} from '../hooks/useIsUserAllowedToMakeChanges';
 import {pad9} from '../utils';
 
+function appendPathSegment(host: string, firstSegment: string) {
+    const normalizedFirstSegment = firstSegment.replace(/^\/+|\/+$/g, '');
+    const normalizedHost = host.replace(/\/+$/g, '');
+
+    if (!normalizedFirstSegment) {
+        return normalizedHost || host;
+    }
+
+    if (!normalizedHost) {
+        return `/${normalizedFirstSegment}`;
+    }
+
+    return `${normalizedHost}/${normalizedFirstSegment}`;
+}
+
 function getCurrentHost() {
     // It always has correct backend
-    return window.api.viewer.getPath('');
+    const host = String(window.api.viewer.getPath(''));
+    const firstSegment = uiFactory.developerUiFirstPathSegment;
+
+    if (!firstSegment) {
+        return host;
+    }
+
+    return appendPathSegment(host, firstSegment);
+}
+
+function replaceNodePath(host: string, replacement = '') {
+    return host.replace(/\/node\/\d+\/?$/, replacement);
 }
 
 export function createDeveloperUIInternalPageHref(host = getCurrentHost()) {
@@ -16,19 +42,21 @@ export function createDeveloperUIMonitoringPageHref(host = getCurrentHost()) {
 }
 
 // Current node connects with target node by itself using nodeId
-export const createDeveloperUILinkWithNodeId = (
-    nodeId: number | string,
-    host = getCurrentHost(),
-) => {
-    const nodePathRegexp = /\/node\/\d+\/?$/g;
+export const createDeveloperUILinkWithNodeId = (nodeId: number | string, host?: string) => {
+    const nodePath = `/node/${nodeId}`;
 
-    // In case current backend is already relative node path ({host}/node/{nodeId})
-    // We replace existing nodeId path with new nodeId path
-    if (nodePathRegexp.test(String(host))) {
-        return String(host).replace(nodePathRegexp, `/node/${nodeId}`);
+    if (host !== undefined) {
+        return `${replaceNodePath(host)}${nodePath}`;
     }
 
-    return `${host ?? ''}/node/${nodeId}`;
+    // When using current host, strip any existing /node/{id} before appending firstSegment
+    const rawHost = window.api.viewer.getPath('');
+    const baseHost = replaceNodePath(rawHost);
+    const firstSegment = uiFactory.developerUiFirstPathSegment;
+
+    const hostWithSegment = firstSegment ? appendPathSegment(baseHost, firstSegment) : baseHost;
+
+    return `${hostWithSegment}${nodePath}`;
 };
 
 interface PDiskDeveloperUILinkParams {
