ydb-embedded-ui 4.27.1 → 4.29.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.29.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.28.0...v4.29.0) (2024-01-12)
+
+
+### Features
+
+* add ErrorBoundary ([#549](https://github.com/ydb-platform/ydb-embedded-ui/issues/549)) ([f5ad224](https://github.com/ydb-platform/ydb-embedded-ui/commit/f5ad224b342e0fa25b1bafa3f5e2202ce165ef80))
+
+## [4.28.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.27.1...v4.28.0) (2024-01-10)
+
+
+### Features
+
+* **Storage:** use VirtualTable ([#628](https://github.com/ydb-platform/ydb-embedded-ui/issues/628)) ([67fd9b0](https://github.com/ydb-platform/ydb-embedded-ui/commit/67fd9b03653dd28be650094c987451b09fcce858))
+
 ## [4.27.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.27.0...v4.27.1) (2024-01-10)
 
 

package/dist/assets/illustrations/dark/error.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230" fill="none">
+    <path fill="#BECFE0" fill-opacity=".8" fill-rule="evenodd" d="M169.001 51.666c5.523 0 10 4.477 10 10v21.017l18.197-10.506c4.783-2.762 10.899-1.123 13.66 3.66 2.761 4.783 1.123 10.899-3.66 13.66l-18.197 10.507 18.198 10.506c4.783 2.762 6.421 8.878 3.66 13.661-2.762 4.782-8.877 6.421-13.66 3.66l-18.198-10.506v21.008c0 5.523-4.477 10-10 10-5.522 0-10-4.477-10-10v-21.009l-18.199 10.507c-4.782 2.761-10.898 1.122-13.66-3.66-2.761-4.783-1.122-10.899 3.66-13.661l18.199-10.506-18.198-10.507c-4.783-2.761-6.421-8.877-3.66-13.66 2.762-4.783 8.877-6.422 13.66-3.66l18.198 10.507V61.666c0-5.523 4.478-10 10-10Z" clip-rule="evenodd"/>
+    <path fill="#E7E7E7" fill-rule="evenodd" d="M171.523 95.922a11.003 11.003 0 0 1 1.099 8.347l-13.208 49.291c-1.572 5.868-7.604 9.351-13.472 7.778l-25.356-6.794a44.998 44.998 0 0 1-.53 1.929l25.368 6.797c6.935 1.858 14.064-2.257 15.922-9.192l13.207-49.291c.893-3.33.426-6.879-1.298-9.865L155.598 64.34a12.999 12.999 0 0 0-7.894-6.057l-29.972-8.031c-6.935-1.858-14.063 2.257-15.922 9.192l-11.328 42.277c.64.192 1.276.398 1.905.618l11.355-42.377c1.573-5.868 7.604-9.35 13.472-7.778l29.973 8.03a11 11 0 0 1 6.679 5.126l17.657 30.582Z" clip-rule="evenodd"/>
+    <path fill="#FF5958" fill-opacity=".8" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    <path stroke="#E7E7E7" stroke-width="2" d="M60.636 117.734c53.586-33.459-26.868-81.505-36.557-61.318-11.802 24.59 99.395 51.098 128.865-26.3"/>
+    <mask id="b" width="89" height="89" x="33" y="99" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+        <path fill="#FF5958" fill-opacity=".9" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    </mask>
+    <g filter="url(#a)" mask="url(#b)">
+        <path stroke="#E7E7E7" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".6" stroke-width="2" d="M172.389 95.422a12.004 12.004 0 0 1 1.199 9.106l-13.208 49.291c-1.715 6.401-8.295 10.2-14.697 8.485L91.591 147.81c-6.401-1.715-10.2-8.295-8.485-14.697l19.67-73.41c1.716-6.402 8.296-10.2 14.697-8.485l29.972 8.03a11.998 11.998 0 0 1 7.287 5.592l17.657 30.582Z"/>
+    </g>
+    <g filter="url(#c)">
+        <path fill="#fff" fill-opacity=".72" fill-rule="evenodd" d="M80.866 130.432a6.359 6.359 0 1 1-12.284 3.29 6.359 6.359 0 0 1 12.284-3.29Zm4.817-1.291c1.621 6.052-1.97 12.273-8.022 13.894-6.052 1.622-12.273-1.97-13.895-8.022-1.621-6.052 1.97-12.272 8.022-13.894 6.052-1.622 12.273 1.97 13.895 8.022Zm-21.346 32.565c-.154-.577-.009-2.61 2.877-5.555 2.665-2.721 6.917-5.33 12.158-6.734 5.24-1.404 10.227-1.271 13.896-.247 3.971 1.108 5.114 2.796 5.268 3.372a3.116 3.116 0 0 1-2.204 3.817l-28.178 7.55a3.116 3.116 0 0 1-3.817-2.203ZM78.081 144.6c-12.054 3.23-20.238 12.134-18.56 18.396a8.103 8.103 0 0 0 9.924 5.73l28.178-7.55a8.104 8.104 0 0 0 5.73-9.925c-1.678-6.261-13.218-9.881-25.272-6.651Z" clip-rule="evenodd"/>
+    </g>
+    <defs>
+        <filter id="a" width="113.303" height="133.91" x="71.693" y="39.806" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feGaussianBlur result="effect1_foregroundBlur_1301_35376" stdDeviation="5"/>
+        </filter>
+        <filter id="c" width="73.289" height="73.288" x="41.018" y="106.391" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="1.917"/>
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
+            <feBlend in2="shape" result="effect1_innerShadow_1301_35376"/>
+        </filter>
+    </defs>
+</svg>

package/dist/assets/illustrations/light/error.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230" fill="none">
+    <path fill="#BECFE0" fill-opacity=".9" fill-rule="evenodd" d="M169.001 51.666c5.523 0 10 4.477 10 10v21.017l18.197-10.506c4.783-2.762 10.899-1.123 13.66 3.66 2.761 4.783 1.123 10.899-3.66 13.66l-18.197 10.507 18.198 10.506c4.783 2.762 6.421 8.878 3.66 13.661-2.762 4.782-8.877 6.421-13.66 3.66l-18.198-10.506v21.008c0 5.523-4.477 10-10 10-5.522 0-10-4.477-10-10v-21.009l-18.199 10.507c-4.782 2.761-10.898 1.122-13.66-3.66-2.761-4.783-1.122-10.899 3.66-13.661l18.199-10.506-18.198-10.507c-4.783-2.761-6.421-8.877-3.66-13.66 2.762-4.783 8.877-6.422 13.66-3.66l18.198 10.507V61.666c0-5.523 4.478-10 10-10Z" clip-rule="evenodd"/>
+    <path fill="#262626" fill-rule="evenodd" d="M171.523 95.922a11.003 11.003 0 0 1 1.099 8.347l-13.208 49.291c-1.572 5.868-7.604 9.351-13.472 7.778l-25.356-6.794a44.998 44.998 0 0 1-.53 1.929l25.368 6.797c6.935 1.858 14.064-2.257 15.922-9.192l13.207-49.291c.893-3.33.426-6.879-1.298-9.865L155.598 64.34a12.999 12.999 0 0 0-7.894-6.057l-29.972-8.031c-6.935-1.858-14.063 2.257-15.922 9.192l-11.328 42.277c.64.192 1.276.398 1.905.618l11.355-42.377c1.573-5.868 7.604-9.35 13.472-7.778l29.973 8.03a11 11 0 0 1 6.679 5.126l17.657 30.582Z" clip-rule="evenodd"/>
+    <path fill="#FF5958" fill-opacity=".9" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    <path stroke="#262626" stroke-width="2" d="M60.636 117.734c53.586-33.459-26.868-81.505-36.557-61.318-11.802 24.59 99.395 51.098 128.865-26.3"/>
+    <mask id="b" width="89" height="89" x="33" y="99" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+        <path fill="#FF5958" fill-opacity=".9" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    </mask>
+    <g filter="url(#a)" mask="url(#b)">
+        <path stroke="#262626" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".6" stroke-width="2" d="M172.389 95.422a12.004 12.004 0 0 1 1.199 9.106l-13.208 49.291c-1.715 6.401-8.295 10.2-14.697 8.485L91.591 147.81c-6.401-1.715-10.2-8.295-8.485-14.697l19.67-73.41c1.716-6.402 8.296-10.2 14.697-8.485l29.972 8.03a11.998 11.998 0 0 1 7.287 5.592l17.657 30.582Z"/>
+    </g>
+    <g filter="url(#c)">
+        <path fill="#fff" fill-opacity=".72" fill-rule="evenodd" d="M80.866 130.432a6.359 6.359 0 1 1-12.284 3.29 6.359 6.359 0 0 1 12.284-3.29Zm4.817-1.291c1.621 6.052-1.97 12.273-8.022 13.894-6.052 1.622-12.273-1.97-13.895-8.022-1.621-6.052 1.97-12.272 8.022-13.894 6.052-1.622 12.273 1.97 13.895 8.022Zm-21.346 32.565c-.154-.577-.009-2.61 2.877-5.555 2.665-2.721 6.917-5.33 12.158-6.734 5.24-1.404 10.227-1.271 13.896-.247 3.971 1.108 5.114 2.796 5.268 3.372a3.116 3.116 0 0 1-2.204 3.817l-28.178 7.55a3.116 3.116 0 0 1-3.817-2.203ZM78.081 144.6c-12.054 3.23-20.238 12.134-18.56 18.396a8.103 8.103 0 0 0 9.924 5.73l28.178-7.55a8.104 8.104 0 0 0 5.73-9.925c-1.678-6.261-13.218-9.881-25.272-6.651Z" clip-rule="evenodd"/>
+    </g>
+    <defs>
+        <filter id="a" width="113.303" height="133.91" x="71.693" y="39.806" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feGaussianBlur result="effect1_foregroundBlur_1301_31085" stdDeviation="5"/>
+        </filter>
+        <filter id="c" width="73.289" height="73.288" x="41.018" y="106.391" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="1.917"/>
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
+            <feBlend in2="shape" result="effect1_innerShadow_1301_31085"/>
+        </filter>
+    </defs>
+</svg>

package/dist/components/EmptyState/EmptyState.scss

@@ -19,10 +19,13 @@
         }
 
         &_size_m {
-            position: relative;
-
             width: 800px;
             height: 240px;
+        }
+
+        &_position_center {
+            position: relative;
+
             margin: 0 auto;
         }
     }

package/dist/components/EmptyState/EmptyState.tsx

@@ -13,18 +13,26 @@ const sizes = {
     l: 350,
 };
 
-interface EmptyStateProps {
+export interface EmptyStateProps {
     title: string;
     image?: ReactNode;
     description?: ReactNode;
     actions?: ReactNode[];
     size?: keyof typeof sizes;
+    position?: 'left' | 'center';
 }
 
-export const EmptyState = ({image, title, description, actions, size = 'm'}: EmptyStateProps) => {
+export const EmptyState = ({
+    image,
+    title,
+    description,
+    actions,
+    size = 'm',
+    position = 'center',
+}: EmptyStateProps) => {
     return (
         <div className={block({size})}>
-            <div className={block('wrapper', {size})}>
+            <div className={block('wrapper', {size, position})}>
                 <div className={block('image')}>
                     {image ? (
                         image

package/dist/components/ErrorBoundary/ErrorBoundary.scss

@@ -0,0 +1,40 @@
+@import '../../styles/mixins.scss';
+
+.ydb-error-boundary {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: 20px;
+
+    @include body-2-typography();
+
+    &__illustration {
+        width: 230px;
+        height: 230px;
+        margin-right: 20px;
+    }
+    &__error-title {
+        margin-top: 44px;
+        @include lead-typography();
+    }
+    &__error-description {
+        margin-top: 12px;
+    }
+    &__show-details {
+        margin-top: 8px;
+    }
+    &__error-details {
+        padding: 13px 18px;
+
+        border: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-generic-ultralight);
+    }
+    &__actions {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+
+        margin-top: 20px;
+    }
+}

package/dist/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,62 @@
+import type {ReactNode} from 'react';
+import {ErrorBoundary as ErrorBoundaryBase} from 'react-error-boundary';
+import cn from 'bem-cn-lite';
+
+import {Button, Disclosure} from '@gravity-ui/uikit';
+
+import {registerError} from '../../utils/registerError';
+import {Illustration} from '../Illustration';
+import i18n from './i18n';
+import './ErrorBoundary.scss';
+
+const b = cn('ydb-error-boundary');
+
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    useRetry?: boolean;
+    onReportProblem?: (error?: Error) => void;
+}
+
+export const ErrorBoundary = ({children, useRetry = true, onReportProblem}: ErrorBoundaryProps) => {
+    return (
+        <ErrorBoundaryBase
+            onError={(error, info) => {
+                registerError(error, info.componentStack, 'error-boundary');
+            }}
+            fallbackRender={({error, resetErrorBoundary}) => {
+                return (
+                    <div className={b(null)}>
+                        <Illustration name="error" className={b('illustration')} />
+                        <div className={b('content')}>
+                            <h2 className={b('error-title')}>{i18n('error-title')}</h2>
+                            <div className={b('error-description')}>
+                                {i18n('error-description')}
+                            </div>
+                            <Disclosure
+                                summary={i18n('show-details')}
+                                className={b('show-details')}
+                                size="m"
+                            >
+                                <pre className={b('error-details')}>{error.stack}</pre>
+                            </Disclosure>
+                            <div className={b('actions')}>
+                                {useRetry && (
+                                    <Button view="outlined" onClick={resetErrorBoundary}>
+                                        {i18n('button-reset')}
+                                    </Button>
+                                )}
+                                {onReportProblem && (
+                                    <Button view="outlined" onClick={() => onReportProblem(error)}>
+                                        {i18n('report-problem')}
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            }}
+        >
+            {children}
+        </ErrorBoundaryBase>
+    );
+};

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

@@ -0,0 +1,7 @@
+{
+  "error-title": "Something went wrong",
+  "error-description": "We have something broken, but don't worry, it won't last long",
+  "show-details": "Show details",
+  "report-problem": "Report a problem",
+  "button-reset": "Try again"
+}

package/dist/components/ErrorBoundary/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-error-boundary';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,7 @@
+{
+  "error-title": "Что-то пошло не так",
+  "error-description": "У нас что-то сломалось, но не переживайте, это ненадолго",
+  "show-details": "Показать детали",
+  "report-problem": "Сообщить о проблеме",
+  "button-reset": "Попробовать снова"
+}

package/dist/components/Errors/403/AccessDenied.tsx

@@ -1,19 +1,20 @@
-import {EmptyState} from '../../EmptyState';
+import {EmptyState, type EmptyStateProps} from '../../EmptyState';
 import {Illustration} from '../../Illustration';
 
 import i18n from '../i18n';
 
-interface AccessDeniedProps {
+interface AccessDeniedProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
     title?: string;
     description?: string;
 }
 
-export const AccessDenied = ({title, description}: AccessDeniedProps) => {
+export const AccessDenied = ({title, description, ...restProps}: AccessDeniedProps) => {
     return (
         <EmptyState
             image={<Illustration name="403" />}
             title={title || i18n('403.title')}
             description={description || i18n('403.description')}
+            {...restProps}
         />
     );
 };

package/dist/components/Illustration/Illustration.tsx

@@ -13,10 +13,12 @@ const store: IllustrationStore = {
     light: {
         403: () => import('../../assets/illustrations/light/403.svg'),
         thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/light/error.svg'),
     },
     dark: {
         403: () => import('../../assets/illustrations/dark/403.svg'),
-        thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
+        thumbsUp: () => import('../../assets/illustrations/dark/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/dark/error.svg'),
     },
 };
 

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -5,7 +5,7 @@ import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 interface ProblemFilterProps {
     value: ProblemFilterValue;
-    onChange: (value: string) => void;
+    onChange: (value: ProblemFilterValue) => void;
     className?: string;
 }
 

package/dist/components/UptimeFIlter/UptimeFilter.tsx

@@ -4,7 +4,7 @@ import {NodesUptimeFilterValues, NodesUptimeFilterTitles} from '../../utils/node
 
 interface UptimeFilterProps {
     value: NodesUptimeFilterValues;
-    onChange: (value: string) => void;
+    onChange: (value: NodesUptimeFilterValues) => void;
     className?: string;
 }
 

package/dist/components/VirtualTable/VirtualTable.scss

@@ -15,7 +15,7 @@
     @include body-2-typography();
 
     &__table {
-        width: 100%;
+        width: max-content;
         max-width: 100%;
 
         table-layout: fixed;

package/dist/containers/App/App.js

@@ -7,6 +7,7 @@ import AsideNavigation from '../AsideNavigation/AsideNavigation';
 
 import {getUser} from '../../store/reducers/authentication/authentication';
 import {registerLanguages} from '../../utils/monaco';
+import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 
 import './App.scss';
 
@@ -38,8 +39,10 @@ class App extends React.Component {
         const {singleClusterMode, clusterName} = this.props;
         return (
             <AsideNavigation>
-                <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
-                <div id="fullscreen-root"></div>
+                <ErrorBoundary>
+                    <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
+                    <div id="fullscreen-root"></div>
+                </ErrorBoundary>
             </AsideNavigation>
         );
     }

package/dist/containers/Cluster/Cluster.tsx

@@ -18,14 +18,12 @@ 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, useSetting, useTypedSelector} from '../../utils/hooks';
-import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 
 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 {StorageWrapper} from '../Storage/StorageWrapper';
+import {NodesWrapper} from '../Nodes/NodesWrapper';
 import {Versions} from '../Versions/Versions';
 
 import {ClusterInfo} from './ClusterInfo/ClusterInfo';
@@ -55,8 +53,6 @@ function Cluster({
     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,
@@ -111,17 +107,20 @@ function Cluster({
                 return <Tenants additionalTenantsProps={additionalTenantsProps} />;
             }
             case clusterTabsIds.nodes: {
-                return useVirtualNodes ? (
-                    <VirtualNodes
+                return (
+                    <NodesWrapper
                         parentContainer={container.current}
                         additionalNodesProps={additionalNodesProps}
                     />
-                ) : (
-                    <Nodes additionalNodesProps={additionalNodesProps} />
                 );
             }
             case clusterTabsIds.storage: {
-                return <Storage additionalNodesProps={additionalNodesProps} />;
+                return (
+                    <StorageWrapper
+                        parentContainer={container.current}
+                        additionalNodesProps={additionalNodesProps}
+                    />
+                );
             }
             case clusterTabsIds.versions: {
                 return <Versions versionToColor={versionToColor} />;

package/dist/containers/Nodes/Nodes.tsx

@@ -106,12 +106,12 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
         dispatch(setSearchValue(value));
     };
 
-    const handleProblemFilterChange = (value: string) => {
-        dispatch(changeFilter(value as ProblemFilterValue));
+    const handleProblemFilterChange = (value: ProblemFilterValue) => {
+        dispatch(changeFilter(value));
     };
 
-    const handleUptimeFilterChange = (value: string) => {
-        dispatch(setNodesUptimeFilter(value as NodesUptimeFilterValues));
+    const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
+        dispatch(setNodesUptimeFilter(value));
     };
 
     const renderControls = () => {

package/dist/containers/Nodes/NodesWrapper.tsx

@@ -0,0 +1,21 @@
+import type {AdditionalNodesProps} from '../../types/additionalProps';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
+
+import {VirtualNodes} from './VirtualNodes';
+import {Nodes} from './Nodes';
+
+interface NodesWrapperProps {
+    parentContainer?: Element | null;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export const NodesWrapper = ({parentContainer, ...props}: NodesWrapperProps) => {
+    const [useVirtualTable] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+
+    if (useVirtualTable) {
+        return <VirtualNodes parentContainer={parentContainer} {...props} />;
+    }
+
+    return <Nodes {...props} />;
+};

package/dist/containers/Nodes/VirtualNodes.tsx

@@ -72,27 +72,17 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps
         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}
+                    onChange={setSearchValue}
                     placeholder="Host name"
                     className={b('search')}
                     value={searchValue}
                 />
-                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
-                <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
+                <ProblemFilter value={problemFilter} onChange={setProblemFilter} />
+                <UptimeFilter value={uptimeFilter} onChange={setUptimeFilter} />
                 <EntitiesCount
                     total={totalEntities}
                     current={foundEntities}
@@ -116,7 +106,7 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps
 
     const renderErrorMessage: RenderErrorMessage = (error) => {
         if (error && error.status === 403) {
-            return <AccessDenied />;
+            return <AccessDenied position="left" />;
         }
 
         return <ResponseError error={error} />;

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -6,6 +6,7 @@
     $inner-border-radius: $outer-border-radius - $border-width;
 
     position: relative;
+    z-index: 0;
 
     display: block;
 

package/dist/containers/Storage/EmptyFilter/EmptyFilter.tsx

@@ -20,6 +20,7 @@ export const EmptyFilter = ({
 }: EmptyFilterProps) => (
     <EmptyState
         image={<Illustration name="thumbsUp" />}
+        position="left"
         title={title}
         description={message}
         actions={

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -1,14 +1,13 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {InternalLink} from '../../../components/InternalLink';
 import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
-import {selectVDisksForPDisk} from '../../../store/reducers/storage/selectors';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
 import {isFullVDiskData} from '../../../utils/storage';
 
@@ -44,6 +43,7 @@ const stateSeverity = {
 interface PDiskProps {
     nodeId: number;
     data?: TPDiskStateInfo;
+    vDisks?: TVDiskStateInfo[];
 }
 
 const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
@@ -53,12 +53,10 @@ const getStateSeverity = (pDiskState?: TPDiskState) => {
     return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
 };
 
-export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
+export const PDisk = ({nodeId, data: rawData = {}, vDisks}: PDiskProps) => {
     // NodeId in data is required for the popup
     const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
 
-    const vdisks = useTypedSelector((state) => selectVDisksForPDisk(state, nodeId, data.PDiskId));
-
     const [severity, setSeverity] = useState(getStateSeverity(data.State));
     const [isPopupVisible, setIsPopupVisible] = useState(false);
 
@@ -100,13 +98,13 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
     };
 
     const renderVDisks = () => {
-        if (!vdisks?.length) {
+        if (!vDisks?.length) {
             return null;
         }
 
         return (
             <div className={b('vdisks')}>
-                {vdisks.map((vdisk) => {
+                {vDisks.map((vdisk) => {
                     const donors = vdisk.Donors;
 
                     return (