ydb-embedded-ui 22.4.0 → 22.5.0

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import {ArrowLeft} from '@gravity-ui/icons';
-import {Button, ClipboardButton, Flex, Icon, Text} from '@gravity-ui/uikit';
+import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
 import {useHistory} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {StorageGroupInfo} from '../../components/StorageGroupInfo/StorageGroupInfo';
@@ -36,6 +37,8 @@ export function StorageGroupPage() {
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const [{groupId}] = useQueryParams({groupId: StringParam});
+    const showBackButton = Boolean(groupId) && history.length > 1;
+    const showRefreshInTitle = Boolean(groupId) && !showBackButton;
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const capabilitiesLoaded = useCapabilitiesLoaded();
@@ -73,49 +76,55 @@ export function StorageGroupPage() {
     };
 
     const renderPageMeta = () => {
-        if (!groupId) {
+        if (!showBackButton) {
             return null;
         }
 
-        const hasPreviousPage = history.length > 1;
-
         return (
             <Flex
                 className={storageGroupPageCn('meta')}
                 alignItems="center"
-                justifyContent={hasPreviousPage ? 'space-between' : 'flex-end'}
+                justifyContent="space-between"
                 gap={2}
             >
-                {hasPreviousPage && (
-                    <Button view="outlined" onClick={() => history.goBack()}>
-                        <Icon data={ArrowLeft} />
-                        {storageGroupPageKeyset('action_back')}
-                    </Button>
-                )}
-                <AutoRefreshControl />
+                <Button view="outlined" onClick={() => history.goBack()}>
+                    <Icon data={ArrowLeft} />
+                    {storageGroupPageKeyset('action_back')}
+                </Button>
+                <AutoRefreshControl className={storageGroupPageCn('refresh-control')} />
             </Flex>
         );
     };
 
     const renderPageTitle = () => {
         return (
-            <Flex className={storageGroupPageCn('title')} alignItems="center" gap={2} wrap="wrap">
-                <Text variant="header-1">{storageGroupPageKeyset('storage-group')}</Text>
-                <Flex alignItems="center" gap={1}>
-                    <Text variant="header-1" color="hint">
-                        {groupId || EMPTY_DATA_PLACEHOLDER}
-                    </Text>
-                    {groupId && (
-                        <ClipboardButton
-                            text={groupId}
-                            view="flat-secondary"
-                            size="s"
-                            aria-label={storageGroupPageKeyset('action_copy-group-id-from-title')}
-                            tooltipInitialText={storageGroupPageKeyset('action_copy-group-id')}
-                        />
-                    )}
+            <Flex
+                className={storageGroupPageCn('title')}
+                alignItems="flex-start"
+                gap={2}
+                wrap="nowrap"
+            >
+                <Flex
+                    className={storageGroupPageCn('title-content')}
+                    alignItems="center"
+                    gap={2}
+                    wrap="wrap"
+                >
+                    <Text variant="header-1">{storageGroupPageKeyset('storage-group')}</Text>
+                    <CopyableValue
+                        copyText={groupId}
+                        fieldName={storageGroupPageKeyset('storage-group')}
+                        copyButtonLabel={storageGroupPageKeyset('action_copy-group-id-from-title')}
+                    >
+                        <Text variant="header-1" color="hint">
+                            {groupId || EMPTY_DATA_PLACEHOLDER}
+                        </Text>
+                    </CopyableValue>
+                    <StorageGroupStateLabel state={state} />
                 </Flex>
-                <StorageGroupStateLabel state={state} />
+                {showRefreshInTitle && (
+                    <AutoRefreshControl className={storageGroupPageCn('refresh-control')} />
+                )}
             </Flex>
         );
     };

package/src/containers/StorageGroupPage/i18n/en.json

@@ -2,6 +2,5 @@
   "storage-group": "Storage Group",
   "storage": "Storage",
   "action_back": "Back",
-  "action_copy-group-id": "Copy Storage Group ID",
   "action_copy-group-id-from-title": "Copy Storage Group ID from page title"
 }

package/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -31,6 +31,7 @@ import {getInfoTabLinks} from '../../../../utils/additionalProps';
 import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {useClusterNameFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
+import {useDatabaseHealthcheckAvailable} from '../../../../utils/hooks/useDatabaseHealthcheckAvailable';
 import {useDatabasesV2} from '../../../../utils/hooks/useDatabasesV2';
 import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
 import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
@@ -64,18 +65,6 @@ function isTenantLoading(isFetching: boolean, tenant: TTenant | undefined, error
     return isFetching && tenant === undefined && !error;
 }
 
-function shouldSkipHealthcheck({
-    isServerless,
-    isV2NavigationEnabled,
-    tenant,
-}: {
-    isServerless: boolean;
-    isV2NavigationEnabled: boolean;
-    tenant?: TTenant;
-}) {
-    return isServerless || isV2NavigationEnabled || tenant === undefined;
-}
-
 function getDatabaseStatus(overall?: EFlag, selfCheckResult?: SelfCheckResult) {
     const healthcheckStatus =
         selfCheckResult === undefined ? undefined : selfCheckResultToHcStatus[selfCheckResult];
@@ -128,20 +117,6 @@ function renderTenantError(error: unknown, defaultMessage: string) {
     return error ? <ResponseError error={error} defaultMessage={defaultMessage} /> : null;
 }
 
-function renderHealthcheckPreview({
-    database,
-    isServerless,
-    isV2NavigationEnabled,
-}: {
-    database: string;
-    isServerless: boolean;
-    isV2NavigationEnabled: boolean;
-}) {
-    return !isServerless && !isV2NavigationEnabled ? (
-        <HealthcheckPreview database={database} />
-    ) : null;
-}
-
 function renderOverviewHead({
     databaseStatus,
     handleOpenMonitoring,
@@ -308,6 +283,8 @@ export function TenantOverview({
     const tenantLoading = isTenantLoading(isFetching, tenant, error);
     const {Name, Type, Overall, CoresTotal} = tenant || {};
     const isServerless = Type === 'Serverless';
+    const healthcheckAvailable = useDatabaseHealthcheckAvailable(Type);
+    const showHealthcheck = healthcheckAvailable && !isV2NavigationEnabled;
 
     // Use healthcheck self_check_result as the database status color when available;
     // fall back to tenantinfo.Overall (e.g. for Serverless databases where healthcheck is skipped).
@@ -317,7 +294,7 @@ export function TenantOverview({
     const {currentData: healthcheckData} = healthcheckApi.useGetHealthcheckInfoQuery(
         {database, clusterName},
         {
-            skip: shouldSkipHealthcheck({isServerless, isV2NavigationEnabled, tenant}),
+            skip: !showHealthcheck || tenant === undefined,
         },
     );
     const databaseStatus = getDatabaseStatus(Overall, healthcheckData?.self_check_result);
@@ -404,11 +381,7 @@ export function TenantOverview({
                             tenantType,
                         })}
                         <Flex direction="column" gap={4}>
-                            {renderHealthcheckPreview({
-                                database,
-                                isServerless,
-                                isV2NavigationEnabled,
-                            })}
+                            {showHealthcheck && <HealthcheckPreview database={database} />}
                             <QueriesActivityBar database={database} />
                             <MetricsTabs
                                 metrics={metricOverview}

package/src/containers/Tenant/Healthcheck/Healthcheck.scss

@@ -93,7 +93,12 @@
         }
     }
     &__issue-status {
-        text-align: start;
+        display: flex;
+        flex-shrink: 0;
+    }
+    &__issue-title {
+        min-width: 0;
+        overflow-wrap: anywhere;
     }
     &__issue-content {
         --g-definition-list-item-gap: var(--g-spacing-3);

package/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx

@@ -80,17 +80,26 @@ export function HealthcheckIssue({
                                         justifyContent="space-between"
                                         className={b('issue-summary')}
                                     >
-                                        <Flex direction="column" gap={1} alignSelf="center">
-                                            <Text variant="subheader-2">{issue.message}</Text>
-
+                                        <Flex
+                                            gap={2}
+                                            alignItems="center"
+                                            className={b('issue-message')}
+                                        >
                                             {issue.status && (
                                                 <div className={b('issue-status')}>
                                                     <EntityStatus.Label
+                                                        view="compact"
                                                         size="s"
                                                         status={hcStatusToColorFlag[issue.status]}
                                                     />
                                                 </div>
                                             )}
+                                            <Text
+                                                variant="subheader-2"
+                                                className={b('issue-title')}
+                                            >
+                                                {issue.message}
+                                            </Text>
                                         </Flex>
                                         <Flex
                                             wrap="nowrap"
@@ -124,21 +133,22 @@ export function HealthcheckIssue({
                             >
                                 <Flex
                                     id={id}
-                                    direction="column"
-                                    gap={1}
-                                    alignSelf="center"
+                                    gap={2}
+                                    alignItems="center"
                                     className={b('issue-message')}
                                 >
-                                    <Text variant="subheader-2">{issue.message}</Text>
-
                                     {issue.status && (
                                         <div className={b('issue-status')}>
                                             <EntityStatus.Label
+                                                view="compact"
                                                 size="s"
                                                 status={hcStatusToColorFlag[issue.status]}
                                             />
                                         </div>
                                     )}
+                                    <Text variant="subheader-2" className={b('issue-title')}>
+                                        {issue.message}
+                                    </Text>
                                 </Flex>
                                 <div
                                     className={b('issue-action')}

package/src/containers/Tenant/TenantDrawerHealthcheck.tsx

@@ -5,6 +5,7 @@ import {
     selectCheckStatus,
 } from '../../store/reducers/healthcheckInfo/healthcheckInfo';
 import {useTypedSelector} from '../../utils/hooks';
+import {useDatabaseHealthcheckAvailable} from '../../utils/hooks/useDatabaseHealthcheckAvailable';
 
 import {Healthcheck} from './Healthcheck/Healthcheck';
 import {HealthcheckDrawer} from './Healthcheck/components/HealthcheckDrawer';
@@ -19,12 +20,15 @@ interface TenantDrawerHealthcheckProps {
 }
 
 export function TenantDrawerHealthcheck({children, clusterName}: TenantDrawerHealthcheckProps) {
+    const healthcheckAvailable = useDatabaseHealthcheckAvailable();
     const {database} = useCurrentSchema();
     const {
         handleShowHealthcheckChange,
         showHealthcheck,
         handleIssuesFilterChange,
         handleHealthcheckViewChange,
+        issuesFilter,
+        view,
     } = useTenantQueryParams();
 
     const healthcheckStatus = useTypedSelector((state) =>
@@ -41,6 +45,15 @@ export function TenantDrawerHealthcheck({children, clusterName}: TenantDrawerHea
         handleHealthcheckViewChange(undefined);
     }, [handleShowHealthcheckChange, handleIssuesFilterChange, handleHealthcheckViewChange]);
 
+    React.useEffect(() => {
+        if (
+            healthcheckAvailable === false &&
+            (showHealthcheck !== undefined || view !== undefined || issuesFilter !== undefined)
+        ) {
+            handleCloseDrawer();
+        }
+    }, [healthcheckAvailable, showHealthcheck, view, issuesFilter, handleCloseDrawer]);
+
     const renderDrawerContent = React.useCallback(() => {
         return <Healthcheck database={database} clusterName={clusterName} />;
     }, [database, clusterName]);
@@ -56,7 +69,7 @@ export function TenantDrawerHealthcheck({children, clusterName}: TenantDrawerHea
                       })
                     : undefined
             }
-            isDrawerVisible={Boolean(showHealthcheck)}
+            isDrawerVisible={Boolean(healthcheckAvailable && showHealthcheck)}
             onCloseDrawer={handleCloseDrawer}
             renderDrawerContent={renderDrawerContent}
             drawerId="tenant-healthcheck-details"

package/src/containers/VDiskPage/VDiskPage.scss

@@ -1,17 +1,17 @@
-@use '../../styles//mixins.scss';
-
 .ydb-vdisk-page {
     --g-definition-list-item-gap: var(--g-spacing-3);
     position: relative;
 
     overflow: auto;
+    overflow-anchor: none;
 
     height: 100%;
-    padding: 0 20px;
+    padding: 20px 20px 0;
 
     &__meta,
     &__title,
     &__controls,
+    &__storage-details,
     &__info,
     &__tabs {
         position: sticky;
@@ -20,22 +20,35 @@
         margin-bottom: 20px;
     }
 
-    &__info {
-        @include mixins.body-2-typography();
+    &__heading {
+        margin: 0;
+        overflow-wrap: anywhere;
+    }
+
+    &__pool-name {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
     }
 
-    &__meta {
-        margin-top: 20px;
+    &__refresh-control {
+        flex-shrink: 0;
     }
 
     &__controls {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         gap: var(--g-spacing-2);
     }
 
     &__storage-details {
-        margin-bottom: var(--g-spacing-5);
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__tablets-content {

package/src/containers/VDiskPage/VDiskPage.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
-import {Flex, Icon, Label, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {ArrowLeft, Wrench} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Tab, TabList, TabProvider, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {isNil} from 'lodash';
 import {Helmet} from 'react-helmet-async';
+import {useHistory} from 'react-router-dom';
 
-import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
+import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import {DiskTypeLabel} from '../../components/DiskStatus/DiskStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {
     EvictVDiskButton,
@@ -13,18 +17,22 @@ import {
 } from '../../components/EvictVDiskButton/EvictVDiskButton';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink/InternalLink';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
 import {VDiskInfo} from '../../components/VDiskInfo/VDiskInfo';
+import {vDiskInfoKeyset} from '../../components/VDiskInfo/i18n';
+import {
+    VDiskDonorLabel,
+    VDiskReplicationStatus,
+    VDiskStateLabel,
+} from '../../components/VDiskStatus';
 import {useVDiskPagePath} from '../../routes';
 import {api} from '../../store/reducers/api';
-import {useNewStorageViewEnabled} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
 import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {parseVdiskId} from '../../utils/dataFormatters/dataFormatters';
-import {VDISK_LABEL_CONFIG} from '../../utils/disks/constants';
-import {formatPDiskType} from '../../utils/disks/getPDiskType';
-import {getDataSeverityColor} from '../../utils/disks/helpers';
+import {createVDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useAppTitle} from '../App/AppTitleContext';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
@@ -40,12 +48,14 @@ const vDiskPageCn = cn('ydb-vdisk-page');
 
 export function VDiskPage() {
     const dispatch = useTypedDispatch();
+    const history = useHistory();
+    const showBackButton = history.length > 1;
     const getVDiskPagePath = useVDiskPagePath();
 
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const {nodeId, vDiskId: vDiskIdParam, database, vDiskTab, vDiskTabs} = useVDiskQueryParams();
-    const newStorageViewEnabled = useNewStorageViewEnabled();
+    const hasDeveloperUi = useHasDeveloperUi();
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -77,17 +87,7 @@ export function VDiskPage() {
     }, [dispatch, database, vDiskData?.VDiskId?.GroupID, vDiskData?.StringifiedId]);
 
     const loading = isFetching && vDiskData === undefined;
-    const {
-        NodeHost,
-        NodeId,
-        NodeType,
-        NodeDC,
-        PDiskId,
-        PDiskType,
-        Severity,
-        VDiskId,
-        StringifiedId,
-    } = vDiskData || {};
+    const {NodeHost, NodeId, PDiskId, PDiskType, VDiskId, StringifiedId} = vDiskData || {};
 
     const resolvedVDiskId = VDiskId || (!loading && parseVdiskId(vDiskIdParam)) || undefined;
     const {GroupID} = resolvedVDiskId || {};
@@ -115,52 +115,76 @@ export function VDiskPage() {
     };
 
     const renderPageMeta = () => {
-        const hostItem = NodeHost ? `${vDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
-        const nodeIdItem = NodeId ? `${vDiskPageKeyset('node')}: ${NodeId}` : undefined;
-        const pDiskIdItem = NodeId ? `${vDiskPageKeyset('pdisk')}: ${PDiskId}` : undefined;
+        if (!showBackButton) {
+            return null;
+        }
 
         return (
-            <PageMetaWithAutorefresh
+            <Flex
                 className={vDiskPageCn('meta')}
-                loading={loading}
-                items={[
-                    hostItem,
-                    nodeIdItem,
-                    NodeType,
-                    NodeDC,
-                    pDiskIdItem,
-                    formatPDiskType(PDiskType),
-                ]}
-            />
+                alignItems="center"
+                justifyContent="space-between"
+                gap={1}
+            >
+                <Button size="m" view="outlined" onClick={() => history.goBack()}>
+                    <Icon data={ArrowLeft} size={16} />
+                    {vDiskPageKeyset('action_back')}
+                </Button>
+                <AutoRefreshControl className={vDiskPageCn('refresh-control')} />
+            </Flex>
         );
     };
 
     const renderTitleMeta = () => {
-        if (!vDiskData?.DonorMode) {
-            return null;
-        }
-        const donorLabelConfig = VDISK_LABEL_CONFIG.donor;
         return (
-            <Label
-                theme={donorLabelConfig.theme}
-                icon={donorLabelConfig.icon ? <Icon data={donorLabelConfig.icon} /> : undefined}
-                size="m"
-            >
-                {vDiskPageKeyset('label_donor')}
-            </Label>
+            <Flex gap={2} wrap="wrap" alignItems="center">
+                <VDiskStateLabel state={vDiskData?.VDiskState} size="s" />
+                {vDiskData?.DonorMode ? (
+                    <VDiskDonorLabel donorMode size="s" />
+                ) : (
+                    <VDiskReplicationStatus data={vDiskData || {}} size="s" />
+                )}
+                <DiskTypeLabel type={PDiskType} size="s" />
+            </Flex>
         );
     };
 
     const renderPageTitle = () => {
         return (
-            <Flex gap={2} alignItems="center">
-                <EntityPageTitle
-                    className={vDiskPageCn('title')}
-                    entityName={vDiskPageKeyset('vdisk')}
-                    status={getDataSeverityColor(Severity)}
-                    id={vDiskId}
-                    metaInfo={renderTitleMeta()}
-                />
+            <Flex
+                className={vDiskPageCn('title')}
+                alignItems="flex-start"
+                gap={2}
+                wrap="nowrap"
+                qa="vdisk-header"
+            >
+                <Flex direction="column" gap={1} className={vDiskPageCn('title-content')}>
+                    <Flex gap={3} alignItems="center" wrap="wrap">
+                        <CopyableValue copyText={vDiskId} fieldName={vDiskPageKeyset('vdisk')}>
+                            <Text as="h1" variant="header-1" className={vDiskPageCn('heading')}>
+                                {vDiskPageKeyset('vdisk')}{' '}
+                                <Text color="hint" variant="header-1">
+                                    {vDiskId || EMPTY_DATA_PLACEHOLDER}
+                                </Text>
+                            </Text>
+                        </CopyableValue>
+                        {renderTitleMeta()}
+                    </Flex>
+                    <Flex gap={1} alignItems="center" className={vDiskPageCn('pool')}>
+                        <Text color="secondary">{vDiskInfoKeyset('pool-name')}:</Text>
+                        <CopyableValue
+                            copyText={vDiskData?.StoragePoolName}
+                            fieldName={vDiskInfoKeyset('pool-name')}
+                        >
+                            <Text color="secondary" className={vDiskPageCn('pool-name')}>
+                                {vDiskData?.StoragePoolName || EMPTY_DATA_PLACEHOLDER}
+                            </Text>
+                        </CopyableValue>
+                    </Flex>
+                </Flex>
+                {!showBackButton && (
+                    <AutoRefreshControl className={vDiskPageCn('refresh-control')} />
+                )}
             </Flex>
         );
     };
@@ -178,29 +202,44 @@ export function VDiskPage() {
     }, [dispatch, vDiskId]);
 
     const renderControls = () => {
-        if (!isAllVdiskParamsDefined(resolvedVDiskId)) {
+        const canEvict = isAllVdiskParamsDefined(resolvedVDiskId) && !vDiskData?.DonorMode;
+        const developerUILink =
+            hasDeveloperUi && !isNil(NodeId) && !isNil(PDiskId) && !isNil(vDiskSlotId)
+                ? createVDiskDeveloperUILink({
+                      nodeId: NodeId,
+                      pDiskId: PDiskId,
+                      vDiskSlotId,
+                  })
+                : undefined;
+        if (!canEvict && !developerUILink) {
             return null;
         }
         return (
             <div className={vDiskPageCn('controls')} data-qa="vdisk-controls">
-                <EvictVDiskButton
-                    vDiskId={resolvedVDiskId}
-                    donorMode={vDiskData?.DonorMode}
-                    onSuccess={handleAfterEvictVDisk}
-                />
+                {canEvict && isAllVdiskParamsDefined(resolvedVDiskId) && (
+                    <EvictVDiskButton
+                        vDiskId={resolvedVDiskId}
+                        view="action"
+                        onSuccess={handleAfterEvictVDisk}
+                    />
+                )}
+                {developerUILink && (
+                    <LinkWithIcon
+                        title={vDiskPageKeyset('action_open-in-developer-ui')}
+                        url={developerUILink}
+                        icon={Wrench}
+                        hideEndIcon
+                    />
+                )}
             </div>
         );
     };
 
     const renderInfo = () => {
-        return <VDiskInfo data={vDiskData} className={vDiskPageCn('info')} wrap />;
+        return <VDiskInfo key={vDiskId} data={vDiskData} className={vDiskPageCn('info')} />;
     };
 
     const renderStorageDetails = () => {
-        if (!newStorageViewEnabled) {
-            return null;
-        }
-
         return <VDiskStorageDetails data={vDiskData} className={vDiskPageCn('storage-details')} />;
     };
 
@@ -284,8 +323,8 @@ export function VDiskPage() {
         return (
             <React.Fragment>
                 {error ? <ResponseError error={error} /> : null}
-                {renderInfo()}
                 {renderStorageDetails()}
+                {renderInfo()}
                 {renderTabs()}
                 {renderTabsContent()}
             </React.Fragment>