ydb-embedded-ui 4.27.1 → 4.29.0

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

@@ -1,13 +1,14 @@
 import cn from 'bem-cn-lite';
 
-import DataTable, {type Column} from '@gravity-ui/react-data-table';
+import DataTable, {type Column as DataTableColumn} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
+import type {Column as VirtualTableColumn} from '../../../components/VirtualTable';
 import shieldIcon from '../../../assets/icons/shield.svg';
-import type {ValueOf} from '../../../types/common';
 import type {NodesMap} from '../../../types/store/nodesList';
-import type {PreparedStorageGroup} from '../../../store/reducers/storage/types';
-import {getUsage, isFullVDiskData} from '../../../utils/storage';
+import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+import {getUsage, isFullVDiskData, isSortableStorageProperty} from '../../../utils/storage';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
@@ -21,7 +22,10 @@ import './StorageGroups.scss';
 
 const b = cn('global-storage-groups');
 
-const GROUPS_COLUMNS_IDS = {
+type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> &
+    DataTableColumn<PreparedStorageGroup>;
+
+export const GROUPS_COLUMNS_IDS = {
     PoolName: 'PoolName',
     Kind: 'Kind',
     Erasure: 'Erasure',
@@ -36,26 +40,9 @@ const GROUPS_COLUMNS_IDS = {
     Degraded: 'Degraded',
 } as const;
 
-type GroupsColumns = ValueOf<typeof GROUPS_COLUMNS_IDS>;
-
-const tableColumnsNames: Record<GroupsColumns, string> = {
-    PoolName: 'Pool Name',
-    Kind: 'Type',
-    Erasure: 'Erasure',
-    GroupId: 'Group ID',
-    Used: 'Used',
-    Limit: 'Limit',
-    UsedSpaceFlag: 'Space',
-    Usage: 'Usage',
-    Read: 'Read',
-    Write: 'Write',
-    VDisks: 'VDisks',
-    Degraded: 'Degraded',
-};
-
-const poolNameColumn: Column<PreparedStorageGroup> = {
+const poolNameColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.PoolName,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.PoolName],
+    header: 'Pool Name',
     width: 250,
     render: ({row}) => {
         const splitted = row.PoolName?.split('/');
@@ -75,14 +62,15 @@ const poolNameColumn: Column<PreparedStorageGroup> = {
     align: DataTable.LEFT,
 };
 
-const kindColumn: Column<PreparedStorageGroup> = {
+const kindColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Kind,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Kind],
-    // prettier-ignore
+    header: 'Type',
+    width: 100,
+    align: DataTable.LEFT,
     render: ({row}) => (
         <>
             <Label>{row.Kind || '—'}</Label>
-            {' '}
+            {'\u00a0'}
             {row.Encryption && (
                 <Popover
                     content={i18n('encrypted')}
@@ -99,17 +87,18 @@ const kindColumn: Column<PreparedStorageGroup> = {
     sortable: false,
 };
 
-const erasureColumn: Column<PreparedStorageGroup> = {
+const erasureColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Erasure,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Erasure],
+    header: 'Erasure',
+    width: 100,
     render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
     align: DataTable.LEFT,
     sortable: false,
 };
 
-const degradedColumn: Column<PreparedStorageGroup> = {
+const degradedColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Degraded,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Degraded],
+    header: 'Degraded',
     width: 100,
     render: ({row}) =>
         row.Degraded ? (
@@ -121,9 +110,9 @@ const degradedColumn: Column<PreparedStorageGroup> = {
     defaultOrder: DataTable.DESCENDING,
 };
 
-const usageColumn: Column<PreparedStorageGroup> = {
+const usageColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Usage,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Usage],
+    header: 'Usage',
     width: 100,
     render: ({row}) => {
         // without a limit the usage can be evaluated as 0,
@@ -140,9 +129,9 @@ const usageColumn: Column<PreparedStorageGroup> = {
     sortable: false,
 };
 
-const groupIdColumn: Column<PreparedStorageGroup> = {
+const groupIdColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.GroupId,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.GroupId],
+    header: 'Group ID',
     width: 130,
     render: ({row}) => {
         return <span className={b('group-id')}>{row.GroupID}</span>;
@@ -152,9 +141,9 @@ const groupIdColumn: Column<PreparedStorageGroup> = {
     sortable: false,
 };
 
-const usedColumn: Column<PreparedStorageGroup> = {
+const usedColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Used,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Used],
+    header: 'Used',
     width: 100,
     render: ({row}) => {
         return bytesToGB(row.Used, true);
@@ -163,9 +152,9 @@ const usedColumn: Column<PreparedStorageGroup> = {
     sortable: false,
 };
 
-const limitColumn: Column<PreparedStorageGroup> = {
+const limitColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Limit,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Limit],
+    header: 'Limit',
     width: 100,
     render: ({row}) => {
         return bytesToGB(row.Limit);
@@ -174,9 +163,9 @@ const limitColumn: Column<PreparedStorageGroup> = {
     sortable: false,
 };
 
-const usedSpaceFlagColumn: Column<PreparedStorageGroup> = {
+const usedSpaceFlagColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.UsedSpaceFlag,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.UsedSpaceFlag],
+    header: 'Space',
     width: 110,
     render: ({row}) => {
         const value = row.UsedSpaceFlag;
@@ -195,9 +184,9 @@ const usedSpaceFlagColumn: Column<PreparedStorageGroup> = {
     align: DataTable.CENTER,
 };
 
-const readColumn: Column<PreparedStorageGroup> = {
+const readColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Read,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Read],
+    header: 'Read',
     width: 100,
     render: ({row}) => {
         return row.Read ? bytesToSpeed(row.Read) : '-';
@@ -205,9 +194,9 @@ const readColumn: Column<PreparedStorageGroup> = {
     align: DataTable.RIGHT,
 };
 
-const writeColumn: Column<PreparedStorageGroup> = {
+const writeColumn: StorageGroupsColumn = {
     name: GROUPS_COLUMNS_IDS.Write,
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Write],
+    header: 'Write',
     width: 100,
     render: ({row}) => {
         return row.Write ? bytesToSpeed(row.Write) : '-';
@@ -215,10 +204,10 @@ const writeColumn: Column<PreparedStorageGroup> = {
     align: DataTable.RIGHT,
 };
 
-const getVdiscksColumn = (nodes?: NodesMap): Column<PreparedStorageGroup> => ({
+const getVdiscksColumn = (nodes?: NodesMap): StorageGroupsColumn => ({
     name: GROUPS_COLUMNS_IDS.VDisks,
     className: b('vdisks-column'),
-    header: tableColumnsNames[GROUPS_COLUMNS_IDS.VDisks],
+    header: 'VDisks',
     render: ({row}) => (
         <div className={b('vdisks-wrapper')}>
             {row.VDisks?.map((vDisk) => {
@@ -252,11 +241,11 @@ const getVdiscksColumn = (nodes?: NodesMap): Column<PreparedStorageGroup> => ({
     width: 900,
 });
 
-export const getStorageTopGroupsColumns = (): Column<PreparedStorageGroup>[] => {
+export const getStorageTopGroupsColumns = (): StorageGroupsColumn[] => {
     return [groupIdColumn, kindColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
 };
 
-export const getStorageGroupsColumns = (nodes?: NodesMap): Column<PreparedStorageGroup>[] => {
+const getStorageGroupsColumns = (nodes?: NodesMap): StorageGroupsColumn[] => {
     return [
         poolNameColumn,
         kindColumn,
@@ -272,3 +261,37 @@ export const getStorageGroupsColumns = (nodes?: NodesMap): Column<PreparedStorag
         getVdiscksColumn(nodes),
     ];
 };
+
+const filterStorageGroupsColumns = (
+    columns: StorageGroupsColumn[],
+    visibleEntities: 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: NodesMap | undefined,
+    visibleEntities: VisibleEntities,
+) => {
+    const rawColumns = getStorageGroupsColumns(nodesMap);
+
+    const filteredColumns = filterStorageGroupsColumns(rawColumns, visibleEntities);
+
+    return filteredColumns.map((column) => ({
+        ...column,
+        sortable: isSortableStorageProperty(column.name),
+    }));
+};

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,62 +1,30 @@
-import cn from 'bem-cn-lite';
+import DataTable, {Settings, SortOrder} from '@gravity-ui/react-data-table';
 
-import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
-
-import type {ValueOf} from '../../../types/common';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
 import type {HandleSort} from '../../../utils/hooks/useTableSort';
 import type {AdditionalNodesProps} from '../../../types/additionalProps';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
-import {
-    isSortableNodesProperty,
-    isUnavailableNode,
-    NodesUptimeFilterValues,
-} from '../../../utils/nodes';
-
-import {NodeHostWrapper} from '../../../components/NodeHostWrapper/NodeHostWrapper';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
 
-import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
-import {PDisk} from '../PDisk';
+import {getPreparedStorageNodesColumns} from './getStorageNodesColumns';
 
+import {StorageNodesEmptyDataMessage} from './StorageNodesEmptyDataMessage';
+import {getRowUnavailableClassName} from './shared';
 import i18n from './i18n';
 import './StorageNodes.scss';
 
-const TableColumnsIds = {
-    NodeId: 'NodeId',
-    Host: 'Host',
-    DC: 'DC',
-    Rack: 'Rack',
-    Uptime: 'Uptime',
-    PDisks: 'PDisks',
-    Missing: 'Missing',
-} as const;
-
-type TableColumnId = ValueOf<typeof TableColumnsIds>;
-
 interface StorageNodesProps {
     data: PreparedStorageNode[];
     tableSettings: Settings;
     visibleEntities: VisibleEntities;
-    nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
+    nodesUptimeFilter: NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
     additionalNodesProps?: AdditionalNodesProps;
     sort?: SortOrder;
     handleSort?: HandleSort;
 }
 
-const tableColumnsNames: Record<TableColumnId, string> = {
-    NodeId: 'Node ID',
-    Host: 'Host',
-    DC: 'DC',
-    Rack: 'Rack',
-    Uptime: 'Uptime',
-    PDisks: 'PDisks',
-    Missing: 'Missing',
-};
-
-const b = cn('global-storage-nodes');
-
 export function StorageNodes({
     data,
     tableSettings,
@@ -67,106 +35,23 @@ export function StorageNodes({
     sort,
     handleSort,
 }: StorageNodesProps) {
-    const getNodeRef = additionalNodesProps?.getNodeRef;
-
-    const rawColumns: Column<PreparedStorageNode>[] = [
-        {
-            name: TableColumnsIds.NodeId,
-            header: tableColumnsNames[TableColumnsIds.NodeId],
-            width: 100,
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Host,
-            header: tableColumnsNames[TableColumnsIds.Host],
-            width: 350,
-            render: ({row}) => {
-                return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
-            },
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.DC,
-            header: tableColumnsNames[TableColumnsIds.DC],
-            render: ({row}) => row.DataCenter || '—',
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.Rack,
-            header: tableColumnsNames[TableColumnsIds.Rack],
-            render: ({row}) => row.Rack || '—',
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.Uptime,
-            header: tableColumnsNames[TableColumnsIds.Uptime],
-            width: 130,
-            sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Missing,
-            header: tableColumnsNames[TableColumnsIds.Missing],
-            width: 100,
-            align: DataTable.CENTER,
-            defaultOrder: DataTable.DESCENDING,
-        },
-        {
-            name: TableColumnsIds.PDisks,
-            className: b('pdisks-column'),
-            header: tableColumnsNames[TableColumnsIds.PDisks],
-            render: ({row}) => (
-                <div className={b('pdisks-wrapper')}>
-                    {row.PDisks?.map((pDisk) => (
-                        <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                            <PDisk data={pDisk} nodeId={row.NodeId} />
-                        </div>
-                    ))}
-                </div>
-            ),
-            align: DataTable.CENTER,
-            sortable: false,
-            width: 900,
-        },
-    ];
-
-    let columns = rawColumns.map((column) => ({
-        ...column,
-        sortable: isSortableNodesProperty(column.name),
-    }));
-
-    if (visibleEntities !== VISIBLE_ENTITIES.missing) {
-        columns = columns.filter((col) => col.name !== TableColumnsIds.Missing);
-    }
-
-    if (!data.length) {
-        let message;
-
-        if (visibleEntities === VISIBLE_ENTITIES.space) {
-            message = i18n('empty.out_of_space');
-        }
-
-        if (visibleEntities === VISIBLE_ENTITIES.missing) {
-            message = i18n('empty.degraded');
-        }
-
-        if (nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime) {
-            message = i18n('empty.small_uptime');
-        }
-
-        if (
-            visibleEntities !== VISIBLE_ENTITIES.all &&
-            nodesUptimeFilter !== NodesUptimeFilterValues.All
-        ) {
-            message = i18n('empty.several_filters');
-        }
-
-        if (message) {
-            return <EmptyFilter title={message} showAll={i18n('show_all')} onShowAll={onShowAll} />;
-        }
+    const columns = getPreparedStorageNodesColumns(additionalNodesProps, visibleEntities);
+
+    if (
+        !data.length &&
+        (visibleEntities !== VISIBLE_ENTITIES.all ||
+            nodesUptimeFilter !== NodesUptimeFilterValues.All)
+    ) {
+        return (
+            <StorageNodesEmptyDataMessage
+                visibleEntities={visibleEntities}
+                nodesUptimeFilter={nodesUptimeFilter}
+                onShowAll={onShowAll}
+            />
+        );
     }
 
-    return data ? (
+    return (
         <DataTable
             key={visibleEntities as string}
             theme="yandex-cloud"
@@ -177,9 +62,9 @@ export function StorageNodes({
                 dynamicRenderType: 'variable',
             }}
             emptyDataMessage={i18n('empty.default')}
-            rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
+            rowClassName={getRowUnavailableClassName}
             sortOrder={sort}
             onSort={handleSort}
         />
-    ) : null;
+    );
 }

package/dist/containers/Storage/StorageNodes/StorageNodesEmptyDataMessage.tsx

@@ -0,0 +1,44 @@
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
+import i18n from './i18n';
+
+interface StorageNodesEmptyDataMessageProps {
+    visibleEntities: VisibleEntities;
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    onShowAll?: VoidFunction;
+}
+
+export const StorageNodesEmptyDataMessage = ({
+    visibleEntities,
+    nodesUptimeFilter,
+    onShowAll,
+}: StorageNodesEmptyDataMessageProps) => {
+    let message;
+
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
+        message = i18n('empty.out_of_space');
+    }
+
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
+        message = i18n('empty.degraded');
+    }
+
+    if (nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime) {
+        message = i18n('empty.small_uptime');
+    }
+
+    if (
+        visibleEntities !== VISIBLE_ENTITIES.all &&
+        nodesUptimeFilter !== NodesUptimeFilterValues.All
+    ) {
+        message = i18n('empty.several_filters');
+    }
+
+    if (message) {
+        return <EmptyFilter title={message} showAll={i18n('show_all')} onShowAll={onShowAll} />;
+    }
+
+    return null;
+};

package/dist/containers/Storage/StorageNodes/VirtualStorageNodes.tsx

@@ -0,0 +1,105 @@
+import {useCallback, useMemo} from 'react';
+
+import type {AdditionalNodesProps} from '../../../types/additionalProps';
+import {
+    getUptimeParamValue,
+    NodesUptimeFilterValues,
+    type NodesSortValue,
+} from '../../../utils/nodes';
+import {
+    VirtualTable,
+    type FetchData,
+    type RenderControls,
+    type RenderErrorMessage,
+} from '../../../components/VirtualTable';
+import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+
+import {StorageNodesEmptyDataMessage} from './StorageNodesEmptyDataMessage';
+import {getPreparedStorageNodesColumns} from './getStorageNodesColumns';
+import {getStorageNodes} from './getNodes';
+import {getRowUnavailableClassName} from './shared';
+import i18n from './i18n';
+
+interface VirtualStorageNodesProps {
+    searchValue: string;
+    visibleEntities: VisibleEntities;
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    tenant?: string;
+
+    additionalNodesProps?: AdditionalNodesProps;
+    onShowAll: VoidFunction;
+
+    parentContainer?: Element | null;
+    renderControls: RenderControls;
+    renderErrorMessage: RenderErrorMessage;
+}
+
+export const VirtualStorageNodes = ({
+    searchValue,
+    visibleEntities,
+    nodesUptimeFilter,
+    tenant,
+    additionalNodesProps,
+    onShowAll,
+    parentContainer,
+    renderControls,
+    renderErrorMessage,
+}: VirtualStorageNodesProps) => {
+    const filters = useMemo(() => {
+        return [searchValue, visibleEntities, nodesUptimeFilter, tenant];
+    }, [searchValue, visibleEntities, nodesUptimeFilter, tenant]);
+
+    const fetchData = useCallback<FetchData<PreparedStorageNode>>(
+        async (limit, offset, {sortOrder, columnId} = {}) => {
+            return await getStorageNodes({
+                limit,
+                offset,
+                filter: searchValue,
+                uptime: getUptimeParamValue(nodesUptimeFilter),
+                visibleEntities,
+                tenant,
+
+                sortOrder,
+                sortValue: columnId as NodesSortValue,
+            });
+        },
+        [nodesUptimeFilter, searchValue, tenant, visibleEntities],
+    );
+
+    const columns = useMemo(() => {
+        return getPreparedStorageNodesColumns(additionalNodesProps, visibleEntities);
+    }, [additionalNodesProps, visibleEntities]);
+
+    const renderEmptyDataMessage = () => {
+        if (
+            visibleEntities !== VISIBLE_ENTITIES.all ||
+            nodesUptimeFilter !== NodesUptimeFilterValues.All
+        ) {
+            return (
+                <StorageNodesEmptyDataMessage
+                    onShowAll={onShowAll}
+                    nodesUptimeFilter={nodesUptimeFilter}
+                    visibleEntities={visibleEntities}
+                />
+            );
+        }
+
+        return i18n('empty.default');
+    };
+
+    return (
+        <VirtualTable
+            parentContainer={parentContainer}
+            columns={columns}
+            fetchData={fetchData}
+            rowHeight={50}
+            limit={50}
+            renderControls={renderControls}
+            renderErrorMessage={renderErrorMessage}
+            renderEmptyDataMessage={renderEmptyDataMessage}
+            getRowClassName={getRowUnavailableClassName}
+            dependencyArray={filters}
+        />
+    );
+};

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

@@ -0,0 +1,26 @@
+import type {NodesApiRequestParams} from '../../../store/reducers/nodes/types';
+import {prepareStorageNodesResponse} from '../../../store/reducers/storage/utils';
+
+const getConcurrentId = (limit?: number, offset?: number) => {
+    return `getStorageNodes|offset${offset}|limit${limit}`;
+};
+
+export const getStorageNodes = async ({
+    type = 'static',
+    storage = true,
+    limit,
+    offset,
+    ...params
+}: NodesApiRequestParams) => {
+    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,
+    };
+};