ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Storage/PDisk/PDisk.js

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
+import { DiskStateProgressBar } from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
 import { InternalLink } from '../../../components/InternalLink';
-import { Stack } from '../../../components/Stack/Stack';
+import { PDiskPopup } from '../../../components/PDiskPopup/PDiskPopup';
+import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
 import routes, { createHref } from '../../../routes';
+import { cn } from '../../../utils/cn';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { isFullVDiskData } from '../../../utils/disks/helpers';
 import { STRUCTURE } from '../../Node/NodePages';
-import { DiskStateProgressBar } from '../DiskStateProgressBar';
-import { PDiskPopup } from '../PDiskPopup';
-import { VDisk } from '../VDisk';
 import './PDisk.scss';
 const b = cn('pdisk-storage');
 export const PDisk = ({ nodeId, data = {}, vDisks }) => {
-    const [isPopupVisible, setIsPopupVisible] = useState(false);
-    const anchor = useRef(null);
+    const [isPopupVisible, setIsPopupVisible] = React.useState(false);
+    const anchor = React.useRef(null);
     const showPopup = () => {
         setIsPopupVisible(true);
     };
@@ -25,17 +23,13 @@ export const PDisk = ({ nodeId, data = {}, vDisks }) => {
         if (!(vDisks === null || vDisks === void 0 ? void 0 : vDisks.length)) {
             return null;
         }
-        return (_jsx("div", Object.assign({ className: b('vdisks') }, { children: vDisks.map((vdisk) => {
-                const donors = vdisk.Donors;
-                return (_jsx("div", Object.assign({ className: b('vdisks-item'), style: {
+        return (_jsx("div", { className: b('vdisks'), children: vDisks.map((vdisk) => {
+                return (_jsx("div", { className: b('vdisks-item'), style: {
                         // 1 is small enough for empty disks to be of the minimum width
                         // but if all of them are empty, `flex-grow: 1` would size them evenly
                         flexGrow: Number(vdisk.AllocatedSize) || 1,
-                    } }, { children: donors && donors.length ? (_jsxs(Stack, Object.assign({ className: b('donors-stack') }, { children: [_jsx(VDisk, { data: vdisk, compact: true }), donors.map((donor) => {
-                                const isFullData = isFullVDiskData(donor);
-                                return (_jsx(VDisk, { compact: true, data: donor }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
-                            })] }), stringifyVdiskId(vdisk.VDiskId))) : (_jsx(VDisk, { data: vdisk, compact: true })) }), stringifyVdiskId(vdisk.VDiskId)));
-            }) })));
+                    }, children: _jsx(VDiskWithDonorsStack, { data: vdisk, compact: true, stackClassName: b('donors-stack') }) }, stringifyVdiskId(vdisk.VDiskId)));
+            }) }));
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", Object.assign({ className: b(), ref: anchor }, { children: [renderVDisks(), _jsxs(InternalLink, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' }), className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", Object.assign({ className: b('media-type') }, { children: data.Type }))] }))] }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", { className: b(), ref: anchor, children: [renderVDisks(), _jsxs(InternalLink, { to: createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' }), className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup, children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", { className: b('media-type'), children: data.Type })] })] })] }));
 };

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -25,8 +25,6 @@
         flex-shrink: 0;
 
         .stack__layer {
-            background: var(--g-color-base-background);
-
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
             }

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

@@ -5,5 +5,5 @@ interface StorageProps {
     tenant?: string;
     nodeId?: string;
 }
-export declare const Storage: ({ additionalNodesProps, tenant, nodeId }: StorageProps) => JSX.Element;
+export declare const Storage: ({ additionalNodesProps, tenant, nodeId }: StorageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/Storage.js

@@ -1,69 +1,58 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { AccessDenied } from '../../components/Errors/403';
-import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 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 { useAutofetcher, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, useTypedDispatch, } from '../../utils/hooks';
+import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
+import { filterGroups, filterNodes, getUsageFilterOptions, selectGroupsSortParams, selectNodesSortParams, } from '../../store/reducers/storage/selectors';
+import { setGroupsSortParams, setInitialState, setNodesSortParams, setStorageTextFilter, setStorageType, setUptimeFilter, setUsageFilter, setVisibleEntities, storageApi, } from '../../store/reducers/storage/storage';
+import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedDispatch, useTypedSelector, } from '../../utils/hooks';
 import { NodesUptimeFilterValues } from '../../utils/nodes';
-import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { StorageControls } from './StorageControls/StorageControls';
 import { StorageGroups } from './StorageGroups/StorageGroups';
 import { StorageNodes } from './StorageNodes/StorageNodes';
-import { StorageControls } from './StorageControls/StorageControls';
 import { b } from './shared';
 import './Storage.scss';
 export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     const dispatch = useTypedDispatch();
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error, type, visible: visibleEntities, filter, usageFilter, nodesUptimeFilter, } = useTypedSelector((state) => state.storage);
-    const storageNodes = useTypedSelector(selectFilteredNodes);
-    const storageGroups = useTypedSelector(selectFilteredGroups);
-    const entitiesCount = useTypedSelector(selectEntitiesCount);
+    const { type, visible: visibleEntities, filter, usageFilter, uptimeFilter, } = useTypedSelector((state) => state.storage);
     const nodesMap = useTypedSelector(selectNodesMap);
-    const usageFilterOptions = useTypedSelector(selectUsageFilterOptions);
     const nodesSortParams = useTypedSelector(selectNodesSortParams);
     const groupsSortParams = useTypedSelector(selectGroupsSortParams);
     // Do not display Nodes table for Node page (NodeId present)
     const isNodePage = nodeId !== undefined;
     const storageType = isNodePage ? STORAGE_TYPES.groups : type;
-    useEffect(() => {
-        dispatch(getNodesList());
+    const nodesRequestParams = useNodesRequestParams(Object.assign({ filter, nodesUptimeFilter: uptimeFilter }, nodesSortParams));
+    const storageRequestParams = useStorageRequestParams(Object.assign({ filter }, groupsSortParams));
+    const autoRefreshInterval = tenant ? autorefresh : DEFAULT_POLLING_INTERVAL;
+    const nodesQuery = storageApi.useGetStorageNodesInfoQuery(Object.assign({ tenant, visibleEntities }, nodesRequestParams), {
+        skip: storageType !== STORAGE_TYPES.nodes,
+        pollingInterval: autoRefreshInterval,
+    });
+    const groupsQuery = storageApi.useGetStorageGroupsInfoQuery(Object.assign({ tenant, visibleEntities, nodeId }, storageRequestParams), {
+        skip: storageType !== STORAGE_TYPES.groups,
+        pollingInterval: autoRefreshInterval,
+    });
+    const { currentData, isFetching, error } = storageType === STORAGE_TYPES.nodes ? nodesQuery : groupsQuery;
+    const { currentData: { nodes = [] } = {} } = nodesQuery;
+    const { currentData: { groups = [] } = {} } = groupsQuery;
+    const _a = currentData !== null && currentData !== void 0 ? currentData : { found: 0, total: 0 }, { nodes: _, groups: __ } = _a, entitiesCount = __rest(_a, ["nodes", "groups"]);
+    const isLoading = currentData === undefined && isFetching;
+    const storageNodes = React.useMemo(() => filterNodes(nodes, filter, uptimeFilter), [filter, nodes, uptimeFilter]);
+    const storageGroups = React.useMemo(() => filterGroups(groups, filter, usageFilter), [filter, groups, usageFilter]);
+    const usageFilterOptions = React.useMemo(() => getUsageFilterOptions(groups), [groups]);
+    React.useEffect(() => {
         return () => {
             // Clean data on component unmount
             dispatch(setInitialState());
         };
     }, [dispatch]);
-    const nodesRequestParams = useNodesRequestParams(Object.assign({ filter,
-        nodesUptimeFilter }, nodesSortParams));
-    const storageRequestParams = useStorageRequestParams(Object.assign({ filter }, groupsSortParams));
     const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) => dispatch(setNodesSortParams(params)));
     const [groupsSort, handleGroupsSort] = useTableSort(groupsSortParams, (params) => dispatch(setGroupsSortParams(params)));
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        const nodesParams = nodesRequestParams || {};
-        const storageParams = storageRequestParams || {};
-        if (storageType === STORAGE_TYPES.nodes) {
-            dispatch(getStorageNodesInfo(Object.assign({ tenant, visibleEntities }, nodesParams)));
-        }
-        else {
-            dispatch(getStorageGroupsInfo(Object.assign({ tenant, visibleEntities, nodeId }, storageParams)));
-        }
-    }, [
-        dispatch,
-        tenant,
-        nodeId,
-        visibleEntities,
-        storageType,
-        storageRequestParams,
-        nodesRequestParams,
-    ]);
-    const autorefreshEnabled = tenant ? autorefresh : true;
-    useAutofetcher(fetchData, [fetchData], autorefreshEnabled);
     const handleUsageFilterChange = (value) => {
         dispatch(setUsageFilter(value));
     };
@@ -77,19 +66,19 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
         dispatch(setStorageType(value));
     };
     const handleUptimeFilterChange = (value) => {
-        dispatch(setNodesUptimeFilter(value));
+        dispatch(setUptimeFilter(value));
     };
     const handleShowAllNodes = () => {
         handleGroupVisibilityChange(VISIBLE_ENTITIES.all);
         handleUptimeFilterChange(NodesUptimeFilterValues.All);
     };
     const renderDataTable = () => {
-        return (_jsxs(_Fragment, { children: [storageType === STORAGE_TYPES.groups && (_jsx(StorageGroups, { visibleEntities: visibleEntities, data: storageGroups, tableSettings: DEFAULT_TABLE_SETTINGS, nodes: nodesMap, onShowAll: () => handleGroupVisibilityChange(VISIBLE_ENTITIES.all), sort: groupsSort, handleSort: handleGroupsSort })), storageType === STORAGE_TYPES.nodes && (_jsx(StorageNodes, { visibleEntities: visibleEntities, nodesUptimeFilter: nodesUptimeFilter, data: storageNodes, tableSettings: DEFAULT_TABLE_SETTINGS, onShowAll: handleShowAllNodes, additionalNodesProps: additionalNodesProps, sort: nodesSort, handleSort: handleNodesSort }))] }));
+        return (_jsxs(React.Fragment, { children: [storageType === STORAGE_TYPES.groups && (_jsx(StorageGroups, { visibleEntities: visibleEntities, data: storageGroups, tableSettings: DEFAULT_TABLE_SETTINGS, nodes: nodesMap, onShowAll: () => handleGroupVisibilityChange(VISIBLE_ENTITIES.all), sort: groupsSort, handleSort: handleGroupsSort }, "groups")), storageType === STORAGE_TYPES.nodes && (_jsx(StorageNodes, { visibleEntities: visibleEntities, nodesUptimeFilter: uptimeFilter, data: storageNodes, tableSettings: DEFAULT_TABLE_SETTINGS, onShowAll: handleShowAllNodes, additionalNodesProps: additionalNodesProps, sort: nodesSort, handleSort: handleNodesSort }, "nodes"))] }));
     };
     const renderControls = () => {
-        return (_jsx(StorageControls, { searchValue: filter, handleSearchValueChange: handleTextFilterChange, withTypeSelector: !isNodePage, storageType: storageType, handleStorageTypeChange: handleStorageTypeChange, visibleEntities: visibleEntities, handleVisibleEntitiesChange: handleGroupVisibilityChange, nodesUptimeFilter: nodesUptimeFilter, handleNodesUptimeFilterChange: handleUptimeFilterChange, groupsUsageFilter: usageFilter, groupsUsageFilterOptions: usageFilterOptions, handleGroupsUsageFilterChange: handleUsageFilterChange, entitiesCountCurrent: storageType === STORAGE_TYPES.groups
+        return (_jsx(StorageControls, { searchValue: filter, handleSearchValueChange: handleTextFilterChange, withTypeSelector: !isNodePage, storageType: storageType, handleStorageTypeChange: handleStorageTypeChange, visibleEntities: visibleEntities, handleVisibleEntitiesChange: handleGroupVisibilityChange, nodesUptimeFilter: uptimeFilter, handleNodesUptimeFilterChange: handleUptimeFilterChange, groupsUsageFilter: usageFilter, groupsUsageFilterOptions: usageFilterOptions, handleGroupsUsageFilterChange: handleUsageFilterChange, entitiesCountCurrent: storageType === STORAGE_TYPES.groups
                 ? storageGroups.length
-                : storageNodes.length, entitiesCountTotal: entitiesCount.total, entitiesLoading: loading && !wasLoaded }));
+                : storageNodes.length, entitiesCountTotal: entitiesCount.total, entitiesLoading: isLoading }));
     };
     if (error) {
         if (error.status === 403) {
@@ -97,5 +86,5 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
         }
         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: renderDataTable() }))] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: isLoading, className: b('table'), children: renderDataTable() })] }));
 };

package/dist/containers/Storage/Storage.scss

@@ -6,7 +6,7 @@
     }
 
     &__table {
-        .yc-tooltip {
+        .g-tooltip {
             // stylelint-disable-next-line declaration-no-important
             height: var(--g-text-body-2-line-height) !important;
         }

package/dist/containers/Storage/StorageControls/StorageControls.d.ts

@@ -1,6 +1,6 @@
 import type { StorageType, VisibleEntities } from '../../../store/reducers/storage/types';
-import { NodesUptimeFilterValues } from '../../../utils/nodes';
-import { type UsageFilterItem } from '../UsageFilter/UsageFilter';
+import type { NodesUptimeFilterValues } from '../../../utils/nodes';
+import type { UsageFilterItem } from '../UsageFilter/UsageFilter';
 interface StorageControlsProps {
     searchValue?: string;
     handleSearchValueChange: (value: string) => void;
@@ -19,5 +19,5 @@ interface StorageControlsProps {
     entitiesCountTotal?: number;
     entitiesLoading: boolean;
 }
-export declare const StorageControls: ({ searchValue, handleSearchValueChange, withTypeSelector, storageType, handleStorageTypeChange, visibleEntities, handleVisibleEntitiesChange, nodesUptimeFilter, handleNodesUptimeFilterChange, withGroupsUsageFilter, groupsUsageFilter, groupsUsageFilterOptions, handleGroupsUsageFilterChange, entitiesCountCurrent, entitiesCountTotal, entitiesLoading, }: StorageControlsProps) => JSX.Element;
+export declare const StorageControls: ({ searchValue, handleSearchValueChange, withTypeSelector, storageType, handleStorageTypeChange, visibleEntities, handleVisibleEntitiesChange, nodesUptimeFilter, handleNodesUptimeFilterChange, withGroupsUsageFilter, groupsUsageFilter, groupsUsageFilterOptions, handleGroupsUsageFilterChange, entitiesCountCurrent, entitiesCountTotal, entitiesLoading, }: StorageControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageControls/StorageControls.js

@@ -1,17 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { EntitiesCount } from '../../../components/EntitiesCount/EntitiesCount';
 import { Search } from '../../../components/Search/Search';
 import { UptimeFilter } from '../../../components/UptimeFIlter';
 import { STORAGE_TYPES } from '../../../store/reducers/storage/constants';
-import { UsageFilter } from '../UsageFilter/UsageFilter';
 import { StorageTypeFilter } from '../StorageTypeFilter/StorageTypeFilter';
 import { StorageVisibleEntitiesFilter } from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
+import { UsageFilter } from '../UsageFilter/UsageFilter';
 import i18n from '../i18n';
 import { b } from '../shared';
 export const StorageControls = ({ searchValue, handleSearchValueChange, withTypeSelector, storageType, handleStorageTypeChange, visibleEntities, handleVisibleEntitiesChange, nodesUptimeFilter, handleNodesUptimeFilterChange, withGroupsUsageFilter, groupsUsageFilter, groupsUsageFilterOptions, handleGroupsUsageFilterChange, entitiesCountCurrent, entitiesCountTotal, entitiesLoading, }) => {
     const isNodes = storageType === STORAGE_TYPES.nodes;
     const entityName = isNodes ? i18n('nodes') : i18n('groups');
-    return (_jsxs(_Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchValueChange, placeholder: isNodes
+    return (_jsxs(React.Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchValueChange, placeholder: isNodes
                     ? i18n('controls_nodes-search-placeholder')
                     : i18n('controls_groups-search-placeholder'), className: b('search') }), withTypeSelector && (_jsx(StorageTypeFilter, { value: storageType, onChange: handleStorageTypeChange })), _jsx(StorageVisibleEntitiesFilter, { value: visibleEntities, onChange: handleVisibleEntitiesChange }), isNodes && (_jsx(UptimeFilter, { value: nodesUptimeFilter, onChange: handleNodesUptimeFilterChange })), !isNodes && withGroupsUsageFilter && (_jsx(UsageFilter, { value: groupsUsageFilter, onChange: handleGroupsUsageFilterChange, groups: groupsUsageFilterOptions })), _jsx(EntitiesCount, { label: entityName, loading: entitiesLoading, total: entitiesCountTotal, current: entitiesCountCurrent })] }));
 };

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Settings, SortOrder } from '@gravity-ui/react-data-table';
-import type { NodesMap } from '../../../types/store/nodesList';
+import type { Settings, SortOrder } from '@gravity-ui/react-data-table';
 import type { PreparedStorageGroup, VisibleEntities } from '../../../store/reducers/storage/types';
+import type { NodesMap } from '../../../types/store/nodesList';
 import type { HandleSort } from '../../../utils/hooks/useTableSort';
 import './StorageGroups.scss';
 interface StorageGroupsProps {
@@ -13,5 +12,5 @@ interface StorageGroupsProps {
     sort?: SortOrder;
     handleSort?: HandleSort;
 }
-export declare function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }: StorageGroupsProps): JSX.Element;
+export declare function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }: StorageGroupsProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
-import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
 import { StorageGroupsEmptyDataMessage } from './StorageGroupsEmptyDataMessage';
+import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
 import i18n from './i18n';
 import './StorageGroups.scss';
 export function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }) {
-    const columns = useMemo(() => {
+    const columns = React.useMemo(() => {
         return getPreparedStorageGroupsColumns(nodes, visibleEntities);
     }, [nodes, visibleEntities]);
     if (!data.length && visibleEntities !== VISIBLE_ENTITIES.all) {

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/StorageGroupsEmptyDataMessage.d.ts

@@ -3,5 +3,5 @@ interface StorageNodesEmptyDataMessageProps {
     visibleEntities?: VisibleEntities;
     onShowAll?: VoidFunction;
 }
-export declare const StorageGroupsEmptyDataMessage: ({ visibleEntities, onShowAll, }: StorageNodesEmptyDataMessageProps) => JSX.Element | null;
+export declare const StorageGroupsEmptyDataMessage: ({ visibleEntities, onShowAll, }: StorageNodesEmptyDataMessageProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,6 +1,6 @@
-import type { NodesMap } from '../../../types/store/nodesList';
-import { type RenderControls, type RenderErrorMessage } from '../../../components/VirtualTable';
+import type { RenderControls, RenderErrorMessage } from '../../../components/VirtualTable';
 import type { VisibleEntities } from '../../../store/reducers/storage/types';
+import type { NodesMap } from '../../../types/store/nodesList';
 interface VirtualStorageGroupsProps {
     searchValue: string;
     visibleEntities: VisibleEntities;
@@ -12,5 +12,5 @@ interface VirtualStorageGroupsProps {
     renderControls: RenderControls;
     renderErrorMessage: RenderErrorMessage;
 }
-export declare const VirtualStorageGroups: ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }: VirtualStorageGroupsProps) => JSX.Element;
+export declare const VirtualStorageGroups: ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }: VirtualStorageGroupsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { VirtualTable, } from '../../../components/VirtualTable';
+import React from 'react';
+import { VirtualTable } from '../../../components/VirtualTable';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { StorageGroupsEmptyDataMessage } from './StorageGroupsEmptyDataMessage';
-import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
 import { getStorageGroups } from './getGroups';
+import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
 import i18n from './i18n';
 export const VirtualStorageGroups = ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }) => {
-    const filters = useMemo(() => {
+    const filters = React.useMemo(() => {
         return [searchValue, visibleEntities, tenant, nodeId];
     }, [searchValue, visibleEntities, tenant, nodeId]);
-    const fetchData = useCallback(async (limit, offset, { sortOrder, columnId } = {}) => {
+    const fetchData = React.useCallback(async (limit, offset, { sortOrder, columnId } = {}) => {
         return await getStorageGroups({
             limit,
             offset,
@@ -22,7 +22,7 @@ export const VirtualStorageGroups = ({ searchValue, visibleEntities, tenant, nod
             sortValue: columnId,
         });
     }, [nodeId, searchValue, tenant, visibleEntities]);
-    const columns = useMemo(() => {
+    const columns = React.useMemo(() => {
         return getPreparedStorageGroupsColumns(nodesMap, visibleEntities);
     }, [nodesMap, visibleEntities]);
     const renderEmptyDataMessage = () => {

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

@@ -1,12 +1,13 @@
-import { type Column as DataTableColumn } from '@gravity-ui/react-data-table';
+import React from 'react';
+import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
 import type { Column as VirtualTableColumn } from '../../../components/VirtualTable';
-import type { NodesMap } from '../../../types/store/nodesList';
 import type { PreparedStorageGroup, VisibleEntities } from '../../../store/reducers/storage/types';
+import type { NodesMap } from '../../../types/store/nodesList';
 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";
@@ -23,31 +24,31 @@ export declare const getPDiskStorageColumns: (nodes?: NodesMap) => StorageGroups
 export declare const getPreparedStorageGroupsColumns: (nodesMap: NodesMap | undefined, visibleEntities: VisibleEntities) => {
     sortable: boolean;
     name: string;
-    header?: import("react").ReactNode;
+    header?: React.ReactNode;
     className?: string | undefined;
     resizeable?: boolean | undefined;
     render: ((props: {
         row: PreparedStorageGroup;
         index: number;
-    }) => import("react").ReactNode) & ((props: {
+    }) => React.ReactNode) & ((props: {
         value?: unknown;
         row: PreparedStorageGroup;
         index: number;
         footer?: boolean | undefined;
         headerData?: boolean | undefined;
-    }) => import("react").ReactNode);
+    }) => React.ReactNode);
     width: number;
-    align: "left" | "right" | "center";
+    align: "center" | "left" | "right";
     headerTitle?: string | undefined;
     accessor?: string | ((row: PreparedStorageGroup) => any) | undefined;
     title?: string | ((row: PreparedStorageGroup) => string) | undefined;
-    customStyle?: ((props: import("@gravity-ui/react-data-table").CustomStyleParams<PreparedStorageGroup>) => import("react").CSSProperties) | undefined;
+    customStyle?: ((props: import("@gravity-ui/react-data-table").CustomStyleParams<PreparedStorageGroup>) => React.CSSProperties) | undefined;
     onClick?: ((data: {
         row: PreparedStorageGroup;
         index: number;
         footer?: boolean | undefined;
         headerData?: boolean | undefined;
-    }, column: DataTableColumn<PreparedStorageGroup>, event: import("react").MouseEvent<HTMLTableCellElement, MouseEvent>) => void) | undefined;
+    }, column: DataTableColumn<PreparedStorageGroup>, event: React.MouseEvent<HTMLTableCellElement, MouseEvent>) => void) | undefined;
     defaultOrder?: import("@gravity-ui/react-data-table").OrderType | undefined;
     sortAccessor?: string | ((row: PreparedStorageGroup) => any) | undefined;
     sortAscending?: import("@gravity-ui/react-data-table").Comparator<PreparedStorageGroup> | undefined;

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

@@ -1,26 +1,25 @@
-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 { Icon, Label, Popover, PopoverBehavior } from '@gravity-ui/uikit';
-import { EFlag } from '../../../types/api/enums';
-import shieldIcon from '../../../assets/icons/shield.svg';
+import { CellWithPopover } from '../../../components/CellWithPopover/CellWithPopover';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
+import { UsageLabel } from '../../../components/UsageLabel/UsageLabel';
+import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
+import { EFlag } from '../../../types/api/enums';
+import { cn } from '../../../utils/cn';
+import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 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 { getDegradedSeverity, getUsageSeverityForStorageGroup } from '../utils';
 import i18n from './i18n';
+import shieldIcon from '../../../assets/icons/shield.svg';
 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',
@@ -39,16 +38,16 @@ const poolNameColumn = {
     render: ({ row }) => {
         var _a;
         const splitted = (_a = row.PoolName) === null || _a === void 0 ? void 0 : _a.split('/');
-        return (splitted && (_jsx(CellWithPopover, Object.assign({ wrapperClassName: b('pool-name-wrapper'), content: row.PoolName, placement: ['right'], behavior: PopoverBehavior.Immediate }, { children: splitted[splitted.length - 1] }))));
+        return (splitted && (_jsx(CellWithPopover, { wrapperClassName: b('pool-name-wrapper'), content: row.PoolName, placement: ['right'], behavior: PopoverBehavior.Immediate, children: splitted[splitted.length - 1] })));
     },
     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(React.Fragment, { children: [_jsx(Label, { children: row.MediaType || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, { content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate, children: _jsx(Label, { children: _jsx(Icon, { data: shieldIcon }) }) }))] })),
     sortable: false,
 };
 const erasureColumn = {
@@ -63,7 +62,7 @@ const degradedColumn = {
     name: GROUPS_COLUMNS_IDS.Degraded,
     header: 'Degraded',
     width: 100,
-    render: ({ row }) => row.Degraded ? (_jsxs(Label, Object.assign({ theme: getDegradedSeverity(row) }, { children: ["Degraded: ", row.Degraded] }))) : ('-'),
+    render: ({ row }) => row.Degraded ? (_jsxs(Label, { theme: getDegradedSeverity(row), children: ["Degraded: ", row.Degraded] })) : ('-'),
     align: DataTable.LEFT,
     defaultOrder: DataTable.DESCENDING,
 };
@@ -86,7 +85,7 @@ const groupIdColumn = {
     header: 'Group ID',
     width: 130,
     render: ({ row }) => {
-        return _jsx("span", Object.assign({ className: b('group-id') }, { children: row.GroupID }));
+        return _jsx("span", { className: b('group-id'), children: row.GroupID });
     },
     sortAccessor: (row) => Number(row.GroupID),
     align: DataTable.RIGHT,
@@ -156,26 +155,20 @@ const getVdiscksColumn = (nodes) => ({
     header: 'VDisks',
     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("div", { className: b('vdisks-wrapper'), children: (_a = row.VDisks) === null || _a === void 0 ? void 0 : _a.map((vDisk) => {
+                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 +180,7 @@ export const getPDiskStorageColumns = (nodes) => {
 const getStorageGroupsColumns = (nodes) => {
     return [
         poolNameColumn,
-        kindColumn,
+        typeColumn,
         erasureColumn,
         degradedColumn,
         usageColumn,

package/dist/containers/Storage/StorageGroups/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "empty.default" | "empty.out_of_space" | "empty.degraded" | "show_all" | "encrypted", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Storage/StorageGroups/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../../utils/i18n';
+import { registerKeysets } from '../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-storage-groups';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/Storage/StorageNodes/StorageNodes.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { Settings, SortOrder } from '@gravity-ui/react-data-table';
+import type { Settings, SortOrder } from '@gravity-ui/react-data-table';
 import type { PreparedStorageNode, VisibleEntities } from '../../../store/reducers/storage/types';
-import type { HandleSort } from '../../../utils/hooks/useTableSort';
 import type { AdditionalNodesProps } from '../../../types/additionalProps';
+import type { HandleSort } from '../../../utils/hooks/useTableSort';
 import { NodesUptimeFilterValues } from '../../../utils/nodes';
 import './StorageNodes.scss';
 interface StorageNodesProps {
@@ -15,5 +14,5 @@ interface StorageNodesProps {
     sort?: SortOrder;
     handleSort?: HandleSort;
 }
-export declare function StorageNodes({ data, tableSettings, visibleEntities, onShowAll, nodesUptimeFilter, additionalNodesProps, sort, handleSort, }: StorageNodesProps): JSX.Element;
+export declare function StorageNodes({ data, tableSettings, visibleEntities, onShowAll, nodesUptimeFilter, additionalNodesProps, sort, handleSort, }: StorageNodesProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageNodes/StorageNodes.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { NodesUptimeFilterValues } from '../../../utils/nodes';
-import { getPreparedStorageNodesColumns } from './getStorageNodesColumns';
 import { StorageNodesEmptyDataMessage } from './StorageNodesEmptyDataMessage';
-import { getRowUnavailableClassName } from './shared';
+import { getPreparedStorageNodesColumns } from './getStorageNodesColumns';
 import i18n from './i18n';
+import { getRowUnavailableClassName } from './shared';
 import './StorageNodes.scss';
 export function StorageNodes({ data, tableSettings, visibleEntities, onShowAll, nodesUptimeFilter, additionalNodesProps, sort, handleSort, }) {
     const columns = getPreparedStorageNodesColumns(additionalNodesProps, visibleEntities);

package/dist/containers/Storage/StorageNodes/StorageNodesEmptyDataMessage.d.ts

@@ -5,5 +5,5 @@ interface StorageNodesEmptyDataMessageProps {
     nodesUptimeFilter: NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
 }
-export declare const StorageNodesEmptyDataMessage: ({ visibleEntities, nodesUptimeFilter, onShowAll, }: StorageNodesEmptyDataMessageProps) => JSX.Element | null;
+export declare const StorageNodesEmptyDataMessage: ({ visibleEntities, nodesUptimeFilter, onShowAll, }: StorageNodesEmptyDataMessageProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};