ydb-embedded-ui 4.33.0 → 5.0.0

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

@@ -0,0 +1,10 @@
+import type { TVDiskStateInfo } from '../../../types/api/vdisk';
+import { TPDiskStateInfo } from '../../../types/api/pdisk';
+import './PDisk.scss';
+interface PDiskProps {
+    nodeId: number;
+    data?: TPDiskStateInfo;
+    vDisks?: TVDiskStateInfo[];
+}
+export declare const PDisk: ({ nodeId, data: rawData, vDisks }: PDiskProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import cn from 'bem-cn-lite';
+import { InternalLink } from '../../../components/InternalLink';
+import { Stack } from '../../../components/Stack/Stack';
+import routes, { createHref } from '../../../routes';
+import { TPDiskState } from '../../../types/api/pdisk';
+import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
+import { getPDiskType } from '../../../utils/pdisk';
+import { isFullVDiskData } from '../../../utils/storage';
+import { STRUCTURE } from '../../Node/NodePages';
+import { DiskStateProgressBar, EDiskStateSeverity } from '../DiskStateProgressBar';
+import { PDiskPopup } from '../PDiskPopup';
+import { VDisk } from '../VDisk';
+import { getUsageSeverityForPDisk, NOT_AVAILABLE_SEVERITY } from '../utils';
+import './PDisk.scss';
+const b = cn('pdisk-storage');
+const stateSeverity = {
+    [TPDiskState.Initial]: EDiskStateSeverity.Grey,
+    [TPDiskState.Normal]: EDiskStateSeverity.Green,
+    [TPDiskState.InitialFormatRead]: EDiskStateSeverity.Yellow,
+    [TPDiskState.InitialSysLogRead]: EDiskStateSeverity.Yellow,
+    [TPDiskState.InitialCommonLogRead]: EDiskStateSeverity.Yellow,
+    [TPDiskState.InitialFormatReadError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialSysLogReadError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialSysLogParseError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialCommonLogReadError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialCommonLogParseError]: EDiskStateSeverity.Red,
+    [TPDiskState.CommonLoggerInitError]: EDiskStateSeverity.Red,
+    [TPDiskState.OpenFileError]: EDiskStateSeverity.Red,
+    [TPDiskState.ChunkQuotaError]: EDiskStateSeverity.Red,
+    [TPDiskState.DeviceIoError]: EDiskStateSeverity.Red,
+};
+const isSeverityKey = (key) => key !== undefined && key in stateSeverity;
+const getStateSeverity = (pDiskState) => {
+    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
+};
+export const PDisk = ({ nodeId, data: rawData = {}, vDisks }) => {
+    // NodeId in data is required for the popup
+    const data = useMemo(() => (Object.assign(Object.assign({}, rawData), { NodeId: nodeId })), [rawData, nodeId]);
+    const [severity, setSeverity] = useState(getStateSeverity(data.State));
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+    const anchor = useRef(null);
+    const pdiskAllocatedPercent = useMemo(() => {
+        const { AvailableSize, TotalSize } = data;
+        if (!AvailableSize || !TotalSize) {
+            return undefined;
+        }
+        return !isNaN(Number(AvailableSize)) && !isNaN(Number(TotalSize))
+            ? Math.round(((Number(TotalSize) - Number(AvailableSize)) * 100) / Number(TotalSize))
+            : undefined;
+    }, [data]);
+    useEffect(() => {
+        const newStateSeverity = getStateSeverity(data.State);
+        const newSpaceSeverityFlag = getUsageSeverityForPDisk(pdiskAllocatedPercent || 0);
+        let newSeverity;
+        if (newStateSeverity === NOT_AVAILABLE_SEVERITY || !newSpaceSeverityFlag) {
+            newSeverity = newStateSeverity;
+        }
+        else {
+            newSeverity = Math.max(newStateSeverity, EDiskStateSeverity[newSpaceSeverityFlag]);
+        }
+        setSeverity(newSeverity);
+    }, [data.State, pdiskAllocatedPercent]);
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+    const renderVDisks = () => {
+        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: {
+                        // 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: isFullData ? donor : Object.assign(Object.assign({}, donor), { DonorMode: true }) }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
+                            })] }), stringifyVdiskId(vdisk.VDiskId))) : (_jsx(VDisk, { data: vdisk, compact: true })) }), 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: pdiskAllocatedPercent, severity: severity }), _jsx("div", Object.assign({ className: b('media-type') }, { children: getPDiskType(data) }))] }))] }))] }));
+};

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

@@ -0,0 +1 @@
+export * from './PDisk';

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

@@ -0,0 +1,12 @@
+import { PopupProps } from '@gravity-ui/uikit';
+import type { NodesMap } from '../../../types/store/nodesList';
+import { InfoViewerItem } from '../../../components/InfoViewer';
+import { TPDiskStateInfo } from '../../../types/api/pdisk';
+import './PDiskPopup.scss';
+export declare const preparePDiskData: (data: TPDiskStateInfo, nodes?: NodesMap | undefined) => InfoViewerItem[];
+interface PDiskPopupProps extends PopupProps {
+    data: TPDiskStateInfo;
+    nodes?: NodesMap;
+}
+export declare const PDiskPopup: ({ data, nodes, ...props }: PDiskPopupProps) => JSX.Element;
+export {};

package/dist/containers/Storage/PDiskPopup/PDiskPopup.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cn from 'bem-cn-lite';
+import { Popup } from '@gravity-ui/uikit';
+import { InfoViewer } from '../../../components/InfoViewer';
+import { EFlag } from '../../../types/api/enums';
+import { getPDiskId } from '../../../utils/dataFormatters/dataFormatters';
+import { getPDiskType } from '../../../utils/pdisk';
+import { bytesToGB } from '../../../utils/utils';
+import './PDiskPopup.scss';
+const b = cn('pdisk-storage-popup');
+const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
+export const preparePDiskData = (data, nodes) => {
+    const { AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device } = data;
+    const pdiskData = [
+        { label: 'PDisk', value: getPDiskId({ NodeId, PDiskId }) || '-' },
+        { label: 'State', value: State || 'not available' },
+        { label: 'Type', value: getPDiskType(data) || 'unknown' },
+    ];
+    if (NodeId) {
+        pdiskData.push({ label: 'Node Id', value: NodeId });
+    }
+    if (nodes && NodeId && nodes.get(NodeId)) {
+        pdiskData.push({ label: 'Host', value: nodes.get(NodeId) });
+    }
+    if (Path) {
+        pdiskData.push({ label: 'Path', value: Path });
+    }
+    pdiskData.push({
+        label: 'Available',
+        value: `${bytesToGB(AvailableSize)} of ${bytesToGB(TotalSize)}`,
+    });
+    if (Realtime && errorColors.includes(Realtime)) {
+        pdiskData.push({ label: 'Realtime', value: Realtime });
+    }
+    if (Device && errorColors.includes(Device)) {
+        pdiskData.push({ label: 'Device', value: Device });
+    }
+    return pdiskData;
+};
+export const PDiskPopup = (_a) => {
+    var { data, nodes } = _a, props = __rest(_a, ["data", "nodes"]);
+    const info = useMemo(() => preparePDiskData(data, nodes), [data, nodes]);
+    return (_jsx(Popup, Object.assign({ contentClassName: b(), placement: ['top', 'bottom'], 
+        // bigger offset for easier switching to neighbour nodes
+        // matches the default offset for popup with arrow out of a sense of beauty
+        offset: [0, 12] }, props, { children: _jsx(InfoViewer, { title: "PDisk", info: info, size: "s" }) })));
+};

package/dist/containers/Storage/PDiskPopup/index.js

@@ -0,0 +1 @@
+export * from './PDiskPopup';

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

@@ -0,0 +1,9 @@
+import type { AdditionalNodesProps } from '../../types/additionalProps';
+import './Storage.scss';
+interface StorageProps {
+    additionalNodesProps?: AdditionalNodesProps;
+    tenant?: string;
+    nodeId?: string;
+}
+export declare const Storage: ({ additionalNodesProps, tenant, nodeId }: StorageProps) => JSX.Element;
+export {};

package/dist/containers/Storage/Storage.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+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, } from '../../utils/hooks';
+import { NodesUptimeFilterValues } from '../../utils/nodes';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+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 = useDispatch();
+    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 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());
+        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));
+    };
+    const handleTextFilterChange = (value) => {
+        dispatch(setStorageTextFilter(value));
+    };
+    const handleGroupVisibilityChange = (value) => {
+        dispatch(setVisibleEntities(value));
+    };
+    const handleStorageTypeChange = (value) => {
+        dispatch(setStorageType(value));
+    };
+    const handleUptimeFilterChange = (value) => {
+        dispatch(setNodesUptimeFilter(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 }))] }));
+    };
+    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
+                ? storageGroups.length
+                : storageNodes.length, entitiesCountTotal: entitiesCount.total, entitiesLoading: loading && !wasLoaded }));
+    };
+    if (error) {
+        if (error.status === 403) {
+            return _jsx(AccessDenied, { position: "left" });
+        }
+        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() }))] }));
+};

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

@@ -0,0 +1,23 @@
+import type { StorageType, VisibleEntities } from '../../../store/reducers/storage/types';
+import { NodesUptimeFilterValues } from '../../../utils/nodes';
+import { type UsageFilterItem } from '../UsageFilter/UsageFilter';
+interface StorageControlsProps {
+    searchValue?: string;
+    handleSearchValueChange: (value: string) => void;
+    withTypeSelector?: boolean;
+    storageType: StorageType;
+    handleStorageTypeChange: (value: StorageType) => void;
+    visibleEntities: VisibleEntities;
+    handleVisibleEntitiesChange: (value: VisibleEntities) => void;
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    handleNodesUptimeFilterChange: (value: NodesUptimeFilterValues) => void;
+    withGroupsUsageFilter?: boolean;
+    groupsUsageFilter?: string[];
+    groupsUsageFilterOptions?: UsageFilterItem[];
+    handleGroupsUsageFilterChange?: (value: string[]) => void;
+    entitiesCountCurrent: number;
+    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 {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 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
+                    ? 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

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } 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 i18n from './i18n';
+import './StorageGroups.scss';
+export function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }) {
+    const columns = useMemo(() => {
+        return getPreparedStorageGroupsColumns(nodes, visibleEntities);
+    }, [nodes, visibleEntities]);
+    if (!data.length && visibleEntities !== VISIBLE_ENTITIES.all) {
+        return (_jsx(StorageGroupsEmptyDataMessage, { onShowAll: onShowAll, visibleEntities: visibleEntities }));
+    }
+    return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: columns, settings: tableSettings, emptyDataMessage: i18n('empty.default'), sortOrder: sort, onSort: handleSort }, visibleEntities));
+}

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

@@ -0,0 +1,7 @@
+import type { VisibleEntities } from '../../../store/reducers/storage/types';
+interface StorageNodesEmptyDataMessageProps {
+    visibleEntities?: VisibleEntities;
+    onShowAll?: VoidFunction;
+}
+export declare const StorageGroupsEmptyDataMessage: ({ visibleEntities, onShowAll, }: StorageNodesEmptyDataMessageProps) => JSX.Element | null;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
+import { EmptyFilter } from '../EmptyFilter/EmptyFilter';
+import i18n from './i18n';
+export const StorageGroupsEmptyDataMessage = ({ visibleEntities, onShowAll, }) => {
+    let message;
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
+        message = i18n('empty.out_of_space');
+    }
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
+        message = i18n('empty.degraded');
+    }
+    if (message) {
+        return _jsx(EmptyFilter, { title: message, showAll: i18n('show_all'), onShowAll: onShowAll });
+    }
+    return null;
+};

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

@@ -0,0 +1,16 @@
+import type { NodesMap } from '../../../types/store/nodesList';
+import { type RenderControls, type RenderErrorMessage } from '../../../components/VirtualTable';
+import type { VisibleEntities } from '../../../store/reducers/storage/types';
+interface VirtualStorageGroupsProps {
+    searchValue: string;
+    visibleEntities: VisibleEntities;
+    tenant?: string;
+    nodeId?: string;
+    nodesMap?: NodesMap;
+    onShowAll: VoidFunction;
+    parentContainer?: Element | null;
+    renderControls: RenderControls;
+    renderErrorMessage: RenderErrorMessage;
+}
+export declare const VirtualStorageGroups: ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }: VirtualStorageGroupsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } 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 i18n from './i18n';
+export const VirtualStorageGroups = ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }) => {
+    const filters = useMemo(() => {
+        return [searchValue, visibleEntities, tenant, nodeId];
+    }, [searchValue, visibleEntities, tenant, nodeId]);
+    const fetchData = useCallback(async (limit, offset, { sortOrder, columnId } = {}) => {
+        return await getStorageGroups({
+            limit,
+            offset,
+            filter: searchValue,
+            visibleEntities,
+            tenant,
+            nodeId,
+            sortOrder,
+            sortValue: columnId,
+        });
+    }, [nodeId, searchValue, tenant, visibleEntities]);
+    const columns = useMemo(() => {
+        return getPreparedStorageGroupsColumns(nodesMap, visibleEntities);
+    }, [nodesMap, visibleEntities]);
+    const renderEmptyDataMessage = () => {
+        if (visibleEntities !== VISIBLE_ENTITIES.all) {
+            return (_jsx(StorageGroupsEmptyDataMessage, { onShowAll: onShowAll, visibleEntities: visibleEntities }));
+        }
+        return i18n('empty.default');
+    };
+    return (_jsx(VirtualTable, { parentContainer: parentContainer, columns: columns, fetchData: fetchData, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, dependencyArray: filters }));
+};

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

@@ -0,0 +1,6 @@
+import type { StorageApiRequestParams } from '../../../store/reducers/storage/types';
+export declare const getStorageGroups: ({ limit, offset, ...params }: StorageApiRequestParams) => Promise<{
+    data: import("../../../store/reducers/storage/types").PreparedStorageGroup[];
+    found: number;
+    total: number;
+}>;

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

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { prepareStorageGroupsResponse } from '../../../store/reducers/storage/utils';
+import { EVersion } from '../../../types/api/storage';
+const getConcurrentId = (limit, offset) => {
+    return `getStorageGroups|offset${offset}|limit${limit}`;
+};
+export const getStorageGroups = async (_a) => {
+    var { limit, offset } = _a, params = __rest(_a, ["limit", "offset"]);
+    const response = await window.api.getStorageInfo(Object.assign({ version: EVersion.v2, limit, offset }, params), { concurrentId: getConcurrentId(limit, offset) });
+    const preparedResponse = prepareStorageGroupsResponse(response);
+    return {
+        data: preparedResponse.groups || [],
+        found: preparedResponse.found || 0,
+        total: preparedResponse.total || 0,
+    };
+};

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

@@ -0,0 +1,57 @@
+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 './StorageGroups.scss';
+declare type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> & DataTableColumn<PreparedStorageGroup>;
+export declare const GROUPS_COLUMNS_IDS: {
+    readonly PoolName: "PoolName";
+    readonly Kind: "Kind";
+    readonly Erasure: "Erasure";
+    readonly GroupId: "GroupId";
+    readonly Used: "Used";
+    readonly Limit: "Limit";
+    readonly Usage: "Usage";
+    readonly UsedSpaceFlag: "UsedSpaceFlag";
+    readonly Read: "Read";
+    readonly Write: "Write";
+    readonly VDisks: "VDisks";
+    readonly Degraded: "Degraded";
+};
+export declare const getStorageTopGroupsColumns: () => StorageGroupsColumn[];
+export declare const getPreparedStorageGroupsColumns: (nodesMap: NodesMap | undefined, visibleEntities: VisibleEntities) => {
+    sortable: boolean;
+    name: string;
+    header?: import("react").ReactNode;
+    className?: string | undefined;
+    resizeable?: boolean | undefined;
+    render: ((props: {
+        row: PreparedStorageGroup;
+        index: number;
+    }) => import("react").ReactNode) & ((props: {
+        value?: unknown;
+        row: PreparedStorageGroup;
+        index: number;
+        footer?: boolean | undefined;
+        headerData?: boolean | undefined;
+    }) => import("react").ReactNode);
+    width: number;
+    align: "left" | "right" | "center";
+    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;
+    onClick?: ((data: {
+        row: PreparedStorageGroup;
+        index: number;
+        footer?: boolean | undefined;
+        headerData?: boolean | undefined;
+    }, column: DataTableColumn<PreparedStorageGroup>) => 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;
+    sub?: DataTableColumn<PreparedStorageGroup>[] | undefined;
+    group?: boolean | undefined;
+    autogroup?: boolean | undefined;
+}[];
+export {};