ydb-embedded-ui 6.9.2 → 6.10.2

package/README.md

@@ -12,8 +12,8 @@ You can preview working UI using YDB docker image. It will be UI with the latest
 Run on a machine with Docker installed:
 
 ```
-docker pull cr.yandex/yc/yandex-docker-local-ydb
-docker run -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
+docker pull ghcr.io/ydb-platform/local-ydb:nightly
+docker run -dp 8765:8765 ghcr.io/ydb-platform/local-ydb:nightly
 ```
 
 Open http://localhost:8765 to view it in the browser.
@@ -25,7 +25,7 @@ Open http://localhost:8765 to view it in the browser.
    docker run --rm -ti --name ydb-local -h localhost \
       -p 8765:8765 \
       -e MON_PORT=8765 \
-      cr.yandex/yc/yandex-docker-local-ydb:latest
+      ghcr.io/ydb-platform/local-ydb:nightly
    ```
 2. Install dependencies with `npm ci`
 3. Run the frontend app in the development mode, via invoking `npm run dev`
@@ -38,11 +38,8 @@ For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
 
 [Docs on YDB docker images](https://ydb.tech/en/docs/getting_started/self_hosted/ydb_docker)
 
-Image `cr.yandex/yc/yandex-docker-local-ydb` corresponds to `:latest` tag. It's the latest stable ydb version.
-
-To test new features, you can use ydb version that is currently in testing mode with `cr.yandex/yc/yandex-docker-local-ydb:edge` image
-or use a build from `main` brunch with `ghcr.io/ydb-platform/local-ydb:nightly` image.
-Also you can set specific version like `cr.yandex/yc/yandex-docker-local-ydb:23.1`
+To test new features, you can use ydb version built from `main` brunch with `ghcr.io/ydb-platform/local-ydb:nightly` image.
+Also you can set specific version like `ghcr.io/ydb-platform/local-ydb:24.1`
 
 ### Custom configuration in dev mode with .env file
 
@@ -105,7 +102,7 @@ npm run test:e2e
 
 ### CI
 
-E2E tests are run in CI in `e2e_tests` job. Tests run on Playwright `webServer` (it is started with `npm run dev`), `webServer` uses docker container `cr.yandex/yc/yandex-docker-local-ydb` as backend.
+E2E tests are run in CI in `e2e_tests` job. Tests run on Playwright `webServer` (it is started with `npm run dev`), `webServer` uses docker container `ghcr.io/ydb-platform/local-ydb:nightly` as backend.
 
 ## Making a production bundle.
 
@@ -118,7 +115,7 @@ To test production bundle with latest YDB backend release, do the following:
 
 1. Install dependencies with `npm ci`
 2. Build a production bundle with a few tweaks for embedded version: `npm run build:embedded`.
-3. Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/content/monitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
+3. Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/content/monitoring ghcr.io/ydb-platform/local-ydb:nightly`
 4. Open [embedded YDB UI](http://localhost:8765/monitoring) to view it in the browser.
 
 ### Testing production bundle with specific cluster host

package/dist/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -8,7 +8,7 @@
 }
 
 .data-table__row:hover,
-.ydb-virtual-table__row:hover {
+.ydb-paginated-table__row:hover {
     .ydb-node-host-wrapper__external-button {
         display: inline-flex;
     }

package/dist/components/{VirtualTable/VirtualTable.d.ts → PaginatedTable/PaginatedTable.d.ts}

@@ -1,6 +1,6 @@
 import type { Column, FetchData, GetRowClassName, HandleTableColumnsResize, RenderControls, RenderEmptyDataMessage, RenderErrorMessage, SortParams } from './types';
-import './VirtualTable.scss';
-export interface VirtualTableProps<T> {
+import './PaginatedTable.scss';
+export interface PaginatedTableProps<T> {
     limit: number;
     fetchData: FetchData<T>;
     columns: Column<T>[];
@@ -14,4 +14,4 @@ export interface VirtualTableProps<T> {
     renderErrorMessage?: RenderErrorMessage;
     dependencyArray?: unknown[];
 }
-export declare const VirtualTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: VirtualTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginatedTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: PaginatedTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/{VirtualTable/VirtualTable.js → PaginatedTable/PaginatedTable.js}

@@ -8,14 +8,14 @@ import { TableHead } from './TableHead';
 import { EmptyTableRow } from './TableRow';
 import { DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT } from './constants';
 import i18n from './i18n';
-import { createVirtualTableReducer, initChunk, removeChunk, resetChunks, setChunkData, setChunkError, setChunkLoading, } from './reducer';
+import { createPaginatedTableReducer, initChunk, removeChunk, resetChunks, setChunkData, setChunkError, setChunkLoading, } from './reducer';
 import { b } from './shared';
 import { useIntersectionObserver } from './useIntersectionObserver';
-import './VirtualTable.scss';
-export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }) => {
+import './PaginatedTable.scss';
+export const PaginatedTable = ({ limit, fetchData, columns, getRowClassName, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }) => {
     const inited = React.useRef(false);
     const tableContainer = React.useRef(null);
-    const [state, dispatch] = React.useReducer(createVirtualTableReducer(), {});
+    const [state, dispatch] = React.useReducer(createPaginatedTableReducer(), {});
     const [sortParams, setSortParams] = React.useState(initialSortParams);
     const [totalEntities, setTotalEntities] = React.useState(limit);
     const [foundEntities, setFoundEntities] = React.useState(0);

package/dist/components/{VirtualTable/VirtualTable.scss → PaginatedTable/PaginatedTable.scss}

@@ -1,13 +1,13 @@
 @import '../../styles/mixins.scss';
 
-.ydb-virtual-table {
+.ydb-paginated-table {
     $block: &;
-    $cell-border: 1px solid var(--virtual-table-border-color);
-    --virtual-table-cell-vertical-padding: 5px;
-    --virtual-table-cell-horizontal-padding: 10px;
+    $cell-border: 1px solid var(--paginated-table-border-color);
+    --paginated-table-cell-vertical-padding: 5px;
+    --paginated-table-cell-horizontal-padding: 10px;
 
-    --virtual-table-border-color: var(--g-color-base-generic-hover);
-    --virtual-table-hover-color: var(--g-color-base-float-hover);
+    --paginated-table-border-color: var(--g-color-base-generic-hover);
+    --paginated-table-hover-color: var(--g-color-base-float-hover);
 
     width: 100%;
     @include body-2-typography();
@@ -27,7 +27,7 @@
 
     &__row {
         &:hover {
-            background: var(--virtual-table-hover-color);
+            background: var(--paginated-table-hover-color);
         }
 
         &_empty {
@@ -75,8 +75,8 @@
 
         width: 100%;
         max-width: 100%;
-        padding: var(--virtual-table-cell-vertical-padding)
-            var(--virtual-table-cell-horizontal-padding);
+        padding: var(--paginated-table-cell-vertical-padding)
+            var(--paginated-table-cell-horizontal-padding);
 
         &_align {
             &_left {
@@ -122,8 +122,8 @@
 
         width: 100%;
         max-width: 100%;
-        padding: var(--virtual-table-cell-vertical-padding)
-            var(--virtual-table-cell-horizontal-padding);
+        padding: var(--paginated-table-cell-vertical-padding)
+            var(--paginated-table-cell-horizontal-padding);
 
         vertical-align: middle;
         white-space: nowrap;

package/dist/components/PaginatedTable/ResizeablePaginatedTable.d.ts

@@ -0,0 +1,6 @@
+import type { PaginatedTableProps } from './PaginatedTable';
+interface ResizeablePaginatedTableProps<T> extends Omit<PaginatedTableProps<T>, 'onColumnsResize'> {
+    columnsWidthLSKey: string;
+}
+export declare function ResizeablePaginatedTable<T>({ columnsWidthLSKey, columns, ...props }: ResizeablePaginatedTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{VirtualTable/ResizeableVirtualTable.js → PaginatedTable/ResizeablePaginatedTable.js}

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTableResize } from '../../utils/hooks/useTableResize';
-import { VirtualTable } from './VirtualTable';
+import { PaginatedTable } from './PaginatedTable';
 function updateColumnsWidth(columns, columnsWidthSetup) {
     return columns.map((column) => {
         var _a;
         return { ...column, width: (_a = columnsWidthSetup[column.name]) !== null && _a !== void 0 ? _a : column.width };
     });
 }
-export function ResizeableVirtualTable({ columnsWidthLSKey, columns, ...props }) {
+export function ResizeablePaginatedTable({ columnsWidthLSKey, columns, ...props }) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
     const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
-    return (_jsx(VirtualTable, { columns: updatedColumns, onColumnsResize: setTableColumnsWidth, ...props }));
+    return (_jsx(PaginatedTable, { columns: updatedColumns, onColumnsResize: setTableColumnsWidth, ...props }));
 }

package/dist/components/{VirtualTable → PaginatedTable}/i18n/index.js

@@ -1,5 +1,5 @@
 import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
-const COMPONENT = 'ydb-virtual-table';
+const COMPONENT = 'ydb-paginated-table';
 export default registerKeysets(COMPONENT, { ru, en });

package/dist/components/PaginatedTable/index.d.ts

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './types';
+export * from './PaginatedTable';
+export * from './ResizeablePaginatedTable';

package/dist/components/PaginatedTable/index.js

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './types';
+export * from './PaginatedTable';
+export * from './ResizeablePaginatedTable';

package/dist/components/{VirtualTable → PaginatedTable}/reducer.d.ts

@@ -1,7 +1,7 @@
 import type { IResponseError } from '../../types/api/error';
 import type { Chunk } from './types';
 declare const SET_CHUNK_DATA = "infiniteTable/SET_CHUNK_DATA";
-type VirtualTableState<T> = Record<string, Chunk<T> | undefined>;
+type PaginatedTableState<T> = Record<string, Chunk<T> | undefined>;
 interface SetChunkDataAction<T> {
     type: typeof SET_CHUNK_DATA;
     data: {
@@ -38,6 +38,6 @@ export declare const removeChunk: (id: string) => {
 export declare const resetChunks: () => {
     readonly type: "infiniteTable/RESET_CHUNKS";
 };
-type VirtualTableAction<T> = SetChunkDataAction<T> | ReturnType<typeof setChunkError> | ReturnType<typeof initChunk> | ReturnType<typeof setChunkLoading> | ReturnType<typeof removeChunk> | ReturnType<typeof resetChunks>;
-export declare const createVirtualTableReducer: <T>() => React.Reducer<VirtualTableState<T>, VirtualTableAction<T>>;
+type PaginatedTableAction<T> = SetChunkDataAction<T> | ReturnType<typeof setChunkError> | ReturnType<typeof initChunk> | ReturnType<typeof setChunkLoading> | ReturnType<typeof removeChunk> | ReturnType<typeof resetChunks>;
+export declare const createPaginatedTableReducer: <T>() => React.Reducer<PaginatedTableState<T>, PaginatedTableAction<T>>;
 export {};

package/dist/components/{VirtualTable → PaginatedTable}/reducer.js

@@ -40,7 +40,7 @@ export const resetChunks = () => {
     };
 };
 // Reducer wrapped in additional function to pass generic type
-export const createVirtualTableReducer = () => (state, action) => {
+export const createPaginatedTableReducer = () => (state, action) => {
     switch (action.type) {
         case SET_CHUNK_DATA: {
             const { id, data } = action.data;

package/dist/components/PaginatedTable/shared.js

@@ -0,0 +1,2 @@
+import { cn } from '../../utils/cn';
+export const b = cn('ydb-paginated-table');

package/dist/components/{VirtualTable → PaginatedTable}/types.d.ts

@@ -33,12 +33,12 @@ export interface Column<T> {
     resizeMinWidth?: number;
     align: AlignType;
 }
-export interface VirtualTableData<T> {
+export interface PaginatedTableData<T> {
     data: T[];
     total: number;
     found: number;
 }
-export type FetchData<T> = (limit: number, offset: number, sortParams?: SortParams) => Promise<VirtualTableData<T>>;
+export type FetchData<T> = (limit: number, offset: number, sortParams?: SortParams) => Promise<PaginatedTableData<T>>;
 export type OnError = (error?: IResponseError) => void;
 interface ControlsParams {
     totalEntities: number;

package/dist/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -25,7 +25,7 @@
         @include sticky-top();
     }
 
-    .ydb-virtual-table__head {
+    .ydb-paginated-table__head {
         top: 62px;
     }
 

package/dist/components/VDisk/VDisk.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { STRUCTURE } from '../../containers/Node/NodePages';
-import routes, { createHref } from '../../routes';
+import routes, { createHref, getVDiskPagePath } from '../../routes';
+import { valueIsDefined } from '../../utils';
 import { cn } from '../../utils/cn';
+import { USE_SEPARATE_DISKS_PAGES_KEY } from '../../utils/constants';
 import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
 import { isFullVDiskData } from '../../utils/disks/helpers';
+import { useSetting } from '../../utils/hooks';
 import { DiskStateProgressBar } from '../DiskStateProgressBar/DiskStateProgressBar';
 import { InternalLink } from '../InternalLink';
 import { VDiskPopup } from '../VDiskPopup/VDiskPopup';
 import './VDisk.scss';
 const b = cn('ydb-vdisk-component');
 export const VDisk = ({ data = {}, nodes, compact }) => {
-    var _a, _b;
     const isFullData = isFullVDiskData(data);
+    const [useSeparateDisksPages] = useSetting(USE_SEPARATE_DISKS_PAGES_KEY);
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const anchor = React.useRef(null);
     const showPopup = () => {
@@ -21,8 +24,18 @@ export const VDisk = ({ data = {}, nodes, compact }) => {
     const hidePopup = () => {
         setIsPopupVisible(false);
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(VDiskPopup, { data: data, nodes: nodes, anchorRef: anchor, open: isPopupVisible }), _jsx("div", { className: b(), ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup, children: data.NodeId && isFullData ? (_jsx(InternalLink, { to: createHref(routes.node, { id: data.NodeId, activeTab: STRUCTURE }, {
-                        pdiskId: (_a = data.PDiskId) !== null && _a !== void 0 ? _a : (_b = data.PDisk) === null || _b === void 0 ? void 0 : _b.PDiskId,
-                        vdiskId: stringifyVdiskId(data.VDiskId),
-                    }), className: b('content'), children: _jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact }) })) : (_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact })) })] }));
+    let vDiskPath;
+    if (useSeparateDisksPages &&
+        valueIsDefined(data.VDiskSlotId) &&
+        valueIsDefined(data.PDiskId) &&
+        valueIsDefined(data.NodeId)) {
+        vDiskPath = getVDiskPagePath(data.VDiskSlotId, data.PDiskId, data.NodeId);
+    }
+    else if (valueIsDefined(data.NodeId) && isFullData) {
+        vDiskPath = createHref(routes.node, { id: data.NodeId, activeTab: STRUCTURE }, {
+            pdiskId: data.PDiskId,
+            vdiskId: stringifyVdiskId(data.VDiskId),
+        });
+    }
+    return (_jsxs(React.Fragment, { children: [_jsx(VDiskPopup, { data: data, nodes: nodes, anchorRef: anchor, open: isPopupVisible }), _jsx("div", { className: b(), ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup, children: vDiskPath ? (_jsx(InternalLink, { to: vDiskPath, className: b('content'), children: _jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact }) })) : (_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact })) })] }));
 };

package/dist/containers/App/App.d.ts

@@ -10,7 +10,7 @@ export interface AppProps {
     userSettings?: YDBEmbeddedUISettings;
     children?: React.ReactNode;
 }
-declare function App({ store, history, singleClusterMode, children, userSettings }: AppProps): import("react/jsx-runtime").JSX.Element;
+declare function App({ store, history, singleClusterMode, children, userSettings, }: AppProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react-redux").ConnectedComponent<typeof App, {
     history: History;
     userSettings?: YDBEmbeddedUISettings;

package/dist/containers/App/App.js

@@ -4,11 +4,11 @@ import { connect } from 'react-redux';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 import { Navigation } from '../AsideNavigation/Navigation';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
-import { settings } from '../UserSettings/settings';
+import { getUserSettings } from '../UserSettings/settings';
 import ContentWrapper, { Content } from './Content';
 import { Providers } from './Providers';
 import './App.scss';
-function App({ store, history, singleClusterMode, children, userSettings = settings }) {
+function App({ store, history, singleClusterMode, children, userSettings = getUserSettings({ singleClusterMode }), }) {
     return (_jsxs(Providers, { store: store, history: history, children: [_jsx(Helmet, { defaultTitle: "YDB Monitoring", titleTemplate: "%s \u2014 YDB Monitoring" }), _jsx(ContentWrapper, { children: _jsx(Navigation, { userSettings: userSettings, children: _jsxs(ErrorBoundary, { children: [_jsx(Content, { singleClusterMode: singleClusterMode, children: children }), _jsx("div", { id: "fullscreen-root" })] }) }) }), _jsx(ReduxTooltip, {})] }));
 }
 function mapStateToProps(state) {

package/dist/containers/App/App.scss

@@ -90,7 +90,7 @@ body,
 }
 
 .data-table__row,
-.ydb-virtual-table__row,
+.ydb-paginated-table__row,
 .ydb-tree-view__item {
     &:hover {
         & .clipboard-button {

package/dist/containers/AppWithClusters/AppWithClusters.js

@@ -1,19 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { USE_CLUSTER_BALANCER_AS_BACKEND_KEY } from '../../utils/constants';
 import { getMonitoringClusterLink as getMonitoringClusterLinkDefault, getMonitoringLink as getMonitoringLinkDefault, } from '../../utils/monitoring';
 import { App, AppSlots } from '../App';
-import { settings } from '../UserSettings/settings';
 import { ExtendedCluster } from './ExtendedCluster/ExtendedCluster';
 import { ExtendedNode } from './ExtendedNode/ExtendedNode';
 import { ExtendedTenant } from './ExtendedTenant/ExtendedTenant';
-import i18n from './i18n';
-const defaultUserSettings = settings;
-defaultUserSettings[2].sections[0].settings.push({
-    title: i18n('settings.useClusterBalancerAsBackend.title'),
-    description: i18n('settings.useClusterBalancerAsBackend.popover'),
-    settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
-});
-export function AppWithClusters({ store, history, getMonitoringLink = getMonitoringLinkDefault, getMonitoringClusterLink = getMonitoringClusterLinkDefault, userSettings = defaultUserSettings, children, }) {
+export function AppWithClusters({ store, history, getMonitoringLink = getMonitoringLinkDefault, getMonitoringClusterLink = getMonitoringClusterLinkDefault, userSettings, children, }) {
     return (_jsxs(App, { store: store, history: history, userSettings: userSettings, children: [_jsx(AppSlots.ClusterSlot, { children: ({ component }) => {
                     return (_jsx(ExtendedCluster, { component: component, getMonitoringLink: getMonitoringLink, getMonitoringClusterLink: getMonitoringClusterLink }));
                 } }), _jsx(AppSlots.NodeSlot, { children: ({ component }) => {

package/dist/containers/AsideNavigation/Navigation.d.ts

@@ -1,6 +1,6 @@
 import type { YDBEmbeddedUISettings } from '../UserSettings/settings';
 interface NavigationProps {
-    userSettings?: YDBEmbeddedUISettings;
+    userSettings: YDBEmbeddedUISettings;
     children: React.ReactNode;
 }
 export declare function Navigation({ children, userSettings }: NavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/containers/Heatmap/Histogram/Histogram.js

@@ -42,10 +42,10 @@ export const Histogram = (props) => {
     });
     let maxCount = 0;
     tablets.forEach((tablet) => {
-        var _a;
-        const value = currentMetric && Number(tablet.metrics[currentMetric]);
+        var _a, _b;
+        const value = currentMetric && Number((_a = tablet.metrics) === null || _a === void 0 ? void 0 : _a[currentMetric]);
         const bucketIndex = Math.floor(value / step);
-        const nextCountValue = ((_a = histogramRange[bucketIndex]) === null || _a === void 0 ? void 0 : _a.count) + 1;
+        const nextCountValue = ((_b = histogramRange[bucketIndex]) === null || _b === void 0 ? void 0 : _b.count) + 1;
         if (nextCountValue > maxCount) {
             maxCount = nextCountValue;
         }

package/dist/containers/Heatmap/util.js

@@ -77,7 +77,8 @@ export const getCurrentMetricLimits = (metric, tablets) => {
     const limits = new Set();
     const limitedMetric = LIMITED_METRICS[metric] || {};
     tablets.forEach((tablet) => {
-        limits.add(Number(tablet.metrics[metric]));
+        var _a;
+        limits.add(Number((_a = tablet.metrics) === null || _a === void 0 ? void 0 : _a[metric]));
     });
     if (Number.isInteger(limitedMetric.min)) {
         limits.add(limitedMetric.min);

package/dist/containers/Nodes/NodesWrapper.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../../utils/constants';
+import { USE_PAGINATED_TABLES_KEY } from '../../utils/constants';
 import { useSetting } from '../../utils/hooks';
 import { Nodes } from './Nodes';
-import { VirtualNodes } from './VirtualNodes';
+import { PaginatedNodes } from './PaginatedNodes';
 export const NodesWrapper = ({ parentContainer, ...props }) => {
-    const [useVirtualTable] = useSetting(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
-    if (useVirtualTable) {
-        return _jsx(VirtualNodes, { parentContainer: parentContainer, ...props });
+    const [usePaginatedTables] = useSetting(USE_PAGINATED_TABLES_KEY);
+    if (usePaginatedTables) {
+        return _jsx(PaginatedNodes, { parentContainer: parentContainer, ...props });
     }
     return _jsx(Nodes, { ...props });
 };

package/dist/containers/Nodes/{VirtualNodes.d.ts → PaginatedNodes.d.ts}

@@ -5,5 +5,5 @@ interface NodesProps {
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare const VirtualNodes: ({ path, parentContainer, additionalNodesProps }: NodesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginatedNodes: ({ path, parentContainer, additionalNodesProps }: NodesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Nodes/{VirtualNodes.js → PaginatedNodes.js}

@@ -5,10 +5,10 @@ import { EntitiesCount } from '../../components/EntitiesCount';
 import { AccessDenied } from '../../components/Errors/403';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
+import { ResizeablePaginatedTable } from '../../components/PaginatedTable';
 import { ProblemFilter } from '../../components/ProblemFilter';
 import { Search } from '../../components/Search';
 import { UptimeFilter } from '../../components/UptimeFIlter';
-import { ResizeableVirtualTable } from '../../components/VirtualTable/ResizeableVirtualTable';
 import { ProblemFilterValues, changeFilter, selectProblemFilter, } from '../../store/reducers/settings/settings';
 import { cn } from '../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
@@ -18,7 +18,7 @@ import { NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns } from './getNodesColumns';
 import i18n from './i18n';
 import './Nodes.scss';
 const b = cn('ydb-nodes');
-export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) => {
+export const PaginatedNodes = ({ path, parentContainer, additionalNodesProps }) => {
     var _a;
     const [queryParams, setQueryParams] = useQueryParams({
         uptimeFilter: StringParam,
@@ -77,5 +77,5 @@ export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) =>
     const columns = rawColumns.map((column) => {
         return { ...column, sortable: isSortableNodesProperty(column.name) };
     });
-    return (_jsx(ResizeableVirtualTable, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, parentContainer: parentContainer, columns: columns, fetchData: fetchData, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, dependencyArray: filters, getRowClassName: getRowClassName }));
+    return (_jsx(ResizeablePaginatedTable, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, parentContainer: parentContainer, columns: columns, fetchData: fetchData, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, dependencyArray: filters, getRowClassName: getRowClassName }));
 };

package/dist/containers/Nodes/getNodesColumns.d.ts

@@ -1,5 +1,5 @@
 import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
-import type { Column as VirtualTableColumn } from '../../components/VirtualTable';
+import type { Column as PaginatedTableColumn } from '../../components/PaginatedTable';
 import type { NodesPreparedEntity } from '../../store/reducers/nodes/types';
 import type { GetNodeRefFunc } from '../../types/additionalProps';
 export declare const NODES_COLUMNS_WIDTH_LS_KEY = "nodesTableColumnsWidth";
@@ -7,7 +7,7 @@ interface GetNodesColumnsProps {
     tabletsPath?: string;
     getNodeRef?: GetNodeRefFunc;
 }
-type NodesColumn = VirtualTableColumn<NodesPreparedEntity> & DataTableColumn<NodesPreparedEntity>;
+type NodesColumn = PaginatedTableColumn<NodesPreparedEntity> & DataTableColumn<NodesPreparedEntity>;
 export declare function getNodesColumns({ tabletsPath, getNodeRef }: GetNodesColumnsProps): NodesColumn[];
 export declare function getTopNodesByLoadColumns(getNodeRef?: GetNodeRefFunc): DataTableColumn<NodesPreparedEntity>[];
 export declare function getTopNodesByCpuColumns(getNodeRef?: GetNodeRefFunc): DataTableColumn<NodesPreparedEntity>[];

package/dist/containers/Storage/PDisk/PDisk.js

@@ -4,14 +4,18 @@ import { DiskStateProgressBar } from '../../../components/DiskStateProgressBar/D
 import { InternalLink } from '../../../components/InternalLink';
 import { PDiskPopup } from '../../../components/PDiskPopup/PDiskPopup';
 import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
-import routes, { createHref } from '../../../routes';
+import routes, { createHref, getPDiskPagePath } from '../../../routes';
+import { valueIsDefined } from '../../../utils';
 import { cn } from '../../../utils/cn';
+import { USE_SEPARATE_DISKS_PAGES_KEY } from '../../../utils/constants';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
+import { useSetting } from '../../../utils/hooks';
 import { STRUCTURE } from '../../Node/NodePages';
 import './PDisk.scss';
 const b = cn('pdisk-storage');
 export const PDisk = ({ nodeId, data = {}, vDisks }) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
+    const [useSeparateDisksPages] = useSetting(USE_SEPARATE_DISKS_PAGES_KEY);
     const anchor = React.useRef(null);
     const showPopup = () => {
         setIsPopupVisible(true);
@@ -31,5 +35,9 @@ export const PDisk = ({ nodeId, data = {}, vDisks }) => {
                     }, children: _jsx(VDiskWithDonorsStack, { data: vdisk, compact: true, stackClassName: b('donors-stack') }) }, stringifyVdiskId(vdisk.VDiskId)));
             }) }));
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", { className: b(), ref: anchor, children: [renderVDisks(), _jsxs(InternalLink, { to: createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' }), className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup, children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", { className: b('media-type'), children: data.Type })] })] })] }));
+    let pDiskPath = createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' });
+    if (useSeparateDisksPages && valueIsDefined(data.PDiskId)) {
+        pDiskPath = getPDiskPagePath(data.PDiskId, nodeId);
+    }
+    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", { className: b(), ref: anchor, children: [renderVDisks(), _jsxs(InternalLink, { to: pDiskPath, className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup, children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", { className: b('media-type'), children: data.Type })] })] })] }));
 };

package/dist/containers/Storage/{VirtualStorage.d.ts → PaginatedStorage.d.ts}

@@ -1,9 +1,9 @@
 import type { AdditionalNodesProps } from '../../types/additionalProps';
-interface VirtualStorageProps {
+interface PaginatedStorageProps {
     tenant?: string;
     nodeId?: string;
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare const VirtualStorage: ({ tenant, nodeId, parentContainer, additionalNodesProps, }: VirtualStorageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginatedStorage: ({ tenant, nodeId, parentContainer, additionalNodesProps, }: PaginatedStorageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/{VirtualStorage.js → PaginatedStorage.js}

@@ -8,9 +8,9 @@ import { storageTypeSchema, visibleEntitiesSchema } from '../../store/reducers/s
 import { useTypedSelector } from '../../utils/hooks';
 import { NodesUptimeFilterValues, nodesUptimeFilterValuesSchema } from '../../utils/nodes';
 import { StorageControls } from './StorageControls/StorageControls';
-import { VirtualStorageGroups } from './StorageGroups/VirtualStorageGroups';
-import { VirtualStorageNodes } from './StorageNodes/VirtualStorageNodes';
-export const VirtualStorage = ({ tenant, nodeId, parentContainer, additionalNodesProps, }) => {
+import { PaginatedStorageGroups } from './StorageGroups/PaginatedStorageGroups';
+import { PaginatedStorageNodes } from './StorageNodes/PaginatedStorageNodes';
+export const PaginatedStorage = ({ tenant, nodeId, parentContainer, additionalNodesProps, }) => {
     var _a;
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
@@ -54,7 +54,7 @@ export const VirtualStorage = ({ tenant, nodeId, parentContainer, additionalNode
         return _jsx(ResponseError, { error: error });
     };
     if (storageType === STORAGE_TYPES.nodes) {
-        return (_jsx(VirtualStorageNodes, { searchValue: searchValue, visibleEntities: visibleEntities, nodesUptimeFilter: nodesUptimeFilter, tenant: tenant, additionalNodesProps: additionalNodesProps, onShowAll: handleShowAllNodes, parentContainer: parentContainer, renderControls: renderControls, renderErrorMessage: renderErrorMessage }));
+        return (_jsx(PaginatedStorageNodes, { searchValue: searchValue, visibleEntities: visibleEntities, nodesUptimeFilter: nodesUptimeFilter, tenant: tenant, additionalNodesProps: additionalNodesProps, onShowAll: handleShowAllNodes, parentContainer: parentContainer, renderControls: renderControls, renderErrorMessage: renderErrorMessage }));
     }
-    return (_jsx(VirtualStorageGroups, { searchValue: searchValue, visibleEntities: visibleEntities, tenant: tenant, nodeId: nodeId, nodesMap: nodesMap, onShowAll: handleShowAllGroups, parentContainer: parentContainer, renderControls: renderControls, renderErrorMessage: renderErrorMessage }));
+    return (_jsx(PaginatedStorageGroups, { searchValue: searchValue, visibleEntities: visibleEntities, tenant: tenant, nodeId: nodeId, nodesMap: nodesMap, onShowAll: handleShowAllGroups, parentContainer: parentContainer, renderControls: renderControls, renderErrorMessage: renderErrorMessage }));
 };

package/dist/containers/Storage/Storage.js

@@ -10,7 +10,7 @@ import { filterGroups, filterNodes, getUsageFilterOptions, } from '../../store/r
 import { storageApi } from '../../store/reducers/storage/storage';
 import { storageTypeSchema, visibleEntitiesSchema } from '../../store/reducers/storage/types';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useAutoRefreshInterval, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
+import { useAutoRefreshInterval, useTableSort, useTypedSelector } from '../../utils/hooks';
 import { NodesUptimeFilterValues, nodesUptimeFilterValuesSchema } from '../../utils/nodes';
 import { StorageControls } from './StorageControls/StorageControls';
 import { StorageGroups } from './StorageGroups/StorageGroups';
@@ -59,20 +59,11 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     // Do not display Nodes table for Node page (NodeId present)
     const isNodePage = nodeId !== undefined;
     const storageType = isNodePage ? STORAGE_TYPES.groups : type;
-    const nodesRequestParams = useNodesRequestParams({
-        filter,
-        nodesUptimeFilter: uptimeFilter,
-        ...nodesSortParams,
-    });
-    const storageRequestParams = useStorageRequestParams({
-        filter,
-        ...groupsSortParams,
-    });
-    const nodesQuery = storageApi.useGetStorageNodesInfoQuery({ tenant, visibleEntities, ...nodesRequestParams }, {
+    const nodesQuery = storageApi.useGetStorageNodesInfoQuery({ tenant, visibleEntities }, {
         skip: storageType !== STORAGE_TYPES.nodes,
         pollingInterval: autoRefreshInterval,
     });
-    const groupsQuery = storageApi.useGetStorageGroupsInfoQuery({ tenant, visibleEntities, nodeId, ...storageRequestParams }, {
+    const groupsQuery = storageApi.useGetStorageGroupsInfoQuery({ tenant, visibleEntities, nodeId }, {
         skip: storageType !== STORAGE_TYPES.groups,
         pollingInterval: autoRefreshInterval,
     });

package/dist/containers/Storage/StorageGroups/{VirtualStorageGroups.d.ts → PaginatedStorageGroups.d.ts}

@@ -1,7 +1,7 @@
-import type { RenderControls, RenderErrorMessage } from '../../../components/VirtualTable';
+import type { RenderControls, RenderErrorMessage } from '../../../components/PaginatedTable';
 import type { VisibleEntities } from '../../../store/reducers/storage/types';
 import type { NodesMap } from '../../../types/store/nodesList';
-interface VirtualStorageGroupsProps {
+interface PaginatedStorageGroupsProps {
     searchValue: string;
     visibleEntities: VisibleEntities;
     tenant?: string;
@@ -12,5 +12,5 @@ interface VirtualStorageGroupsProps {
     renderControls: RenderControls;
     renderErrorMessage: RenderErrorMessage;
 }
-export declare const VirtualStorageGroups: ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }: VirtualStorageGroupsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginatedStorageGroups: ({ searchValue, visibleEntities, tenant, nodeId, nodesMap, onShowAll, parentContainer, renderControls, renderErrorMessage, }: PaginatedStorageGroupsProps) => import("react/jsx-runtime").JSX.Element;
 export {};