ydb-embedded-ui 4.15.1 → 4.16.1

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

@@ -1,13 +1,14 @@
 import cn from 'bem-cn-lite';
 
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Link} from '@gravity-ui/uikit';
 
 import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 
-import {SelfCheckResult} from '../../../../../types/api/healthcheck';
-import type {IIssuesTree} from '../../../../../types/store/healthcheck';
-
-import {PreviewItem} from './PreviewItem';
+import {SelfCheckResult, type StatusFlag} from '../../../../../types/api/healthcheck';
+import type {IResponseError} from '../../../../../types/api/error';
+import {DiagnosticCard} from '../../../../../components/DiagnosticCard/DiagnosticCard';
+import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import i18n from '../i18n';
 
@@ -15,21 +16,18 @@ const b = cn('healthcheck');
 
 interface PreviewProps {
     selfCheckResult: SelfCheckResult;
-    issuesTrees?: IIssuesTree[];
+    issuesStatistics?: [StatusFlag, number][];
     loading?: boolean;
-    onShowMore?: (id: string) => void;
+    onShowMore?: VoidFunction;
     onUpdate: VoidFunction;
+    error?: IResponseError;
 }
 
 export const Preview = (props: PreviewProps) => {
-    const {selfCheckResult, issuesTrees, loading, onShowMore, onUpdate} = props;
+    const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error} = props;
 
     const isStatusOK = selfCheckResult === SelfCheckResult.GOOD;
 
-    if (!issuesTrees) {
-        return null;
-    }
-
     const renderStatus = () => {
         const modifier = selfCheckResult.toLowerCase();
 
@@ -46,26 +44,40 @@ export const Preview = (props: PreviewProps) => {
         );
     };
 
-    const renderFirstLevelIssues = () => {
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
+        }
+
         return (
             <div className={b('preview-content')}>
-                {isStatusOK
-                    ? i18n('status_message.ok')
-                    : issuesTrees?.map((issueTree) => (
-                          <PreviewItem
-                              key={issueTree.id}
-                              data={issueTree}
-                              onShowMore={onShowMore}
-                          />
-                      ))}
+                {isStatusOK || !issuesStatistics || !issuesStatistics.length ? (
+                    i18n('status_message.ok')
+                ) : (
+                    <>
+                        <div>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')}>
+        <DiagnosticCard className={b('preview')}>
             {renderStatus()}
-            {renderFirstLevelIssues()}
-        </div>
+            {renderContent()}
+        </DiagnosticCard>
     );
 };

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

@@ -0,0 +1,155 @@
+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';
+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 TenantOverviewProps {
+    tenantName: string;
+    additionalTenantInfo?: AdditionalTenantsProps;
+}
+
+export function TenantOverview({tenantName, additionalTenantInfo}: TenantOverviewProps) {
+    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()}
+                {additionalTenantInfo?.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/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "no-data": "No data",
+  "no-pools-data": "No pools data",
+
+  "title.pools": "Pools",
+  "title.metrics": "Metrics"
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/index.ts

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

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "no-data": "Нет данных",
+  "no-pools-data": "Нет данных о пулах",
+
+  "title.pools": "Пулы",
+  "title.metrics": "Метрики"
+}

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -4,6 +4,7 @@ import cn from 'bem-cn-lite';
 import {useThemeValue} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../types/api/schema';
+import type {AdditionalTenantsProps, AdditionalNodesProps} from '../../../types/additionalProps';
 import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import {useSetting} from '../../../utils/hooks';
 import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
@@ -18,8 +19,8 @@ const b = cn('object-general');
 
 interface ObjectGeneralProps {
     type?: EPathType;
-    additionalTenantInfo?: any;
-    additionalNodesInfo?: any;
+    additionalTenantInfo?: AdditionalTenantsProps;
+    additionalNodesInfo?: AdditionalNodesProps;
 }
 
 function ObjectGeneral(props: ObjectGeneralProps) {

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

@@ -9,11 +9,14 @@
     @include flex-container();
     @include table-styles;
 
+    &__table-row {
+        cursor: pointer;
+    }
+
     &__query {
         overflow: hidden;
         flex-grow: 1;
 
-        cursor: pointer;
         white-space: pre;
         text-overflow: ellipsis;
     }

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

@@ -3,10 +3,13 @@ import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
+import type {QueryInHistory} from '../../../../types/store/executeQuery';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
+import {selectQueriesHistory} from '../../../../store/reducers/executeQuery';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
-import {useTypedSelector} from '../../../../utils/hooks';
+import {useQueryModes, useTypedSelector} from '../../../../utils/hooks';
+import {QUERY_MODES, QUERY_MODES_TITLES, QUERY_SYNTAX} from '../../../../utils/query';
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
 import i18n from '../i18n';
@@ -22,24 +25,51 @@ interface QueriesHistoryProps {
 function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const dispatch = useDispatch();
 
-    const queriesHistory = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
+    const [queryMode, setQueryMode] = useQueryModes();
+
+    const queriesHistory = useTypedSelector(selectQueriesHistory);
     const reversedHistory = [...queriesHistory].reverse();
 
-    const onQueryClick = (queryText: string) => {
-        changeUserInput({input: queryText});
-        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    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]}),
+            );
+        } else if (query.syntax !== QUERY_SYNTAX.pg && queryMode === QUERY_MODES.pg) {
+            // Set query mode for queries with yql syntax
+            isQueryModeSet = setQueryMode(QUERY_MODES.script);
+        }
+
+        if (isQueryModeSet) {
+            changeUserInput({input: query.queryText});
+            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+        }
     };
 
-    const columns: Column<string>[] = [
+    const columns: Column<QueryInHistory>[] = [
         {
             name: 'queryText',
             header: 'Query Text',
-            render: ({row: query}) => (
-                <div className={b('query')}>
-                    <TruncatedQuery value={query} maxQueryHeight={MAX_QUERY_HEIGHT} />
-                </div>
-            ),
+            render: ({row}) => {
+                return (
+                    <div className={b('query')}>
+                        <TruncatedQuery value={row.queryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                    </div>
+                );
+            },
+            sortable: false,
+        },
+        {
+            name: 'syntax',
+            header: 'Syntax',
+            render: ({row}) => {
+                return row.syntax === QUERY_SYNTAX.pg ? 'PostgreSQL' : 'YQL';
+            },
             sortable: false,
+            width: 200,
         },
     ];
 
@@ -52,6 +82,7 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
                 settings={QUERY_TABLE_SETTINGS}
                 emptyDataMessage={i18n('history.empty')}
                 onRowClick={(row) => onQueryClick(row)}
+                rowClassName={() => b('table-row')}
             />
         </div>
     );

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

@@ -264,7 +264,7 @@ function QueryEditor(props) {
 
         const {queries, currentIndex} = history;
         if (input !== queries[currentIndex]) {
-            saveQueryToHistory(input);
+            saveQueryToHistory(input, mode);
         }
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };

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

@@ -4,7 +4,7 @@ import {Button, ButtonView, DropdownMenu} from '@gravity-ui/uikit';
 import {useMemo} from 'react';
 
 import type {QueryAction, QueryMode} from '../../../../types/store/query';
-import {QUERY_MODES} from '../../../../utils/query';
+import {QUERY_MODES, QUERY_MODES_TITLES} from '../../../../utils/query';
 import {Icon} from '../../../../components/Icon';
 import {LabelWithPopover} from '../../../../components/LabelWithPopover';
 
@@ -21,32 +21,36 @@ const b = block('ydb-query-editor-controls');
 
 const OldQueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
-        title: 'YQL Script',
+        title: QUERY_MODES_TITLES[QUERY_MODES.script],
         description: i18n('method-description.script'),
     },
     [QUERY_MODES.scan]: {
-        title: 'Scan',
+        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
         description: i18n('method-description.scan'),
     },
 } as const;
 
 const QueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
-        title: 'YQL Script',
+        title: QUERY_MODES_TITLES[QUERY_MODES.script],
         description: i18n('method-description.script'),
     },
     [QUERY_MODES.scan]: {
-        title: 'Scan',
+        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
         description: i18n('method-description.scan'),
     },
     [QUERY_MODES.data]: {
-        title: 'Data',
+        title: QUERY_MODES_TITLES[QUERY_MODES.data],
         description: i18n('method-description.data'),
     },
     [QUERY_MODES.query]: {
-        title: 'YQL - QueryService',
+        title: QUERY_MODES_TITLES[QUERY_MODES.query],
         description: i18n('method-description.query'),
     },
+    [QUERY_MODES.pg]: {
+        title: QUERY_MODES_TITLES[QUERY_MODES.pg],
+        description: i18n('method-description.pg'),
+    },
 } as const;
 
 interface QueryEditorControlsProps {

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

@@ -8,6 +8,8 @@
   "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",
@@ -21,6 +23,7 @@
   "method-description.scan": "Read-only queries, potentially reading a lot of data.\nAPI call: table.ExecuteScan",
   "method-description.data": "DML queries for changing and fetching data in serialization mode.\nAPI call: table.executeDataQuery",
   "method-description.query": "Any query. An experimental API call supposed to replace all existing methods.\nAPI Call: query.ExecuteScript",
+  "method-description.pg": "Queries in postgresql syntax.\nAPI call: query.ExecuteScript",
 
   "query-duration.description": "Duration of server-side query execution"
 }

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

@@ -8,6 +8,8 @@
   "history.empty": "История пуста",
   "saved.empty": "Нет сохраненных запросов",
 
+  "history.cannot-set-mode": "Этот запрос доступен только в режиме '{{mode}}'. Вам необходимо включить дополнительные режимы выполнения запросов в настройках",
+
   "delete-dialog.header": "Удалить запрос",
   "delete-dialog.question": "Вы уверены что хотите удалить запрос",
   "delete-dialog.delete": "Удалить",
@@ -21,6 +23,7 @@
   "method-description.scan": "Только читающие запросы, потенциально читающие много данных.\nAPI call: table.ExecuteScan",
   "method-description.data": "DML-запросы для изменения и выборки данных в режиме изоляции Serializable.\nAPI call: table.executeDataQuery",
   "method-description.query": "Любые запросы. Экспериментальный перспективный метод, который в будущем заменит все остальные.\nAPI call: query.ExecuteScript",
+  "method-description.pg": "Запросы в синтаксисе postgresql.\nAPI call: query.ExecuteScript",
 
   "query-duration.description": "Время выполнения запроса на стороне сервера"
 }

package/dist/containers/Tenant/Tenant.tsx

@@ -5,6 +5,7 @@ import {useLocation} from 'react-router';
 import qs from 'qs';
 
 import type {TEvDescribeSchemeResult} from '../../types/api/schema';
+import type {AdditionalTenantsProps, AdditionalNodesProps} from '../../types/additionalProps';
 
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
 import {useTypedSelector} from '../../utils/hooks';
@@ -37,8 +38,8 @@ const initialTenantSummaryState = {
 };
 
 interface TenantProps {
-    additionalTenantInfo?: any;
-    additionalNodesInfo?: any;
+    additionalTenantInfo?: AdditionalTenantsProps;
+    additionalNodesInfo?: AdditionalNodesProps;
 }
 
 function Tenant(props: TenantProps) {

package/dist/containers/UserSettings/Setting.tsx

@@ -18,6 +18,7 @@ export interface SettingProps {
     helpPopoverContent?: ReactNode;
     options?: {value: string; content: string}[];
     defaultValue?: unknown;
+    onValueUpdate?: VoidFunction;
 }
 
 export const Setting = ({
@@ -27,9 +28,15 @@ export const Setting = ({
     helpPopoverContent,
     options,
     defaultValue,
+    onValueUpdate,
 }: SettingProps) => {
     const [settingValue, setValue] = useSetting(settingKey, defaultValue);
 
+    const onUpdate = (value: unknown) => {
+        setValue(value);
+        onValueUpdate?.();
+    };
+
     const renderTitleComponent = (value: ReactNode) => {
         if (helpPopoverContent) {
             return (
@@ -48,7 +55,7 @@ export const Setting = ({
     const getSettingsElement = (elementType: SettingsElementType) => {
         switch (elementType) {
             case 'switch': {
-                return <Switch checked={Boolean(settingValue)} onUpdate={setValue} />;
+                return <Switch checked={Boolean(settingValue)} onUpdate={onUpdate} />;
             }
 
             case 'radio': {
@@ -57,7 +64,7 @@ export const Setting = ({
                 }
 
                 return (
-                    <RadioButton value={String(settingValue)} onUpdate={setValue}>
+                    <RadioButton value={String(settingValue)} onUpdate={onUpdate}>
                         {options.map(({value, content}) => {
                             return (
                                 <RadioButton.Option value={value} key={value}>

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

@@ -10,6 +10,10 @@
   "settings.theme.option-light": "Light",
   "settings.theme.option-system": "System",
 
+  "settings.language.title": "Interface language",
+  "settings.language.option-russian": "Russian",
+  "settings.language.option-english": "English",
+
   "settings.invertedDisks.title": "Inverted disks space indicators",
 
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
@@ -19,5 +23,5 @@
   "settings.useBackendParamsForTables.popover": "Filter and sort Nodes and Storage tables with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'YQL - QueryService' modes. May not work on some versions"
+  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions"
 }

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

@@ -10,6 +10,10 @@
   "settings.theme.option-light": "Светлая",
   "settings.theme.option-system": "Системная",
 
+  "settings.language.title": "Язык интерфейса",
+  "settings.language.option-russian": "Русский",
+  "settings.language.option-english": "English",
+
   "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
 
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
@@ -19,5 +23,5 @@
   "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблиц Nodes и Storage с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'YQL - QueryService'. Может работать некорректно на некоторых версиях"
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях"
 }

package/dist/containers/UserSettings/settings.ts

@@ -6,10 +6,12 @@ import flaskIcon from '../../assets/icons/flask.svg';
 import {
     ENABLE_ADDITIONAL_QUERY_MODES,
     INVERTED_DISKS_KEY,
+    LANGUAGE_KEY,
     THEME_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
+import {Lang, defaultLang} from '../../utils/i18n';
 
 import type {SettingProps} from './Setting';
 import i18n from './i18n';
@@ -50,6 +52,29 @@ export const themeSetting: SettingProps = {
     type: 'radio',
     options: themeOptions,
 };
+
+const languageOptions = [
+    {
+        value: Lang.Ru,
+        content: i18n('settings.language.option-russian'),
+    },
+    {
+        value: Lang.En,
+        content: i18n('settings.language.option-english'),
+    },
+];
+
+export const languageSetting: SettingProps = {
+    settingKey: LANGUAGE_KEY,
+    title: i18n('settings.language.title'),
+    type: 'radio',
+    options: languageOptions,
+    defaultValue: defaultLang,
+    onValueUpdate: () => {
+        window.location.reload();
+    },
+};
+
 export const invertedDisksSetting: SettingProps = {
     settingKey: INVERTED_DISKS_KEY,
     title: i18n('settings.invertedDisks.title'),