ydb-embedded-ui 5.3.0 → 5.5.0

package/dist/containers/Storage/Storage.js

@@ -6,7 +6,7 @@ import { ResponseError } from '../../components/Errors/ResponseError';
 import { setInitialState, setVisibleEntities, setStorageTextFilter, setUsageFilter, setStorageType, setNodesUptimeFilter, setDataWasNotLoaded, getStorageNodesInfo, getStorageGroupsInfo, setNodesSortParams, setGroupsSortParams, } from '../../store/reducers/storage/storage';
 import { selectFilteredGroups, selectFilteredNodes, selectEntitiesCount, selectUsageFilterOptions, selectNodesSortParams, selectGroupsSortParams, } from '../../store/reducers/storage/selectors';
 import { VISIBLE_ENTITIES, STORAGE_TYPES } from '../../store/reducers/storage/constants';
-import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
+import { selectNodesMap } from '../../store/reducers/nodesList';
 import { useAutofetcher, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, useTypedDispatch, } from '../../utils/hooks';
 import { NodesUptimeFilterValues } from '../../utils/nodes';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
@@ -30,7 +30,6 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     const isNodePage = nodeId !== undefined;
     const storageType = isNodePage ? STORAGE_TYPES.groups : type;
     useEffect(() => {
-        dispatch(getNodesList());
         return () => {
             // Clean data on component unmount
             dispatch(setInitialState());

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -6,6 +6,7 @@
     &__vdisks-wrapper {
         display: flex;
         justify-content: center;
+        gap: 10px;
 
         min-width: 500px;
     }
@@ -13,15 +14,8 @@
         flex-grow: 1;
 
         max-width: 200px;
-        margin-right: 10px;
-
-        &:last-child {
-            margin-right: 0px;
-        }
 
         .stack__layer {
-            background: var(--g-color-base-background);
-
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
             }

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.d.ts

@@ -6,7 +6,7 @@ import './StorageGroups.scss';
 type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> & DataTableColumn<PreparedStorageGroup>;
 export declare const GROUPS_COLUMNS_IDS: {
     readonly PoolName: "PoolName";
-    readonly Kind: "Kind";
+    readonly MediaType: "MediaType";
     readonly Erasure: "Erasure";
     readonly GroupId: "GroupId";
     readonly Used: "Used";

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.js

@@ -6,21 +6,19 @@ import { EFlag } from '../../../types/api/enums';
 import shieldIcon from '../../../assets/icons/shield.svg';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { isSortableStorageProperty } from '../../../utils/storage';
-import { isFullVDiskData } from '../../../utils/disks/helpers';
 import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
-import { Stack } from '../../../components/Stack/Stack';
 import { CellWithPopover } from '../../../components/CellWithPopover/CellWithPopover';
 import { UsageLabel } from '../../../components/UsageLabel/UsageLabel';
-import { VDisk } from '../VDisk';
+import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
 import { getDegradedSeverity, getUsageSeverityForStorageGroup } from '../utils';
 import i18n from './i18n';
 import './StorageGroups.scss';
 const b = cn('global-storage-groups');
 export const GROUPS_COLUMNS_IDS = {
     PoolName: 'PoolName',
-    Kind: 'Kind',
+    MediaType: 'MediaType',
     Erasure: 'Erasure',
     GroupId: 'GroupId',
     Used: 'Used',
@@ -43,12 +41,12 @@ const poolNameColumn = {
     },
     align: DataTable.LEFT,
 };
-const kindColumn = {
-    name: GROUPS_COLUMNS_IDS.Kind,
+const typeColumn = {
+    name: GROUPS_COLUMNS_IDS.MediaType,
     header: 'Type',
     width: 100,
     align: DataTable.LEFT,
-    render: ({ row }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: row.Kind || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, Object.assign({ content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate }, { children: _jsx(Label, { children: _jsx(Icon, { data: shieldIcon }) }) })))] })),
+    render: ({ row }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: row.MediaType || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, Object.assign({ content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate }, { children: _jsx(Label, { children: _jsx(Icon, { data: shieldIcon }) }) })))] })),
     sortable: false,
 };
 const erasureColumn = {
@@ -157,25 +155,19 @@ const getVdiscksColumn = (nodes) => ({
     render: ({ row }) => {
         var _a;
         return (_jsx("div", Object.assign({ className: b('vdisks-wrapper') }, { children: (_a = row.VDisks) === null || _a === void 0 ? void 0 : _a.map((vDisk) => {
-                const donors = vDisk.Donors;
-                return donors && donors.length > 0 ? (_jsxs(Stack, Object.assign({ className: b('vdisks-item') }, { children: [_jsx(VDisk, { data: vDisk, nodes: nodes }), donors.map((donor) => {
-                            const isFullData = isFullVDiskData(donor);
-                            return (_jsx(VDisk, { data: donor, 
-                                // donor and acceptor are always in the same group
-                                nodes: nodes }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
-                        })] }), stringifyVdiskId(vDisk.VDiskId))) : (_jsx("div", Object.assign({ className: b('vdisks-item') }, { children: _jsx(VDisk, { data: vDisk, nodes: nodes }) }), stringifyVdiskId(vDisk.VDiskId)));
+                return (_jsx(VDiskWithDonorsStack, { data: vDisk, nodes: nodes, className: b('vdisks-item') }, stringifyVdiskId(vDisk.VDiskId)));
             }) })));
     },
     align: DataTable.CENTER,
     width: 900,
 });
 export const getStorageTopGroupsColumns = () => {
-    return [groupIdColumn, kindColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
+    return [groupIdColumn, typeColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
 };
 export const getPDiskStorageColumns = (nodes) => {
     return [
         poolNameColumn,
-        kindColumn,
+        typeColumn,
         erasureColumn,
         degradedColumn,
         groupIdColumn,
@@ -187,7 +179,7 @@ export const getPDiskStorageColumns = (nodes) => {
 const getStorageGroupsColumns = (nodes) => {
     return [
         poolNameColumn,
-        kindColumn,
+        typeColumn,
         erasureColumn,
         degradedColumn,
         usageColumn,

package/dist/containers/Storage/VirtualStorage.js

@@ -1,24 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
 import { NodesUptimeFilterValues } from '../../utils/nodes';
 import { AccessDenied } from '../../components/Errors/403/AccessDenied';
 import { ResponseError } from '../../components/Errors/ResponseError/ResponseError';
-import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { useTypedSelector } from '../../utils/hooks';
 import { StorageControls } from './StorageControls/StorageControls';
 import { VirtualStorageGroups } from './StorageGroups/VirtualStorageGroups';
 import { VirtualStorageNodes } from './StorageNodes/VirtualStorageNodes';
 export const VirtualStorage = ({ tenant, nodeId, parentContainer, additionalNodesProps, }) => {
-    const dispatch = useTypedDispatch();
     const [searchValue, setSearchValue] = useState('');
     const [storageType, setStorageType] = useState(STORAGE_TYPES.groups);
     const [visibleEntities, setVisibleEntities] = useState(VISIBLE_ENTITIES.all);
     const [nodesUptimeFilter, setNodesUptimeFilter] = useState(NodesUptimeFilterValues.All);
     const nodesMap = useTypedSelector(selectNodesMap);
-    useEffect(() => {
-        dispatch(getNodesList());
-    }, [dispatch]);
     const handleShowAllGroups = () => {
         setVisibleEntities(VISIBLE_ENTITIES.all);
     };

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

@@ -1,12 +1,21 @@
 import i18n from '../i18n';
+const pools = ['IC', 'IO', 'Batch', 'User', 'System'];
+const getPoolMetricConfig = (poolName) => {
+    return {
+        target: `resources.cpu.${poolName}.usage`,
+        title: poolName,
+    };
+};
 export const cpuDashboardConfig = [
     {
         title: i18n('charts.cpu-usage'),
-        metrics: [
-            {
-                target: 'resources.cpu.usage',
-                title: i18n('charts.cpu-usage'),
+        metrics: pools.map(getPoolMetricConfig),
+        options: {
+            dataType: 'percent',
+            scaleRange: {
+                min: 0,
+                max: 1,
             },
-        ],
+        },
     },
 ];

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

@@ -18,7 +18,7 @@
     "by-size": "by size",
     "charts.queries-per-second": "Queries per second",
     "charts.transaction-latency": "Transactions latencies {{percentile}}",
-    "charts.cpu-usage": "CPU cores used",
+    "charts.cpu-usage": "CPU usage by pool",
     "charts.storage-usage": "Tablet storage usage",
     "charts.memory-usage": "Memory usage",
     "storage.tablet-storage-title": "Tablet storage",

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 });