fix: disable streaming by default for some clusters (#2566)

Author: astandrik

src/containers/App/App.tsx

@@ -6,14 +6,12 @@ import {Helmet} from 'react-helmet-async';
 import {connect} from 'react-redux';
 
 import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
-import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 import type {RootState} from '../../store';
-import {Navigation} from '../AsideNavigation/Navigation';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
-import {getUserSettings} from '../UserSettings/settings';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
 
 import ContentWrapper, {Content} from './Content';
+import {NavigationWrapper} from './NavigationWrapper';
 import {Providers} from './Providers';
 
 import './App.scss';
@@ -26,25 +24,20 @@ export interface AppProps {
     children?: React.ReactNode;
 }
 
-function App({
-    store,
-    history,
-    singleClusterMode,
-    children,
-    userSettings = getUserSettings({singleClusterMode}),
-}: AppProps) {
+function App({store, history, singleClusterMode, children, userSettings}: AppProps) {
     const ChatPanel = componentsRegistry.get('ChatPanel');
 
     return (
         <Providers store={store} history={history}>
             <Helmet defaultTitle="YDB Monitoring" titleTemplate="%s — YDB Monitoring" />
             <ContentWrapper>
-                <Navigation userSettings={userSettings}>
-                    <ErrorBoundary>
-                        <Content singleClusterMode={singleClusterMode}>{children}</Content>
-                        <div id="fullscreen-root"></div>
-                    </ErrorBoundary>
-                </Navigation>
+                <NavigationWrapper
+                    singleClusterMode={singleClusterMode}
+                    userSettings={userSettings}
+                >
+                    <Content singleClusterMode={singleClusterMode}>{children}</Content>
+                    <div id="fullscreen-root"></div>
+                </NavigationWrapper>
             </ContentWrapper>
             {ChatPanel && <ChatPanel />}
             <ReduxTooltip />

src/containers/App/NavigationWrapper.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
+import {useClusterNameFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+import {Navigation} from '../AsideNavigation/Navigation';
+import {applyClusterSpecificQueryStreamingSetting, getUserSettings} from '../UserSettings/settings';
+import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
+
+interface NavigationWrapperProps {
+    singleClusterMode: boolean;
+    userSettings?: YDBEmbeddedUISettings;
+    children: React.ReactNode;
+}
+
+export function NavigationWrapper({
+    singleClusterMode,
+    userSettings,
+    children,
+}: NavigationWrapperProps) {
+    const clusterName = useClusterNameFromQuery();
+
+    let finalUserSettings: YDBEmbeddedUISettings;
+
+    if (userSettings) {
+        // Apply cluster-specific logic to externally provided settings
+        finalUserSettings = applyClusterSpecificQueryStreamingSetting(userSettings, clusterName);
+    } else {
+        // Generate settings internally with cluster-specific logic
+        finalUserSettings = getUserSettings({
+            singleClusterMode,
+            clusterName,
+        });
+    }
+
+    return (
+        <Navigation userSettings={finalUserSettings}>
+            <ErrorBoundary>{children}</ErrorBoundary>
+        </Navigation>
+    );
+}

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -28,12 +28,12 @@ import {cn} from '../../../../utils/cn';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
-    ENABLE_QUERY_STREAMING,
     LAST_USED_QUERY_ACTION_KEY,
 } from '../../../../utils/constants';
 import {
     useEventHandler,
     useQueryExecutionSettings,
+    useQueryStreamingSetting,
     useSetting,
     useTypedDispatch,
     useTypedSelector,
@@ -92,7 +92,7 @@ export default function QueryEditor(props: QueryEditorProps) {
         LAST_USED_QUERY_ACTION_KEY,
     );
     const [lastExecutedQueryText, setLastExecutedQueryText] = React.useState<string>('');
-    const [isQueryStreamingEnabled] = useSetting<boolean>(ENABLE_QUERY_STREAMING);
+    const [isQueryStreamingEnabled] = useQueryStreamingSetting();
 
     const isStreamingEnabled =
         useStreamingAvailable() &&

src/containers/Tenant/Query/QuerySettingsDialog/TimeoutLabel.tsx

@@ -1,8 +1,7 @@
 import {HelpMark, Switch} from '@gravity-ui/uikit';
 
 import {cn} from '../../../../utils/cn';
-import {ENABLE_QUERY_STREAMING} from '../../../../utils/constants';
-import {useSetting} from '../../../../utils/hooks';
+import {useQueryStreamingSetting} from '../../../../utils/hooks';
 
 import {QUERY_SETTINGS_FIELD_SETTINGS} from './constants';
 import i18n from './i18n';
@@ -18,7 +17,7 @@ interface TimeoutLabelProps {
 }
 
 export function TimeoutLabel({isDisabled, isChecked, onToggle}: TimeoutLabelProps) {
-    const [isQueryStreamingEnabled] = useSetting<boolean>(ENABLE_QUERY_STREAMING);
+    const [isQueryStreamingEnabled] = useQueryStreamingSetting();
 
     if (isQueryStreamingEnabled) {
         return (

src/containers/UserSettings/settings.tsx

@@ -12,8 +12,12 @@ import {
     ENABLE_CODE_ASSISTANT,
     ENABLE_NETWORK_TABLE_KEY,
     ENABLE_QUERY_STREAMING,
+    ENABLE_QUERY_STREAMING_OLD_BACKEND,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
+    OLD_BACKEND_CLUSTER_NAMES,
+    PAGE_IDS,
+    SECTION_IDS,
     SHOW_DOMAIN_DATABASE_KEY,
     SHOW_NETWORK_UTILIZATION,
     THEME_KEY,
@@ -137,6 +141,42 @@ export const enableQueryStreamingSetting: SettingProps = {
     description: i18n('settings.editor.queryStreaming.description'),
 };
 
+export const enableQueryStreamingOldBackendSetting: SettingProps = {
+    settingKey: ENABLE_QUERY_STREAMING_OLD_BACKEND,
+    title: i18n('settings.editor.queryStreaming.title'),
+    description: i18n('settings.editor.queryStreaming.description'),
+};
+
+export function applyClusterSpecificQueryStreamingSetting(
+    settings: YDBEmbeddedUISettings,
+    clusterName?: string,
+): YDBEmbeddedUISettings {
+    const isOldBackendCluster = clusterName && OLD_BACKEND_CLUSTER_NAMES.includes(clusterName);
+
+    const queryStreamingSetting = isOldBackendCluster
+        ? enableQueryStreamingOldBackendSetting
+        : enableQueryStreamingSetting;
+
+    return settings.map((page) => {
+        // Look for the experiments page
+        if (page.id === PAGE_IDS.EXPERIMENTS) {
+            return createNextState(page, (draft) => {
+                // Find and replace the query streaming setting in experimentsSection
+                const section = draft.sections[0]; // experimentsSection
+                const settingIndex = section.settings.findIndex(
+                    (setting) =>
+                        'settingKey' in setting && setting.settingKey === ENABLE_QUERY_STREAMING,
+                );
+
+                if (settingIndex !== -1) {
+                    section.settings[settingIndex] = queryStreamingSetting;
+                }
+            });
+        }
+        return page;
+    });
+}
+
 export const showNetworkUtilizationSetting: SettingProps = {
     settingKey: SHOW_NETWORK_UTILIZATION,
     title: i18n('settings.showNetworkUtilization.title'),
@@ -181,10 +221,11 @@ export const interfaceVersionInfoField: SettingsInfoFieldProps = {
 };
 
 export const appearanceSection: SettingsSection = {
-    id: 'appearanceSection',
+    id: SECTION_IDS.APPEARANCE,
     title: i18n('section.appearance'),
     settings: [
         themeSetting,
+        languageSetting,
         invertedDisksSetting,
         binaryDataInPlainTextDisplay,
         showDomainDatabase,
@@ -193,7 +234,7 @@ export const appearanceSection: SettingsSection = {
 };
 
 export const experimentsSection: SettingsSection = {
-    id: 'experimentsSection',
+    id: SECTION_IDS.EXPERIMENTS,
     title: i18n('section.experiments'),
     settings: [
         enableNetworkTable,
@@ -204,42 +245,43 @@ export const experimentsSection: SettingsSection = {
 };
 
 export const devSettingsSection: SettingsSection = {
-    id: 'devSettingsSection',
+    id: SECTION_IDS.DEV_SETTINGS,
     title: i18n('section.dev-setting'),
     settings: [enableAutocompleteSetting, autocompleteOnEnterSetting],
 };
 
 export const aboutSettingsSection: SettingsSection = {
-    id: 'aboutSettingsSection',
+    id: SECTION_IDS.ABOUT,
     title: i18n('section.about'),
     settings: [interfaceVersionInfoField],
 };
 
 export const generalPage: SettingsPage = {
-    id: 'generalPage',
+    id: PAGE_IDS.GENERAL,
     title: i18n('page.general'),
     icon: {data: StarFill, height: 14, width: 14},
     sections: [appearanceSection],
     hideTitle: true,
 };
 
 export const experimentsPage: SettingsPage = {
-    id: 'experimentsPage',
+    id: PAGE_IDS.EXPERIMENTS,
     title: i18n('page.experiments'),
     icon: {data: Flask},
     sections: [experimentsSection],
     hideTitle: true,
 };
 
 export const editorPage: SettingsPage = {
-    id: 'editorPage',
+    id: PAGE_IDS.EDITOR,
     title: i18n('page.editor'),
     icon: {data: PencilToSquare},
     sections: [devSettingsSection],
+    hideTitle: true,
 };
 
 export const aboutPage: SettingsPage = {
-    id: 'aboutPage',
+    id: PAGE_IDS.ABOUT,
     title: i18n('page.about'),
     icon: {data: CircleInfo},
     sections: [aboutSettingsSection],
@@ -249,9 +291,11 @@ export const aboutPage: SettingsPage = {
 export function getUserSettings({
     singleClusterMode,
     codeAssistantConfigured,
+    clusterName,
 }: {
     singleClusterMode: boolean;
     codeAssistantConfigured?: boolean;
+    clusterName?: string;
 }) {
     const experiments = singleClusterMode
         ? experimentsPage
@@ -266,7 +310,8 @@ export function getUserSettings({
               })
             : editorPage;
 
-    const settings: YDBEmbeddedUISettings = [generalPage, editor, experiments, aboutPage];
+    const baseSettings: YDBEmbeddedUISettings = [generalPage, editor, experiments, aboutPage];
 
-    return settings;
+    // Apply cluster-specific query streaming logic
+    return applyClusterSpecificQueryStreamingSetting(baseSettings, clusterName);
 }

src/services/settings.ts

@@ -11,6 +11,7 @@ import {
     ENABLE_CODE_ASSISTANT,
     ENABLE_NETWORK_TABLE_KEY,
     ENABLE_QUERY_STREAMING,
+    ENABLE_QUERY_STREAMING_OLD_BACKEND,
     EXPAND_CLUSTER_DASHBOARD,
     INVERTED_DISKS_KEY,
     IS_HOTKEYS_HELP_HIDDEN_KEY,
@@ -51,6 +52,7 @@ export const DEFAULT_USER_SETTINGS = {
     [ENABLE_AUTOCOMPLETE]: true,
     [ENABLE_CODE_ASSISTANT]: true,
     [ENABLE_QUERY_STREAMING]: true,
+    [ENABLE_QUERY_STREAMING_OLD_BACKEND]: false,
     [SHOW_NETWORK_UTILIZATION]: false,
     [EXPAND_CLUSTER_DASHBOARD]: true,
     [AUTOCOMPLETE_ON_ENTER]: true,