ydb-embedded-ui 22.4.0 → 22.6.0

package/src/containers/Header/VDiskLeftControls.tsx

@@ -0,0 +1,40 @@
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {VDiskStateLabel} from '../../components/VDiskStatus';
+import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
+
+import {b} from './constants';
+import {headerKeyset} from './i18n';
+
+export function VDiskLeftControls() {
+    const [{vDiskId, nodeId, database}] = useQueryParams({
+        vDiskId: StringParam,
+        nodeId: StringParam,
+        database: StringParam,
+    });
+    const {currentData} = vDiskApi.endpoints.getVDiskData.useQueryState(
+        vDiskId
+            ? {vDiskId, nodeId: nodeId ?? undefined, database: database ?? undefined}
+            : skipToken,
+    );
+
+    if (!vDiskId) {
+        return null;
+    }
+
+    return (
+        <Flex alignItems="center" gap={2} className={b('left-controls')}>
+            <ClipboardButton
+                text={vDiskId}
+                size="s"
+                view="flat-secondary"
+                color="secondary"
+                aria-label={headerKeyset('action_copy-vdisk-id')}
+                tooltipInitialText={headerKeyset('action_copy-vdisk-id')}
+            />
+            <VDiskStateLabel state={currentData?.VDiskState} size="xs" />
+        </Flex>
+    );
+}

package/src/containers/Header/breadcrumbs.tsx

@@ -35,6 +35,7 @@ import {
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
 import {CLUSTER_DEFAULT_TITLE, UNBREAKABLE_GAP, getTabletLabel} from '../../utils/constants';
+import {getPDiskId} from '../../utils/disks/helpers';
 import {TenantTabsGroups} from '../Tenant/TenantPages';
 
 import {headerKeyset} from './i18n';
@@ -205,8 +206,9 @@ const getPDiskBreadcrumbs: GetBreadcrumbs<PDiskBreadcrumbsOptions> = (options, q
     });
 
     let text = headerKeyset('breadcrumbs.pDisk');
-    if (pDiskId) {
-        text += ` ${pDiskId}`;
+    const diskId = getPDiskId({nodeId, pDiskId}) ?? pDiskId;
+    if (diskId) {
+        text += ` ${diskId}`;
     }
 
     const hasLink = pDiskId && nodeId;

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

@@ -26,5 +26,8 @@
   "title_monitoring": "Open in {{system}}",
   "action_copy-path": "Copy path",
   "action_copy-group-id": "Copy Storage Group ID",
-  "action_copy-group-id-from-breadcrumb": "Copy Storage Group ID from breadcrumb"
+  "action_copy-group-id-from-breadcrumb": "Copy Storage Group ID from breadcrumb",
+  "action_copy-vdisk-id": "Copy VDisk ID",
+  "action_copy-pdisk-id": "Copy PDisk ID",
+  "action_copy-pdisk-id-from-breadcrumb": "Copy PDisk ID from breadcrumb"
 }

package/src/containers/Node/Node.scss

@@ -1,8 +1,10 @@
 @use '../../styles/mixins';
 
 .node {
+    --sticky-tabs-height: 40px;
+    --data-table-start: var(--sticky-tabs-height);
     --ydb-configs-controls-height: 62px;
-    --ydb-configs-container-height: calc(100vh - var(--header-height));
+    --ydb-configs-container-height: calc(100vh - var(--header-height) - var(--sticky-tabs-height));
     position: relative;
 
     overflow: auto;
@@ -22,7 +24,11 @@
     }
 
     &__meta {
-        margin-top: 20px;
+        display: flex;
+        align-items: center;
+
+        min-height: 28px;
+        padding-right: 121px;
     }
 
     &__tabs,
@@ -31,6 +37,12 @@
     }
 
     &__tabs {
+        z-index: 3;
+
+        height: var(--sticky-tabs-height);
+        padding-right: 125px;
+
+        @include mixins.sticky-top();
         @include mixins.tabs-wrapper-styles();
     }
     &__treads {

package/src/containers/Node/Node.tsx

@@ -6,12 +6,13 @@ import {Helmet} from 'react-helmet-async';
 import {useHistory, useRouteMatch} from 'react-router-dom';
 import {useQueryParams} from 'use-query-params';
 
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
 import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {PageMeta} from '../../components/PageMeta/PageMeta';
 import routes, {getDefaultNodePath} from '../../routes';
 import {
     useCapabilitiesLoaded,
@@ -161,6 +162,7 @@ export function Node() {
     return (
         <div className={b(null)} ref={container}>
             {<NodePageHelmet node={node} activeTabTitle={activeTab.title} />}
+            <StickyAutoRefreshControl />
             {<NodePageMeta node={node} loading={pageLoading} />}
             {<NodePageTitle node={node} />}
             {error ? <ResponseError error={error} className={b('error')} /> : null}
@@ -206,11 +208,9 @@ function NodePageMeta({node, loading}: NodePageMetaProps) {
     const dcItem = node?.DC ? `${i18n('dc')}: ${node.DC}` : undefined;
 
     return (
-        <PageMetaWithAutorefresh
-            loading={loading}
-            items={[hostItem, dcItem]}
-            className={b('meta')}
-        />
+        <div className={b('meta')}>
+            <PageMeta loading={loading} items={[hostItem, dcItem]} />
+        </div>
     );
 }
 

package/src/containers/Nodes/NodesControls/NodesControls.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {Select, Text} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../../components/EntitiesCount';
+import {HideUnavailableNodesSwitch} from '../../../components/HideUnavailableNodesSwitch/HideUnavailableNodesSwitch';
 import {ProblemFilter} from '../../../components/ProblemFilter/ProblemFilter';
 import {Search} from '../../../components/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
@@ -68,6 +69,7 @@ export function NodesControls({
         <React.Fragment>
             <Search
                 tableFilter
+                debounce={0}
                 onChange={handleSearchQueryChange}
                 placeholder={i18n('controls_search-placeholder')}
                 width={238}
@@ -101,6 +103,7 @@ export function NodesControls({
                     />
                 </React.Fragment>
             ) : null}
+            <HideUnavailableNodesSwitch />
             <EntitiesCount
                 current={entitiesCountCurrent}
                 total={entitiesCountTotal}

package/src/containers/Nodes/NodesTable.tsx

@@ -14,6 +14,7 @@ import {useClusterWithProxy} from '../../store/reducers/cluster/cluster';
 import type {NodesFilters} from '../../store/reducers/nodes/types';
 import type {PreparedStorageNode} from '../../store/reducers/storage/types';
 import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
+import {useHideUnavailableNodes} from '../../utils/hooks/useHideUnavailableNodes';
 import {getIllustration} from '../../utils/illustrations';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {renderPaginatedTableErrorMessage} from '../../utils/renderPaginatedTableErrorMessage';
@@ -61,6 +62,7 @@ export function NodesTable({
     onDataFetched,
 }: NodesTableProps) {
     const history = useHistory();
+    const {hideUnavailable} = useHideUnavailableNodes();
     const SuccessImage = getIllustration('SuccessOperation');
 
     const useMetaProxy = useClusterWithProxy();
@@ -71,6 +73,7 @@ export function NodesTable({
             useMetaProxy,
             database,
             searchValue,
+            hideUnavailable,
             withProblems,
             uptimeFilter,
             peerRoleFilter,
@@ -78,6 +81,7 @@ export function NodesTable({
             filterGroupBy,
         };
     }, [
+        hideUnavailable,
         path,
         databaseFullPath,
         useMetaProxy,

package/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -14,6 +14,7 @@ import {nodesApi} from '../../../store/reducers/nodes/nodes';
 import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField, NodesPeerRole} from '../../../types/api/nodes';
 import {useAutoRefreshInterval} from '../../../utils/hooks';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {TableGroup} from '../../Storage/TableGroup/TableGroup';
@@ -22,6 +23,7 @@ import {NodesControls} from '../NodesControls/NodesControls';
 import {NodesTable} from '../NodesTable';
 import i18n from '../i18n';
 import {b} from '../shared';
+import {useDebouncedSearch} from '../useDebouncedSearch';
 import {useNodesPageQueryParams} from '../useNodesPageQueryParams';
 
 interface NodeGroupProps {
@@ -123,8 +125,10 @@ export function GroupedNodesComponent({
         groupByParams,
         withPeerRoleFilter,
     );
+    const searchFilter = useDebouncedSearch(searchValue);
     const useMetaProxy = useClusterWithProxy();
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {hideUnavailable} = useHideUnavailableNodes();
 
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
         columns,
@@ -145,7 +149,8 @@ export function GroupedNodesComponent({
         {
             path: schemaPathParam,
             database,
-            filter: searchValue.trim(),
+            alive: hideUnavailable || undefined,
+            filter: searchFilter.trim(),
             filter_peer_role: peerRoleFilter,
             group: groupByParam,
             limit: 0,
@@ -185,7 +190,7 @@ export function GroupedNodesComponent({
                         path={path}
                         databaseFullPath={databaseFullPath}
                         database={database}
-                        searchValue={searchValue}
+                        searchValue={searchFilter}
                         peerRoleFilter={peerRoleFilter}
                         groupByParam={groupByParam}
                         columns={columnsToShow}
@@ -225,7 +230,7 @@ export function GroupedNodesComponent({
             table={renderGroups()}
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, groupByParam, tableGroups, peerRoleFilter],
+                scrollDependencies: [searchFilter, groupByParam, tableGroups, peerRoleFilter],
                 loading: isLoading,
                 className: b('groups-wrapper'),
             }}

package/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

@@ -9,8 +9,10 @@ import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks';
 import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
 import {NodesTable} from '../NodesTable';
+import {useDebouncedSearch} from '../useDebouncedSearch';
 import {useNodesPageQueryParams} from '../useNodesPageQueryParams';
 
 import {NodesControlsWithTableState} from './NodesControlsWithTableState';
@@ -46,7 +48,9 @@ export function NodesComponent({
         groupByParams,
         withPeerRoleFilter,
     );
+    const searchFilter = useDebouncedSearch(searchValue);
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
+    const {hideUnavailable} = useHideUnavailableNodes();
 
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
         columns,
@@ -78,7 +82,7 @@ export function NodesComponent({
                     path={path}
                     database={database}
                     databaseFullPath={databaseFullPath}
-                    searchValue={searchValue}
+                    searchValue={searchFilter}
                     withProblems={withProblems}
                     uptimeFilter={uptimeFilter}
                     peerRoleFilter={peerRoleFilter}
@@ -89,7 +93,13 @@ export function NodesComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, withProblems, uptimeFilter, peerRoleFilter],
+                scrollDependencies: [
+                    searchFilter,
+                    withProblems,
+                    uptimeFilter,
+                    peerRoleFilter,
+                    hideUnavailable,
+                ],
             }}
         />
     );

package/src/containers/Nodes/getNodes.ts

@@ -27,6 +27,7 @@ export const getNodes: FetchData<
         useMetaProxy,
         database,
         searchValue,
+        hideUnavailable,
         withProblems,
         uptimeFilter,
         peerRoleFilter,
@@ -53,6 +54,7 @@ export const getNodes: FetchData<
         path: schemePathParam,
         database,
         filter: searchValue?.trim(),
+        alive: hideUnavailable || undefined,
         problems_only: withProblems,
         uptime: getUptimeParamValue(uptimeFilter),
         filter_peer_role: peerRoleFilter,

package/src/containers/Nodes/useDebouncedSearch.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/** Debounce the table filter, never the input or its URL value. */
+export function useDebouncedSearch(searchValue: string) {
+    const [debouncedSearch, setDebouncedSearch] = React.useState(searchValue);
+
+    React.useEffect(() => {
+        const timer = window.setTimeout(() => setDebouncedSearch(searchValue), 200);
+        return () => window.clearTimeout(timer);
+    }, [searchValue]);
+
+    return debouncedSearch;
+}

package/src/containers/PDiskPage/PDiskPage.scss

@@ -1,15 +1,18 @@
 @use '../../styles//mixins.scss';
 
 .ydb-pdisk-page {
+    --sticky-tabs-height: 40px;
+    --data-table-start: var(--sticky-tabs-height);
     position: relative;
 
     overflow: auto;
+    overflow-anchor: none;
 
     height: 100%;
     padding: 0 20px;
 
-    &__meta,
     &__title,
+    &__storage-details,
     &__info,
     &__controls,
     &__tabs {
@@ -19,8 +22,23 @@
         margin-bottom: 20px;
     }
 
-    &__meta {
-        margin-top: 20px;
+    &__heading {
+        margin: 0;
+        overflow-wrap: anywhere;
+    }
+
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
+    }
+
+    &__title {
+        padding-right: 125px;
+    }
+
+    &__storage-details {
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__tabs {
@@ -31,20 +49,20 @@
         padding: 20px 0;
     }
 
-    &__title {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--g-spacing-2);
-    }
-
     &__controls {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
-        gap: var(--g-spacing-2);
+        gap: var(--g-spacing-3);
     }
 
     &__tabs {
+        z-index: 3;
+
+        height: var(--sticky-tabs-height);
+        padding-right: 125px;
+
+        @include mixins.sticky-top();
         @include mixins.tabs-wrapper-styles();
     }
 }

package/src/containers/PDiskPage/PDiskPage.tsx

@@ -1,36 +1,44 @@
 import React from 'react';
 
-import {ArrowRotateLeft} from '@gravity-ui/icons';
-import {Icon, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {ArrowRotateLeft, Wrench} from '@gravity-ui/icons';
+import {Flex, Icon, Tab, TabList, TabProvider, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
 import {StringParam, useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import {DiskStatusLabel, DiskTypeLabel} from '../../components/DiskStatus/DiskStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink/InternalLink';
+import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
 import {PDiskInfo} from '../../components/PDiskInfo/PDiskInfo';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {
+    getPDiskDecommitLabel,
+    getPDiskDriveLabel,
+    getPDiskMaintenanceLabel,
+    getPDiskStateLabel,
+} from '../../components/PDiskInfo/statuses';
 import {getPDiskPagePath} from '../../routes';
 import {api} from '../../store/reducers/api';
 import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {pDiskApi} from '../../store/reducers/pdisk/pdisk';
-import type {EDecommitStatus} from '../../types/api/pdisk';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
-import {getDataSeverityColor, getPDiskId} from '../../utils/disks/helpers';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
+import {getPDiskId} from '../../utils/disks/helpers';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {useAppTitle} from '../App/AppTitleContext';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
 
-import {DecommissionButton} from './DecommissionButton/DecommissionButton';
-import {DecommissionLabel} from './DecommissionLabel/DecommissionLabel';
 import {PDiskSpaceDistribution} from './PDiskSpaceDistribution/PDiskSpaceDistribution';
+import {PDiskStorageDetails} from './PDiskStorageDetails';
 import {pDiskPageKeyset} from './i18n';
 
 import './PDiskPage.scss';
@@ -61,6 +69,7 @@ const pDiskTabSchema = z.nativeEnum(PDISK_TABS_IDS).catch(PDISK_TABS_IDS.spaceDi
 
 export function PDiskPage() {
     const dispatch = useTypedDispatch();
+    const hasDeveloperUi = useHasDeveloperUi();
 
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
@@ -87,7 +96,8 @@ export function PDiskPage() {
     });
     const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
     const pDiskData = pdiskDataQuery.currentData;
-    const {NodeHost, NodeId, NodeType, NodeDC, Severity, DecommitStatus} = pDiskData || {};
+    const {NodeHost, DecommitStatus} = pDiskData || {};
+    const diskId = getPDiskId({nodeId, pDiskId});
 
     const handleRestart = async (isRetry?: boolean) => {
         if (pDiskParamsDefined) {
@@ -105,27 +115,6 @@ export function PDiskPage() {
         }
     };
 
-    const handleDecommissionChange = async (
-        newDecommissionStatus?: EDecommitStatus,
-        isRetry?: boolean,
-    ) => {
-        if (pDiskParamsDefined) {
-            const response = await window.api.pdisk.changePDiskStatus({
-                nodeId,
-                pDiskId,
-                force: isRetry,
-                decommissionStatus: newDecommissionStatus,
-            });
-            if (response?.result === false) {
-                const err = {
-                    statusText: response.error,
-                    retryPossible: response.forceRetryPossible,
-                };
-                throw err;
-            }
-        }
-    };
-
     const handleAfterAction = () => {
         if (pDiskParamsDefined) {
             dispatch(
@@ -152,40 +141,53 @@ export function PDiskPage() {
         );
     };
 
-    const renderPageMeta = () => {
-        const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
-        const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-
-        return (
-            <PageMetaWithAutorefresh
-                loading={pDiskLoading}
-                items={[hostItem, nodeIdItem, NodeType, NodeDC]}
-                className={pdiskPageCn('meta')}
-            />
-        );
-    };
-
     const renderPageTitle = () => {
+        const statusLabels = [
+            {id: 'state', label: getPDiskStateLabel(pDiskData?.State)},
+            {id: 'drive', label: getPDiskDriveLabel(pDiskData?.DriveStatus)},
+            {id: 'decommit', label: getPDiskDecommitLabel(DecommitStatus)},
+            {id: 'maintenance', label: getPDiskMaintenanceLabel(pDiskData?.MaintenanceStatus)},
+        ];
         return (
-            <div className={pdiskPageCn('title')}>
-                <EntityPageTitle
-                    entityName={pDiskPageKeyset('pdisk')}
-                    status={getDataSeverityColor(Severity)}
-                    id={getPDiskId({nodeId, pDiskId})}
-                />
-                <DecommissionLabel decommission={DecommitStatus} />
-            </div>
+            <Flex
+                className={pdiskPageCn('title')}
+                gap={2}
+                alignItems="flex-start"
+                qa="pdisk-header"
+            >
+                <Flex
+                    className={pdiskPageCn('title-content')}
+                    gap={3}
+                    alignItems="center"
+                    wrap="wrap"
+                >
+                    <CopyableValue copyText={diskId} fieldName={pDiskPageKeyset('pdisk')}>
+                        <Text as="h1" variant="header-1" className={pdiskPageCn('heading')}>
+                            {pDiskPageKeyset('pdisk')}{' '}
+                            <Text color="hint" variant="header-1">
+                                {diskId || EMPTY_DATA_PLACEHOLDER}
+                            </Text>
+                        </Text>
+                    </CopyableValue>
+                    <Flex gap={2} alignItems="center" wrap="wrap">
+                        {statusLabels.map(({id, label}) =>
+                            label ? <DiskStatusLabel key={id} {...label} iconSize={14} /> : null,
+                        )}
+                        <DiskTypeLabel type={pDiskData?.Type} size="s" />
+                    </Flex>
+                </Flex>
+            </Flex>
         );
     };
 
     const renderControls = () => {
         return (
-            <div className={pdiskPageCn('controls')}>
+            <div className={pdiskPageCn('controls')} data-qa="pdisk-controls">
                 <ButtonWithConfirmDialog
                     onConfirmAction={handleRestart}
                     onConfirmActionSuccess={handleAfterAction}
                     buttonDisabled={!pDiskParamsDefined || !isUserAllowedToMakeChanges}
-                    buttonView="normal"
+                    buttonView="action"
                     dialogHeader={pDiskPageKeyset('restart-pdisk-dialog-header')}
                     dialogText={pDiskPageKeyset('restart-pdisk-dialog-text')}
                     applyButtonText={pDiskPageKeyset('restart-pdisk-button')}
@@ -198,15 +200,14 @@ export function PDiskPage() {
                     <Icon data={ArrowRotateLeft} />
                     {pDiskPageKeyset('restart-pdisk-button')}
                 </ButtonWithConfirmDialog>
-                {newDiskApiAvailable ? (
-                    <DecommissionButton
-                        decommission={DecommitStatus}
-                        onConfirmAction={handleDecommissionChange}
-                        onConfirmActionSuccess={handleAfterAction}
-                        buttonDisabled={!pDiskParamsDefined || !isUserAllowedToMakeChanges}
-                        popoverDisabled={isUserAllowedToMakeChanges}
+                {hasDeveloperUi && pDiskParamsDefined && (
+                    <LinkWithIcon
+                        title={pDiskPageKeyset('action_open-in-developer-ui')}
+                        url={createPDiskDeveloperUILink({nodeId, pDiskId})}
+                        icon={Wrench}
+                        hideEndIcon
                     />
-                ) : null}
+                )}
             </div>
         );
     };
@@ -215,7 +216,12 @@ export function PDiskPage() {
         if (pDiskLoading) {
             return <InfoViewerSkeleton className={pdiskPageCn('info')} rows={10} />;
         }
-        return <PDiskInfo pDisk={pDiskData} nodeId={nodeId} className={pdiskPageCn('info')} />;
+        return (
+            <React.Fragment>
+                <PDiskStorageDetails data={pDiskData} className={pdiskPageCn('storage-details')} />
+                <PDiskInfo pDisk={pDiskData} className={pdiskPageCn('info')} />
+            </React.Fragment>
+        );
     };
 
     const renderTabs = () => {
@@ -278,7 +284,7 @@ export function PDiskPage() {
     return (
         <div className={pdiskPageCn(null)} ref={containerRef}>
             {renderHelmet()}
-            {renderPageMeta()}
+            <StickyAutoRefreshControl />
             {renderPageTitle()}
             {renderControls()}
             {renderError()}

package/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
 import {HoverPopup} from '../../../components/HoverPopup/HoverPopup';
 import {InternalLink} from '../../../components/InternalLink';
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
+import {PDiskLogSize} from '../../../components/PDiskInfo/PDiskLogSize';
 import {VDiskPopup} from '../../../components/VDiskPopup/VDiskPopup';
 import type {YDBDefinitionListItem} from '../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YDBDefinitionList} from '../../../components/YDBDefinitionList/YDBDefinitionList';
@@ -286,20 +286,14 @@ function LogInfo({data}: LogInfoProps) {
     const items: YDBDefinitionListItem[] = [
         {
             name: pDiskPageKeyset('label.log-size'),
-            content: (
-                <ProgressViewer
-                    value={LogUsedSize}
-                    capacity={LogTotalSize}
-                    formatValues={formatStorageValuesToGb}
-                />
-            ),
+            content: <PDiskLogSize used={LogUsedSize} total={LogTotalSize} />,
         },
     ];
 
     if (valueIsDefined(SystemSize)) {
         items.push({
             name: pDiskPageKeyset('label.system-size'),
-            content: formatBytes({value: SystemSize}),
+            content: formatBytes({value: SystemSize, fixedDecimalPlaces: 2}),
         });
     }