ydb-embedded-ui 5.4.0 → 5.5.0

package/dist/containers/Tablet/TabletControls/TabletControls.js

@@ -17,7 +17,8 @@ export const TabletControls = ({ tablet, fetchData }) => {
     const hasHiveId = () => {
         return HiveId && HiveId !== '0';
     };
+    const isDisabledRestart = tablet.State === ETabletState.Stopped;
     const isDisabledResume = tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
     const isDisabledStop = tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
-    return (_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.kill'), onConfirmAction: _onKillClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control') }, { children: i18n('controls.kill') })), hasHiveId() ? (_jsxs(_Fragment, { children: [_jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.stop'), onConfirmAction: _onStopClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledStop }, { children: i18n('controls.stop') })), _jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.resume'), onConfirmAction: _onResumeClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledResume }, { children: i18n('controls.resume') }))] })) : null] })));
+    return (_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.kill'), onConfirmAction: _onKillClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledRestart }, { children: i18n('controls.kill') })), hasHiveId() ? (_jsxs(_Fragment, { children: [_jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.stop'), onConfirmAction: _onStopClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledStop }, { children: i18n('controls.stop') })), _jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.resume'), onConfirmAction: _onResumeClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledResume }, { children: i18n('controls.resume') }))] })) : null] })));
 };

package/dist/containers/TabletsFilters/TabletsFilters.d.ts

@@ -13,7 +13,7 @@ export class TabletsFilters extends React.Component<any, any, any> {
         setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
         stateFilter: PropTypes.Requireable<any[]>;
         typeFilter: PropTypes.Requireable<any[]>;
-        error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
+        error: PropTypes.Requireable<PropTypes.Requireable<object> | PropTypes.Requireable<string>>;
         setHeader: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static renderLoader(): JSX.Element;
@@ -56,7 +56,7 @@ declare const _default: import("react-redux").ConnectedComponent<typeof TabletsF
     setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
     stateFilter: PropTypes.Requireable<any[]>;
     typeFilter: PropTypes.Requireable<any[]>;
-    error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
+    error: PropTypes.Requireable<PropTypes.Requireable<object> | PropTypes.Requireable<string>>;
     setHeader: PropTypes.Requireable<(...args: any[]) => any>;
 }>, "nodes" | "tablets" | "loading" | "wasLoaded" | "error" | "stateFilter" | "typeFilter" | "setStateFilter" | "setTypeFilter" | "clearWasLoadingFlag" | "getTabletsInfo" | "filteredTablets" | "timeoutForRequest">>;
 export default _default;

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -3,7 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
+import map from 'lodash/map';
+import isEqual from 'lodash/isEqual';
 import { Helmet } from 'react-helmet-async';
 import { Loader, Select } from '@gravity-ui/uikit';
 import ReactList from 'react-list';
@@ -60,11 +61,11 @@ export class TabletsFilters extends React.Component {
             const { nodeFilter, tenantPath } = this.state;
             const { tablets, filteredTablets, nodes, stateFilter, typeFilter, error } = this.props;
             const states = tabletStates.map((item) => ({ value: item, content: item }));
-            const types = Array.from(new Set(...[_.map(tablets, (tblt) => tblt.Type)])).map((item) => ({
+            const types = Array.from(new Set(...[map(tablets, (tblt) => tblt.Type)])).map((item) => ({
                 value: item,
                 content: item,
             }));
-            const nodesForSelect = _.map(nodes, (node) => ({
+            const nodesForSelect = map(nodes, (node) => ({
                 content: node.Id,
                 value: node.Id,
                 meta: node.Host,
@@ -171,9 +172,9 @@ Filters.propTypes = {
     onChangeTypes: PropTypes.func,
 };
 const MemoizedFilters = React.memo(Filters, (prevProps, nextProps) => {
-    return (_.isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
-        _.isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
-        _.isEqual(prevProps.typeFilter, nextProps.typeFilter));
+    return (isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
+        isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
+        isEqual(prevProps.typeFilter, nextProps.typeFilter));
 });
 const mapStateToProps = (state) => {
     const { nodes, wasLoaded, loading, timeoutForRequest, stateFilter, typeFilter, error } = state.tabletsFilters;

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import block from 'bem-cn-lite';
-import { escapeRegExp } from 'lodash/fp';
+import escapeRegExp from 'lodash/escapeRegExp';
 import DataTable from '@gravity-ui/react-data-table';
 import { Loader } from '../../../../components/Loader';
 import { Search } from '../../../../components/Search';

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -3,7 +3,7 @@ import React from 'react';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import _ from 'lodash';
+import reduce from 'lodash/reduce';
 import { Link } from 'react-router-dom';
 import { Loader, Checkbox } from '@gravity-ui/uikit';
 import NodeNetwork from './NodeNetwork/NodeNetwork';
@@ -60,7 +60,7 @@ class Network extends React.Component {
             };
         };
         this.groupNodesByField = (nodes, field) => {
-            return _.reduce(nodes, (acc, node) => {
+            return reduce(nodes, (acc, node) => {
                 if (!acc[node[field]]) {
                     acc[node[field]] = [node];
                 }

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { useAutofetcher, useTypedSelector, useTypedDispatch, useSetting, } from '../../../../utils/hooks';
 import { DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY } from '../../../../utils/constants';
-import { getNodesList, selectNodesMap } from '../../../../store/reducers/nodesList';
+import { selectNodesMap } from '../../../../store/reducers/nodesList';
 import { cleanTopicData, getTopic, selectConsumersNames, setDataWasNotLoaded as setTopicDataWasNotLoaded, } from '../../../../store/reducers/topic';
 import { getPartitions, setDataWasNotLoaded as setPartitionsDataWasNotLoaded, setSelectedConsumer, } from '../../../../store/reducers/partitions/partitions';
 import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
@@ -32,7 +32,6 @@ export const Partitions = ({ path }) => {
     useEffect(() => {
         dispatch(cleanTopicData());
         dispatch(setTopicDataWasNotLoaded());
-        dispatch(getNodesList());
         dispatch(getTopic(path));
         setComponentCurrentPath(path);
     }, [dispatch, path]);

package/dist/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { escapeRegExp } from 'lodash/fp';
+import escapeRegExp from 'lodash/escapeRegExp';
 import { Select, TableColumnSetup } from '@gravity-ui/uikit';
 import { Search } from '../../../../../components/Search/Search';
 import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES } from '../utils/constants';

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.js

@@ -12,6 +12,10 @@ export const cpuDashboardConfig = [
         metrics: pools.map(getPoolMetricConfig),
         options: {
             dataType: 'percent',
+            scaleRange: {
+                min: 0,
+                max: 1,
+            },
         },
     },
 ];

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
 import cn from 'bem-cn-lite';
-import MonacoEditor from 'react-monaco-editor';
+import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
 import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
 import { TextOverflow, getYdbPlanNodeShape, getTopology } from '@gravity-ui/paranoid';
@@ -12,7 +12,7 @@ import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
 import { explainVersions } from '../../../../store/reducers/explainQuery';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
-import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco';
+import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
 import { renderExplainNode } from './utils';
@@ -107,7 +107,9 @@ export function ExplainResult(props) {
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderAstExplain = () => {
-        const content = (_jsx("div", Object.assign({ className: b('ast') }, { children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent" }) })));
+        const content = (_jsx("div", Object.assign({ className: b('ast') }, { children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", 
+                // pass noop otherwise it will throw error
+                editorWillUnmount: () => { } }) })));
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderGraph = () => {

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

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useReducer, useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
-import MonacoEditor from 'react-monaco-editor';
+import throttle from 'lodash/throttle';
+import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
 import SplitPane from '../../../../components/SplitPane';
 import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, setTenantPath, } from '../../../../store/reducers/executeQuery';
 import { getExplainQuery, getExplainQueryAst } from '../../../../store/reducers/explainQuery';
@@ -62,7 +62,7 @@ function QueryEditor(props) {
                 editorRef.current.layout();
             }
         };
-        const onChangeWindow = _.throttle(() => {
+        const onChangeWindow = throttle(() => {
             updateEditor();
         }, 100);
         updateEditor();
@@ -286,7 +286,9 @@ function QueryEditor(props) {
     };
     return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs(SplitPane, Object.assign({ direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_RESULT_PANE_KEY, triggerCollapse: resultVisibilityState.triggerCollapse, triggerExpand: resultVisibilityState.triggerExpand, minSize: [0, 52], collapsedSizes: [100, 0], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsxs("div", Object.assign({ className: b('pane-wrapper', {
                         top: true,
-                    }) }, { children: [_jsx("div", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ className: b('pane-wrapper') }, { children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) }))] })) })));
+                    }) }, { children: [_jsx("div", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, 
+                                    // pass noop otherwise it will throw error
+                                    editorWillUnmount: () => { }, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ className: b('pane-wrapper') }, { children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) }))] })) })));
 }
 const mapStateToProps = (state) => {
     return {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import _ from 'lodash';
+import some from 'lodash/some';
 import cn from 'bem-cn-lite';
 import { Dialog, DropdownMenu, TextInput, Button } from '@gravity-ui/uikit';
 import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
@@ -28,7 +28,7 @@ function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }) {
         setValidationError(validateQueryName(value));
     };
     const validateQueryName = (value) => {
-        if (_.some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
+        if (some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
             return 'This name already exists';
         }
         return null;

package/dist/containers/Tenant/Tenant.js

@@ -8,7 +8,6 @@ import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '..
 import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { disableAutorefresh, getSchema } from '../../store/reducers/schema/schema';
-import { registerYQLCompletionItemProvider } from '../../utils/monaco';
 import SplitPane from '../../components/SplitPane';
 import { AccessDenied } from '../../components/Errors/403';
 import { ObjectSummary } from './ObjectSummary/ObjectSummary';
@@ -45,10 +44,16 @@ function Tenant(props) {
     });
     const { name } = queryParams;
     const tenantName = name;
-    if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
-        registerYQLCompletionItemProvider(tenantName);
-        previousTenant.current = tenantName;
-    }
+    useEffect(() => {
+        if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
+            const register = async () => {
+                const { registerYQLCompletionItemProvider } = await import('../../utils/monaco/yqlSuggestions/registerCompletionItemProvider');
+                registerYQLCompletionItemProvider(tenantName);
+            };
+            register().catch(console.error);
+            previousTenant.current = tenantName;
+        }
+    }, [tenantName]);
     useEffect(() => {
         dispatch(getSchema({ path: tenantName }));
     }, [tenantName, dispatch]);

package/dist/containers/Tenants/Tenants.js

@@ -7,6 +7,7 @@ import { PoolsGraph } from '../../components/PoolsGraph/PoolsGraph';
 import { TabletsStatistic } from '../../components/TabletsStatistic';
 import { ProblemFilter } from '../../components/ProblemFilter';
 import { Illustration } from '../../components/Illustration';
+import { EntitiesCount } from '../../components/EntitiesCount';
 import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { ResponseError } from '../../components/Errors/ResponseError';
@@ -22,7 +23,7 @@ import './Tenants.scss';
 const b = cn('tenants');
 export const Tenants = ({ additionalTenantsProps }) => {
     const dispatch = useTypedDispatch();
-    const { error, loading, wasLoaded } = useTypedSelector((state) => state.tenants);
+    const { error, loading, wasLoaded, tenants } = useTypedSelector((state) => state.tenants);
     const searchValue = useTypedSelector(selectTenantsSearchValue);
     const filteredTenants = useTypedSelector(selectFilteredTenants);
     const problemFilter = useTypedSelector(selectProblemFilter);
@@ -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(_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 && !wasLoaded })] }));
     };
     const renderTable = () => {
         const getTenantBackend = (tenant) => {

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './VDiskPage.scss';
+export declare function VDiskPage(): JSX.Element;

package/dist/containers/VDiskPage/VDiskPage.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { StringParam, useQueryParams } from 'use-query-params';
+import { Helmet } from 'react-helmet-async';
+import { Icon } from '@gravity-ui/uikit';
+import ArrowsOppositeToDotsIcon from '@gravity-ui/icons/svgs/arrows-opposite-to-dots.svg';
+import { cn } from '../../utils/cn';
+import { getSeverityColor } from '../../utils/disks/helpers';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { valueIsDefined } from '../../utils';
+import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { getVDiskData, setVDiskDataWasNotLoaded } from '../../store/reducers/vdisk/vdisk';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { PageMeta } from '../../components/PageMeta/PageMeta';
+import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
+import { GroupInfo } from '../../components/GroupInfo/GroupInfo';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { VDiskInfo } from '../../components/VDiskInfo/VDiskInfo';
+import { VDiskWithDonorsStack } from '../../components/VDisk/VDiskWithDonorsStack';
+import { vDiskPageKeyset } from './i18n';
+import './VDiskPage.scss';
+const vDiskPageCn = cn('ydb-vdisk-page');
+export function VDiskPage() {
+    const dispatch = useTypedDispatch();
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const { vDiskData, groupData, loading, wasLoaded } = useTypedSelector((state) => state.vDisk);
+    const { NodeHost, NodeId, NodeType, NodeDC, PDiskId, PDiskType, Severity, VDiskId } = vDiskData;
+    const [{ nodeId, pDiskId, vDiskSlotId }] = useQueryParams({
+        nodeId: StringParam,
+        pDiskId: StringParam,
+        vDiskSlotId: StringParam,
+    });
+    useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('vDisk', { nodeId, pDiskId, vDiskSlotId }));
+    }, [dispatch, nodeId, pDiskId, vDiskSlotId]);
+    const fetchData = useCallback(async (isBackground) => {
+        if (!isBackground) {
+            dispatch(setVDiskDataWasNotLoaded());
+        }
+        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId) && valueIsDefined(vDiskSlotId)) {
+            return dispatch(getVDiskData({ nodeId, pDiskId, vDiskSlotId }));
+        }
+        return undefined;
+    }, [dispatch, nodeId, pDiskId, vDiskSlotId]);
+    useAutofetcher(fetchData, [fetchData], true);
+    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 fetchData(true);
+    };
+    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 && !wasLoaded, 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, Object.assign({ 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(_Fragment, { children: [_jsx("div", Object.assign({ className: vDiskPageCn('group-title') }, { children: vDiskPageKeyset('group') })), _jsx(GroupInfo, { data: groupData }), _jsx("div", Object.assign({ 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 && !wasLoaded) {
+            return _jsx(InfoViewerSkeleton, { rows: 20 });
+        }
+        return (_jsxs(_Fragment, { children: [renderInfo(), renderGroupInfo()] }));
+    };
+    return (_jsxs("div", Object.assign({ className: vDiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderContent()] })));
+}

package/dist/containers/VDiskPage/VDiskPage.scss

@@ -0,0 +1,32 @@
+@import '../../styles//mixins.scss';
+
+.ydb-vdisk-page {
+    position: relative;
+
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+
+    height: 100%;
+    padding-top: 20px;
+    padding-left: 20px;
+
+    gap: 20px;
+
+    &__group-title {
+        @include header-1-typography();
+    }
+
+    &__group-disks {
+        display: flex;
+        flex-grow: 1;
+        flex-flow: row wrap;
+
+        margin-top: 20px;
+        gap: 10px;
+    }
+
+    &__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" | "pdisk" | "vdisk" | "group" | "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/groupNodes.js

@@ -1,4 +1,4 @@
-import { groupBy } from 'lodash';
+import groupBy from 'lodash/groupBy';
 import { getMinorVersion, parseNodesToVersionsValues } from '../../utils/versions';
 import { GroupByValue } from './types';
 const sortByTitle = (a, b) => { var _a; return ((_a = a.title) === null || _a === void 0 ? void 0 : _a.localeCompare(b.title || '')) || -1; };

package/dist/routes.d.ts

@@ -5,6 +5,7 @@ export declare const CLUSTER = "cluster";
 export declare const TENANT = "tenant";
 export declare const NODE = "node";
 export declare const PDISK = "pDisk";
+export declare const VDISK = "vDisk";
 export declare const TABLET = "tablet";
 declare const routes: {
     readonly clusters: "/clusters";
@@ -12,6 +13,7 @@ declare const routes: {
     readonly tenant: "/tenant";
     readonly node: "/node/:id/:activeTab?";
     readonly pDisk: "/pDisk";
+    readonly vDisk: "/vDisk";
     readonly tablet: "/tablet/:id";
     readonly tabletsFilters: "/tabletsFilters";
     readonly auth: "/auth";
@@ -27,3 +29,4 @@ export declare function getLocationObjectFromHref(href: string): {
     hash: string;
 };
 export declare function getPDiskPagePath(pDiskId: string | number, nodeId: string | number, query?: Query): string;
+export declare function getVDiskPagePath(vDiskSlotId: string | number, pDiskId: string | number, nodeId: string | number, query?: Query): string;

package/dist/routes.js

@@ -7,6 +7,7 @@ export const CLUSTER = 'cluster';
 export const TENANT = 'tenant';
 export const NODE = 'node';
 export const PDISK = 'pDisk';
+export const VDISK = 'vDisk';
 export const TABLET = 'tablet';
 const routes = {
     clusters: `/${CLUSTERS}`,
@@ -14,6 +15,7 @@ const routes = {
     tenant: `/${TENANT}`,
     node: `/${NODE}/:id/:activeTab?`,
     pDisk: `/${PDISK}`,
+    vDisk: `/${VDISK}`,
     tablet: `/${TABLET}/:id`,
     tabletsFilters: `/tabletsFilters`,
     auth: `/auth`,
@@ -63,3 +65,6 @@ export function getLocationObjectFromHref(href) {
 export function getPDiskPagePath(pDiskId, nodeId, query = {}) {
     return createHref(routes.pDisk, undefined, Object.assign(Object.assign({}, query), { nodeId, pDiskId }));
 }
+export function getVDiskPagePath(vDiskSlotId, pDiskId, nodeId, query = {}) {
+    return createHref(routes.vDisk, undefined, Object.assign(Object.assign({}, query), { nodeId, pDiskId, vDiskSlotId }));
+}

package/dist/services/api.d.ts

@@ -39,11 +39,11 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
     getNodes({ visibleEntities, type, tablets, sortOrder, sortValue, ...params }: NodesApiRequestParams, { concurrentId }?: AxiosOptions): Promise<TNodesInfo>;
     /** @deprecated use getNodes instead */
     getCompute({ sortOrder, sortValue, ...params }: ComputeApiRequestParams, { concurrentId }?: AxiosOptions): Promise<TComputeInfo>;
-    getStorageInfo({ tenant, visibleEntities, nodeId, sortOrder, sortValue, ...params }: StorageApiRequestParams, { concurrentId }?: AxiosOptions): Promise<TStorageInfo>;
+    getStorageInfo({ tenant, visibleEntities, nodeId, poolName, groupId, sortOrder, sortValue, ...params }: StorageApiRequestParams, { concurrentId }?: AxiosOptions): Promise<TStorageInfo>;
     getPdiskInfo(nodeId: string | number, pdiskId: string | number): Promise<TEvPDiskStateResponse>;
-    getVdiskInfo({ vdiskId, pdiskId, nodeId, }: {
-        vdiskId: string | number;
-        pdiskId: string | number;
+    getVdiskInfo({ vDiskSlotId, pDiskId, nodeId, }: {
+        vDiskSlotId: string | number;
+        pDiskId: string | number;
         nodeId: string | number;
     }): Promise<TEvVDiskStateResponse>;
     getGroupInfo(groupId: string | number): Promise<TStorageInfo>;
@@ -93,6 +93,13 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
     getExplainQueryAst(query: string, database: string): Promise<import("../types/api/query").ExplainQueryResponse>;
     getHotKeys(path: string, enableSampling: boolean, { concurrentId }?: AxiosOptions): Promise<JsonHotKeysResponse>;
     getHealthcheckInfo(database: string, { concurrentId }?: AxiosOptions): Promise<HealthCheckAPIResponse>;
+    evictVDisk({ groupId, groupGeneration, failRealmIdx, failDomainIdx, vDiskIdx, }: {
+        groupId: string | number;
+        groupGeneration: string | number;
+        failRealmIdx: string | number;
+        failDomainIdx: string | number;
+        vDiskIdx: string | number;
+    }): Promise<any>;
     restartPDisk(nodeId: number | string, pDiskId: number | string): Promise<any>;
     killTablet(id?: string): Promise<string>;
     stopTablet(id?: string, hiveId?: string): Promise<string>;

package/dist/services/api.js

@@ -53,19 +53,20 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         return this.get(this.getPath('/viewer/json/compute?enums=true'), Object.assign({ sort }, params), { concurrentId });
     }
     getStorageInfo(_a, _b) {
-        var { tenant, visibleEntities, nodeId, sortOrder, sortValue } = _a, params = __rest(_a, ["tenant", "visibleEntities", "nodeId", "sortOrder", "sortValue"]);
+        var { tenant, visibleEntities, nodeId, poolName, groupId, sortOrder, sortValue } = _a, params = __rest(_a, ["tenant", "visibleEntities", "nodeId", "poolName", "groupId", "sortOrder", "sortValue"]);
         var _c = _b === void 0 ? {} : _b, concurrentId = _c.concurrentId;
         const sort = prepareSortValue(sortValue, sortOrder);
-        return this.get(this.getPath(`/viewer/json/storage?enums=true`), Object.assign({ tenant, node_id: nodeId, with: visibleEntities, sort }, params), { concurrentId });
+        return this.get(this.getPath(`/viewer/json/storage?enums=true`), Object.assign({ tenant, node_id: nodeId, pool: poolName, group_id: groupId, with: visibleEntities, sort }, params), { concurrentId });
     }
     getPdiskInfo(nodeId, pdiskId) {
         return this.get(this.getPath('/viewer/json/pdiskinfo?enums=true'), {
             filter: `(NodeId=${nodeId}${pdiskId ? `;PDiskId=${pdiskId}` : ''})`,
         });
     }
-    getVdiskInfo({ vdiskId, pdiskId, nodeId, }) {
+    getVdiskInfo({ vDiskSlotId, pDiskId, nodeId, }) {
         return this.get(this.getPath('/viewer/json/vdiskinfo?enums=true'), {
-            filter: `(VDiskId=${vdiskId !== null && vdiskId !== void 0 ? vdiskId : ''};PDiskId=${pdiskId !== null && pdiskId !== void 0 ? pdiskId : ''};NodeId=${nodeId !== null && nodeId !== void 0 ? nodeId : ''})`,
+            node_id: nodeId,
+            filter: `(PDiskId=${pDiskId};VDiskSlotId=${vDiskSlotId})`,
         });
     }
     getGroupInfo(groupId) {
@@ -208,6 +209,27 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     getHealthcheckInfo(database, { concurrentId } = {}) {
         return this.get(this.getPath('/viewer/json/healthcheck?merge_records=true'), { tenant: database }, { concurrentId });
     }
+    evictVDisk({ groupId, groupGeneration, failRealmIdx, failDomainIdx, vDiskIdx, }) {
+        // BSC Id is constant for all ydb clusters
+        const BSC_TABLET_ID = '72057594037932033';
+        return this.post(this.getPath(`/tablets/app?TabletID=${BSC_TABLET_ID}&exec=1`), {
+            Command: {
+                ReassignGroupDisk: {
+                    GroupId: groupId,
+                    GroupGeneration: groupGeneration,
+                    FailRealmIdx: failRealmIdx,
+                    FailDomainIdx: failDomainIdx,
+                    VDiskIdx: vDiskIdx,
+                },
+            },
+        }, {}, {
+            headers: {
+                // This handler requires exactly this string
+                // Automatic headers may not suit
+                Accept: 'application/json',
+            },
+        });
+    }
     restartPDisk(nodeId, pDiskId) {
         const pDiskPath = createPDiskDeveloperUILink({
             nodeId,

package/dist/store/configureStore.d.ts

@@ -86,6 +86,7 @@ export declare function configureStore({ aRootReducer, singleClusterMode, api, }
         saveQuery: string | null;
         fullscreen: boolean;
         clusters: import("./reducers/clusters/types").ClustersState;
+        vDisk: import("./reducers/vdisk/types").VDiskState;
     }, any, Partial<{
         singleClusterMode: boolean | undefined;
         nodes: never;
@@ -137,6 +138,7 @@ export declare function configureStore({ aRootReducer, singleClusterMode, api, }
         saveQuery: never;
         fullscreen: never;
         clusters: never;
+        vDisk: never;
     }>> | undefined;
     singleClusterMode?: boolean | undefined;
     api?: import("../services/api").YdbEmbeddedAPI | undefined;
@@ -223,6 +225,7 @@ export declare function configureStore({ aRootReducer, singleClusterMode, api, }
         saveQuery: string | null;
         fullscreen: boolean;
         clusters: import("./reducers/clusters/types").ClustersState;
+        vDisk: import("./reducers/vdisk/types").VDiskState;
     }, any, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
         dispatch: import("redux-thunk").ThunkDispatch<{
             singleClusterMode: boolean;
@@ -305,6 +308,7 @@ export declare function configureStore({ aRootReducer, singleClusterMode, api, }
             saveQuery: string | null;
             fullscreen: boolean;
             clusters: import("./reducers/clusters/types").ClustersState;
+            vDisk: import("./reducers/vdisk/types").VDiskState;
         }, undefined, UnknownAction>;
     }, {}>, import("redux").StoreEnhancer<{}, {}>]>>;
 };

package/dist/store/defaultStore.d.ts

@@ -79,6 +79,7 @@ export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
     saveQuery: string | null;
     fullscreen: boolean;
     clusters: import("./reducers/clusters/types").ClustersState;
+    vDisk: import("./reducers/vdisk/types").VDiskState;
 }, any, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
     dispatch: import("redux-thunk").ThunkDispatch<{
         singleClusterMode: boolean;
@@ -161,6 +162,7 @@ export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
         saveQuery: string | null;
         fullscreen: boolean;
         clusters: import("./reducers/clusters/types").ClustersState;
+        vDisk: import("./reducers/vdisk/types").VDiskState;
     }, undefined, import("redux").UnknownAction>;
 }, {}>, import("redux").StoreEnhancer<{}, {}>]>>, history: import("history").History<unknown>;
 export type GetState = typeof store.getState;