ydb-embedded-ui 5.4.0 → 6.0.0

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
 import { Icon } from '../../../components/Icon';
+import { cn } from '../../../utils/cn';
 import './ToggleButton.scss';
 export var PaneVisibilityActionTypes;
 (function (PaneVisibilityActionTypes) {
@@ -42,9 +42,9 @@ export function paneVisibilityToggleReducerCreator(isPaneCollapsedKey) {
 }
 const b = cn('kv-pane-visibility-button');
 export function PaneVisibilityToggleButtons({ onCollapse, onExpand, isCollapsed, initialDirection = 'top', className, }) {
-    return (_jsxs(React.Fragment, { children: [_jsx(Button, Object.assign({ view: "flat-secondary", onClick: onCollapse, className: b({
+    return (_jsxs(React.Fragment, { children: [_jsx(Button, { view: "flat-secondary", onClick: onCollapse, className: b({
                     hidden: isCollapsed,
-                }, className), title: "Collapse" }, { children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }) }) })), _jsx(Button, Object.assign({ view: "flat-secondary", onClick: onExpand, className: b({
+                }, className), title: "Collapse", children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }) }) }), _jsx(Button, { view: "flat-secondary", onClick: onExpand, className: b({
                     hidden: !isCollapsed,
-                }, className), title: "Expand" }, { children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }, 'rotate') }) }))] }));
+                }, className), title: "Expand", children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }, 'rotate') }) })] }));
 }

package/dist/containers/Tenant/utils/schema.d.ts

@@ -13,3 +13,4 @@ export declare const isEntityWithMergedImplementation: (type?: EPathType) => boo
 export declare const isChildlessPathType: (type?: EPathType, subType?: EPathSubType) => boolean;
 export declare const isPathTypeWithTopic: (type?: EPathType) => boolean;
 export declare const isExternalTable: (type?: EPathType) => boolean;
+export declare const isRowTable: (type?: EPathType) => boolean;

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

@@ -169,3 +169,4 @@ const mapPathTypeToIsWithTopic = {
 export const isPathTypeWithTopic = (type) => { var _a; return (_a = (type && mapPathTypeToIsWithTopic[type])) !== null && _a !== void 0 ? _a : false; };
 // ====================
 export const isExternalTable = (type) => type === EPathType.EPathTypeExternalTable;
+export const isRowTable = (type) => type === EPathType.EPathTypeTable;

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

@@ -1,9 +1,8 @@
-import { Dispatch } from 'react';
 import type { NavigationTreeNodeType } from 'ydb-ui-components';
 import type { QueryMode } from '../../../types/store/query';
 interface ActionsAdditionalEffects {
     setQueryMode: (mode: QueryMode) => void;
     setActivePath: (path: string) => void;
 }
-export declare const getActions: (dispatch: Dispatch<any>, additionalEffects: ActionsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => import("@gravity-ui/uikit").DropdownMenuItemMixed<any>[];
+export declare const getActions: (dispatch: React.Dispatch<any>, additionalEffects: ActionsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => import("@gravity-ui/uikit").DropdownMenuItemMixed<any>[];
 export {};

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

@@ -1,7 +1,7 @@
 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 { TENANT_QUERY_TABS_ID, TENANT_PAGES_IDS } from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
 import i18n from '../i18n';
 import { alterTableTemplate, alterTopicTemplate, createExternalTableTemplate, createTableTemplate, createTopicTemplate, dropExternalTableTemplate, dropTopicTemplate, selectQueryTemplate, upsertQueryTemplate, } from './queryTemplates';

package/dist/containers/Tenant/utils/schemaControls.d.ts

@@ -1,7 +1,6 @@
-import { Dispatch } from 'react';
-import { NavigationTreeNodeType } from 'ydb-ui-components';
+import type { NavigationTreeNodeType } from 'ydb-ui-components';
 interface ControlsAdditionalEffects {
     setActivePath: (path: string) => void;
 }
-export declare const getControls: (dispatch: Dispatch<any>, additionalEffects: ControlsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => JSX.Element | undefined;
+export declare const getControls: (dispatch: React.Dispatch<any>, additionalEffects: ControlsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => JSX.Element | undefined;
 export {};

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@gravity-ui/uikit';
+import { Icon } from '../../../components/Icon';
 import { setShowPreview } from '../../../store/reducers/schema/schema';
-import { setQueryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
 import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
-import { Icon } from '../../../components/Icon';
+import { setQueryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
 import i18n from '../i18n';
 const bindActions = (path, dispatch, additionalEffects) => {
     const { setActivePath } = additionalEffects;
@@ -18,7 +18,7 @@ const bindActions = (path, dispatch, additionalEffects) => {
 };
 export const getControls = (dispatch, additionalEffects) => (path, type) => {
     const options = bindActions(path, dispatch, additionalEffects);
-    const openPreview = (_jsx(Button, Object.assign({ view: "flat-secondary", onClick: options.openPreview, title: i18n('actions.openPreview'), size: "s" }, { children: _jsx(Icon, { name: "tablePreview" }) })));
+    const openPreview = (_jsx(Button, { view: "flat-secondary", onClick: options.openPreview, title: i18n('actions.openPreview'), size: "s", children: _jsx(Icon, { name: "tablePreview" }) }));
     const nodeTypeToControls = {
         database: undefined,
         directory: undefined,

package/dist/containers/Tenants/Tenants.d.ts

@@ -3,5 +3,5 @@ import './Tenants.scss';
 interface TenantsProps {
     additionalTenantsProps?: AdditionalTenantsProps;
 }
-export declare const Tenants: ({ additionalTenantsProps }: TenantsProps) => JSX.Element;
+export declare const Tenants: ({ additionalTenantsProps }: TenantsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenants/Tenants.js

@@ -1,34 +1,35 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+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 { TabletsStatistic } from '../../components/TabletsStatistic';
 import { ProblemFilter } from '../../components/ProblemFilter';
-import { Illustration } from '../../components/Illustration';
 import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import { ResponseError } from '../../components/Errors/ResponseError';
-import { getTenantsInfo, setSearchValue } from '../../store/reducers/tenants/tenants';
+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 { changeFilter, ProblemFilterValues, selectProblemFilter, } from '../../store/reducers/settings/settings';
+import { setSearchValue, tenantsApi } from '../../store/reducers/tenants/tenants';
+import { cn } from '../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { formatBytesToGigabyte, formatCPU, formatNumber, } from '../../utils/dataFormatters/dataFormatters';
-import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import { clusterName } from '../../store';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getTenantPath } from '../Tenant/TenantPages';
 import './Tenants.scss';
 const b = cn('tenants');
 export const Tenants = ({ additionalTenantsProps }) => {
     const dispatch = useTypedDispatch();
-    const { error, loading, wasLoaded } = useTypedSelector((state) => state.tenants);
+    const { currentData, isFetching, error } = tenantsApi.useGetTenantsInfoQuery({ clusterName }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const loading = isFetching && currentData === undefined;
+    const tenants = currentData !== null && currentData !== void 0 ? currentData : [];
     const searchValue = useTypedSelector(selectTenantsSearchValue);
-    const filteredTenants = useTypedSelector(selectFilteredTenants);
+    const filteredTenants = useTypedSelector((state) => selectFilteredTenants(state, clusterName));
     const problemFilter = useTypedSelector(selectProblemFilter);
-    useAutofetcher(() => {
-        dispatch(getTenantsInfo(clusterName));
-    }, [dispatch], true);
     const handleProblemFilterChange = (value) => {
         dispatch(changeFilter(value));
     };
@@ -36,7 +37,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
         dispatch(setSearchValue(value));
     };
     const renderControls = () => {
-        return (_jsxs(_Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchChange, placeholder: "Database name", className: b('search') }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange })] }));
+        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) => {
@@ -52,10 +53,10 @@ export const Tenants = ({ additionalTenantsProps }) => {
                     var _a;
                     const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
-                    return (_jsxs("div", Object.assign({ className: b('name-wrapper') }, { children: [_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
+                    return (_jsxs("div", { className: b('name-wrapper'), children: [_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,
-                                }) }), (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type)] })));
+                                }) }), (_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,
@@ -78,7 +79,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
                     if (row.Type !== 'Serverless') {
                         return row.Type;
                     }
-                    return (_jsxs("div", Object.assign({ className: b('type') }, { children: [_jsx("span", Object.assign({ className: b('type-value') }, { children: row.Type })), _jsx(Button, Object.assign({ className: b('type-button'), onClick: () => handleSearchChange(row.sharedTenantName || '') }, { children: "Show shared" }))] })));
+                    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" })] }));
                 },
             },
             {
@@ -93,7 +94,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
                 width: 80,
                 render: ({ row }) => {
                     // Don't show values below 0.01 when formatted
-                    if (row.cpu > 10000) {
+                    if (row.cpu && row.cpu > 10000) {
                         return formatCPU(row.cpu);
                     }
                     return '—';
@@ -161,5 +162,5 @@ export const Tenants = ({ additionalTenantsProps }) => {
     if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, Object.assign({ loading: loading && !wasLoaded, className: b('table') }, { children: renderTable() }))] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, className: b('table'), children: renderTable() })] }));
 };

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

@@ -1,11 +1,11 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 export type SettingsElementType = 'switch' | 'radio';
 export interface SettingProps {
     type?: SettingsElementType;
     title: string;
-    description?: ReactNode;
+    description?: React.ReactNode;
     settingKey: string;
-    helpPopoverContent?: ReactNode;
+    helpPopoverContent?: React.ReactNode;
     options?: {
         value: string;
         content: string;
@@ -13,4 +13,4 @@ export interface SettingProps {
     defaultValue?: unknown;
     onValueUpdate?: VoidFunction;
 }
-export declare const Setting: ({ type, settingKey, title, description, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => JSX.Element;
+export declare const Setting: ({ type, settingKey, title, description, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/containers/UserSettings/Setting.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RadioButton, Switch } from '@gravity-ui/uikit';
 import { Settings } from '@gravity-ui/navigation';
+import { RadioButton, Switch } from '@gravity-ui/uikit';
 import { LabelWithPopover } from '../../components/LabelWithPopover/LabelWithPopover';
 import { useSetting } from '../../utils/hooks';
 import { b } from './UserSettings';
@@ -25,13 +25,13 @@ export const Setting = ({ type = 'switch', settingKey, title, description, helpP
                 if (!options) {
                     return null;
                 }
-                return (_jsx(RadioButton, Object.assign({ value: String(settingValue), onUpdate: onUpdate }, { children: options.map(({ value, content }) => {
-                        return (_jsx(RadioButton.Option, Object.assign({ value: value }, { children: content }), value));
-                    }) })));
+                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;
         }
     };
-    return (_jsx(Settings.Item, Object.assign({ title: title, highlightedTitle: title, description: description, renderTitleComponent: renderTitleComponent }, { children: getSettingsElement(type) })));
+    return (_jsx(Settings.Item, { title: title, highlightedTitle: title, description: description, renderTitleComponent: renderTitleComponent, children: getSettingsElement(type) }));
 };

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

@@ -1,17 +1,8 @@
-import { YDBEmbeddedUISettings } from './settings';
+import type { YDBEmbeddedUISettings } from './settings';
 import './UserSettings.scss';
-export declare const b: {
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string, mixin?: string | string[] | undefined): string;
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
-    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string): string;
-    (mods: import("bem-cn-lite").Modifications | null): string;
-    (): string;
-    builder(): import("bem-cn").Block;
-};
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
 interface UserSettingsProps {
     settings?: YDBEmbeddedUISettings;
 }
-export declare const UserSettings: ({ settings: userSettings }: UserSettingsProps) => JSX.Element;
+export declare const UserSettings: ({ settings: userSettings }: UserSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/UserSettings/UserSettings.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Settings } from '@gravity-ui/navigation';
-import { settings } from './settings';
+import { cn } from '../../utils/cn';
 import { Setting } from './Setting';
+import { settings } from './settings';
 import './UserSettings.scss';
 export const b = cn('ydb-user-settings');
 export const UserSettings = ({ settings: userSettings = settings }) => {
     return (_jsx(Settings, { children: userSettings.map((page) => {
             const { id, title, icon, sections = [] } = page;
-            return (_jsx(Settings.Page, Object.assign({ id: id, title: title, icon: icon }, { children: sections.map((section) => {
+            return (_jsx(Settings.Page, { id: id, title: title, icon: icon, children: sections.map((section) => {
                     const { title: sectionTitle, settings: sectionSettings = [] } = section;
-                    return (_jsx(Settings.Section, Object.assign({ title: sectionTitle }, { children: sectionSettings.map((setting) => {
+                    return (_jsx(Settings.Section, { title: sectionTitle, children: sectionSettings.map((setting) => {
                             return _jsx(Setting, Object.assign({}, setting), setting.settingKey);
-                        }) }), id));
-                }) }), id));
+                        }) }, id));
+                }) }, id));
         }) }));
 };

package/dist/containers/UserSettings/settings.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PencilToSquare, Flask, StarFill } from '@gravity-ui/icons';
-import { INVERTED_DISKS_KEY, LANGUAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, QUERY_USE_MULTI_SCHEMA_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, } from '../../utils/constants';
+import { Flask, PencilToSquare, StarFill } from '@gravity-ui/icons';
+import { 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 i18n from './i18n';
 import { ClusterModeGuard } from '../ClusterModeGuard';
+import i18n from './i18n';
 const themeOptions = [
     {
         value: 'system',
@@ -47,7 +47,7 @@ export const languageSetting = {
 export const binaryDataInPlainTextDisplay = {
     settingKey: BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
     title: i18n('settings.binaryDataInPlainTextDisplay.title'),
-    description: (_jsx(ClusterModeGuard, Object.assign({ mode: "multi" }, { children: i18n('settings.binaryDataInPlainTextDisplay.description') }))),
+    description: (_jsx(ClusterModeGuard, { mode: "multi", children: i18n('settings.binaryDataInPlainTextDisplay.description') })),
 };
 export const invertedDisksSetting = {
     settingKey: INVERTED_DISKS_KEY,

package/dist/containers/VDiskPage/VDiskPage.d.ts

@@ -0,0 +1,2 @@
+import './VDiskPage.scss';
+export declare function VDiskPage(): import("react/jsx-runtime").JSX.Element;

package/dist/containers/VDiskPage/VDiskPage.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+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 { 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 { DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { getSeverityColor } from '../../utils/disks/helpers';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { vDiskPageKeyset } from './i18n';
+import ArrowsOppositeToDotsIcon from '@gravity-ui/icons/svgs/arrows-opposite-to-dots.svg';
+import './VDiskPage.scss';
+const vDiskPageCn = cn('ydb-vdisk-page');
+export function VDiskPage() {
+    const dispatch = useTypedDispatch();
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const [{ nodeId, pDiskId, vDiskSlotId }] = useQueryParams({
+        nodeId: StringParam,
+        pDiskId: StringParam,
+        vDiskSlotId: StringParam,
+    });
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('vDisk', { nodeId, pDiskId, vDiskSlotId }));
+    }, [dispatch, nodeId, pDiskId, vDiskSlotId]);
+    const params = valueIsDefined(nodeId) && valueIsDefined(pDiskId) && valueIsDefined(vDiskSlotId)
+        ? { nodeId, pDiskId, vDiskSlotId }
+        : skipToken;
+    const { currentData, isFetching, refetch } = vDiskApi.useGetVDiskDataQuery(params, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    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 (_jsx("div", { children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleEvictVDisk, onConfirmActionSuccess: handleAfterEvictVDisk, buttonDisabled: !VDiskId, buttonView: "normal", dialogContent: vDiskPageKeyset('evict-vdisk-dialog'), children: [_jsx(Icon, { data: ArrowsOppositeToDotsIcon }), vDiskPageKeyset('evict-vdisk-button')] }) }));
+    };
+    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()] }));
+}

package/dist/containers/VDiskPage/VDiskPage.scss

@@ -0,0 +1,31 @@
+@import '../../styles//mixins.scss';
+
+.ydb-vdisk-page {
+    position: relative;
+
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+    gap: 20px;
+
+    height: 100%;
+    padding-top: 20px;
+    padding-left: 20px;
+
+    &__group-title {
+        @include header-1-typography();
+    }
+
+    &__group-disks {
+        display: flex;
+        flex-grow: 1;
+        flex-flow: row wrap;
+        gap: 10px;
+
+        margin-top: 20px;
+    }
+
+    &__group-disk {
+        width: 150px;
+    }
+}

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

@@ -0,0 +1,9 @@
+{
+    "fqdn": "FQDN",
+    "node": "Node",
+    "pdisk": "PDisk",
+    "vdisk": "VDisk",
+    "group": "Group",
+    "evict-vdisk-button": "Evict VDisk",
+    "evict-vdisk-dialog": "VDisk will be evicted. Do you want to proceed?"
+}

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

@@ -0,0 +1 @@
+export declare const vDiskPageKeyset: (key: "node" | "group" | "pdisk" | "vdisk" | "fqdn" | "evict-vdisk-button" | "evict-vdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/containers/VDiskPage/i18n/index.js

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-vDisk-page';
+export const vDiskPageKeyset = registerKeysets(COMPONENT, { en });

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.d.ts

@@ -1,17 +1,8 @@
-import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/clusterNodes';
 import type { VersionValue } from '../../../types/versions';
 import type { GroupedNodesItem } from '../types';
 import './GroupedNodesTree.scss';
-export declare const b: {
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string, mixin?: string | string[] | undefined): string;
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
-    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string): string;
-    (mods: import("bem-cn-lite").Modifications | null): string;
-    (): string;
-    builder(): import("bem-cn").Block;
-};
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
 interface GroupedNodesTreeProps {
     title?: string;
     nodes?: PreparedClusterNode[];
@@ -21,5 +12,5 @@ interface GroupedNodesTreeProps {
     versionsValues?: VersionValue[];
     level?: number;
 }
-export declare const GroupedNodesTree: ({ title, nodes, items, expanded, versionColor, versionsValues, level, }: GroupedNodesTreeProps) => JSX.Element;
+export declare const GroupedNodesTree: ({ title, nodes, items, expanded, versionColor, versionsValues, level, }: GroupedNodesTreeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { TreeView } from 'ydb-ui-components';
-import { NodesTreeTitle } from '../NodesTreeTitle/NodesTreeTitle';
+import { cn } from '../../../utils/cn';
 import { NodesTable } from '../NodesTable/NodesTable';
+import { NodesTreeTitle } from '../NodesTreeTitle/NodesTreeTitle';
 import './GroupedNodesTree.scss';
 export const b = cn('ydb-versions-grouped-node-tree');
 export const GroupedNodesTree = ({ title, nodes, items, expanded = false, versionColor, versionsValues, level = 0, }) => {
-    const [isOpened, toggleBlock] = useState(false);
-    useEffect(() => {
+    const [isOpened, toggleBlock] = React.useState(false);
+    React.useEffect(() => {
         toggleBlock(expanded);
     }, [expanded]);
     const groupTitle = (_jsx(NodesTreeTitle, { title: title, nodes: nodes, items: items, versionColor: versionColor, versionsValues: versionsValues }));
@@ -16,7 +16,7 @@ export const GroupedNodesTree = ({ title, nodes, items, expanded = false, versio
         toggleBlock((value) => !value);
     };
     if (items) {
-        return (_jsx("div", Object.assign({ className: b({ 'first-level': level === 0 }) }, { children: _jsx(TreeView, Object.assign({ name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed }, { children: items.map((item, index) => (_jsx(GroupedNodesTree, { title: item.title, nodes: item.nodes, expanded: expanded, versionColor: item.versionColor, level: level + 1 }, index))) }), title) })));
+        return (_jsx("div", { className: b({ 'first-level': level === 0 }), children: _jsx(TreeView, { name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed, children: items.map((item, index) => (_jsx(GroupedNodesTree, { title: item.title, nodes: item.nodes, expanded: expanded, versionColor: item.versionColor, level: level + 1 }, index))) }, title) }));
     }
-    return (_jsx("div", Object.assign({ className: b({ 'first-level': level === 0 }) }, { children: _jsx(TreeView, Object.assign({ name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed }, { children: _jsx("div", Object.assign({ className: b('dt-wrapper') }, { children: _jsx(NodesTable, { nodes: nodes || [] }) })) }), title) })));
+    return (_jsx("div", { className: b({ 'first-level': level === 0 }), children: _jsx(TreeView, { name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed, children: _jsx("div", { className: b('dt-wrapper'), children: _jsx(NodesTable, { nodes: nodes || [] }) }) }, title) }));
 };

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -16,8 +16,7 @@
         position: relative;
         z-index: 0;
 
-        overflow-x: auto;
-        overflow-y: hidden;
+        overflow: auto hidden;
 
         margin-right: $margin-size;
         margin-left: $margin-size;
@@ -53,7 +52,7 @@
         width: $item-width;
     }
 
-    & .yc-progress__stack {
+    & .g-progress__stack {
         cursor: pointer;
     }
 }

package/dist/containers/Versions/NodesTable/NodesTable.d.ts

@@ -1,6 +1,6 @@
-import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/clusterNodes';
 interface NodesTableProps {
     nodes: PreparedClusterNode[];
 }
-export declare const NodesTable: ({ nodes }: NodesTableProps) => JSX.Element;
+export declare const NodesTable: ({ nodes }: NodesTableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Versions/NodesTable/NodesTable.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import { isUnavailableNode } from '../../../utils/nodes';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
+import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
 import { formatBytes } from '../../../utils/dataFormatters/dataFormatters';
+import { isUnavailableNode } from '../../../utils/nodes';
 import { getDefaultNodePath } from '../../Node/NodePages';
-import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
-import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
-import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 const columns = [
     {
         name: 'NodeId',

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/clusterNodes';
 import type { VersionValue } from '../../../types/versions';
 import type { GroupedNodesItem } from '../types';
 import './NodesTreeTitle.scss';
@@ -9,5 +9,5 @@ interface NodesTreeTitleProps {
     versionColor?: string;
     versionsValues?: VersionValue[];
 }
-export declare const NodesTreeTitle: ({ title, nodes, items, versionColor, versionsValues, }: NodesTreeTitleProps) => JSX.Element;
+export declare const NodesTreeTitle: ({ title, nodes, items, versionColor, versionsValues, }: NodesTreeTitleProps) => import("react/jsx-runtime").JSX.Element;
 export {};