feat: support cluster_domain in settings (#3158)

Author: Raubzeug

src/containers/Clusters/columns.tsx

@@ -14,19 +14,18 @@ import {
 
 import {EntityStatus} from '../../components/EntityStatusNew/EntityStatus';
 import {VersionsBar} from '../../components/VersionsBar/VersionsBar';
-import {getClusterPath} from '../../routes';
 import type {PreparedCluster} from '../../store/reducers/clusters/types';
 import {EFlag} from '../../types/api/enums';
 import {uiFactory} from '../../uiFactory/uiFactory';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatNumber, formatStorageValuesToTb} from '../../utils/dataFormatters/dataFormatters';
-import {createDeveloperUIMonitoringPageHref} from '../../utils/developerUI/developerUI';
 import {getCleanBalancerValue} from '../../utils/parseBalancer';
 import {clusterTabsIds} from '../Cluster/utils';
 
 import {COLUMNS_NAMES, COLUMNS_TITLES} from './constants';
 import i18n from './i18n';
 import {b} from './shared';
+import {calculateClusterPath} from './utils';
 export const CLUSTERS_COLUMNS_WIDTH_LS_KEY = 'clustersTableColumnsWidth';
 
 const EMPTY_CELL = <span className={b('empty-cell')}>{EMPTY_DATA_PLACEHOLDER}</span>;
@@ -144,23 +143,13 @@ interface ClusterNameProps {
 }
 
 function ClusterName({row}: ClusterNameProps) {
-    const {
-        name: clusterName,
-        use_embedded_ui: useEmbeddedUi,
-        preparedBackend: backend,
-        settings,
-    } = row;
-    const clusterPath =
-        useEmbeddedUi && backend
-            ? createDeveloperUIMonitoringPageHref(backend)
-            : getClusterPath(
-                  {environment: settings?.auth_service},
-                  {backend, clusterName},
-                  {withBasename: true},
-              );
+    const clusterPath = calculateClusterPath(row);
+
     return (
         <div className={b('cluster-name')}>
-            <ExternalLink href={clusterPath}>{row.title || row.name}</ExternalLink>
+            <ExternalLink href={clusterPath} target={row.clusterDomain ? '_blank' : undefined}>
+                {row.title || row.name}
+            </ExternalLink>
         </div>
     );
 }
@@ -358,26 +347,17 @@ interface VersionsProps {
 }
 
 function Versions({row}: VersionsProps) {
-    const {
-        preparedVersions,
-        name: clusterName,
-        preparedBackend: backend,
-        settings,
-        use_embedded_ui: useEmbeddedUi,
-    } = row;
+    const {preparedVersions} = row;
     if (!preparedVersions.length) {
         return null;
     }
-    const clusterPath =
-        useEmbeddedUi && backend
-            ? createDeveloperUIMonitoringPageHref(backend)
-            : getClusterPath(
-                  {activeTab: clusterTabsIds.versions, environment: settings?.auth_service},
-                  {backend, clusterName},
-                  {withBasename: true},
-              );
+    const clusterPath = calculateClusterPath(row, clusterTabsIds.versions);
     return (
-        <ExternalLink className={b('cluster-versions')} href={clusterPath}>
+        <ExternalLink
+            className={b('cluster-versions')}
+            href={clusterPath}
+            target={row.clusterDomain ? '_blank' : undefined}
+        >
             <VersionsBar preparedVersions={preparedVersions} />
         </ExternalLink>
     );

src/containers/Clusters/utils.ts

@@ -0,0 +1,28 @@
+import {getClusterPath} from '../../routes';
+import type {PreparedCluster} from '../../store/reducers/clusters/types';
+import {createDeveloperUIMonitoringPageHref} from '../../utils/developerUI/developerUI';
+import type {ClusterTab} from '../Cluster/utils';
+
+export function calculateClusterPath(row: PreparedCluster, activeTab?: ClusterTab): string {
+    const {
+        use_embedded_ui: useEmbeddedUi,
+        preparedBackend: backend,
+        name: clusterName,
+        clusterDomain,
+        settings,
+    } = row;
+
+    if (useEmbeddedUi && backend) {
+        return createDeveloperUIMonitoringPageHref(backend);
+    }
+
+    return getClusterPath(
+        {
+            activeTab,
+            environment: settings?.auth_service,
+        },
+        {backend, clusterName},
+        {withBasename: true},
+        clusterDomain,
+    );
+}

src/routes.ts

@@ -71,6 +71,7 @@ export function createHref(
     params?: Record<string, string | number | undefined>,
     query: Query = {},
     options: CreateHrefOptions = {},
+    domain = '',
 ) {
     let extendedQuery = query;
     let extendedParams = params ?? {};
@@ -103,9 +104,10 @@ export function createHref(
     if (options.withBasename && basename) {
         // For SPA links react-router adds basename itself
         // It is needed for external links - <a> or uikit <Link>
-        return normalizePathSlashes(`${basename}/${compiledRoute}`);
+        return normalizePathSlashes(`${domain}${basename}/${compiledRoute}`);
     }
-    return compiledRoute;
+
+    return `${domain}${compiledRoute}`;
 }
 
 // embedded version could be located in some folder (e.g. host/some_folder/app_router_path)
@@ -150,8 +152,9 @@ export const getClusterPath = (
     params?: {activeTab?: ClusterTab; environment?: string},
     query = {},
     options?: CreateHrefOptions,
+    domain?: string,
 ) => {
-    return createHref(routes.cluster, params, query, options);
+    return createHref(routes.cluster, params, query, options, domain);
 };
 
 export const getTenantPath = (query: TenantQuery, options?: CreateHrefOptions) => {

src/store/reducers/cluster/parseFields.ts

@@ -69,6 +69,7 @@ export function parseLoggingUrls(
 
 const settingsSchema = z.object({
     use_meta_proxy: z.boolean().optional(),
+    cluster_domain: z.string().optional(),
 });
 
 export function parseSettingsField(

src/store/reducers/clusters/types.ts

@@ -5,6 +5,7 @@ export interface PreparedCluster extends Omit<MetaExtendedClusterInfo, 'settings
     preparedVersions: PreparedVersion[];
     preparedBackend?: string;
     settings?: MetaClusterSettings;
+    clusterDomain?: string;
 }
 
 export interface ClustersFilters {

src/store/reducers/clusters/utils.ts

@@ -28,6 +28,9 @@ export const prepareClustersData = (data: MetaClusters): PreparedCluster[] => {
         const parsedSettings = parseSettingsField(cluster.settings);
         // If no backend is provided, it will be automatically generated by API instance
         const useMetaProxy = uiFactory.useMetaProxy && parsedSettings?.use_meta_proxy !== false;
+        const clusterDomain = uiFactory.useClusterDomain
+            ? parsedSettings?.cluster_domain
+            : undefined;
         const preparedBackend =
             cluster.balancer && !useMetaProxy
                 ? prepareBackendFromBalancer(cluster.balancer)
@@ -38,6 +41,7 @@ export const prepareClustersData = (data: MetaClusters): PreparedCluster[] => {
             preparedVersions: prepareClusterVersions(cluster.versions, versionsData),
             preparedBackend,
             settings: parsedSettings,
+            clusterDomain,
         };
     });
 };

src/types/api/meta.ts

@@ -98,4 +98,5 @@ export interface MetaClusterTraceCheck {
 export interface MetaClusterSettings {
     use_meta_proxy?: boolean;
     auth_service?: string;
+    cluster_domain?: string;
 }

src/uiFactory/types.ts

@@ -50,6 +50,7 @@ export interface UIFactory<H extends string = CommonIssueType, T extends string
     useDatabaseId?: boolean;
 
     useMetaProxy?: boolean;
+    useClusterDomain?: boolean;
     useMetaSettings?: boolean;
 
     yaMetricaConfig?: {