ydb-embedded-ui 4.23.0 → 4.25.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [4.25.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.24.0...v4.25.0) (2023-12-07)
+
+
+### Features
+
+* **Diagnostics:** remove tenant diagnostics cards setting ([#602](https://github.com/ydb-platform/ydb-embedded-ui/issues/602)) ([fe61df8](https://github.com/ydb-platform/ydb-embedded-ui/commit/fe61df86048013432c4e4788d1e621298ecb1fb2))
+* **Query:** remove query modes setting ([#600](https://github.com/ydb-platform/ydb-embedded-ui/issues/600)) ([78c63e4](https://github.com/ydb-platform/ydb-embedded-ui/commit/78c63e4a2e60950970914eaba49304b68aad0f80))
+
+## [4.24.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.23.0...v4.24.0) (2023-12-07)
+
+
+### Features
+
+* always use localStorage if no settingsApi ([#603](https://github.com/ydb-platform/ydb-embedded-ui/issues/603)) ([ff692df](https://github.com/ydb-platform/ydb-embedded-ui/commit/ff692dffa99d278f6b261bbf1aac0ee24c661a6d))
+
 ## [4.23.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.22.0...v4.23.0) (2023-12-06)
 
 

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -1,18 +1,10 @@
-import React, {useState} from 'react';
 import {useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Button, Modal} from '@gravity-ui/uikit';
-
 import type {EPathType} from '../../../../types/api/schema';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../../types/additionalProps';
-import {Icon} from '../../../../components/Icon';
-import {useSetting} from '../../../../utils/hooks';
-import {DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS} from '../../../../utils/constants';
 import Overview from '../Overview/Overview';
-import {Healthcheck} from '../OldHealthcheck';
 import {TenantOverview} from '../TenantOverview/TenantOverview';
-import {OldTenantOverview} from '../TenantOverview/OldTenantOverview';
 
 import './DetailedOverview.scss';
 
@@ -29,86 +21,26 @@ const b = cn('kv-detailed-overview');
 function DetailedOverview(props: DetailedOverviewProps) {
     const {type, tenantName, additionalTenantProps, additionalNodesProps} = props;
 
-    const [isModalVisible, setIsModalVisible] = useState(false);
-
     const {currentSchemaPath} = useSelector((state: any) => state.schema);
 
-    const [displayMetricsCards] = useSetting(DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS);
-
-    const openModalHandler = () => {
-        setIsModalVisible(true);
-    };
-
-    const closeModalHandler = () => {
-        setIsModalVisible(false);
-    };
-
-    const renderModal = () => {
-        return (
-            <Modal open={isModalVisible} onClose={closeModalHandler} className={b('modal')}>
-                <Healthcheck tenant={props.tenantName} fetchData={false} />
-                <Button
-                    className={b('close-modal-button')}
-                    onClick={closeModalHandler}
-                    view="flat-secondary"
-                    title="Close"
-                >
-                    <Icon name="close" viewBox={'0 0 16 16 '} height={20} width={20} />
-                </Button>
-            </Modal>
-        );
-    };
-
     const renderTenantOverview = () => {
-        if (displayMetricsCards) {
-            return (
-                <div className={b('section')}>
-                    <TenantOverview
-                        tenantName={tenantName}
-                        additionalTenantProps={additionalTenantProps}
-                        additionalNodesProps={additionalNodesProps}
-                    />
-                </div>
-            );
-        }
-
-        return (
-            <>
-                <div className={b('section')}>
-                    <OldTenantOverview
-                        tenantName={tenantName}
-                        additionalTenantProps={additionalTenantProps}
-                    />
-                </div>
-                <div className={b('section')}>
-                    <Healthcheck
-                        tenant={tenantName}
-                        preview={true}
-                        showMoreHandler={openModalHandler}
-                    />
-                </div>
-            </>
-        );
-    };
-
-    const renderContent = () => {
-        const isTenant = tenantName === currentSchemaPath;
         return (
-            <div className={b()}>
-                {isTenant ? (
-                    renderTenantOverview()
-                ) : (
-                    <Overview type={type} tenantName={tenantName} />
-                )}
+            <div className={b('section')}>
+                <TenantOverview
+                    tenantName={tenantName}
+                    additionalTenantProps={additionalTenantProps}
+                    additionalNodesProps={additionalNodesProps}
+                />
             </div>
         );
     };
 
+    const isTenant = tenantName === currentSchemaPath;
+
     return (
-        <React.Fragment>
-            {renderContent()}
-            {renderModal()}
-        </React.Fragment>
+        <div className={b()}>
+            {isTenant ? renderTenantOverview() : <Overview type={type} tenantName={tenantName} />}
+        </div>
     );
 }
 

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -33,57 +33,6 @@
         gap: 10px;
     }
 
-    &__common-info {
-        display: flex;
-        gap: 20px;
-
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: stretch;
-    }
-
-    &__system-tablets {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-
-        margin-bottom: 35px;
-    }
-
-    &__collapse-title {
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
-    }
-
-    &__section {
-        border-radius: 10px;
-
-        &_metrics {
-            .info-viewer__label {
-                min-width: 150px;
-            }
-            .info-viewer__value {
-                min-width: 100px;
-            }
-        }
-
-        &_pools {
-            display: grid;
-            grid-gap: 7px 20px;
-
-            grid-template-columns: 110px 110px;
-        }
-    }
-
-    &__section-title {
-        margin-bottom: 20px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
-    }
-
     &__info {
         position: sticky;
         left: 0;

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -9,7 +9,7 @@ import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {selectQueriesHistory} from '../../../../store/reducers/executeQuery';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {useQueryModes, useTypedSelector} from '../../../../utils/hooks';
-import {QUERY_MODES, QUERY_MODES_TITLES, QUERY_SYNTAX} from '../../../../utils/query';
+import {QUERY_MODES, QUERY_SYNTAX} from '../../../../utils/query';
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
 import i18n from '../i18n';
@@ -31,22 +31,15 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const reversedHistory = [...queriesHistory].reverse();
 
     const onQueryClick = (query: QueryInHistory) => {
-        let isQueryModeSet = true;
-
         if (query.syntax === QUERY_SYNTAX.pg && queryMode !== QUERY_MODES.pg) {
-            isQueryModeSet = setQueryMode(
-                QUERY_MODES.pg,
-                i18n('history.cannot-set-mode', {mode: QUERY_MODES_TITLES[QUERY_MODES.pg]}),
-            );
+            setQueryMode(QUERY_MODES.pg);
         } else if (query.syntax !== QUERY_SYNTAX.pg && queryMode === QUERY_MODES.pg) {
             // Set query mode for queries with yql syntax
-            isQueryModeSet = setQueryMode(QUERY_MODES.script);
+            setQueryMode(QUERY_MODES.script);
         }
 
-        if (isQueryModeSet) {
-            changeUserInput({input: query.queryText});
-            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-        }
+        changeUserInput({input: query.queryText});
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 
     const columns: Column<QueryInHistory>[] = [

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -23,12 +23,11 @@ import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     SAVED_QUERIES_KEY,
-    ENABLE_ADDITIONAL_QUERY_MODES,
     LAST_USED_QUERY_ACTION_KEY,
     QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../../../utils/constants';
 import {useSetting, useQueryModes} from '../../../../utils/hooks';
-import {QUERY_ACTIONS, QUERY_MODES, isNewQueryMode} from '../../../../utils/query';
+import {QUERY_ACTIONS} from '../../../../utils/query';
 
 import {
     PaneVisibilityActionTypes,
@@ -85,16 +84,9 @@ function QueryEditor(props) {
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
     const [queryMode, setQueryMode] = useQueryModes();
-    const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
 
-    useEffect(() => {
-        if (isNewQueryMode(queryMode) && !enableAdditionalQueryModes) {
-            setQueryMode(QUERY_MODES.script);
-        }
-    }, [enableAdditionalQueryModes, queryMode, setQueryMode]);
-
     useEffect(() => {
         if (savedPath !== path) {
             if (savedPath) {
@@ -470,7 +462,6 @@ function QueryEditor(props) {
                 disabled={!executeQuery.input}
                 onUpdateQueryMode={setQueryMode}
                 queryMode={queryMode}
-                enableAdditionalQueryModes={enableAdditionalQueryModes}
                 highlitedAction={lastUsedQueryAction}
             />
         );

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss

@@ -27,7 +27,7 @@
         $b: &;
 
         &__button {
-            width: 189px;
+            width: 241px;
             margin-left: 2px;
         }
 
@@ -36,24 +36,11 @@
             justify-content: space-between;
             align-items: center;
 
-            width: 163px;
+            width: 215px;
         }
 
         &__popup {
-            width: 189px;
-
-            &_extended {
-                width: 241px;
-            }
-        }
-
-        &_extended {
-            #{$b}__button {
-                width: 241px;
-            }
-            #{$b}__button-content {
-                width: 215px;
-            }
+            width: 241px;
         }
     }
 

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -19,17 +19,6 @@ const queryModeSelectorPopupQa = 'query-mode-selector-popup';
 
 const b = block('ydb-query-editor-controls');
 
-const OldQueryModeSelectorOptions = {
-    [QUERY_MODES.script]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.script],
-        description: i18n('method-description.script'),
-    },
-    [QUERY_MODES.scan]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
-        description: i18n('method-description.scan'),
-    },
-} as const;
-
 const QueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
         title: QUERY_MODES_TITLES[QUERY_MODES.script],
@@ -63,7 +52,6 @@ interface QueryEditorControlsProps {
     disabled: boolean;
     onUpdateQueryMode: (mode: QueryMode) => void;
     queryMode: QueryMode;
-    enableAdditionalQueryModes: boolean;
     highlitedAction: QueryAction;
 }
 
@@ -78,14 +66,9 @@ export const QueryEditorControls = ({
     onUpdateQueryMode,
     queryMode,
     highlitedAction,
-    enableAdditionalQueryModes,
 }: QueryEditorControlsProps) => {
     const querySelectorMenuItems = useMemo(() => {
-        const options = enableAdditionalQueryModes
-            ? QueryModeSelectorOptions
-            : OldQueryModeSelectorOptions;
-
-        return Object.entries(options).map(([mode, {title, description}]) => {
+        return Object.entries(QueryModeSelectorOptions).map(([mode, {title, description}]) => {
             return {
                 text: (
                     <LabelWithPopover
@@ -100,7 +83,7 @@ export const QueryEditorControls = ({
                 },
             };
         });
-    }, [onUpdateQueryMode, enableAdditionalQueryModes]);
+    }, [onUpdateQueryMode]);
 
     const runView: ButtonView | undefined = highlitedAction === 'execute' ? 'action' : undefined;
     const explainView: ButtonView | undefined =
@@ -132,17 +115,11 @@ export const QueryEditorControls = ({
                 >
                     Explain
                 </Button>
-                <div
-                    className={b('mode-selector', {
-                        extended: enableAdditionalQueryModes,
-                    })}
-                >
+                <div className={b('mode-selector')}>
                     <DropdownMenu
                         items={querySelectorMenuItems}
                         popupProps={{
-                            className: b('mode-selector__popup', {
-                                extended: enableAdditionalQueryModes,
-                            }),
+                            className: b('mode-selector__popup'),
                             qa: queryModeSelectorPopupQa,
                         }}
                         switcher={

package/dist/containers/Tenant/Query/i18n/en.json

@@ -8,8 +8,6 @@
   "history.empty": "History is empty",
   "saved.empty": "There are no saved queries",
 
-  "history.cannot-set-mode": "This query is available only with '{{mode}}' query mode. You need to turn in additional query modes in settings to enable it",
-
   "delete-dialog.header": "Delete query",
   "delete-dialog.question": "Are you sure you want to delete query",
   "delete-dialog.delete": "Delete",

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -8,8 +8,6 @@
   "history.empty": "История пуста",
   "saved.empty": "Нет сохраненных запросов",
 
-  "history.cannot-set-mode": "Этот запрос доступен только в режиме '{{mode}}'. Вам необходимо включить дополнительные режимы выполнения запросов в настройках",
-
   "delete-dialog.header": "Удалить запрос",
   "delete-dialog.question": "Вы уверены что хотите удалить запрос",
   "delete-dialog.delete": "Удалить",

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -4,7 +4,6 @@ import copy from 'copy-to-clipboard';
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import type {QueryMode} from '../../../types/store/query';
-import type {SetQueryModeIfAvailable} from '../../../utils/hooks';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
@@ -25,7 +24,7 @@ import {
 } from './queryTemplates';
 
 interface ActionsAdditionalEffects {
-    setQueryMode: SetQueryModeIfAvailable;
+    setQueryMode: (mode: QueryMode) => void;
     setActivePath: (path: string) => void;
 }
 
@@ -36,18 +35,16 @@ const bindActions = (
 ) => {
     const {setActivePath, setQueryMode} = additionalEffects;
 
-    const inputQuery =
-        (tmpl: (path: string) => string, mode?: QueryMode, setQueryModeErrorMessage?: string) =>
-        () => {
-            const isNewQueryModeSet = mode && setQueryMode(mode, setQueryModeErrorMessage);
+    const inputQuery = (tmpl: (path: string) => string, mode?: QueryMode) => () => {
+        if (mode) {
+            setQueryMode(mode);
+        }
 
-            if (!mode || isNewQueryModeSet) {
-                dispatch(changeUserInput({input: tmpl(path)}));
-                dispatch(setTenantPage(TENANT_PAGES_IDS.query));
-                dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-                setActivePath(path);
-            }
-        };
+        dispatch(changeUserInput({input: tmpl(path)}));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+        setActivePath(path);
+    };
 
     return {
         createTable: inputQuery(createTableTemplate, 'script'),
@@ -56,11 +53,7 @@ const bindActions = (
         upsertQuery: inputQuery(upsertQueryTemplate),
         createExternalTable: inputQuery(createExternalTableTemplate, 'script'),
         dropExternalTable: inputQuery(dropExternalTableTemplate, 'script'),
-        selectQueryFromExternalTable: inputQuery(
-            selectQueryTemplate,
-            'query',
-            i18n('actions.externalTableSelectUnavailable'),
-        ),
+        selectQueryFromExternalTable: inputQuery(selectQueryTemplate, 'query'),
         createTopic: inputQuery(createTopicTemplate, 'script'),
         alterTopic: inputQuery(alterTopicTemplate, 'script'),
         dropTopic: inputQuery(dropTopicTemplate, 'script'),

package/dist/containers/UserSettings/i18n/en.json

@@ -22,12 +22,6 @@
   "settings.useBackendParamsForTables.title": "Use virtual table for cluster Nodes tab",
   "settings.useBackendParamsForTables.popover": "Use table with data load on scroll. It will increase performance, but could work unstable",
 
-  "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",
-
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
-  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
-
-  "settings.tenantDiagnostics.title": "Display metrics cards for database diagnostics",
-  "settings.tenantDiagnostics.popover": "Adds indicators of database resources usage. Incomplete data may be displayed for some databases"
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -22,12 +22,6 @@
   "settings.useBackendParamsForTables.title": "Использовать виртуализированную таблицу для вкладки Nodes кластера",
   "settings.useBackendParamsForTables.popover": "Использовать таблицу с загрузкой данных по скроллу. Это улучшит производительность, но может работать нестабильно",
 
-  "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",
-
   "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
-  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще",
-
-  "settings.tenantDiagnostics.title": "Показывать карточки с метриками в диагностике базы данных",
-  "settings.tenantDiagnostics.popover": "Добавляет индикаторы использования ресурсов базы данных. Для некоторых баз могут отображаться неполные данные"
+  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
 }

package/dist/containers/UserSettings/settings.ts

@@ -4,8 +4,6 @@ import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
-    ENABLE_ADDITIONAL_QUERY_MODES,
-    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
     THEME_KEY,
@@ -91,21 +89,11 @@ export const useBackendParamsForTables: SettingProps = {
     title: i18n('settings.useBackendParamsForTables.title'),
     helpPopoverContent: i18n('settings.useBackendParamsForTables.popover'),
 };
-export const enableQueryModesForExplainSetting: SettingProps = {
-    settingKey: ENABLE_ADDITIONAL_QUERY_MODES,
-    title: i18n('settings.enableAdditionalQueryModes.title'),
-    helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
-};
 export const queryUseMultiSchemaSetting: SettingProps = {
     settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
     title: i18n('settings.queryUseMultiSchema.title'),
     helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
 };
-export const enableNewTenantDiagnosticsDesign: SettingProps = {
-    settingKey: DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
-    title: i18n('settings.tenantDiagnostics.title'),
-    helpPopoverContent: i18n('settings.tenantDiagnostics.popover'),
-};
 
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
@@ -115,13 +103,7 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [
-        useNodesEndpointSetting,
-        useBackendParamsForTables,
-        enableQueryModesForExplainSetting,
-        queryUseMultiSchemaSetting,
-        enableNewTenantDiagnosticsDesign,
-    ],
+    settings: [useNodesEndpointSetting, useBackendParamsForTables, queryUseMultiSchemaSetting],
 };
 
 export const generalPage: SettingsPage = {

package/dist/services/api.ts

@@ -34,11 +34,10 @@ import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
 import {prepareSortValue} from '../utils/filters';
+import {settingsApi} from '../utils/settings';
 
 const config = {withCredentials: !window.custom_backend};
 
-const settingsApi = window.web_version ? window.systemSettings?.settingsApi : undefined;
-
 type AxiosOptions = {
     concurrentId?: string;
 };
@@ -106,6 +105,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             {concurrentId},
         );
     }
+    /** @deprecated use getNodes instead */
     getCompute(
         {sortOrder, sortValue, ...params}: ComputeApiRequestParams,
         {concurrentId}: AxiosOptions = {},

package/dist/store/reducers/settings/settings.ts

@@ -10,18 +10,21 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     PARTITIONS_HIDDEN_COLUMNS_KEY,
     QUERY_INITIAL_MODE_KEY,
-    ENABLE_ADDITIONAL_QUERY_MODES,
     CLUSTER_INFO_HIDDEN_KEY,
     LAST_USED_QUERY_ACTION_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     LANGUAGE_KEY,
-    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {parseJson} from '../../../utils/utils';
 import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
-import {readSavedSettingsValue, systemSettings, userSettings} from '../../../utils/settings';
+import {
+    readSavedSettingsValue,
+    settingsApi,
+    systemSettings,
+    userSettings,
+} from '../../../utils/settings';
 
 import {TENANT_PAGES_IDS} from '../tenant/constants';
 
@@ -53,15 +56,7 @@ export const initialState = {
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
             'false',
         ),
-        [ENABLE_ADDITIONAL_QUERY_MODES]: readSavedSettingsValue(
-            ENABLE_ADDITIONAL_QUERY_MODES,
-            'true',
-        ),
         [QUERY_USE_MULTI_SCHEMA_KEY]: readSavedSettingsValue(QUERY_USE_MULTI_SCHEMA_KEY, 'false'),
-        [DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS]: readSavedSettingsValue(
-            DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
-            'true',
-        ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
             TENANT_INITIAL_PAGE_KEY,
@@ -115,13 +110,16 @@ export const setSettingValue = (
     name: string,
     value: string,
 ): ThunkAction<void, RootState, unknown, SetSettingValueAction> => {
-    return (dispatch, getState) => {
+    return (dispatch) => {
         dispatch({type: SET_SETTING_VALUE, data: {name, value}});
-        const {singleClusterMode} = getState();
-        if (singleClusterMode) {
-            localStorage.setItem(name, value);
-        } else {
+
+        // If there is no settingsApi, use localStorage
+        if (settingsApi) {
             window.api.postSetting(name, value);
+        } else {
+            try {
+                localStorage.setItem(name, value);
+            } catch {}
         }
     };
 };

package/dist/utils/constants.ts

@@ -19,14 +19,6 @@ export const DAY_IN_SECONDS = 24 * HOUR_IN_SECONDS;
 
 export const MS_IN_NANOSECONDS = 1000000;
 
-export const TABLET_STATES = {
-    TABLET_VOLATILE_STATE_UNKNOWN: 'unknown',
-    TABLET_VOLATILE_STATE_STOPPED: 'stopped',
-    TABLET_VOLATILE_STATE_BOOTING: 'booting',
-    TABLET_VOLATILE_STATE_STARTING: 'starting',
-    TABLET_VOLATILE_STATE_RUNNING: 'running',
-};
-
 export const TABLET_COLORS = {
     Created: 'gray',
     ResolveStateStorage: 'lightgray',
@@ -89,9 +81,6 @@ export const THEME_KEY = 'theme';
 export const LANGUAGE_KEY = 'language';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
-export const ENABLE_ADDITIONAL_QUERY_MODES = 'enableAdditionalQueryModes';
-// Remain key name "enableNewTenantDiagnosticsDesign" for backward compatibility
-export const DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS = 'enableNewTenantDiagnosticsDesign';
 export const SAVED_QUERIES_KEY = 'saved_queries';
 export const ASIDE_HEADER_COMPACT_KEY = 'asideHeaderCompact';
 export const QUERIES_HISTORY_KEY = 'queries_history';

package/dist/utils/hooks/useQueryModes.ts

@@ -1,36 +1,7 @@
 import type {QueryMode} from '../../types/store/query';
-import {ENABLE_ADDITIONAL_QUERY_MODES, QUERY_INITIAL_MODE_KEY} from '../constants';
-import {QUERY_MODES_TITLES, isNewQueryMode} from '../query';
-import createToast from '../createToast';
+import {QUERY_INITIAL_MODE_KEY} from '../constants';
 import {useSetting} from './useSetting';
-import i18n from './i18n';
 
-export type SetQueryModeIfAvailable = (
-    value: QueryMode,
-    errorMessage?: string | undefined,
-) => boolean;
-
-export const useQueryModes = (): [QueryMode, SetQueryModeIfAvailable] => {
-    const [queryMode, setQueryMode] = useSetting<QueryMode>(QUERY_INITIAL_MODE_KEY);
-    const [enableAdditionalQueryModes] = useSetting<boolean>(ENABLE_ADDITIONAL_QUERY_MODES);
-
-    const setQueryModeIfAvailable: SetQueryModeIfAvailable = (value, errorMessage) => {
-        if (isNewQueryMode(value) && !enableAdditionalQueryModes) {
-            createToast({
-                name: 'QueryModeCannotBeSet',
-                title:
-                    errorMessage ??
-                    i18n('useQueryModes.queryModeCannotBeSet', {mode: QUERY_MODES_TITLES[value]}),
-                type: 'error',
-            });
-
-            return false;
-        } else {
-            setQueryMode(value);
-
-            return true;
-        }
-    };
-
-    return [queryMode, setQueryModeIfAvailable];
+export const useQueryModes = () => {
+    return useSetting<QueryMode>(QUERY_INITIAL_MODE_KEY);
 };

package/dist/utils/query.ts

@@ -38,10 +38,6 @@ export const QUERY_SYNTAX = {
     pg: 'pg',
 } as const;
 
-export const isNewQueryMode = (value: QueryMode) => {
-    return value !== QUERY_MODES.script && value !== QUERY_MODES.scan;
-};
-
 // eslint-disable-next-line complexity
 export const getColumnType = (type: string) => {
     switch (type.replace(/\?$/, '')) {

package/dist/utils/settings.ts

@@ -3,8 +3,11 @@ import {getValueFromLS} from './utils';
 export const userSettings = window.userSettings || {};
 export const systemSettings = window.systemSettings || {};
 
+export const settingsApi = window.web_version ? systemSettings.settingsApi : undefined;
+
 export function readSavedSettingsValue(key: string, defaultValue?: string) {
-    const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
+    // If there is no settingsApi, use localStorage
+    const savedValue = settingsApi ? userSettings[key] : getValueFromLS(key);
 
     return savedValue ?? defaultValue;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.23.0",
+  "version": "4.25.0",
   "files": [
     "dist"
   ],

package/dist/containers/Tenant/Diagnostics/OldHealthcheck/Details/Details.tsx

@@ -1,64 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import {Button, Icon} from '@gravity-ui/uikit';
-
-import updateArrow from '../../../../../assets/icons/update-arrow.svg';
-
-import type {IResponseError} from '../../../../../types/api/error';
-import type {IIssuesTree} from '../../../../../types/store/healthcheck';
-import {ResponseError} from '../../../../../components/Errors/ResponseError';
-
-import IssueTree from '../../TenantOverview/Healthcheck/IssuesViewer/IssueTree';
-
-import i18n from '../../TenantOverview/Healthcheck/i18n';
-
-const b = cn('old-healthcheck');
-
-interface DetailsProps {
-    issueTrees?: IIssuesTree[];
-    loading?: boolean;
-    onUpdate: VoidFunction;
-    error?: IResponseError;
-}
-
-export const Details = (props: DetailsProps) => {
-    const {loading, onUpdate, issueTrees, error} = props;
-
-    const renderHealthcheckHeader = () => {
-        return (
-            <div className={b('details-header')}>
-                <h3 className={b('details-header-title')}>{i18n('title.healthcheck')}</h3>
-                <div className={b('details-header-update')}>
-                    <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
-                        <Icon data={updateArrow} height={20} width={20} />
-                    </Button>
-                </div>
-            </div>
-        );
-    };
-
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
-        }
-
-        if (!issueTrees || !issueTrees.length) {
-            return i18n('status_message.ok');
-        }
-
-        return (
-            <>
-                {issueTrees.map((issueTree) => (
-                    <IssueTree key={issueTree.id} issueTree={issueTree} />
-                ))}
-            </>
-        );
-    };
-
-    return (
-        <div className={b('details')}>
-            {renderHealthcheckHeader()}
-            <div className={b('details-content-wrapper')}>{renderContent()}</div>
-        </div>
-    );
-};

package/dist/containers/Tenant/Diagnostics/OldHealthcheck/Details/index.ts

@@ -1 +0,0 @@
-export * from './Details';

package/dist/containers/Tenant/Diagnostics/OldHealthcheck/Healthcheck.scss

@@ -1,137 +0,0 @@
-@import '../../../../styles/mixins.scss';
-@import '@gravity-ui/uikit/styles/mixins.scss';
-
-.old-healthcheck {
-    display: flex;
-
-    &_expanded {
-        // Since most of the inner containers have fixed width, we can set fixed width here as well
-        // Thus we will get rid of unneeded layout shift when scrollbar appear
-        min-width: 885px;
-    }
-
-    &__details {
-        width: 860px;
-        padding: 25px 20px 20px;
-    }
-
-    &__issue-preview {
-        margin-bottom: 15px;
-    }
-
-    &__details-content-wrapper {
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        height: 70vh;
-        max-height: 70vh;
-    }
-
-    &__message-container {
-        padding: 15px 0;
-    }
-
-    &__details-header {
-        display: flex;
-        align-items: center;
-
-        margin-bottom: 20px;
-    }
-
-    &__details-header-title {
-        margin: 0 10px 0 0;
-
-        @include text-header-1();
-    }
-
-    &__details-header-update {
-        margin-left: 10px;
-    }
-
-    &__preview {
-        width: 206px;
-        padding: 16px;
-        padding-bottom: 28px;
-
-        border: 1px solid var(--yc-color-line-generic);
-        border-radius: 8px;
-        background-color: transparent;
-    }
-
-    &__preview-header {
-        margin-bottom: var(--diagnostics-section-title-margin);
-        gap: 8px;
-    }
-
-    &__preview-title {
-        font-weight: 600;
-        @include lead-typography();
-    }
-
-    &__preview-content {
-        line-height: 24px;
-    }
-
-    &__preview-title-wrapper {
-        display: flex;
-        align-items: center;
-
-        margin-bottom: 4px;
-
-        gap: 8px;
-    }
-
-    &__issues-statistics {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-
-        margin: 8px 0;
-
-        gap: 10px;
-    }
-
-    &__self-check-status-indicator {
-        display: inline-block;
-
-        padding: 0 8px;
-
-        font-size: 13px;
-        line-height: 24px;
-
-        border-radius: 4px;
-
-        &_good,
-        &_green {
-            color: var(--yc-color-text-positive);
-            background-color: var(--yc-color-base-positive);
-        }
-        &_degraded,
-        &_yellow {
-            color: var(--yc-color-text-warning);
-            background-color: var(--yc-color-base-warning);
-        }
-
-        &_blue {
-            color: var(--yc-color-text-info);
-            background-color: var(--yc-color-base-info);
-        }
-
-        &_emergency,
-        &_red {
-            color: var(--yc-color-text-danger);
-            background-color: var(--yc-color-base-danger);
-        }
-        &_unspecified,
-        &_gray,
-        &_grey {
-            color: var(--yc-color-text-misc);
-            background-color: var(--yc-color-base-misc);
-        }
-        &_maintenance_required,
-        &_orange {
-            color: var(--yc-color-text-warning-heavy);
-            background-color: var(--yc-color-infographics-warning-light);
-        }
-    }
-}

package/dist/containers/Tenant/Diagnostics/OldHealthcheck/Healthcheck.tsx

@@ -1,92 +0,0 @@
-import {useCallback} from 'react';
-import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {Loader} from '@gravity-ui/uikit';
-
-import {SelfCheckResult} from '../../../../types/api/healthcheck';
-import {useTypedSelector, useAutofetcher} from '../../../../utils/hooks';
-import {
-    getHealthcheckInfo,
-    selectIssuesStatistics,
-    selectIssuesTrees,
-    setDataWasNotLoaded,
-} from '../../../../store/reducers/healthcheckInfo';
-
-import {Details} from './Details';
-import {Preview} from './Preview';
-
-import './Healthcheck.scss';
-
-interface HealthcheckProps {
-    tenant: string;
-    preview?: boolean;
-    fetchData?: boolean;
-    showMoreHandler?: VoidFunction;
-}
-
-const b = cn('old-healthcheck');
-
-export const Healthcheck = (props: HealthcheckProps) => {
-    const {tenant, preview, fetchData = true, showMoreHandler} = props;
-
-    const dispatch = useDispatch();
-
-    const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
-    const issuesStatistics = useTypedSelector(selectIssuesStatistics);
-    const issueTrees = useTypedSelector(selectIssuesTrees);
-    const {autorefresh} = useTypedSelector((state) => state.schema);
-
-    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
-
-    const fetchHealthcheck = useCallback(
-        (isBackground = true) => {
-            if (!isBackground) {
-                dispatch(setDataWasNotLoaded());
-            }
-
-            dispatch(getHealthcheckInfo(tenant));
-        },
-        [dispatch, tenant],
-    );
-
-    useAutofetcher(
-        (isBackground) => {
-            if (fetchData) {
-                fetchHealthcheck(isBackground);
-            }
-        },
-        [fetchData, fetchHealthcheck],
-        autorefresh,
-    );
-
-    const renderContent = () => {
-        if (loading && !wasLoaded) {
-            return (
-                <div className={b('old-preview', {loader: true})}>
-                    <Loader size="m" />
-                </div>
-            );
-        }
-
-        return preview ? (
-            <Preview
-                issuesStatistics={issuesStatistics}
-                selfCheckResult={selfCheckResult}
-                loading={loading}
-                onShowMore={showMoreHandler}
-                onUpdate={fetchHealthcheck}
-                error={error}
-            />
-        ) : (
-            <Details
-                loading={loading}
-                onUpdate={fetchHealthcheck}
-                issueTrees={issueTrees}
-                error={error}
-            />
-        );
-    };
-
-    return <div className={b({expanded: !preview})}>{renderContent()}</div>;
-};

package/dist/containers/Tenant/Diagnostics/OldHealthcheck/Preview/Preview.tsx

@@ -1,82 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import {Button, Icon, Link} from '@gravity-ui/uikit';
-
-import updateArrow from '../../../../../assets/icons/update-arrow.svg';
-
-import {SelfCheckResult, type StatusFlag} from '../../../../../types/api/healthcheck';
-import type {IResponseError} from '../../../../../types/api/error';
-import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
-import {ResponseError} from '../../../../../components/Errors/ResponseError';
-
-import i18n from '../../TenantOverview/Healthcheck/i18n';
-
-const b = cn('old-healthcheck');
-
-interface PreviewProps {
-    selfCheckResult: SelfCheckResult;
-    issuesStatistics?: [StatusFlag, number][];
-    loading?: boolean;
-    onShowMore?: VoidFunction;
-    onUpdate: VoidFunction;
-    error?: IResponseError;
-}
-
-export const Preview = (props: PreviewProps) => {
-    const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error} = props;
-
-    const renderHeader = () => {
-        const modifier = selfCheckResult.toLowerCase();
-
-        return (
-            <div className={b('preview-header')}>
-                <div className={b('preview-title-wrapper')}>
-                    <div className={b('preview-title')}>{i18n('title.healthcheck')}</div>
-                    <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
-                        <Icon data={updateArrow} width={20} height={20} />
-                    </Button>
-                </div>
-                <div className={b('self-check-status-indicator', {[modifier]: true})}>
-                    {selfCheckResult}
-                </div>
-            </div>
-        );
-    };
-
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
-        }
-
-        return (
-            <div className={b('preview-content')}>
-                {!issuesStatistics || !issuesStatistics.length ? (
-                    i18n('status_message.ok')
-                ) : (
-                    <>
-                        <div>{i18n('label.issues')}</div>
-                        <div className={b('issues-statistics')}>
-                            {issuesStatistics.map(([status, count]) => (
-                                <EntityStatus
-                                    key={status}
-                                    mode="icons"
-                                    status={status}
-                                    label={count.toString()}
-                                    size="l"
-                                />
-                            ))}
-                        </div>
-                        <Link onClick={() => onShowMore?.()}>{i18n('label.show-details')}</Link>
-                    </>
-                )}
-            </div>
-        );
-    };
-
-    return (
-        <div className={b('preview')}>
-            {renderHeader()}
-            {renderContent()}
-        </div>
-    );
-};

package/dist/containers/Tenant/Diagnostics/OldHealthcheck/Preview/index.ts

@@ -1 +0,0 @@
-export * from './Preview';

package/dist/containers/Tenant/Diagnostics/OldHealthcheck/index.ts

@@ -1 +0,0 @@
-export * from './Healthcheck';

package/dist/containers/Tenant/Diagnostics/TenantOverview/OldTenantOverview.tsx

@@ -1,155 +0,0 @@
-import cn from 'bem-cn-lite';
-import {useCallback} from 'react';
-import {useDispatch} from 'react-redux';
-
-import {Loader} from '@gravity-ui/uikit';
-
-import {InfoViewer} from '../../../../components/InfoViewer';
-import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
-import {Tablet} from '../../../../components/Tablet';
-import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
-import {formatCPU} from '../../../../utils/dataFormatters/dataFormatters';
-import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
-import {bytesToGB} from '../../../../utils/utils';
-import {mapDatabaseTypeToDBName} from '../../utils/schema';
-import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-import type {ETabletVolatileState} from '../../../../types/api/tenant';
-import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
-import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
-
-import i18n from './i18n';
-import './TenantOverview.scss';
-
-const b = cn('tenant-overview');
-
-interface OldTenantOverviewProps {
-    tenantName: string;
-    additionalTenantProps?: AdditionalTenantsProps;
-}
-
-export function OldTenantOverview({tenantName, additionalTenantProps}: OldTenantOverviewProps) {
-    const {tenant, loading, wasLoaded} = useTypedSelector((state) => state.tenant);
-    const {autorefresh} = useTypedSelector((state) => state.schema);
-    const dispatch = useDispatch();
-    const fetchTenant = useCallback(
-        (isBackground = true) => {
-            if (!isBackground) {
-                dispatch(setDataWasNotLoaded());
-            }
-            dispatch(getTenantInfo({path: tenantName}));
-        },
-        [dispatch, tenantName],
-    );
-
-    useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
-
-    const {
-        Metrics = {},
-        PoolStats,
-        StateStats = [],
-        MemoryUsed,
-        Name,
-        State,
-        CoresUsed,
-        StorageGroups,
-        StorageAllocatedSize,
-        Type,
-        SystemTablets,
-    } = tenant || {};
-
-    const tenantType = mapDatabaseTypeToDBName(Type);
-    const memoryRaw = MemoryUsed ?? Metrics.Memory;
-
-    const memory = (memoryRaw && bytesToGB(memoryRaw)) || i18n('no-data');
-    const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || i18n('no-data');
-    const storageGroups = StorageGroups ?? i18n('no-data');
-    const blobStorage =
-        (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || i18n('no-data');
-    const storageEfficiency =
-        Metrics.Storage && StorageAllocatedSize
-            ? `${((parseInt(Metrics.Storage) * 100) / parseInt(StorageAllocatedSize)).toFixed(2)}%`
-            : i18n('no-data');
-
-    const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
-
-    const cpu = formatCPU(cpuRaw);
-
-    const metricsInfo = [
-        {label: 'Type', value: Type},
-        {label: 'Memory', value: memory},
-        {label: 'CPU', value: cpu},
-        {label: 'Tablet storage', value: storage},
-        {label: 'Storage groups', value: storageGroups},
-        {label: 'Blob storage', value: blobStorage},
-        {label: 'Storage efficiency', value: storageEfficiency},
-    ];
-
-    const tabletsInfo = StateStats.filter(
-        (item): item is {VolatileState: ETabletVolatileState; Count: number} => {
-            return item.VolatileState !== undefined && item.Count !== undefined;
-        },
-    ).map((info) => {
-        return {label: TABLET_STATES[info.VolatileState], value: info.Count};
-    });
-
-    const renderName = () => {
-        return (
-            <div className={b('tenant-name-wrapper')}>
-                <EntityStatus
-                    status={State}
-                    name={Name || TENANT_DEFAULT_TITLE}
-                    withLeftTrim
-                    hasClipboardButton={Boolean(tenant)}
-                    clipboardButtonAlwaysVisible
-                />
-            </div>
-        );
-    };
-
-    if (loading && !wasLoaded) {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    }
-
-    return (
-        <div className={b()}>
-            <div className={b('top-label')}>{tenantType}</div>
-            <div className={b('top')}>
-                {renderName()}
-                {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
-            </div>
-            <div className={b('system-tablets')}>
-                {SystemTablets &&
-                    SystemTablets.map((tablet, tabletIndex) => (
-                        <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
-                    ))}
-            </div>
-            <div className={b('common-info')}>
-                <div>
-                    <div className={b('section-title')}>{i18n('title.pools')}</div>
-                    {PoolStats ? (
-                        <div className={b('section', {pools: true})}>
-                            {PoolStats.map((pool, poolIndex) => (
-                                <PoolUsage key={poolIndex} data={pool} />
-                            ))}
-                        </div>
-                    ) : (
-                        <div className="error">{i18n('no-pools-data')}</div>
-                    )}
-                </div>
-                <InfoViewer
-                    title={i18n('title.metrics')}
-                    className={b('section', {metrics: true})}
-                    info={metricsInfo}
-                />
-
-                <div className={b('section')}>
-                    <InfoViewer info={tabletsInfo} title="Tablets" />
-                </div>
-            </div>
-        </div>
-    );
-}

package/dist/utils/hooks/i18n/en.json

@@ -1,3 +0,0 @@
-{
-  "useQueryModes.queryModeCannotBeSet": "Query mode '{{mode}}' cannot be set. You need to turn in additional query modes in settings to enable it"
-}

package/dist/utils/hooks/i18n/index.ts

@@ -1,11 +0,0 @@
-import {i18n, Lang} from '../../../utils/i18n';
-
-import en from './en.json';
-import ru from './ru.json';
-
-const COMPONENT = 'ydb-hooks';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);

package/dist/utils/hooks/i18n/ru.json

@@ -1,3 +0,0 @@
-{
-  "useQueryModes.queryModeCannotBeSet": "Режим выполнения запроса '{{mode}}' недоступен. Вам необходимо включить дополнительные режимы выполнения запросов в настройках"
-}