ydb-embedded-ui 4.27.1 → 4.29.0

package/dist/containers/Storage/Storage.tsx

@@ -1,11 +1,7 @@
 import {useCallback, useEffect} from 'react';
 import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
 
-import {Search} from '../../components/Search';
-import {UptimeFilter} from '../../components/UptimeFIlter';
 import {AccessDenied} from '../../components/Errors/403';
-import {EntitiesCount} from '../../components/EntitiesCount';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {ResponseError} from '../../components/Errors/ResponseError';
 
@@ -51,14 +47,11 @@ import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 
 import {StorageGroups} from './StorageGroups/StorageGroups';
 import {StorageNodes} from './StorageNodes/StorageNodes';
-import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
-import {StorageVisibleEntitiesFilter} from './StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
-import {UsageFilter} from './UsageFilter';
+import {StorageControls} from './StorageControls/StorageControls';
+import {b} from './shared';
 
 import './Storage.scss';
 
-const b = cn('global-storage');
-
 interface StorageProps {
     additionalNodesProps?: AdditionalNodesProps;
     tenant?: string;
@@ -155,16 +148,16 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
         dispatch(setStorageTextFilter(value));
     };
 
-    const handleGroupVisibilityChange = (value: string) => {
-        dispatch(setVisibleEntities(value as VisibleEntities));
+    const handleGroupVisibilityChange = (value: VisibleEntities) => {
+        dispatch(setVisibleEntities(value));
     };
 
-    const handleStorageTypeChange = (value: string) => {
-        dispatch(setStorageType(value as StorageType));
+    const handleStorageTypeChange = (value: StorageType) => {
+        dispatch(setStorageType(value));
     };
 
-    const handleUptimeFilterChange = (value: string) => {
-        dispatch(setNodesUptimeFilter(value as NodesUptimeFilterValues));
+    const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
+        dispatch(setNodesUptimeFilter(value));
     };
 
     const handleShowAllNodes = () => {
@@ -202,65 +195,35 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
         );
     };
 
-    const renderEntitiesCount = () => {
-        const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
-        const current =
-            storageType === STORAGE_TYPES.groups ? storageGroups.length : storageNodes.length;
-
-        return (
-            <EntitiesCount
-                label={entityName}
-                loading={loading && !wasLoaded}
-                total={entitiesCount.total}
-                current={current}
-            />
-        );
-    };
-
     const renderControls = () => {
         return (
-            <>
-                <div className={b('search')}>
-                    <Search
-                        placeholder={
-                            storageType === STORAGE_TYPES.groups
-                                ? 'Group ID, Pool name'
-                                : 'Node ID, FQDN'
-                        }
-                        onChange={handleTextFilterChange}
-                        value={filter}
-                    />
-                </div>
-
-                {!isNodePage && (
-                    <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
-                )}
-
-                <StorageVisibleEntitiesFilter
-                    value={visibleEntities}
-                    onChange={handleGroupVisibilityChange}
-                />
-
-                {storageType === STORAGE_TYPES.nodes && (
-                    <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
-                )}
-
-                {storageType === STORAGE_TYPES.groups && (
-                    <UsageFilter
-                        value={usageFilter}
-                        onChange={handleUsageFilterChange}
-                        groups={usageFilterOptions}
-                        disabled={usageFilterOptions.length === 0}
-                    />
-                )}
-                {renderEntitiesCount()}
-            </>
+            <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 <AccessDenied />;
+            return <AccessDenied position="left" />;
         }
 
         return <ResponseError error={error} />;

package/dist/containers/Storage/StorageControls/StorageControls.tsx

@@ -0,0 +1,104 @@
+import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount';
+import {Search} from '../../../components/Search/Search';
+import {UptimeFilter} from '../../../components/UptimeFIlter';
+
+import type {StorageType, VisibleEntities} from '../../../store/reducers/storage/types';
+import {STORAGE_TYPES} from '../../../store/reducers/storage/constants';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
+
+import {UsageFilter, type UsageFilterItem} from '../UsageFilter/UsageFilter';
+import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
+import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
+import i18n from '../i18n';
+import {b} from '../shared';
+
+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 const StorageControls = ({
+    searchValue,
+    handleSearchValueChange,
+
+    withTypeSelector,
+    storageType,
+    handleStorageTypeChange,
+
+    visibleEntities,
+    handleVisibleEntitiesChange,
+
+    nodesUptimeFilter,
+    handleNodesUptimeFilterChange,
+
+    withGroupsUsageFilter,
+    groupsUsageFilter,
+    groupsUsageFilterOptions,
+    handleGroupsUsageFilterChange,
+
+    entitiesCountCurrent,
+    entitiesCountTotal,
+    entitiesLoading,
+}: StorageControlsProps) => {
+    const isNodes = storageType === STORAGE_TYPES.nodes;
+    const entityName = isNodes ? i18n('nodes') : i18n('groups');
+
+    return (
+        <>
+            <Search
+                value={searchValue}
+                onChange={handleSearchValueChange}
+                placeholder={
+                    isNodes
+                        ? i18n('controls_nodes-search-placeholder')
+                        : i18n('controls_groups-search-placeholder')
+                }
+                className={b('search')}
+            />
+            {withTypeSelector && (
+                <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+            )}
+            <StorageVisibleEntitiesFilter
+                value={visibleEntities}
+                onChange={handleVisibleEntitiesChange}
+            />
+
+            {isNodes && (
+                <UptimeFilter value={nodesUptimeFilter} onChange={handleNodesUptimeFilterChange} />
+            )}
+            {!isNodes && withGroupsUsageFilter && (
+                <UsageFilter
+                    value={groupsUsageFilter}
+                    onChange={handleGroupsUsageFilterChange}
+                    groups={groupsUsageFilterOptions}
+                />
+            )}
+
+            <EntitiesCount
+                label={entityName}
+                loading={entitiesLoading}
+                total={entitiesCountTotal}
+                current={entitiesCountCurrent}
+            />
+        </>
+    );
+};

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,
+    };
+};