feat: enable basename for multi cluster version

Author: artemmufazalov

package.json

@@ -69,6 +69,7 @@
     "build": "rm -rf build && DISABLE_ESLINT_PLUGIN=true CI=true react-app-rewired build",
     "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
     "build:embedded": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm run build",
+    "build:embedded-mc": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND= REACT_APP_META_BACKEND= npm run build",
     "build:embedded:archive": "npm run build:embedded && mv build embedded-ui && cp CHANGELOG.md embedded-ui/CHANGELOG.md && zip -r embedded-ui.zip embedded-ui && rm -rf embedded-ui",
     "lint": "run-p lint:*",
     "lint:js": "eslint  --ext .js,.jsx,.ts,.tsx .",

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -67,10 +67,13 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
             status={tenant.Overall}
             infoPopoverContent={infoPopoverContent}
             hasClipboardButton
-            path={getTenantPath({
-                database: tenant.Name,
-                backend,
-            })}
+            path={getTenantPath(
+                {
+                    database: tenant.Name,
+                    backend,
+                },
+                {withBasename: isExternalLink},
+            )}
         />
     );
 }

src/containers/Cluster/utils.tsx

@@ -1,3 +1,4 @@
+import type {CreateHrefOptions} from '../../routes';
 import routes, {createHref} from '../../routes';
 import type {ValueOf} from '../../types/common';
 
@@ -44,6 +45,6 @@ export function isClusterTab(tab: any): tab is ClusterTab {
     return Object.values(clusterTabsIds).includes(tab);
 }
 
-export const getClusterPath = (activeTab?: ClusterTab, query = {}) => {
-    return createHref(routes.cluster, activeTab ? {activeTab} : undefined, query);
+export const getClusterPath = (activeTab?: ClusterTab, query = {}, options?: CreateHrefOptions) => {
+    return createHref(routes.cluster, activeTab ? {activeTab} : undefined, query, options);
 };

src/containers/Clusters/columns.tsx

@@ -36,7 +36,7 @@ export const CLUSTERS_COLUMNS: Column<PreparedCluster>[] = [
             const clusterPath =
                 useEmbeddedUi && backend
                     ? createDeveloperUIMonitoringPageHref(backend)
-                    : getClusterPath(undefined, {backend, clusterName});
+                    : getClusterPath(undefined, {backend, clusterName}, {withBasename: true});
 
             const clusterStatus = row.cluster?.Overall;
 
@@ -110,7 +110,11 @@ export const CLUSTERS_COLUMNS: Column<PreparedCluster>[] = [
                 preparedVersions.length > 0 && (
                     <ExternalLink
                         className={b('cluster-versions')}
-                        href={getClusterPath(clusterTabsIds.versions, {backend, clusterName})}
+                        href={getClusterPath(
+                            clusterTabsIds.versions,
+                            {backend, clusterName},
+                            {withBasename: true},
+                        )}
                     >
                         <React.Fragment>
                             {preparedVersions.map((item, index) => (

src/containers/Tenant/TenantPages.tsx

@@ -1,3 +1,4 @@
+import type {CreateHrefOptions} from '../../routes';
 import routes, {createHref} from '../../routes';
 import {TENANT_SUMMARY_TABS_IDS} from '../../store/reducers/tenant/constants';
 import type {paramSetup} from '../../store/state-url-mapping';
@@ -40,6 +41,6 @@ export const TENANT_SCHEMA_TAB = [
     },
 ];
 
-export const getTenantPath = (query: TenantQuery) => {
-    return createHref(routes.tenant, undefined, query);
+export const getTenantPath = (query: TenantQuery, options?: CreateHrefOptions) => {
+    return createHref(routes.tenant, undefined, query, options);
 };

src/routes.ts

@@ -5,7 +5,7 @@ import qs from 'qs';
 import type {QueryParamConfig} from 'use-query-params';
 import {StringParam} from 'use-query-params';
 
-import {backend, clusterName, webVersion} from './store';
+import {backend, basename, clusterName, webVersion} from './store';
 
 export const CLUSTERS = 'clusters';
 export const CLUSTER = 'cluster';
@@ -55,10 +55,15 @@ const prepareRoute = (route: string) => {
 
 type Query = AnyRecord;
 
+export interface CreateHrefOptions {
+    withBasename?: boolean;
+}
+
 export function createHref(
     route: string,
     params?: Record<string, string | number | undefined>,
     query: Query = {},
+    options: CreateHrefOptions = {},
 ) {
     let extendedQuery = query;
 
@@ -78,7 +83,14 @@ export function createHref(
 
     const preparedRoute = prepareRoute(route);
 
-    return `${compile(preparedRoute)(params)}${search}`;
+    const compiledRoute = `${compile(preparedRoute)(params)}${search}`;
+
+    if (options.withBasename) {
+        // For SPA links react-router adds basename itself
+        // It is needed for external links - <a> or uikit <Link>
+        return basename + compiledRoute;
+    }
+    return compiledRoute;
 }
 
 // embedded version could be located in some folder (e.g. host/some_folder/app_router_path)

src/store/getUrlData.ts

@@ -7,27 +7,41 @@ export const getUrlData = ({
     singleClusterMode: boolean;
     customBackend?: string;
 }) => {
+    // UI could be located in "monitoring" or "ui" folders
+    const parsedPrefix = window.location.pathname.match(/.*(?=\/(monitoring|ui)\/)/) || [];
+    const basenamePrefix = parsedPrefix.length > 0 ? parsedPrefix[0] : '';
+    const folder = parsedPrefix.length > 1 ? parsedPrefix[1] : '';
+
+    let basename = '';
+
+    if (basenamePrefix || folder) {
+        basename = basenamePrefix + '/' + folder;
+    }
+
+    const urlSearchParams = new URL(href).searchParams;
+    const backend = urlSearchParams.get('backend') ?? undefined;
+    const clusterName = urlSearchParams.get('clusterName') ?? undefined;
+
     if (!singleClusterMode) {
-        const urlSearchParams = new URL(href).searchParams;
-        const backend = urlSearchParams.get('backend') ?? undefined;
-        const clusterName = urlSearchParams.get('clusterName') ?? undefined;
+        // Multi-cluster version
+        // Cluster and backend are determined by url params
         return {
-            basename: '/',
+            basename,
             backend,
             clusterName,
         };
     } else if (customBackend) {
-        const urlSearchParams = new URL(href).searchParams;
-        const backend = urlSearchParams.get('backend') ?? undefined;
+        // Single-cluster version
+        // UI and backend are on different hosts
+        // There is a backend url param for requests
         return {
-            basename: '/',
+            basename,
             backend: backend ? backend : customBackend,
         };
     } else {
-        const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || [];
-        const basenamePrefix = parsedPrefix.length > 0 ? parsedPrefix[0] : '';
-        const basename = [basenamePrefix, 'monitoring'].filter(Boolean).join('/');
-
+        // Single-cluster version
+        // UI and backend are located on the same host
+        // We use the the host for backend requests
         return {
             basename,
             backend: basenamePrefix || '',