Merge branch 'main' into fix-streaming

Author: DaryaVorontsova

package-lock.json

@@ -166,6 +166,7 @@
     "react-dom": "$react-dom",
     "redux": "$redux",
     "typescript": "$typescript",
-    "monaco-editor": "$monaco-editor"
+    "monaco-editor": "$monaco-editor",
+    "canvas": "^2.11.2"
   }
 }

package.json

@@ -83,6 +83,8 @@ export default defineConfig({
         sourceMap: {
             js: process.env.GENERATE_SOURCEMAP !== 'false' ? 'source-map' : false,
         },
+        // Inline CSS in development to prevent FOUC
+        injectStyles: process.env.NODE_ENV === 'development',
     },
     html: {
         template: './public/index.html',

rsbuild.config.ts

@@ -86,4 +86,11 @@
         top: 40px;
         right: 40px;
     }
+    &__general-error {
+        width: 100%;
+        height: var(--g-text-body-1-line-height);
+        margin-top: var(--g-spacing-1);
+
+        color: var(--g-color-text-danger);
+    }
 }

src/containers/Authentication/Authentication.scss

@@ -9,6 +9,7 @@ import {basename} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
 import {useLoginWithDatabase} from '../../store/reducers/capabilities/hooks';
 import {cn} from '../../utils/cn';
+import {prepareCommonErrorMessage} from '../../utils/errors';
 import {useMetaAuth} from '../../utils/hooks/useMetaAuth';
 
 import {isDatabaseError, isPasswordError, isUserError} from './utils';
@@ -68,23 +69,28 @@ function Authentication({closable = false}: AuthenticationProps) {
     const [loginError, setLoginError] = React.useState('');
     const [passwordError, setPasswordError] = React.useState('');
     const [databaseError, setDatabaseError] = React.useState('');
+    const [generalError, setGeneralError] = React.useState('');
     const [showPassword, setShowPassword] = React.useState(false);
 
     const onLoginUpdate = (value: string) => {
         setLogin(value);
         setLoginError('');
+        setGeneralError('');
     };
     const onDatabaseUpdate = (value: string) => {
         setDatabase(value);
         setDatabaseError('');
+        setGeneralError('');
     };
 
     const onPassUpdate = (value: string) => {
         setPass(value);
         setPasswordError('');
+        setGeneralError('');
     };
 
     const onLoginClick = () => {
+        setGeneralError('');
         authenticate({user: login, password, database, useMeta})
             .unwrap()
             .then(() => {
@@ -93,6 +99,8 @@ function Authentication({closable = false}: AuthenticationProps) {
                 }
             })
             .catch((error) => {
+                const isInputError =
+                    isUserError(error) || isPasswordError(error) || isDatabaseError(error);
                 if (isUserError(error)) {
                     setLoginError(error.data.error);
                 }
@@ -102,6 +110,11 @@ function Authentication({closable = false}: AuthenticationProps) {
                 if (isDatabaseError(error)) {
                     setDatabaseError(error.data.error);
                 }
+
+                if (!isInputError) {
+                    const message = prepareCommonErrorMessage(error);
+                    setGeneralError(message);
+                }
             });
     };
 
@@ -184,6 +197,8 @@ function Authentication({closable = false}: AuthenticationProps) {
                 >
                     Sign in
                 </Button>
+                {/* always preserve place for general error to prevent container height jumping */}
+                <div className={b('general-error')}>{generalError}</div>
             </form>
             {closable && history.length > 1 && (
                 <Button onClick={onClose} className={b('close')}>

src/containers/Authentication/Authentication.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/columns.tsx

@@ -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/containers/Clusters/utils.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/routes.ts

@@ -30,7 +30,10 @@ export const capabilitiesApi = api.injectEndpoints({
                 } catch (error) {
                     // If capabilities endpoint is not available, there will be an error
                     // That means no new features are available
-                    return {error};
+                    // Serialize the error to make it Redux-compatible
+                    const serializedError =
+                        error instanceof Error ? {message: error.message, name: error.name} : error;
+                    return {error: serializedError};
                 }
             },
         }),

src/store/reducers/capabilities/capabilities.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(