ydb-embedded-ui 4.20.4 → 4.21.0

package/dist/containers/Nodes/Nodes.tsx

@@ -19,13 +19,7 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/
 import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
-import {
-    useAutofetcher,
-    useSetting,
-    useTypedSelector,
-    useNodesRequestParams,
-    useTableSort,
-} from '../../utils/hooks';
+import {useAutofetcher, useSetting, useTypedSelector, useTableSort} from '../../utils/hooks';
 import {
     isSortableNodesProperty,
     isUnavailableNode,
@@ -90,31 +84,21 @@ export const Nodes = ({path, type, additionalNodesProps = {}}: NodesProps) => {
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 
-    const requestParams = useNodesRequestParams({
-        filter: searchValue,
-        problemFilter,
-        nodesUptimeFilter,
-        sortOrder,
-        sortValue,
-    });
-
     const fetchNodes = useCallback(
         (isBackground) => {
             if (!isBackground) {
                 dispatch(setDataWasNotLoaded());
             }
 
-            const params = requestParams || {};
-
             // For not DB entities we always use /compute endpoint instead of /nodes
             // since /nodes can return data only for tenants
             if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
-                dispatch(getComputeNodes({path, ...params}));
+                dispatch(getComputeNodes({path}));
             } else {
-                dispatch(getNodes({tenant: path, ...params}));
+                dispatch(getNodes({tenant: path}));
             }
         },
-        [dispatch, path, type, useNodesEndpoint, requestParams],
+        [dispatch, path, type, useNodesEndpoint],
     );
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);

package/dist/containers/Nodes/VirtualNodes.tsx

@@ -0,0 +1,146 @@
+import {useCallback, useMemo, useState} from 'react';
+import cn from 'bem-cn-lite';
+
+import type {AdditionalNodesProps} from '../../types/additionalProps';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
+import {ProblemFilterValues} from '../../store/reducers/settings/settings';
+import {
+    NodesSortValue,
+    NodesUptimeFilterValues,
+    getProblemParamValue,
+    getUptimeParamValue,
+    isSortableNodesProperty,
+    isUnavailableNode,
+} from '../../utils/nodes';
+
+import {Search} from '../../components/Search';
+import {ProblemFilter} from '../../components/ProblemFilter';
+import {UptimeFilter} from '../../components/UptimeFIlter';
+import {EntitiesCount} from '../../components/EntitiesCount';
+import {AccessDenied} from '../../components/Errors/403';
+import {ResponseError} from '../../components/Errors/ResponseError';
+import {Illustration} from '../../components/Illustration';
+import {
+    type FetchData,
+    type RenderControls,
+    type RenderErrorMessage,
+    VirtualTable,
+    GetRowClassName,
+} from '../../components/VirtualTable';
+
+import {getNodesColumns} from './getNodesColumns';
+import {getNodes} from './getNodes';
+import i18n from './i18n';
+
+import './Nodes.scss';
+
+const b = cn('ydb-nodes');
+
+interface NodesProps {
+    parentContainer?: Element | null;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [problemFilter, setProblemFilter] = useState<ProblemFilterValue>(ProblemFilterValues.ALL);
+    const [uptimeFilter, setUptimeFilter] = useState<NodesUptimeFilterValues>(
+        NodesUptimeFilterValues.All,
+    );
+
+    const filters = useMemo(() => {
+        return [searchValue, problemFilter, uptimeFilter];
+    }, [searchValue, problemFilter, uptimeFilter]);
+
+    const fetchData = useCallback<FetchData<NodesPreparedEntity>>(
+        async (limit, offset, {sortOrder, columnId} = {}) => {
+            return await getNodes({
+                limit,
+                offset,
+                filter: searchValue,
+                problems_only: getProblemParamValue(problemFilter),
+                uptime: getUptimeParamValue(uptimeFilter),
+                sortOrder,
+                sortValue: columnId as NodesSortValue,
+            });
+        },
+        [problemFilter, searchValue, uptimeFilter],
+    );
+
+    const getRowClassName: GetRowClassName<NodesPreparedEntity> = (row) => {
+        return b('node', {unavailable: isUnavailableNode(row)});
+    };
+
+    const handleSearchQueryChange = (value: string) => {
+        setSearchValue(value);
+    };
+    const handleProblemFilterChange = (value: string) => {
+        setProblemFilter(value as ProblemFilterValue);
+    };
+    const handleUptimeFilterChange = (value: string) => {
+        setUptimeFilter(value as NodesUptimeFilterValues);
+    };
+
+    const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
+        return (
+            <>
+                <Search
+                    onChange={handleSearchQueryChange}
+                    placeholder="Host name"
+                    className={b('search')}
+                    value={searchValue}
+                />
+                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
+                <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
+                <EntitiesCount
+                    total={totalEntities}
+                    current={foundEntities}
+                    label={'Nodes'}
+                    loading={!inited}
+                />
+            </>
+        );
+    };
+
+    const renderEmptyDataMessage = () => {
+        if (
+            problemFilter !== ProblemFilterValues.ALL ||
+            uptimeFilter !== NodesUptimeFilterValues.All
+        ) {
+            return <Illustration name="thumbsUp" width="200" />;
+        }
+
+        return i18n('empty.default');
+    };
+
+    const renderErrorMessage: RenderErrorMessage = (error) => {
+        if (error && error.status === 403) {
+            return <AccessDenied />;
+        }
+
+        return <ResponseError error={error} />;
+    };
+
+    const rawColumns = getNodesColumns({
+        getNodeRef: additionalNodesProps?.getNodeRef,
+    });
+
+    const columns = rawColumns.map((column) => {
+        return {...column, sortable: isSortableNodesProperty(column.name)};
+    });
+
+    return (
+        <VirtualTable
+            parentContainer={parentContainer}
+            columns={columns}
+            fetchData={fetchData}
+            limit={50}
+            renderControls={renderControls}
+            renderErrorMessage={renderErrorMessage}
+            renderEmptyDataMessage={renderEmptyDataMessage}
+            dependencyArray={filters}
+            getRowClassName={getRowClassName}
+        />
+    );
+};

package/dist/containers/Nodes/getNodes.ts

@@ -0,0 +1,26 @@
+import type {NodesApiRequestParams} from '../../store/reducers/nodes/types';
+import {prepareNodesData} from '../../store/reducers/nodes/utils';
+
+const getConcurrentId = (limit?: number, offset?: number) => {
+    return `getNodes|offset${offset}|limit${limit}`;
+};
+
+export const getNodes = async ({
+    type = 'any',
+    storage = false,
+    limit,
+    offset,
+    ...params
+}: NodesApiRequestParams) => {
+    const response = await window.api.getNodes(
+        {type, storage, limit, offset, ...params},
+        {concurrentId: getConcurrentId(limit, offset)},
+    );
+    const preparedResponse = prepareNodesData(response);
+
+    return {
+        data: preparedResponse.Nodes || [],
+        found: preparedResponse.FoundNodes || 0,
+        total: preparedResponse.TotalNodes || 0,
+    };
+};

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,5 +1,6 @@
-import DataTable, {type Column} from '@gravity-ui/react-data-table';
+import DataTable, {type Column as DataTableColumn} from '@gravity-ui/react-data-table';
 
+import type {Column as VirtualTableColumn} from '../../components/VirtualTable';
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
@@ -34,46 +35,52 @@ interface GetNodesColumnsProps {
     getNodeRef?: GetNodeRefFunc;
 }
 
-const nodeIdColumn: Column<NodesPreparedEntity> = {
+type NodesColumn = VirtualTableColumn<NodesPreparedEntity> & DataTableColumn<NodesPreparedEntity>;
+
+const nodeIdColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.NodeId,
     header: '#',
-    width: '80px',
+    width: 80,
+    render: ({row}) => row.NodeId,
     align: DataTable.RIGHT,
     sortable: false,
 };
 
-const getHostColumn = (
-    getNodeRef?: GetNodeRefFunc,
-    fixedWidth = false,
-): Column<NodesPreparedEntity> => ({
+const getHostColumn = (getNodeRef?: GetNodeRefFunc): NodesColumn => ({
     name: NODES_COLUMNS_IDS.Host,
     render: ({row}) => {
         return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
     },
-    width: fixedWidth ? '350px' : undefined,
+    width: 350,
     align: DataTable.LEFT,
     sortable: false,
 });
 
-const dataCenterColumn: Column<NodesPreparedEntity> = {
+const getHostColumnWithUndefinedWidth = (
+    getNodeRef?: GetNodeRefFunc,
+): DataTableColumn<NodesPreparedEntity> => {
+    return {...getHostColumn(getNodeRef), width: undefined};
+};
+
+const dataCenterColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.DC,
     header: 'DC',
     align: DataTable.LEFT,
     render: ({row}) => (row.DataCenter ? row.DataCenter : '—'),
-    width: '60px',
+    width: 60,
 };
 
-const rackColumn: Column<NodesPreparedEntity> = {
+const rackColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Rack,
     header: 'Rack',
     align: DataTable.LEFT,
     render: ({row}) => (row.Rack ? row.Rack : '—'),
-    width: '80px',
+    width: 80,
 };
 
-const versionColumn: Column<NodesPreparedEntity> = {
+const versionColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Version,
-    width: '200px',
+    width: 200,
     align: DataTable.LEFT,
     render: ({row}) => {
         return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
@@ -81,16 +88,17 @@ const versionColumn: Column<NodesPreparedEntity> = {
     sortable: false,
 };
 
-const uptimeColumn: Column<NodesPreparedEntity> = {
+const uptimeColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Uptime,
     header: 'Uptime',
     sortAccessor: ({StartTime}) => StartTime && -StartTime,
+    render: ({row}) => row.Uptime,
     align: DataTable.RIGHT,
-    width: '110px',
+    width: 110,
     sortable: false,
 };
 
-const memoryColumn: Column<NodesPreparedEntity> = {
+const memoryColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Memory,
     header: 'Memory',
     sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
@@ -103,21 +111,21 @@ const memoryColumn: Column<NodesPreparedEntity> = {
         }
     },
     align: DataTable.RIGHT,
-    width: '120px',
+    width: 120,
 };
 
-const cpuColumn: Column<NodesPreparedEntity> = {
+const cpuColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.CPU,
     header: 'CPU',
     sortAccessor: ({PoolStats = []}) => Math.max(...PoolStats.map(({Usage}) => Number(Usage))),
     defaultOrder: DataTable.DESCENDING,
     render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
     align: DataTable.LEFT,
-    width: '80px',
+    width: 80,
     sortable: false,
 };
 
-const loadAverageColumn: Column<NodesPreparedEntity> = {
+const loadAverageColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.LoadAverage,
     header: 'Load average',
     sortAccessor: ({LoadAverage = []}) =>
@@ -135,13 +143,13 @@ const loadAverageColumn: Column<NodesPreparedEntity> = {
             '—'
         ),
     align: DataTable.LEFT,
-    width: '140px',
+    width: 140,
     sortable: false,
 };
 
-const getTabletsColumn = (tabletsPath?: string): Column<NodesPreparedEntity> => ({
+const getTabletsColumn = (tabletsPath?: string): NodesColumn => ({
     name: NODES_COLUMNS_IDS.Tablets,
-    width: '430px',
+    width: 430,
     render: ({row}) => {
         return row.Tablets ? (
             <TabletsStatistic
@@ -157,7 +165,7 @@ const getTabletsColumn = (tabletsPath?: string): Column<NodesPreparedEntity> =>
     sortable: false,
 });
 
-const topNodesLoadAverageColumn: Column<NodesPreparedEntity> = {
+const topNodesLoadAverageColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.TopNodesLoadAverage,
     header: 'Load',
     render: ({row}) =>
@@ -170,11 +178,11 @@ const topNodesLoadAverageColumn: Column<NodesPreparedEntity> = {
             '—'
         ),
     align: DataTable.LEFT,
-    width: '80px',
+    width: 80,
     sortable: false,
 };
 
-const topNodesMemoryColumn: Column<NodesPreparedEntity> = {
+const topNodesMemoryColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.TopNodesMemory,
     header: 'Memory',
     render: ({row}) =>
@@ -189,17 +197,14 @@ const topNodesMemoryColumn: Column<NodesPreparedEntity> = {
             '—'
         ),
     align: DataTable.LEFT,
-    width: '140px',
+    width: 140,
     sortable: false,
 };
 
-export function getNodesColumns({
-    tabletsPath,
-    getNodeRef,
-}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
+export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps): NodesColumn[] {
     return [
         nodeIdColumn,
-        getHostColumn(getNodeRef, true),
+        getHostColumn(getNodeRef),
         dataCenterColumn,
         rackColumn,
         versionColumn,
@@ -213,23 +218,28 @@ export function getNodesColumns({
 
 export function getTopNodesByLoadColumns(
     getNodeRef?: GetNodeRefFunc,
-): Column<NodesPreparedEntity>[] {
-    return [topNodesLoadAverageColumn, nodeIdColumn, getHostColumn(getNodeRef), versionColumn];
+): DataTableColumn<NodesPreparedEntity>[] {
+    return [
+        topNodesLoadAverageColumn,
+        nodeIdColumn,
+        getHostColumnWithUndefinedWidth(getNodeRef),
+        versionColumn,
+    ];
 }
 
 export function getTopNodesByCpuColumns(
     getNodeRef?: GetNodeRefFunc,
-): Column<NodesPreparedEntity>[] {
-    return [cpuColumn, nodeIdColumn, getHostColumn(getNodeRef)];
+): DataTableColumn<NodesPreparedEntity>[] {
+    return [cpuColumn, nodeIdColumn, getHostColumnWithUndefinedWidth(getNodeRef)];
 }
 
 export function getTopNodesByMemoryColumns({
     tabletsPath,
     getNodeRef,
-}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
+}: GetNodesColumnsProps): NodesColumn[] {
     return [
         nodeIdColumn,
-        getHostColumn(getNodeRef, true),
+        getHostColumn(getNodeRef),
         uptimeColumn,
         topNodesMemoryColumn,
         topNodesLoadAverageColumn,

package/dist/containers/UserSettings/i18n/en.json

@@ -19,8 +19,8 @@
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
-  "settings.useBackendParamsForTables.title": "Offload tables filters and sorting to backend",
-  "settings.useBackendParamsForTables.popover": "Filter and sort Nodes and Storage tables with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
+  "settings.useBackendParamsForTables.title": "Use virtual table for cluster Nodes tab",
+  "settings.useBackendParamsForTables.popover": "Use table with data load on scroll. It will increase performance, but could work unstable",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
   "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",

package/dist/containers/UserSettings/i18n/ru.json

@@ -19,8 +19,8 @@
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
-  "settings.useBackendParamsForTables.title": "Перенести фильтры и сортировку таблиц на бэкенд",
-  "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблиц Nodes и Storage с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
+  "settings.useBackendParamsForTables.title": "Использовать виртуализированную таблицу для вкладки Nodes кластера",
+  "settings.useBackendParamsForTables.popover": "Использовать таблицу с загрузкой данных по скроллу. Это улучшит производительность, но может работать нестабильно",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
   "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",

package/dist/utils/hooks/useNodesRequestParams.ts

@@ -2,10 +2,9 @@ import {useMemo} from 'react';
 
 import type {NodesGeneralRequestParams} from '../../store/reducers/nodes/types';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
-import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
-import {HOUR_IN_SECONDS, USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../constants';
-import {NodesUptimeFilterValues} from '../nodes';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../constants';
+import {NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue} from '../nodes';
 import {useSetting} from './useSetting';
 
 interface NodesRawRequestParams
@@ -27,11 +26,8 @@ export const useNodesRequestParams = ({
     // Otherwise no params will be updated, no hooks that depend on requestParams will be triggered
     return useMemo(() => {
         if (useBackendParamsForTables) {
-            const problemsOnly = problemFilter === ProblemFilterValues.PROBLEMS;
-            const uptime =
-                nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime
-                    ? HOUR_IN_SECONDS
-                    : undefined;
+            const problemsOnly = getProblemParamValue(problemFilter);
+            const uptime = getUptimeParamValue(nodesUptimeFilter);
 
             return {
                 filter,

package/dist/utils/nodes.ts

@@ -3,8 +3,12 @@ import type {TNodeInfo} from '../types/api/nodesList';
 import type {NodesPreparedEntity} from '../store/reducers/nodes/types';
 import type {NodesMap} from '../types/store/nodesList';
 import type {ValueOf} from '../types/common';
+import type {ProblemFilterValue} from '../store/reducers/settings/types';
+import {ProblemFilterValues} from '../store/reducers/settings/settings';
 import {EFlag} from '../types/api/enums';
 
+import {HOUR_IN_SECONDS} from './constants';
+
 export enum NodesUptimeFilterValues {
     'All' = 'All',
     'SmallUptime' = 'SmallUptime',
@@ -27,6 +31,14 @@ export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
     }, new Map());
 };
 
+export const getProblemParamValue = (problemFilter: ProblemFilterValue | undefined) => {
+    return problemFilter === ProblemFilterValues.PROBLEMS;
+};
+
+export const getUptimeParamValue = (nodesUptimeFilter: NodesUptimeFilterValues | undefined) => {
+    return nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime ? HOUR_IN_SECONDS : undefined;
+};
+
 /**
  * Values to sort /compute v2 and /nodes responses
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.20.4",
+  "version": "4.21.0",
   "files": [
     "dist"
   ],