ydb-embedded-ui 4.27.1 → 4.28.0

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

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

@@ -0,0 +1,125 @@
+import DataTable, {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';
+import type {Column as VirtualTableColumn} from '../../../components/VirtualTable';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+import {NodeHostWrapper} from '../../../components/NodeHostWrapper/NodeHostWrapper';
+import {isSortableNodesProperty} from '../../../utils/nodes';
+
+import {PDisk} from '../PDisk/PDisk';
+import {b} from './shared';
+
+export const STORAGE_NODES_COLUMNS_IDS = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Uptime: 'Uptime',
+    PDisks: 'PDisks',
+    Missing: 'Missing',
+} as const;
+
+type StorageGroupsColumn = VirtualTableColumn<PreparedStorageNode> &
+    DataTableColumn<PreparedStorageNode>;
+
+const getStorageNodesColumns = (additionalNodesProps: AdditionalNodesProps | undefined) => {
+    const getNodeRef = additionalNodesProps?.getNodeRef;
+
+    const columns: StorageGroupsColumn[] = [
+        {
+            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 <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
+            },
+            align: DataTable.LEFT,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.DC,
+            header: 'DC',
+            width: 100,
+            render: ({row}) => row.DataCenter || '—',
+            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}) => {
+                return (
+                    <div className={b('pdisks-wrapper')}>
+                        {row.PDisks?.map((pDisk) => {
+                            const vDisks = row.VDisks?.filter(
+                                (vdisk) => vdisk.PDiskId === pDisk.PDiskId,
+                            ).map((data) => ({
+                                ...data,
+                                NodeId: row.NodeId,
+                            }));
+
+                            return (
+                                <div className={b('pdisks-item')} key={pDisk.PDiskId}>
+                                    <PDisk data={pDisk} nodeId={row.NodeId} vDisks={vDisks} />
+                                </div>
+                            );
+                        })}
+                    </div>
+                );
+            },
+            align: DataTable.CENTER,
+            sortable: false,
+            width: 900,
+        },
+    ];
+
+    return columns;
+};
+
+export const getPreparedStorageNodesColumns = (
+    additionalNodesProps: AdditionalNodesProps | undefined,
+    visibleEntities: 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/shared.ts

@@ -0,0 +1,9 @@
+import cn from 'bem-cn-lite';
+
+import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
+import {isUnavailableNode} from '../../../utils/nodes';
+
+export const b = cn('global-storage-nodes');
+
+export const getRowUnavailableClassName = (row: PreparedStorageNode) =>
+    b('node', {unavailable: isUnavailableNode(row)});

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx

@@ -10,7 +10,7 @@ const StorageTypesTitles = {
 
 interface StorageTypeFilterProps {
     value: StorageType;
-    onChange: (value: string) => void;
+    onChange: (value: StorageType) => void;
 }
 
 const storageTypeFilterQa = 'storage-type-filter';

package/dist/containers/Storage/StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter.tsx

@@ -11,7 +11,7 @@ export const VisibleEntitiesTitles = {
 
 interface StorageProblemFilterProps {
     value: VisibleEntities;
-    onChange: (value: string) => void;
+    onChange: (value: VisibleEntities) => void;
 }
 
 const storageVisibleEntitiesFilterQa = 'storage-visible-entities-filter';

package/dist/containers/Storage/StorageWrapper.tsx

@@ -0,0 +1,23 @@
+import type {AdditionalNodesProps} from '../../types/additionalProps';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
+
+import {VirtualStorage} from './VirtualStorage';
+import {Storage} from './Storage';
+
+interface StorageWrapperProps {
+    tenant?: string;
+    nodeId?: string;
+    parentContainer?: Element | null;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export const StorageWrapper = ({parentContainer, ...props}: StorageWrapperProps) => {
+    const [useVirtualTable] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+
+    if (useVirtualTable) {
+        return <VirtualStorage parentContainer={parentContainer} {...props} />;
+    }
+
+    return <Storage {...props} />;
+};

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -10,7 +10,7 @@ import {getUsageSeverityForEntityStatus} from '../utils';
 import i18n from './i18n';
 import './UsageFilter.scss';
 
-interface UsageFilterItem {
+export interface UsageFilterItem {
     threshold: number;
     count: number;
 }
@@ -21,13 +21,12 @@ interface UsageFilterProps {
     groups?: UsageFilterItem[];
     onChange?: (value: string[]) => void;
     debounce?: number;
-    disabled?: boolean;
 }
 
 const b = cn('usage-filter');
 
 export const UsageFilter = (props: UsageFilterProps) => {
-    const {className, value = [], groups = [], onChange, debounce = 200, disabled} = props;
+    const {className, value = [], groups = [], onChange, debounce = 200} = props;
 
     const [filterValue, setFilterValue] = useState(value);
     const timer = useRef<number>();
@@ -94,7 +93,7 @@ export const UsageFilter = (props: UsageFilterProps) => {
             renderOption={renderOption}
             getOptionHeight={() => 50}
             popupWidth={280}
-            disabled={disabled}
+            disabled={groups.length === 0}
         />
     );
 };