ydb-embedded-ui 6.7.0 → 6.9.0

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

@@ -0,0 +1,134 @@
+import copy from 'copy-to-clipboard';
+import { changeUserInput } from '../../../store/reducers/executeQuery';
+import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
+import { setQueryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
+import createToast from '../../../utils/createToast';
+import i18n from '../i18n';
+import { alterAsyncReplicationTemplate, alterTableTemplate, alterTopicTemplate, createAsyncReplicationTemplate, createColumnTableTemplate, createExternalTableTemplate, createTableTemplate, createTopicTemplate, createViewTemplate, dropAsyncReplicationTemplate, dropExternalTableTemplate, dropTopicTemplate, dropViewTemplate, selectQueryTemplate, upsertQueryTemplate, } from './queryTemplates';
+const bindActions = (path, dispatch, additionalEffects) => {
+    const { setActivePath, setQueryMode, showCreateDirectoryDialog } = additionalEffects;
+    const inputQuery = (tmpl, mode) => () => {
+        if (mode) {
+            setQueryMode(mode);
+        }
+        dispatch(changeUserInput({ input: tmpl(path) }));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+        setActivePath(path);
+    };
+    return {
+        createDirectory: () => {
+            showCreateDirectoryDialog(path);
+        },
+        createTable: inputQuery(createTableTemplate, 'script'),
+        createColumnTable: inputQuery(createColumnTableTemplate, 'script'),
+        createAsyncReplication: inputQuery(createAsyncReplicationTemplate, 'script'),
+        alterAsyncReplication: inputQuery(alterAsyncReplicationTemplate, 'script'),
+        dropAsyncReplication: inputQuery(dropAsyncReplicationTemplate, 'script'),
+        alterTable: inputQuery(alterTableTemplate, 'script'),
+        selectQuery: inputQuery(selectQueryTemplate),
+        upsertQuery: inputQuery(upsertQueryTemplate),
+        createExternalTable: inputQuery(createExternalTableTemplate, 'script'),
+        dropExternalTable: inputQuery(dropExternalTableTemplate, 'script'),
+        selectQueryFromExternalTable: inputQuery(selectQueryTemplate, 'query'),
+        createTopic: inputQuery(createTopicTemplate, 'script'),
+        alterTopic: inputQuery(alterTopicTemplate, 'script'),
+        dropTopic: inputQuery(dropTopicTemplate, 'script'),
+        createView: inputQuery(createViewTemplate, 'script'),
+        dropView: inputQuery(dropViewTemplate, 'script'),
+        copyPath: () => {
+            try {
+                copy(path);
+                createToast({
+                    name: 'Copied',
+                    title: i18n('actions.copied'),
+                    type: 'success',
+                });
+            }
+            catch (_a) {
+                createToast({
+                    name: 'Not copied',
+                    title: i18n('actions.notCopied'),
+                    type: 'error',
+                });
+            }
+        },
+    };
+};
+export const getActions = (dispatch, additionalEffects) => (path, type) => {
+    const actions = bindActions(path, dispatch, additionalEffects);
+    const copyItem = { text: i18n('actions.copyPath'), action: actions.copyPath };
+    const DIR_SET = [
+        [copyItem],
+        [{ text: i18n('actions.createDirectory'), action: actions.createDirectory }],
+        [
+            { text: i18n('actions.createTable'), action: actions.createTable },
+            { text: i18n('actions.createColumnTable'), action: actions.createColumnTable },
+            {
+                text: i18n('actions.createAsyncReplication'),
+                action: actions.createAsyncReplication,
+            },
+            { text: i18n('actions.createTopic'), action: actions.createTopic },
+            { text: i18n('actions.createView'), action: actions.createView },
+        ],
+    ];
+    const TABLE_SET = [
+        [copyItem],
+        [
+            { text: i18n('actions.alterTable'), action: actions.alterTable },
+            { text: i18n('actions.selectQuery'), action: actions.selectQuery },
+            { text: i18n('actions.upsertQuery'), action: actions.upsertQuery },
+        ],
+    ];
+    const TOPIC_SET = [
+        [copyItem],
+        [
+            { text: i18n('actions.alterTopic'), action: actions.alterTopic },
+            { text: i18n('actions.dropTopic'), action: actions.dropTopic },
+        ],
+    ];
+    const EXTERNAL_TABLE_SET = [
+        [copyItem],
+        [
+            {
+                text: i18n('actions.selectQuery'),
+                action: actions.selectQueryFromExternalTable,
+            },
+        ],
+        [{ text: i18n('actions.dropTable'), action: actions.dropExternalTable }],
+    ];
+    const EXTERNAL_DATA_SOURCE_SET = [
+        [copyItem],
+        [{ text: i18n('actions.createExternalTable'), action: actions.createExternalTable }],
+    ];
+    const VIEW_SET = [
+        [copyItem],
+        [{ text: i18n('actions.selectQuery'), action: actions.selectQuery }],
+        [{ text: i18n('actions.dropView'), action: actions.dropView }],
+    ];
+    const ASYNC_REPLICATION_SET = [
+        [copyItem],
+        [
+            { text: i18n('actions.alterReplication'), action: actions.alterAsyncReplication },
+            { text: i18n('actions.dropReplication'), action: actions.dropAsyncReplication },
+        ],
+    ];
+    const JUST_COPY = [copyItem];
+    // verbose mapping to guarantee a correct actions set for new node types
+    // TS will error when a new type is added in the lib but is not mapped here
+    const nodeTypeToActions = {
+        async_replication: ASYNC_REPLICATION_SET,
+        database: DIR_SET,
+        directory: DIR_SET,
+        table: TABLE_SET,
+        column_table: TABLE_SET,
+        index_table: JUST_COPY,
+        topic: TOPIC_SET,
+        stream: JUST_COPY,
+        index: JUST_COPY,
+        external_table: EXTERNAL_TABLE_SET,
+        external_data_source: EXTERNAL_DATA_SOURCE_SET,
+        view: VIEW_SET,
+    };
+    return nodeTypeToActions[type];
+};

package/dist/containers/Tenants/Tenants.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import DataTable from '@gravity-ui/react-data-table';
+import { Button } from '@gravity-ui/uikit';
+import { EntitiesCount } from '../../components/EntitiesCount';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { Illustration } from '../../components/Illustration';
+import { PoolsGraph } from '../../components/PoolsGraph/PoolsGraph';
+import { ProblemFilter } from '../../components/ProblemFilter';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
+import { Search } from '../../components/Search';
+import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import { TabletsStatistic } from '../../components/TabletsStatistic';
+import { clusterName } from '../../store';
+import { ProblemFilterValues, changeFilter, selectProblemFilter, } from '../../store/reducers/settings/settings';
+import { selectFilteredTenants, selectTenantsSearchValue, } from '../../store/reducers/tenants/selectors';
+import { setSearchValue, tenantsApi } from '../../store/reducers/tenants/tenants';
+import { cn } from '../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { formatBytesToGigabyte, formatCPU, formatNumber, } from '../../utils/dataFormatters/dataFormatters';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { getTenantPath } from '../Tenant/TenantPages';
+import './Tenants.scss';
+const b = cn('tenants');
+const DATABASES_COLUMNS_WIDTH_LS_KEY = 'databasesTableColumnsWidth';
+export const Tenants = ({ additionalTenantsProps }) => {
+    const dispatch = useTypedDispatch();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { currentData, isFetching, error } = tenantsApi.useGetTenantsInfoQuery({ clusterName }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const tenants = currentData !== null && currentData !== void 0 ? currentData : [];
+    const searchValue = useTypedSelector(selectTenantsSearchValue);
+    const filteredTenants = useTypedSelector((state) => selectFilteredTenants(state, clusterName));
+    const problemFilter = useTypedSelector(selectProblemFilter);
+    const handleProblemFilterChange = (value) => {
+        dispatch(changeFilter(value));
+    };
+    const handleSearchChange = (value) => {
+        dispatch(setSearchValue(value));
+    };
+    const renderControls = () => {
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchChange, placeholder: "Database name", className: b('search') }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(EntitiesCount, { total: tenants.length, current: (filteredTenants === null || filteredTenants === void 0 ? void 0 : filteredTenants.length) || 0, label: 'Databases', loading: loading })] }));
+    };
+    const renderTable = () => {
+        const getTenantBackend = (tenant) => {
+            var _a, _b;
+            const backend = (_a = tenant.MonitoringEndpoint) !== null && _a !== void 0 ? _a : tenant.backend;
+            return (_b = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.prepareTenantBackend) === null || _b === void 0 ? void 0 : _b.call(additionalTenantsProps, backend);
+        };
+        const columns = [
+            {
+                name: 'Name',
+                header: 'Database',
+                render: ({ row }) => {
+                    var _a;
+                    const backend = getTenantBackend(row);
+                    const isExternalLink = Boolean(backend);
+                    return (_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
+                            name: row.Name,
+                            backend,
+                        }), additionalControls: _jsx("span", { className: b('monitoring-button'), children: (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type) }) }));
+                },
+                width: 440,
+                sortable: true,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'controlPlaneName',
+                header: 'Name',
+                render: ({ row }) => {
+                    return row.controlPlaneName;
+                },
+                width: 200,
+                sortable: true,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'Type',
+                width: 200,
+                resizeMinWidth: 150,
+                render: ({ row }) => {
+                    if (row.Type !== 'Serverless') {
+                        return row.Type;
+                    }
+                    return (_jsxs("div", { className: b('type'), children: [_jsx("span", { className: b('type-value'), children: row.Type }), _jsx(Button, { className: b('type-button'), onClick: () => handleSearchChange(row.sharedTenantName || ''), children: "Show shared" })] }));
+                },
+            },
+            {
+                name: 'State',
+                width: 90,
+                render: ({ row }) => (row.State ? row.State.toLowerCase() : '—'),
+                customStyle: () => ({ textTransform: 'capitalize' }),
+            },
+            {
+                name: 'cpu',
+                header: 'CPU',
+                width: 80,
+                render: ({ row }) => {
+                    // Don't show values below 0.01 when formatted
+                    if (row.cpu && row.cpu > 10000) {
+                        return formatCPU(row.cpu);
+                    }
+                    return '—';
+                },
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'memory',
+                header: 'Memory',
+                width: 120,
+                render: ({ row }) => (row.memory ? formatBytesToGigabyte(row.memory) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'storage',
+                header: 'Storage',
+                width: 120,
+                render: ({ row }) => (row.storage ? formatBytesToGigabyte(row.storage) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'nodesCount',
+                header: 'Nodes',
+                width: 100,
+                render: ({ row }) => (row.nodesCount ? formatNumber(row.nodesCount) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'groupsCount',
+                header: 'Groups',
+                width: 100,
+                render: ({ row }) => (row.groupsCount ? formatNumber(row.groupsCount) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'PoolStats',
+                header: 'Pools',
+                width: 100,
+                resizeMinWidth: 60,
+                sortAccessor: ({ PoolStats = [] }) => PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
+                defaultOrder: DataTable.DESCENDING,
+                align: DataTable.LEFT,
+                render: ({ row }) => _jsx(PoolsGraph, { pools: row.PoolStats }),
+            },
+            {
+                name: 'Tablets',
+                header: 'Tablets States',
+                sortable: false,
+                width: 500,
+                resizeMinWidth: 500,
+                render: ({ row }) => {
+                    const backend = getTenantBackend(row);
+                    return row.Tablets ? (_jsx(TabletsStatistic, { path: row.Name, tablets: row.Tablets, nodeIds: row.NodeIds || [], backend: backend })) : ('—');
+                },
+            },
+        ];
+        if (filteredTenants.length === 0 && problemFilter !== ProblemFilterValues.ALL) {
+            return _jsx(Illustration, { name: "thumbsUp", width: "200" });
+        }
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: DATABASES_COLUMNS_WIDTH_LS_KEY, data: filteredTenants, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: "No such tenants" }));
+    };
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderTable() })] }));
+};

package/dist/containers/UserSettings/Setting.d.ts

@@ -0,0 +1,20 @@
+export interface SettingsInfoFieldProps {
+    type: 'info';
+    title: string;
+    description?: React.ReactNode;
+    content: React.ReactNode;
+}
+export type SettingsElementType = 'switch' | 'radio';
+export interface SettingProps {
+    type?: SettingsElementType;
+    title: string;
+    description?: React.ReactNode;
+    settingKey: string;
+    options?: {
+        value: string;
+        content: string;
+    }[];
+    defaultValue?: unknown;
+    onValueUpdate?: VoidFunction;
+}
+export declare const Setting: ({ type, settingKey, options, defaultValue, onValueUpdate, }: SettingProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/containers/UserSettings/Setting.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioButton, Switch } from '@gravity-ui/uikit';
+import { useSetting } from '../../utils/hooks';
+export const Setting = ({ type = 'switch', settingKey, options, defaultValue, onValueUpdate, }) => {
+    const [settingValue, setValue] = useSetting(settingKey, defaultValue);
+    const onUpdate = (value) => {
+        setValue(value);
+        onValueUpdate === null || onValueUpdate === void 0 ? void 0 : onValueUpdate();
+    };
+    switch (type) {
+        case 'switch': {
+            return _jsx(Switch, { checked: Boolean(settingValue), onUpdate: onUpdate });
+        }
+        case 'radio': {
+            if (!options) {
+                return null;
+            }
+            return (_jsx(RadioButton, { value: String(settingValue), onUpdate: onUpdate, children: options.map(({ value, content }) => {
+                    return (_jsx(RadioButton.Option, { value: value, children: content }, value));
+                }) }));
+        }
+        default:
+            return null;
+    }
+};

package/dist/containers/UserSettings/UserSettings.d.ts

@@ -0,0 +1,6 @@
+import type { YDBEmbeddedUISettings } from './settings';
+interface UserSettingsProps {
+    settings?: YDBEmbeddedUISettings;
+}
+export declare const UserSettings: ({ settings: userSettings }: UserSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/UserSettings/UserSettings.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Settings } from '@gravity-ui/navigation';
+import { Setting } from './Setting';
+import { settings } from './settings';
+export const UserSettings = ({ settings: userSettings = settings }) => {
+    return (_jsx(Settings, { children: userSettings.map((page) => {
+            const { id, title, icon, sections = [] } = page;
+            return (_jsx(Settings.Page, { id: id, title: title, icon: icon, children: sections.map((section) => {
+                    const { title: sectionTitle, settings: sectionSettings = [] } = section;
+                    return (_jsx(Settings.Section, { title: sectionTitle, children: sectionSettings.map((setting) => {
+                            if (setting.type === 'info') {
+                                return (_jsx(Settings.Item, { ...setting, children: setting.content }, setting.title));
+                            }
+                            return (_jsx(Settings.Item, { ...setting, children: _jsx(Setting, { ...setting }) }, setting.title));
+                        }) }, id));
+                }) }, id));
+        }) }));
+};

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

@@ -0,0 +1,31 @@
+{
+    "page.general": "General",
+    "section.appearance": "Appearance",
+    "page.experiments": "Experiments",
+    "section.experiments": "Experiments",
+    "page.editor": "Editor",
+    "section.dev-setting": "Development settings",
+    "page.about": "About",
+    "section.about": "About",
+    "settings.editor.autocomplete.title": "Enable autocomplete",
+    "settings.editor.autocomplete.description": "You’re always able to get suggestions by pressing Ctrl+Space.",
+    "settings.editor.autocomplete-on-enter.title": "Accept suggestion on Enter",
+    "settings.editor.autocomplete-on-enter.description": "Controls whether suggestions should be accepted on Enter, in addition to Tab. Helps to avoid ambiguity between inserting new lines or accepting suggestions.",
+    "settings.theme.title": "Interface theme",
+    "settings.theme.option-dark": "Dark",
+    "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.binaryDataInPlainTextDisplay.title": "Display binary data in plain text",
+    "settings.binaryDataInPlainTextDisplay.description": "Available starting from version 24.1",
+    "settings.invertedDisks.title": "Inverted disks space indicators",
+    "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
+    "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes tab in diagnostics. It could return incorrect data on versions before 24-1",
+    "settings.useVirtualTables.title": "Use table with data load on scroll for Nodes and Storage tabs",
+    "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
+    "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
+    "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries. It enables queries with multiple result sets. It returns nothing on versions 23-3 and older",
+    "settings.about.interfaceVersionInfoField.title": "Interface version"
+}

package/dist/containers/UserSettings/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "page.general" | "section.appearance" | "page.experiments" | "section.experiments" | "page.editor" | "section.dev-setting" | "page.about" | "section.about" | "settings.editor.autocomplete.title" | "settings.editor.autocomplete.description" | "settings.editor.autocomplete-on-enter.title" | "settings.editor.autocomplete-on-enter.description" | "settings.theme.title" | "settings.theme.option-dark" | "settings.theme.option-light" | "settings.theme.option-system" | "settings.language.title" | "settings.language.option-russian" | "settings.language.option-english" | "settings.binaryDataInPlainTextDisplay.title" | "settings.binaryDataInPlainTextDisplay.description" | "settings.invertedDisks.title" | "settings.useNodesEndpoint.title" | "settings.useNodesEndpoint.popover" | "settings.useVirtualTables.title" | "settings.useVirtualTables.popover" | "settings.queryUseMultiSchema.title" | "settings.queryUseMultiSchema.popover" | "settings.about.interfaceVersionInfoField.title", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/UserSettings/settings.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleInfo, Flask, PencilToSquare, StarFill } from '@gravity-ui/icons';
+import { AUTOCOMPLETE_ON_ENTER, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, INVERTED_DISKS_KEY, LANGUAGE_KEY, QUERY_USE_MULTI_SCHEMA_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 { ClusterModeGuard } from '../ClusterModeGuard';
+import i18n from './i18n';
+import packageJson from '../../../package.json';
+const themeOptions = [
+    {
+        value: 'system',
+        content: i18n('settings.theme.option-system'),
+    },
+    {
+        value: 'light',
+        content: i18n('settings.theme.option-light'),
+    },
+    {
+        value: 'dark',
+        content: i18n('settings.theme.option-dark'),
+    },
+];
+export const themeSetting = {
+    settingKey: THEME_KEY,
+    title: i18n('settings.theme.title'),
+    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 = {
+    settingKey: LANGUAGE_KEY,
+    title: i18n('settings.language.title'),
+    type: 'radio',
+    options: languageOptions,
+    defaultValue: defaultLang,
+    onValueUpdate: () => {
+        window.location.reload();
+    },
+};
+export const binaryDataInPlainTextDisplay = {
+    settingKey: BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
+    title: i18n('settings.binaryDataInPlainTextDisplay.title'),
+    description: (_jsx(ClusterModeGuard, { mode: "multi", children: i18n('settings.binaryDataInPlainTextDisplay.description') })),
+};
+export const invertedDisksSetting = {
+    settingKey: INVERTED_DISKS_KEY,
+    title: i18n('settings.invertedDisks.title'),
+};
+export const useNodesEndpointSetting = {
+    settingKey: USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+    title: i18n('settings.useNodesEndpoint.title'),
+    description: i18n('settings.useNodesEndpoint.popover'),
+};
+export const useVirtualTables = {
+    settingKey: USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    title: i18n('settings.useVirtualTables.title'),
+    description: i18n('settings.useVirtualTables.popover'),
+};
+export const queryUseMultiSchemaSetting = {
+    settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
+    title: i18n('settings.queryUseMultiSchema.title'),
+    description: i18n('settings.queryUseMultiSchema.popover'),
+};
+export const enableAutocompleteSetting = {
+    settingKey: ENABLE_AUTOCOMPLETE,
+    title: i18n('settings.editor.autocomplete.title'),
+    description: i18n('settings.editor.autocomplete.description'),
+};
+export const autocompleteOnEnterSetting = {
+    settingKey: AUTOCOMPLETE_ON_ENTER,
+    title: i18n('settings.editor.autocomplete-on-enter.title'),
+    description: i18n('settings.editor.autocomplete-on-enter.description'),
+};
+export const interfaceVersionInfoField = {
+    title: i18n('settings.about.interfaceVersionInfoField.title'),
+    type: 'info',
+    content: packageJson.version,
+};
+export const appearanceSection = {
+    id: 'appearanceSection',
+    title: i18n('section.appearance'),
+    settings: [themeSetting, invertedDisksSetting, binaryDataInPlainTextDisplay],
+};
+export const experimentsSection = {
+    id: 'experimentsSection',
+    title: i18n('section.experiments'),
+    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
+};
+export const devSettingsSection = {
+    id: 'devSettingsSection',
+    title: i18n('section.dev-setting'),
+    settings: [enableAutocompleteSetting, autocompleteOnEnterSetting],
+};
+export const aboutSettingsSection = {
+    id: 'aboutSettingsSection',
+    title: i18n('section.about'),
+    settings: [interfaceVersionInfoField],
+};
+export const generalPage = {
+    id: 'generalPage',
+    title: i18n('page.general'),
+    icon: { data: StarFill, height: 14, width: 14 },
+    sections: [appearanceSection],
+};
+export const experimentsPage = {
+    id: 'experimentsPage',
+    title: i18n('page.experiments'),
+    icon: { data: Flask },
+    sections: [experimentsSection],
+};
+export const editorPage = {
+    id: 'editorPage',
+    title: i18n('page.editor'),
+    icon: { data: PencilToSquare },
+    sections: [devSettingsSection],
+};
+export const aboutPage = {
+    id: 'aboutPage',
+    title: i18n('page.about'),
+    icon: { data: CircleInfo },
+    sections: [aboutSettingsSection],
+};
+export const settings = [
+    generalPage,
+    editorPage,
+    experimentsPage,
+    aboutPage,
+];

package/dist/containers/VDiskPage/VDiskPage.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ArrowsOppositeToDots } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { Helmet } from 'react-helmet-async';
+import { StringParam, useQueryParams } from 'use-query-params';
+import { AutoRefreshControl } from '../../components/AutoRefreshControl/AutoRefreshControl';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
+import { GroupInfo } from '../../components/GroupInfo/GroupInfo';
+import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { PageMeta } from '../../components/PageMeta/PageMeta';
+import { VDiskWithDonorsStack } from '../../components/VDisk/VDiskWithDonorsStack';
+import { VDiskInfo } from '../../components/VDiskInfo/VDiskInfo';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { vDiskApi } from '../../store/reducers/vdisk/vdisk';
+import { valueIsDefined } from '../../utils';
+import { cn } from '../../utils/cn';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { getSeverityColor } from '../../utils/disks/helpers';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { vDiskPageKeyset } from './i18n';
+import './VDiskPage.scss';
+const vDiskPageCn = cn('ydb-vdisk-page');
+export function VDiskPage() {
+    const dispatch = useTypedDispatch();
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
+    const [{ nodeId, pDiskId, vDiskSlotId }] = useQueryParams({
+        nodeId: StringParam,
+        pDiskId: StringParam,
+        vDiskSlotId: StringParam,
+    });
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('vDisk', { nodeId, pDiskId, vDiskSlotId }));
+    }, [dispatch, nodeId, pDiskId, vDiskSlotId]);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const params = valueIsDefined(nodeId) && valueIsDefined(pDiskId) && valueIsDefined(vDiskSlotId)
+        ? { nodeId, pDiskId, vDiskSlotId }
+        : skipToken;
+    const { currentData, isFetching, refetch } = vDiskApi.useGetVDiskDataQuery(params, {
+        pollingInterval: autoRefreshInterval,
+    });
+    const loading = isFetching && currentData === undefined;
+    const { vDiskData = {}, groupData } = currentData || {};
+    const { NodeHost, NodeId, NodeType, NodeDC, PDiskId, PDiskType, Severity, VDiskId } = vDiskData;
+    const handleEvictVDisk = async () => {
+        const { GroupID, GroupGeneration, Ring, Domain, VDisk } = VDiskId || {};
+        if (valueIsDefined(GroupID) &&
+            valueIsDefined(GroupGeneration) &&
+            valueIsDefined(Ring) &&
+            valueIsDefined(Domain) &&
+            valueIsDefined(VDisk)) {
+            return window.api.evictVDisk({
+                groupId: GroupID,
+                groupGeneration: GroupGeneration,
+                failRealmIdx: Ring,
+                failDomainIdx: Domain,
+                vDiskIdx: VDisk,
+            });
+        }
+        return undefined;
+    };
+    const handleAfterEvictVDisk = async () => {
+        return refetch();
+    };
+    const renderHelmet = () => {
+        const vDiskPagePart = vDiskSlotId
+            ? `${vDiskPageKeyset('vdisk')} ${vDiskSlotId}`
+            : vDiskPageKeyset('vdisk');
+        const pDiskPagePart = pDiskId
+            ? `${vDiskPageKeyset('pdisk')} ${pDiskId}`
+            : vDiskPageKeyset('pdisk');
+        const nodePagePart = NodeHost ? NodeHost : vDiskPageKeyset('node');
+        return (_jsx(Helmet, { titleTemplate: `%s - ${vDiskPagePart} - ${pDiskPagePart} — ${nodePagePart} — YDB Monitoring`, defaultTitle: `${vDiskPagePart} - ${pDiskPagePart} — ${nodePagePart} — YDB Monitoring` }));
+    };
+    const renderPageMeta = () => {
+        const hostItem = NodeHost ? `${vDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
+        const nodeIdItem = NodeId ? `${vDiskPageKeyset('node')}: ${NodeId}` : undefined;
+        const pDiskIdItem = NodeId ? `${vDiskPageKeyset('pdisk')}: ${PDiskId}` : undefined;
+        return (_jsx(PageMeta, { loading: loading, items: [hostItem, nodeIdItem, NodeType, NodeDC, pDiskIdItem, PDiskType] }));
+    };
+    const renderPageTitle = () => {
+        return (_jsx(DiskPageTitle, { entityName: vDiskPageKeyset('vdisk'), status: getSeverityColor(Severity), id: stringifyVdiskId(vDiskData === null || vDiskData === void 0 ? void 0 : vDiskData.VDiskId) }));
+    };
+    const renderControls = () => {
+        return (_jsxs("div", { className: vDiskPageCn('controls'), children: [_jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleEvictVDisk, onConfirmActionSuccess: handleAfterEvictVDisk, buttonDisabled: !VDiskId || !isUserAllowedToMakeChanges, buttonView: "normal", dialogContent: vDiskPageKeyset('evict-vdisk-dialog'), withPopover: true, popoverContent: vDiskPageKeyset('evict-vdisk-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: [_jsx(Icon, { data: ArrowsOppositeToDots }), vDiskPageKeyset('evict-vdisk-button')] }), _jsx(AutoRefreshControl, { className: vDiskPageCn('auto-refresh-control') })] }));
+    };
+    const renderInfo = () => {
+        return _jsx(VDiskInfo, { data: vDiskData, isVDiskPage: true });
+    };
+    const renderGroupInfo = () => {
+        var _a;
+        if (groupData) {
+            return (_jsxs(React.Fragment, { children: [_jsx("div", { className: vDiskPageCn('group-title'), children: vDiskPageKeyset('group') }), _jsx(GroupInfo, { data: groupData }), _jsx("div", { className: vDiskPageCn('group-disks'), children: (_a = groupData.VDisks) === null || _a === void 0 ? void 0 : _a.map((vDisk) => {
+                            return (_jsx(VDiskWithDonorsStack, { data: vDisk, nodes: nodesMap, className: vDiskPageCn('group-disk') }, stringifyVdiskId(vDisk.VDiskId)));
+                        }) })] }));
+        }
+        return null;
+    };
+    const renderContent = () => {
+        if (loading) {
+            return _jsx(InfoViewerSkeleton, { rows: 20 });
+        }
+        return (_jsxs(React.Fragment, { children: [renderInfo(), renderGroupInfo()] }));
+    };
+    return (_jsxs("div", { className: vDiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderContent()] }));
+}