ydb-embedded-ui 4.20.4 → 4.21.0

package/dist/components/VirtualTable/VirtualTable.tsx

@@ -0,0 +1,277 @@
+import {useState, useReducer, useRef, useCallback, useEffect} from 'react';
+
+import type {IResponseError} from '../../types/api/error';
+
+import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
+import {ResponseError} from '../Errors/ResponseError';
+
+import type {
+    Column,
+    OnSort,
+    FetchData,
+    SortParams,
+    RenderControls,
+    OnEntry,
+    OnLeave,
+    GetRowClassName,
+    RenderEmptyDataMessage,
+    RenderErrorMessage,
+} from './types';
+import {
+    createVirtualTableReducer,
+    initChunk,
+    removeChunk,
+    resetChunks,
+    setChunkData,
+    setChunkError,
+    setChunkLoading,
+} from './reducer';
+import {DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT} from './constants';
+import {TableHead} from './TableHead';
+import {TableChunk} from './TableChunk';
+import {EmptyTableRow} from './TableRow';
+import {useIntersectionObserver} from './useIntersectionObserver';
+import {getArray} from './utils';
+import i18n from './i18n';
+import {b} from './shared';
+
+import './VirtualTable.scss';
+
+interface VirtualTableProps<T> {
+    limit: number;
+    fetchData: FetchData<T>;
+    columns: Column<T>[];
+    getRowClassName?: GetRowClassName<T>;
+    rowHeight?: number;
+    parentContainer?: Element | null;
+    initialSortParams?: SortParams;
+    renderControls?: RenderControls;
+    renderEmptyDataMessage?: RenderEmptyDataMessage;
+    renderErrorMessage?: RenderErrorMessage;
+    dependencyArray?: unknown[]; // Fully reload table on params change
+}
+
+export const VirtualTable = <T,>({
+    limit,
+    fetchData,
+    columns,
+    getRowClassName,
+    rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
+    parentContainer,
+    initialSortParams,
+    renderControls,
+    renderEmptyDataMessage,
+    renderErrorMessage,
+    dependencyArray,
+}: VirtualTableProps<T>) => {
+    const inited = useRef(false);
+    const tableContainer = useRef<HTMLDivElement>(null);
+
+    const [state, dispatch] = useReducer(createVirtualTableReducer<T>(), {});
+
+    const [sortParams, setSortParams] = useState<SortParams | undefined>(initialSortParams);
+
+    const [totalEntities, setTotalEntities] = useState(limit);
+    const [foundEntities, setFoundEntities] = useState(0);
+
+    const [error, setError] = useState<IResponseError>();
+
+    const [pendingRequests, setPendingRequests] = useState<Record<string, NodeJS.Timeout>>({});
+
+    const fetchChunkData = useCallback(
+        async (id: string) => {
+            dispatch(setChunkLoading(id));
+
+            const timer = setTimeout(async () => {
+                const offset = Number(id) * limit;
+
+                try {
+                    const response = await fetchData(limit, offset, sortParams);
+                    const {data, total, found} = response;
+
+                    setTotalEntities(total);
+                    setFoundEntities(found);
+                    inited.current = true;
+
+                    dispatch(setChunkData(id, data));
+                } catch (err) {
+                    // Do not set error on cancelled requests
+                    if ((err as IResponseError)?.isCancelled) {
+                        return;
+                    }
+
+                    dispatch(setChunkError(id, err as IResponseError));
+                    setError(err as IResponseError);
+                }
+            }, DEFAULT_REQUEST_TIMEOUT);
+
+            setPendingRequests((reqs) => {
+                reqs[id] = timer;
+                return reqs;
+            });
+        },
+        [fetchData, limit, sortParams],
+    );
+
+    const onEntry = useCallback<OnEntry>((id) => {
+        dispatch(initChunk(id));
+    }, []);
+
+    const onLeave = useCallback<OnLeave>(
+        (id) => {
+            dispatch(removeChunk(id));
+
+            // If there is a pending request for the removed chunk, cancel it
+            // It made to prevent excessive requests on fast scroll
+            if (pendingRequests[id]) {
+                const timer = pendingRequests[id];
+                window.clearTimeout(timer);
+                delete pendingRequests[id];
+            }
+        },
+        [pendingRequests],
+    );
+
+    // Load chunks if they become active
+    // This mecanism helps to set chunk active state from different sources, but load data only once
+    // Only currently active chunks should be in state so iteration by the whole state shouldn't be a problem
+    useEffect(() => {
+        for (const id of Object.keys(state)) {
+            const chunk = state[Number(id)];
+
+            if (chunk?.active && !chunk?.loading && !chunk?.wasLoaded) {
+                fetchChunkData(id);
+            }
+        }
+    }, [fetchChunkData, state]);
+
+    // Reset table on filters change
+    useEffect(() => {
+        // Reset counts, so table unmount unneeded chunks
+        setTotalEntities(limit);
+        setFoundEntities(0);
+        setError(undefined);
+
+        // Remove all chunks from state
+        dispatch(resetChunks());
+
+        // Reset table state for the controls
+        inited.current = false;
+
+        // If there is a parent, scroll to parent container ref
+        // Else scroll to table top
+        // It helps to prevent layout shifts, when chunks quantity is changed
+        if (parentContainer) {
+            parentContainer.scrollTo(0, 0);
+        } else {
+            tableContainer.current?.scrollTo(0, 0);
+        }
+
+        // Make table start to load data
+        dispatch(initChunk('0'));
+    }, [dependencyArray, limit, parentContainer]);
+
+    // Reload currently active chunks
+    // Use case - sort params change, so data should be updated, but without chunks unmount
+    const reloadCurrentViewport = () => {
+        for (const id of Object.keys(state)) {
+            if (state[Number(id)]?.active) {
+                dispatch(initChunk(id));
+            }
+        }
+    };
+
+    const handleSort: OnSort = (params) => {
+        setSortParams(params);
+        reloadCurrentViewport();
+    };
+
+    const observer = useIntersectionObserver({onEntry, onLeave, parentContainer});
+
+    // Render at least 1 chunk
+    const totalLength = foundEntities || limit;
+    const chunksCount = Math.ceil(totalLength / limit);
+
+    const renderChunks = () => {
+        if (!observer) {
+            return null;
+        }
+
+        return getArray(chunksCount).map((value) => {
+            const chunkData = state[value];
+
+            return (
+                <TableChunk
+                    observer={observer}
+                    key={value}
+                    id={value}
+                    chunkSize={limit}
+                    rowHeight={rowHeight}
+                    columns={columns}
+                    chunkData={chunkData}
+                    getRowClassName={getRowClassName}
+                />
+            );
+        });
+    };
+
+    const renderData = () => {
+        if (inited.current && foundEntities === 0) {
+            return (
+                <tbody>
+                    <EmptyTableRow columns={columns}>
+                        {renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty')}
+                    </EmptyTableRow>
+                </tbody>
+            );
+        }
+
+        // If first chunk is loaded with the error, display error
+        // In case of other chunks table will be inited
+        if (!inited.current && error) {
+            return (
+                <tbody>
+                    <EmptyTableRow columns={columns}>
+                        {renderErrorMessage ? (
+                            renderErrorMessage(error)
+                        ) : (
+                            <ResponseError error={error} />
+                        )}
+                    </EmptyTableRow>
+                </tbody>
+            );
+        }
+
+        return renderChunks();
+    };
+
+    const renderTable = () => {
+        return (
+            <table className={b('table')}>
+                <TableHead columns={columns} onSort={handleSort} />
+                {renderData()}
+            </table>
+        );
+    };
+
+    const renderContent = () => {
+        if (renderControls) {
+            return (
+                <TableWithControlsLayout>
+                    <TableWithControlsLayout.Controls>
+                        {renderControls({inited: inited.current, totalEntities, foundEntities})}
+                    </TableWithControlsLayout.Controls>
+                    <TableWithControlsLayout.Table>{renderTable()}</TableWithControlsLayout.Table>
+                </TableWithControlsLayout>
+            );
+        }
+
+        return renderTable();
+    };
+
+    return (
+        <div ref={tableContainer} className={b(null)}>
+            {renderContent()}
+        </div>
+    );
+};

package/dist/components/VirtualTable/constants.ts

@@ -0,0 +1,17 @@
+export const LEFT = 'left';
+export const CENTER = 'center';
+export const RIGHT = 'right';
+
+export const DEFAULT_ALIGN = LEFT;
+
+export const ASCENDING = 1;
+export const DESCENDING = -1;
+
+export const DEFAULT_SORT_ORDER = DESCENDING;
+
+// Time in ms after which request will be sent
+export const DEFAULT_REQUEST_TIMEOUT = 200;
+
+export const DEFAULT_TABLE_ROW_HEIGHT = 40;
+
+export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';

package/dist/components/VirtualTable/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "empty": "No data"
+}

package/dist/components/VirtualTable/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-virtual-table';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/VirtualTable/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "empty": "Нет данных"
+}

package/dist/components/VirtualTable/index.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './types';
+export * from './VirtualTable';

package/dist/components/VirtualTable/reducer.ts

@@ -0,0 +1,143 @@
+import type {Reducer} from 'react';
+
+import type {IResponseError} from '../../types/api/error';
+
+import type {Chunk} from './types';
+
+const INIT_CHUNK = 'infiniteTable/INIT_CHUNK';
+const REMOVE_CHUNK = 'infiniteTable/REMOVE_CHUNK';
+const SET_CHUNK_LOADING = 'infiniteTable/SET_CHUNK_LOADING';
+const SET_CHUNK_DATA = 'infiniteTable/SET_CHUNK_DATA';
+const SET_CHUNK_ERROR = 'infiniteTable/SET_CHUNK_ERROR';
+const RESET_CHUNKS = 'infiniteTable/RESET_CHUNKS';
+
+type VirtualTableState<T> = Record<string, Chunk<T> | undefined>;
+
+// Intermediary type to pass to ReducerAction (because ReturnType cannot correctly convert generics)
+interface SetChunkDataAction<T> {
+    type: typeof SET_CHUNK_DATA;
+    data: {
+        id: string;
+        data: T[];
+    };
+}
+
+export const setChunkData = <T>(id: string, data: T[]): SetChunkDataAction<T> => {
+    return {
+        type: SET_CHUNK_DATA,
+        data: {id, data},
+    } as const;
+};
+
+export const setChunkError = (id: string, error: IResponseError) => {
+    return {
+        type: SET_CHUNK_ERROR,
+        data: {id, error},
+    } as const;
+};
+
+export const initChunk = (id: string) => {
+    return {
+        type: INIT_CHUNK,
+        data: {id},
+    } as const;
+};
+
+export const setChunkLoading = (id: string) => {
+    return {
+        type: SET_CHUNK_LOADING,
+        data: {id},
+    } as const;
+};
+
+export const removeChunk = (id: string) => {
+    return {
+        type: REMOVE_CHUNK,
+        data: {id},
+    } as const;
+};
+
+export const resetChunks = () => {
+    return {
+        type: RESET_CHUNKS,
+    } as const;
+};
+
+type VirtualTableAction<T> =
+    | SetChunkDataAction<T>
+    | ReturnType<typeof setChunkError>
+    | ReturnType<typeof initChunk>
+    | ReturnType<typeof setChunkLoading>
+    | ReturnType<typeof removeChunk>
+    | ReturnType<typeof resetChunks>;
+
+// Reducer wrapped in additional function to pass generic type
+export const createVirtualTableReducer =
+    <T>(): Reducer<VirtualTableState<T>, VirtualTableAction<T>> =>
+    (state, action) => {
+        switch (action.type) {
+            case SET_CHUNK_DATA: {
+                const {id, data} = action.data;
+
+                return {
+                    ...state,
+                    [id]: {
+                        loading: false,
+                        wasLoaded: true,
+                        active: true,
+                        data,
+                    },
+                };
+            }
+            case SET_CHUNK_ERROR: {
+                const {id, error} = action.data;
+
+                return {
+                    ...state,
+                    [id]: {
+                        loading: false,
+                        wasLoaded: true,
+                        active: true,
+                        error,
+                    },
+                };
+            }
+            case INIT_CHUNK: {
+                const {id} = action.data;
+
+                return {
+                    ...state,
+                    [id]: {
+                        loading: false,
+                        wasLoaded: false,
+                        active: true,
+                    },
+                };
+            }
+            case SET_CHUNK_LOADING: {
+                const {id} = action.data;
+
+                return {
+                    ...state,
+                    [id]: {
+                        loading: true,
+                        wasLoaded: false,
+                        active: true,
+                    },
+                };
+            }
+            case REMOVE_CHUNK: {
+                const {id} = action.data;
+
+                const newState = {...state};
+                delete newState[id];
+
+                return newState;
+            }
+            case RESET_CHUNKS: {
+                return {};
+            }
+            default:
+                return state;
+        }
+    };

package/dist/components/VirtualTable/shared.ts

@@ -0,0 +1,3 @@
+import cn from 'bem-cn-lite';
+
+export const b = cn('ydb-virtual-table');

package/dist/components/VirtualTable/types.ts

@@ -0,0 +1,60 @@
+import type {ReactNode} from 'react';
+
+import type {IResponseError} from '../../types/api/error';
+
+import {ASCENDING, CENTER, DESCENDING, LEFT, RIGHT} from './constants';
+
+export interface Chunk<T> {
+    active: boolean;
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: T[];
+    error?: IResponseError;
+}
+
+export type GetChunk<T> = (id: number) => Chunk<T> | undefined;
+
+export type OnEntry = (id: string) => void;
+export type OnLeave = (id: string) => void;
+
+export type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
+export type SortOrderType = typeof ASCENDING | typeof DESCENDING;
+
+export type SortParams = {columnId?: string; sortOrder?: SortOrderType};
+export type OnSort = (params: SortParams) => void;
+
+export interface Column<T> {
+    name: string;
+    header?: ReactNode;
+    className?: string;
+    sortable?: boolean;
+    render: (props: {row: T; index: number}) => ReactNode;
+    width: number;
+    align: AlignType;
+}
+
+export interface VirtualTableData<T> {
+    data: T[];
+    total: number;
+    found: number;
+}
+
+export type FetchData<T> = (
+    limit: number,
+    offset: number,
+    sortParams?: SortParams,
+) => Promise<VirtualTableData<T>>;
+
+export type OnError = (error?: IResponseError) => void;
+
+interface ControlsParams {
+    totalEntities: number;
+    foundEntities: number;
+    inited: boolean;
+}
+
+export type RenderControls = (params: ControlsParams) => ReactNode;
+export type RenderEmptyDataMessage = () => ReactNode;
+export type RenderErrorMessage = (error: IResponseError) => ReactNode;
+
+export type GetRowClassName<T> = (row: T) => string | undefined;

package/dist/components/VirtualTable/useIntersectionObserver.ts

@@ -0,0 +1,42 @@
+import {useEffect, useRef} from 'react';
+
+import type {OnEntry, OnLeave} from './types';
+import {DEFAULT_INTERSECTION_OBSERVER_MARGIN} from './constants';
+
+interface UseIntersectionObserverProps {
+    onEntry: OnEntry;
+    onLeave: OnLeave;
+    parentContainer?: Element | null;
+}
+
+export const useIntersectionObserver = ({
+    onEntry,
+    onLeave,
+    parentContainer,
+}: UseIntersectionObserverProps) => {
+    const observer = useRef<IntersectionObserver>();
+
+    useEffect(() => {
+        const callback = (entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    onEntry(entry.target.id);
+                } else {
+                    onLeave(entry.target.id);
+                }
+            });
+        };
+
+        observer.current = new IntersectionObserver(callback, {
+            root: parentContainer,
+            rootMargin: DEFAULT_INTERSECTION_OBSERVER_MARGIN,
+        });
+
+        return () => {
+            observer.current?.disconnect();
+            observer.current = undefined;
+        };
+    }, [parentContainer, onEntry, onLeave]);
+
+    return observer.current;
+};

package/dist/components/VirtualTable/utils.ts

@@ -0,0 +1,3 @@
+export const getArray = (arrayLength: number) => {
+    return [...Array(arrayLength).keys()];
+};

package/dist/containers/App/App.scss

@@ -123,7 +123,8 @@ body,
     color: var(--yc-color-text-danger);
 }
 
-.data-table__row:hover .entity-status__clipboard-button {
+.data-table__row:hover .entity-status__clipboard-button,
+.ydb-virtual-table__row:hover .entity-status__clipboard-button {
     display: flex;
 }
 

package/dist/containers/Cluster/Cluster.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useMemo} from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import {useLocation, useRouteMatch} from 'react-router';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
@@ -18,11 +18,13 @@ import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
 import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
 
 import {InternalLink} from '../../components/InternalLink';
 import {Tenants} from '../Tenants/Tenants';
 import {Nodes} from '../Nodes/Nodes';
+import {VirtualNodes} from '../Nodes/VirtualNodes';
 import {Storage} from '../Storage/Storage';
 import {Versions} from '../Versions/Versions';
 
@@ -46,11 +48,15 @@ function Cluster({
     additionalNodesProps,
     additionalVersionsProps,
 }: ClusterProps) {
+    const container = useRef<HTMLDivElement>(null);
+
     const dispatch = useDispatch();
 
     const match = useRouteMatch<{activeTab: string}>(routes.cluster);
     const {activeTab = clusterTabsIds.tenants} = match?.params || {};
 
+    const [useVirtualNodes] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
@@ -104,7 +110,14 @@ function Cluster({
                 return <Tenants additionalTenantsProps={additionalTenantsProps} />;
             }
             case clusterTabsIds.nodes: {
-                return <Nodes additionalNodesProps={additionalNodesProps} />;
+                return useVirtualNodes ? (
+                    <VirtualNodes
+                        parentContainer={container.current}
+                        additionalNodesProps={additionalNodesProps}
+                    />
+                ) : (
+                    <Nodes additionalNodesProps={additionalNodesProps} />
+                );
             }
             case clusterTabsIds.storage: {
                 return <Storage additionalNodesProps={additionalNodesProps} />;
@@ -119,7 +132,7 @@ function Cluster({
     };
 
     return (
-        <div className={b()}>
+        <div className={b()} ref={container}>
             <ClusterInfo
                 cluster={cluster}
                 versionsValues={versionsValues}