ydb-embedded-ui 6.8.0 → 6.9.1

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

@@ -0,0 +1 @@
+export declare const pDiskPageKeyset: (key: "node" | "groups" | "fqdn" | "pdisk" | "restart-pdisk-button" | "restart-pdisk-dialog" | "restart-pdisk-not-allowed", params?: import("@gravity-ui/i18n").Params) => string;

package/dist/containers/ReduxTooltip/ReduxTooltip.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("react-redux").ConnectedComponent<typeof ReduxTooltip, {
+    className?: string | null | undefined;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null>;
+    store?: import("redux").Store;
+} | {
+    className?: string | null | undefined;
+    store?: import("redux").Store;
+}>;
+export default _default;
+declare function ReduxTooltip(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace ReduxTooltip {
+    export { propTypes };
+}
+import React from 'react';
+declare namespace propTypes {
+    let className: PropTypes.Requireable<string>;
+    let toolTipVisible: PropTypes.Requireable<boolean>;
+    let currentHoveredRef: PropTypes.Requireable<object>;
+    let data: PropTypes.Requireable<any>;
+    let template: PropTypes.Requireable<(...args: any[]) => any>;
+    let hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "default_message" | "default_button_label", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Storage/Storage.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ArrayParam, StringParam, useQueryParams, withDefault } from 'use-query-params';
+import { AccessDenied } from '../../components/Errors/403';
+import { ResponseError } from '../../components/Errors/ResponseError';
+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, } from '../../store/reducers/storage/selectors';
+import { storageApi } from '../../store/reducers/storage/storage';
+import { storageTypeSchema, visibleEntitiesSchema } from '../../store/reducers/storage/types';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { useAutoRefreshInterval, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
+import { NodesUptimeFilterValues, nodesUptimeFilterValuesSchema } from '../../utils/nodes';
+import { StorageControls } from './StorageControls/StorageControls';
+import { StorageGroups } from './StorageGroups/StorageGroups';
+import { StorageNodes } from './StorageNodes/StorageNodes';
+import { b } from './shared';
+import { defaultSortNode, getDefaultSortGroup } from './utils';
+import './Storage.scss';
+const UsageFilterParam = withDefault({
+    encode: ArrayParam.encode,
+    decode: (input) => {
+        if (input === null || input === undefined) {
+            return input;
+        }
+        if (!Array.isArray(input)) {
+            return input ? [input] : [];
+        }
+        return input.filter(Boolean);
+    },
+}, []);
+export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
+    var _a;
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const [queryParams, setQueryParams] = useQueryParams({
+        type: StringParam,
+        visible: StringParam,
+        search: StringParam,
+        uptimeFilter: StringParam,
+        usageFilter: UsageFilterParam,
+    });
+    const type = storageTypeSchema.parse(queryParams.type);
+    const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible);
+    const filter = (_a = queryParams.search) !== null && _a !== void 0 ? _a : '';
+    const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const usageFilter = queryParams.usageFilter;
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const [nodeSort, setNodeSort] = React.useState({
+        sortOrder: undefined,
+        sortValue: undefined,
+    });
+    const nodesSortParams = nodeSort.sortValue ? nodeSort : defaultSortNode;
+    const [groupSort, setGroupSort] = React.useState({
+        sortOrder: undefined,
+        sortValue: undefined,
+    });
+    const groupsSortParams = groupSort.sortOrder ? groupSort : getDefaultSortGroup(visibleEntities);
+    // Do not display Nodes table for Node page (NodeId present)
+    const isNodePage = nodeId !== undefined;
+    const storageType = isNodePage ? STORAGE_TYPES.groups : type;
+    const nodesRequestParams = useNodesRequestParams({
+        filter,
+        nodesUptimeFilter: uptimeFilter,
+        ...nodesSortParams,
+    });
+    const storageRequestParams = useStorageRequestParams({
+        filter,
+        ...groupsSortParams,
+    });
+    const nodesQuery = storageApi.useGetStorageNodesInfoQuery({ tenant, visibleEntities, ...nodesRequestParams }, {
+        skip: storageType !== STORAGE_TYPES.nodes,
+        pollingInterval: autoRefreshInterval,
+    });
+    const groupsQuery = storageApi.useGetStorageGroupsInfoQuery({ 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 { nodes: _, groups: __, ...entitiesCount } = currentData !== null && currentData !== void 0 ? currentData : { found: 0, total: 0 };
+    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]);
+    const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) => setNodeSort(params));
+    const [groupsSort, handleGroupsSort] = useTableSort(groupsSortParams, (params) => setGroupSort(params));
+    const handleUsageFilterChange = (value) => {
+        setQueryParams({ usageFilter: value.length ? value : undefined }, 'replaceIn');
+    };
+    const handleTextFilterChange = (value) => {
+        setQueryParams({ search: value || undefined }, 'replaceIn');
+    };
+    const handleGroupVisibilityChange = (value) => {
+        setQueryParams({ visible: value }, 'replaceIn');
+    };
+    const handleStorageTypeChange = (value) => {
+        setQueryParams({ type: value }, 'replaceIn');
+    };
+    const handleUptimeFilterChange = (value) => {
+        setQueryParams({ uptimeFilter: value }, 'replaceIn');
+    };
+    const handleShowAllNodes = () => {
+        handleGroupVisibilityChange(VISIBLE_ENTITIES.all);
+        handleUptimeFilterChange(NodesUptimeFilterValues.All);
+    };
+    const renderDataTable = () => {
+        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: uptimeFilter, handleNodesUptimeFilterChange: handleUptimeFilterChange, groupsUsageFilter: usageFilter, groupsUsageFilterOptions: usageFilterOptions, handleGroupsUsageFilterChange: handleUsageFilterChange, entitiesCountCurrent: storageType === STORAGE_TYPES.groups
+                ? storageGroups.length
+                : storageNodes.length, entitiesCountTotal: entitiesCount.total, entitiesLoading: isLoading }));
+    };
+    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, { loading: isLoading, className: b('table'), children: renderDataTable() })] }));
+};

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

@@ -0,0 +1,14 @@
+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 ({ limit, offset, ...params }) => {
+    const response = await window.api.getStorageInfo({ 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,62 @@
+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 { PreparedStorageGroup, VisibleEntities } from '../../../store/reducers/storage/types';
+import type { NodesMap } from '../../../types/store/nodesList';
+import './StorageGroups.scss';
+export declare const STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY = "storageGroupsColumnsWidth";
+type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> & DataTableColumn<PreparedStorageGroup>;
+export declare const GROUPS_COLUMNS_IDS: {
+    readonly PoolName: "PoolName";
+    readonly MediaType: "MediaType";
+    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 getPDiskStorageColumns: (nodes?: NodesMap) => StorageGroupsColumn[];
+export declare const getPreparedStorageGroupsColumns: (nodesMap: NodesMap | undefined, visibleEntities: VisibleEntities) => {
+    sortable: boolean;
+    name: string;
+    header?: React.ReactNode;
+    className?: string;
+    resizeable?: boolean;
+    render: ((props: {
+        row: PreparedStorageGroup;
+        index: number;
+    }) => React.ReactNode) & ((props: {
+        value?: unknown;
+        row: PreparedStorageGroup;
+        index: number;
+        footer?: boolean;
+        headerData?: boolean;
+    }) => React.ReactNode);
+    width: number;
+    resizeMaxWidth?: number;
+    resizeMinWidth?: number;
+    align: "center" | "left" | "right";
+    headerTitle?: string;
+    accessor?: string | ((row: PreparedStorageGroup) => any) | undefined;
+    title?: string | ((row: PreparedStorageGroup) => string) | undefined;
+    customStyle?: ((props: import("@gravity-ui/react-data-table").CustomStyleParams<PreparedStorageGroup>) => React.CSSProperties) | undefined;
+    onClick?: ((data: {
+        row: PreparedStorageGroup;
+        index: number;
+        footer?: boolean;
+        headerData?: boolean;
+    }, column: DataTableColumn<PreparedStorageGroup>, event: React.MouseEvent<HTMLTableCellElement>) => void) | undefined;
+    defaultOrder?: import("@gravity-ui/react-data-table").OrderType;
+    sortAccessor?: string | ((row: PreparedStorageGroup) => any) | undefined;
+    sortAscending?: import("@gravity-ui/react-data-table").Comparator<PreparedStorageGroup> | undefined;
+    sub?: DataTableColumn<PreparedStorageGroup>[] | undefined;
+    group?: boolean;
+    autogroup?: boolean;
+}[];
+export {};

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

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ShieldKeyhole } from '@gravity-ui/icons';
+import DataTable from '@gravity-ui/react-data-table';
+import { Icon, Label, Popover, PopoverBehavior } from '@gravity-ui/uikit';
+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 { bytesToGB, bytesToSpeed } from '../../../utils/utils';
+import { getDegradedSeverity, getUsageSeverityForStorageGroup } from '../utils';
+import i18n from './i18n';
+import './StorageGroups.scss';
+const b = cn('global-storage-groups');
+export const STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY = 'storageGroupsColumnsWidth';
+export const GROUPS_COLUMNS_IDS = {
+    PoolName: 'PoolName',
+    MediaType: 'MediaType',
+    Erasure: 'Erasure',
+    GroupId: 'GroupId',
+    Used: 'Used',
+    Limit: 'Limit',
+    Usage: 'Usage',
+    UsedSpaceFlag: 'UsedSpaceFlag',
+    Read: 'Read',
+    Write: 'Write',
+    VDisks: 'VDisks',
+    Degraded: 'Degraded',
+};
+const poolNameColumn = {
+    name: GROUPS_COLUMNS_IDS.PoolName,
+    header: 'Pool Name',
+    width: 250,
+    render: ({ row }) => {
+        var _a;
+        const splitted = (_a = row.PoolName) === null || _a === void 0 ? void 0 : _a.split('/');
+        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 typeColumn = {
+    name: GROUPS_COLUMNS_IDS.MediaType,
+    header: 'Type',
+    width: 100,
+    resizeMinWidth: 100,
+    align: DataTable.LEFT,
+    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: ShieldKeyhole, size: 18 }) }) }))] })),
+    sortable: false,
+};
+const erasureColumn = {
+    name: GROUPS_COLUMNS_IDS.Erasure,
+    header: 'Erasure',
+    width: 100,
+    render: ({ row }) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
+    align: DataTable.LEFT,
+    sortable: false,
+};
+const degradedColumn = {
+    name: GROUPS_COLUMNS_IDS.Degraded,
+    header: 'Degraded',
+    width: 110,
+    resizeMinWidth: 110,
+    render: ({ row }) => row.Degraded ? (_jsxs(Label, { theme: getDegradedSeverity(row), children: ["Degraded: ", row.Degraded] })) : ('-'),
+    align: DataTable.LEFT,
+    defaultOrder: DataTable.DESCENDING,
+};
+const usageColumn = {
+    name: GROUPS_COLUMNS_IDS.Usage,
+    header: 'Usage',
+    width: 75,
+    resizeMinWidth: 75,
+    render: ({ row }) => {
+        // without a limit the usage can be evaluated as 0,
+        // but the absence of a value is more clear
+        return row.Limit ? (_jsx(UsageLabel, { value: row.Usage, theme: getUsageSeverityForStorageGroup(row.Usage) })) : ('-');
+    },
+    // without a limit exclude usage from sort to display at the bottom
+    sortAccessor: (row) => (row.Limit ? row.Usage : null),
+    align: DataTable.LEFT,
+    sortable: false,
+};
+const groupIdColumn = {
+    name: GROUPS_COLUMNS_IDS.GroupId,
+    header: 'Group ID',
+    width: 130,
+    render: ({ row }) => {
+        return _jsx("span", { className: b('group-id'), children: row.GroupID });
+    },
+    sortAccessor: (row) => Number(row.GroupID),
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+const usedColumn = {
+    name: GROUPS_COLUMNS_IDS.Used,
+    header: 'Used',
+    width: 100,
+    render: ({ row }) => {
+        return bytesToGB(row.Used, true);
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+const limitColumn = {
+    name: GROUPS_COLUMNS_IDS.Limit,
+    header: 'Limit',
+    width: 100,
+    render: ({ row }) => {
+        return bytesToGB(row.Limit);
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+const usedSpaceFlagColumn = {
+    name: GROUPS_COLUMNS_IDS.UsedSpaceFlag,
+    header: 'Space',
+    width: 110,
+    render: ({ row }) => {
+        const value = row.UsedSpaceFlag;
+        let color = EFlag.Red;
+        if (value < 100) {
+            color = EFlag.Green;
+        }
+        else if (value < 10000) {
+            color = EFlag.Yellow;
+        }
+        else if (value < 1000000) {
+            color = EFlag.Orange;
+        }
+        return _jsx(EntityStatus, { status: color });
+    },
+    align: DataTable.CENTER,
+};
+const readColumn = {
+    name: GROUPS_COLUMNS_IDS.Read,
+    header: 'Read',
+    width: 100,
+    render: ({ row }) => {
+        return row.Read ? bytesToSpeed(row.Read) : '-';
+    },
+    align: DataTable.RIGHT,
+};
+const writeColumn = {
+    name: GROUPS_COLUMNS_IDS.Write,
+    header: 'Write',
+    width: 100,
+    render: ({ row }) => {
+        return row.Write ? bytesToSpeed(row.Write) : '-';
+    },
+    align: DataTable.RIGHT,
+};
+const getVDisksColumn = (nodes) => ({
+    name: GROUPS_COLUMNS_IDS.VDisks,
+    className: b('vdisks-column'),
+    header: 'VDisks',
+    render: ({ row }) => {
+        var _a;
+        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,
+    resizeable: false,
+});
+export const getStorageTopGroupsColumns = () => {
+    return [groupIdColumn, typeColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
+};
+export const getPDiskStorageColumns = (nodes) => {
+    return [
+        poolNameColumn,
+        typeColumn,
+        erasureColumn,
+        degradedColumn,
+        groupIdColumn,
+        usageColumn,
+        usedColumn,
+        getVDisksColumn(nodes),
+    ];
+};
+const getStorageGroupsColumns = (nodes) => {
+    return [
+        poolNameColumn,
+        typeColumn,
+        erasureColumn,
+        degradedColumn,
+        usageColumn,
+        groupIdColumn,
+        usedColumn,
+        limitColumn,
+        usedSpaceFlagColumn,
+        readColumn,
+        writeColumn,
+        getVDisksColumn(nodes),
+    ];
+};
+const filterStorageGroupsColumns = (columns, visibleEntities) => {
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
+        return columns.filter((col) => col.name !== GROUPS_COLUMNS_IDS.Degraded);
+    }
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
+        return columns.filter((col) => col.name !== GROUPS_COLUMNS_IDS.UsedSpaceFlag);
+    }
+    return columns.filter((col) => {
+        return (col.name !== GROUPS_COLUMNS_IDS.Degraded &&
+            col.name !== GROUPS_COLUMNS_IDS.UsedSpaceFlag);
+    });
+};
+export const getPreparedStorageGroupsColumns = (nodesMap, visibleEntities) => {
+    const rawColumns = getStorageGroupsColumns(nodesMap);
+    const filteredColumns = filterStorageGroupsColumns(rawColumns, visibleEntities);
+    return filteredColumns.map((column) => ({
+        ...column,
+        sortable: isSortableStorageProperty(column.name),
+    }));
+};

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
+import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
+import { NodesUptimeFilterValues } from '../../../utils/nodes';
+import { StorageNodesEmptyDataMessage } from './StorageNodesEmptyDataMessage';
+import { STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, 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);
+    if (!data.length &&
+        (visibleEntities !== VISIBLE_ENTITIES.all ||
+            nodesUptimeFilter !== NodesUptimeFilterValues.All)) {
+        return (_jsx(StorageNodesEmptyDataMessage, { visibleEntities: visibleEntities, nodesUptimeFilter: nodesUptimeFilter, onShowAll: onShowAll }));
+    }
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, data: data, columns: columns, settings: {
+            ...tableSettings,
+            dynamicRenderType: 'variable',
+        }, emptyDataMessage: i18n('empty.default'), rowClassName: getRowUnavailableClassName, sortOrder: sort, onSort: handleSort }, visibleEntities));
+}

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

@@ -0,0 +1,13 @@
+import { prepareStorageNodesResponse } from '../../../store/reducers/storage/utils';
+const getConcurrentId = (limit, offset) => {
+    return `getStorageNodes|offset${offset}|limit${limit}`;
+};
+export const getStorageNodes = async ({ type = 'static', storage = true, limit, offset, ...params }) => {
+    const response = await window.api.getNodes({ type, storage, limit, offset, ...params }, { concurrentId: getConcurrentId(limit, offset) });
+    const preparedResponse = prepareStorageNodesResponse(response);
+    return {
+        data: preparedResponse.nodes || [],
+        found: preparedResponse.found || 0,
+        total: preparedResponse.total || 0,
+    };
+};

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

@@ -0,0 +1,50 @@
+import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
+import type { PreparedStorageNode, VisibleEntities } from '../../../store/reducers/storage/types';
+import type { AdditionalNodesProps } from '../../../types/additionalProps';
+export declare const STORAGE_NODES_COLUMNS_WIDTH_LS_KEY = "storageNodesColumnsWidth";
+export declare const STORAGE_NODES_COLUMNS_IDS: {
+    readonly NodeId: "NodeId";
+    readonly Host: "Host";
+    readonly DC: "DC";
+    readonly Rack: "Rack";
+    readonly Uptime: "Uptime";
+    readonly PDisks: "PDisks";
+    readonly Missing: "Missing";
+};
+export declare const getPreparedStorageNodesColumns: (additionalNodesProps: AdditionalNodesProps | undefined, visibleEntities: VisibleEntities) => {
+    sortable: boolean;
+    name: string;
+    header?: React.ReactNode;
+    className?: string;
+    resizeable?: boolean;
+    render: ((props: {
+        row: PreparedStorageNode;
+        index: number;
+    }) => React.ReactNode) & ((props: {
+        value?: unknown;
+        row: PreparedStorageNode;
+        index: number;
+        footer?: boolean;
+        headerData?: boolean;
+    }) => import("react").ReactNode);
+    width: number;
+    resizeMaxWidth?: number;
+    resizeMinWidth?: number;
+    align: "center" | "left" | "right";
+    headerTitle?: string;
+    accessor?: string | ((row: PreparedStorageNode) => any) | undefined;
+    title?: string | ((row: PreparedStorageNode) => string) | undefined;
+    customStyle?: ((props: import("@gravity-ui/react-data-table").CustomStyleParams<PreparedStorageNode>) => import("react").CSSProperties) | undefined;
+    onClick?: ((data: {
+        row: PreparedStorageNode;
+        index: number;
+        footer?: boolean;
+        headerData?: boolean;
+    }, column: DataTableColumn<PreparedStorageNode>, event: import("react").MouseEvent<HTMLTableCellElement>) => void) | undefined;
+    defaultOrder?: import("@gravity-ui/react-data-table").OrderType;
+    sortAccessor?: string | ((row: PreparedStorageNode) => any) | undefined;
+    sortAscending?: import("@gravity-ui/react-data-table").Comparator<PreparedStorageNode> | undefined;
+    sub?: DataTableColumn<PreparedStorageNode>[] | undefined;
+    group?: boolean;
+    autogroup?: boolean;
+}[];

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { NodeHostWrapper } from '../../../components/NodeHostWrapper/NodeHostWrapper';
+import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
+import { EMPTY_DATA_PLACEHOLDER } from '../../../utils/constants';
+import { isSortableNodesProperty } from '../../../utils/nodes';
+import { PDisk } from '../PDisk/PDisk';
+import { b } from './shared';
+export const STORAGE_NODES_COLUMNS_WIDTH_LS_KEY = 'storageNodesColumnsWidth';
+export const STORAGE_NODES_COLUMNS_IDS = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Uptime: 'Uptime',
+    PDisks: 'PDisks',
+    Missing: 'Missing',
+};
+const getStorageNodesColumns = (additionalNodesProps) => {
+    const getNodeRef = additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef;
+    const columns = [
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.NodeId,
+            header: 'Node ID',
+            width: 100,
+            align: DataTable.RIGHT,
+            render: ({ row }) => row.NodeId,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Host,
+            header: 'Host',
+            width: 350,
+            render: ({ row }) => {
+                return _jsx(NodeHostWrapper, { node: row, getNodeRef: getNodeRef });
+            },
+            align: DataTable.LEFT,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.DC,
+            header: 'DC',
+            width: 100,
+            render: ({ row }) => row.DC || EMPTY_DATA_PLACEHOLDER,
+            align: DataTable.LEFT,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Rack,
+            header: 'Rack',
+            width: 100,
+            render: ({ row }) => row.Rack || '—',
+            align: DataTable.LEFT,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Uptime,
+            header: 'Uptime',
+            width: 130,
+            sortAccessor: ({ StartTime }) => (StartTime ? -StartTime : 0),
+            align: DataTable.RIGHT,
+            render: ({ row }) => row.Uptime,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Missing,
+            header: 'Missing',
+            width: 100,
+            align: DataTable.CENTER,
+            defaultOrder: DataTable.DESCENDING,
+            render: ({ row }) => row.Missing,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.PDisks,
+            className: b('pdisks-column'),
+            header: 'PDisks',
+            render: ({ row }) => {
+                var _a;
+                return (_jsx("div", { className: b('pdisks-wrapper'), children: (_a = row.PDisks) === null || _a === void 0 ? void 0 : _a.map((pDisk) => {
+                        var _a;
+                        const vDisks = (_a = row.VDisks) === null || _a === void 0 ? void 0 : _a.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
+                        return (_jsx("div", { className: b('pdisks-item'), children: _jsx(PDisk, { data: pDisk, nodeId: row.NodeId, vDisks: vDisks }) }, pDisk.PDiskId));
+                    }) }));
+            },
+            align: DataTable.CENTER,
+            sortable: false,
+            width: 900,
+            resizeable: false,
+        },
+    ];
+    return columns;
+};
+export const getPreparedStorageNodesColumns = (additionalNodesProps, visibleEntities) => {
+    const rawColumns = getStorageNodesColumns(additionalNodesProps);
+    const sortableColumns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableNodesProperty(column.name),
+    }));
+    if (visibleEntities !== VISIBLE_ENTITIES.missing) {
+        return sortableColumns.filter((col) => col.name !== STORAGE_NODES_COLUMNS_IDS.Missing);
+    }
+    return sortableColumns;
+};

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

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

package/dist/containers/Storage/StorageWrapper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../../utils/constants';
+import { useSetting } from '../../utils/hooks';
+import { Storage } from './Storage';
+import { VirtualStorage } from './VirtualStorage';
+export const StorageWrapper = ({ parentContainer, ...props }) => {
+    const [useVirtualTable] = useSetting(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+    if (useVirtualTable) {
+        return _jsx(VirtualStorage, { parentContainer: parentContainer, ...props });
+    }
+    return _jsx(Storage, { ...props });
+};

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "label" | "default_value" | "groups_count", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;