ydb-embedded-ui 4.27.1 → 4.28.0

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

@@ -1,31 +1,17 @@
-import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
+import {useMemo} from 'react';
+
+import DataTable, {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 {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
-import {isSortableStorageProperty} from '../../../utils/storage';
-import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
-import {getStorageGroupsColumns} from './getStorageGroupsColumns';
+import {getPreparedStorageGroupsColumns} from './getStorageGroupsColumns';
+import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage';
 
 import i18n from './i18n';
 import './StorageGroups.scss';
 
-const TableColumnsIds = {
-    PoolName: 'PoolName',
-    Kind: 'Kind',
-    Erasure: 'Erasure',
-    GroupId: 'GroupId',
-    Used: 'Used',
-    Limit: 'Limit',
-    Usage: 'Usage',
-    UsedSpaceFlag: 'UsedSpaceFlag',
-    Read: 'Read',
-    Write: 'Write',
-    VDisks: 'VDisks',
-    Degraded: 'Degraded',
-} as const;
-
 interface StorageGroupsProps {
     data: PreparedStorageGroup[];
     nodes?: NodesMap;
@@ -45,50 +31,20 @@ export function StorageGroups({
     sort,
     handleSort,
 }: StorageGroupsProps) {
-    const rawColumns: Column<PreparedStorageGroup>[] = getStorageGroupsColumns(nodes);
-
-    let columns = rawColumns.map((column) => ({
-        ...column,
-        sortable: isSortableStorageProperty(column.name),
-    }));
-
-    if (visibleEntities === VISIBLE_ENTITIES.all) {
-        columns = columns.filter((col) => {
-            return (
-                col.name !== TableColumnsIds.Degraded && col.name !== TableColumnsIds.UsedSpaceFlag
-            );
-        });
-    }
-
-    if (visibleEntities === VISIBLE_ENTITIES.space) {
-        columns = columns.filter((col) => col.name !== TableColumnsIds.Degraded);
-
-        if (!data.length) {
-            return (
-                <EmptyFilter
-                    title={i18n('empty.out_of_space')}
-                    showAll={i18n('show_all')}
-                    onShowAll={onShowAll}
-                />
-            );
-        }
-    }
-
-    if (visibleEntities === VISIBLE_ENTITIES.missing) {
-        columns = columns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
-
-        if (!data.length) {
-            return (
-                <EmptyFilter
-                    title={i18n('empty.degraded')}
-                    showAll={i18n('show_all')}
-                    onShowAll={onShowAll}
-                />
-            );
-        }
+    const columns = useMemo(() => {
+        return getPreparedStorageGroupsColumns(nodes, visibleEntities);
+    }, [nodes, visibleEntities]);
+
+    if (!data.length && visibleEntities !== VISIBLE_ENTITIES.all) {
+        return (
+            <StorageGroupsEmptyDataMessage
+                onShowAll={onShowAll}
+                visibleEntities={visibleEntities}
+            />
+        );
     }
 
-    return data ? (
+    return (
         <DataTable
             key={visibleEntities}
             theme="yandex-cloud"
@@ -99,5 +55,5 @@ export function StorageGroups({
             sortOrder={sort}
             onSort={handleSort}
         />
-    ) : null;
+    );
 }

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

@@ -0,0 +1,30 @@
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
+import i18n from './i18n';
+
+interface StorageNodesEmptyDataMessageProps {
+    visibleEntities?: VisibleEntities;
+    onShowAll?: VoidFunction;
+}
+
+export const StorageGroupsEmptyDataMessage = ({
+    visibleEntities,
+    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 (message) {
+        return <EmptyFilter title={message} showAll={i18n('show_all')} onShowAll={onShowAll} />;
+    }
+
+    return null;
+};

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

@@ -0,0 +1,94 @@
+import {useCallback, useMemo} from 'react';
+
+import type {NodesMap} from '../../../types/store/nodesList';
+import type {StorageSortValue} from '../../../utils/storage';
+import {
+    VirtualTable,
+    type FetchData,
+    type RenderControls,
+    type RenderErrorMessage,
+} from '../../../components/VirtualTable';
+import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+
+import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage';
+import {getPreparedStorageGroupsColumns} from './getStorageGroupsColumns';
+import {getStorageGroups} from './getGroups';
+import i18n from './i18n';
+
+interface VirtualStorageGroupsProps {
+    searchValue: string;
+    visibleEntities: VisibleEntities;
+    tenant?: string;
+    nodeId?: string;
+    nodesMap?: NodesMap;
+
+    onShowAll: VoidFunction;
+
+    parentContainer?: Element | null;
+    renderControls: RenderControls;
+    renderErrorMessage: RenderErrorMessage;
+}
+
+export const VirtualStorageGroups = ({
+    searchValue,
+    visibleEntities,
+    tenant,
+    nodeId,
+    nodesMap,
+    onShowAll,
+    parentContainer,
+    renderControls,
+    renderErrorMessage,
+}: VirtualStorageGroupsProps) => {
+    const filters = useMemo(() => {
+        return [searchValue, visibleEntities, tenant, nodeId];
+    }, [searchValue, visibleEntities, tenant, nodeId]);
+
+    const fetchData = useCallback<FetchData<PreparedStorageGroup>>(
+        async (limit, offset, {sortOrder, columnId} = {}) => {
+            return await getStorageGroups({
+                limit,
+                offset,
+                filter: searchValue,
+                visibleEntities,
+                tenant,
+                nodeId,
+
+                sortOrder,
+                sortValue: columnId as StorageSortValue,
+            });
+        },
+        [nodeId, searchValue, tenant, visibleEntities],
+    );
+
+    const columns = useMemo(() => {
+        return getPreparedStorageGroupsColumns(nodesMap, visibleEntities);
+    }, [nodesMap, visibleEntities]);
+
+    const renderEmptyDataMessage = () => {
+        if (visibleEntities !== VISIBLE_ENTITIES.all) {
+            return (
+                <StorageGroupsEmptyDataMessage
+                    onShowAll={onShowAll}
+                    visibleEntities={visibleEntities}
+                />
+            );
+        }
+
+        return i18n('empty.default');
+    };
+
+    return (
+        <VirtualTable
+            parentContainer={parentContainer}
+            columns={columns}
+            fetchData={fetchData}
+            limit={50}
+            renderControls={renderControls}
+            renderErrorMessage={renderErrorMessage}
+            renderEmptyDataMessage={renderEmptyDataMessage}
+            dependencyArray={filters}
+        />
+    );
+};

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

@@ -0,0 +1,21 @@
+import type {StorageApiRequestParams} from '../../../store/reducers/storage/types';
+import {prepareStorageGroupsResponse} from '../../../store/reducers/storage/utils';
+import {EVersion} from '../../../types/api/storage';
+
+const getConcurrentId = (limit?: number, offset?: number) => {
+    return `getStorageGroups|offset${offset}|limit${limit}`;
+};
+
+export const getStorageGroups = async ({limit, offset, ...params}: StorageApiRequestParams) => {
+    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.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),
+    }));
+};