ydb-embedded-ui 22.4.0 → 22.5.0

package/src/components/VDiskPopup/VDiskPopup.tsx

@@ -9,7 +9,6 @@ import {api} from '../../store/reducers/api';
 import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
 import type {TVDiskID} from '../../types/api/vdisk';
 import type {NodeMetadata} from '../../types/store/nodesList';
-import {formatBytes} from '../../utils/bytesParsers';
 import {cn} from '../../utils/cn';
 import {BRAND_BUTTON_CLASS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {parseVdiskId} from '../../utils/dataFormatters/dataFormatters';
@@ -19,7 +18,6 @@ import type {PreparedVDisk, UnavailableDonor} from '../../utils/disks/types';
 import {useTypedDispatch} from '../../utils/hooks';
 import {useIsViewerUser} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {useNodeMetadata} from '../../utils/hooks/useNodeMetadata';
-import {parseOptionalNonNegativeNumber} from '../../utils/utils';
 import {getVDiskCapacityItems} from '../DiskCapacityInfo/DiskCapacityInfo';
 import {
     DiskPopup,
@@ -32,7 +30,11 @@ import {EvictVDiskButton, isAllVdiskParamsDefined} from '../EvictVDiskButton/Evi
 import {InternalLinkButton} from '../InternalLinkButton';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {PDiskPopupContent} from '../PDiskPopup/PDiskPopup';
-import {getVDiskIdentityItems, getVDiskLocationItems} from '../VDiskInfo/getVDiskDetails';
+import {
+    getVDiskIdentityItems,
+    getVDiskLocationItems,
+    getVDiskThroughputItems,
+} from '../VDiskInfo/getVDiskDetails';
 import {vDiskInfoKeyset} from '../VDiskInfo/i18n';
 import {
     VDiskCompactionRankLabel,
@@ -103,24 +105,7 @@ function getRuntimeItems(
             ),
         },
     ];
-    for (const [name, value] of [
-        [vDiskPopupKeyset('label_read'), data.ReadThroughput],
-        [vDiskPopupKeyset('label_write'), data.WriteThroughput],
-    ] as const) {
-        const throughput = parseOptionalNonNegativeNumber(value);
-        items.push({
-            name,
-            content:
-                throughput === undefined
-                    ? EMPTY_DATA_PLACEHOLDER
-                    : formatBytes({
-                          value: throughput,
-                          size: 'mb',
-                          fixedDecimalPlaces: 2,
-                          withSpeedLabel: true,
-                      }),
-        });
-    }
+    items.push(...getVDiskThroughputItems(data));
     if (withUnreadableBlobs) {
         items.push({
             name: vDiskInfoKeyset('has-unreadable-blobs'),
@@ -198,8 +183,9 @@ function buildVDiskFooter(
     data: PreparedVDisk,
     withDeveloperUILink: boolean,
     getVDiskLinkFn: ReturnType<typeof useVDiskPagePath>,
-    onSuccess: VoidFunction,
+    onSuccess: (isDialogOpen: boolean) => void,
     withActions: boolean,
+    onDialogOpen?: () => VoidFunction,
 ): React.ReactNode | null {
     const {NodeId, PDiskId, VDiskSlotId, StringifiedId, DonorMode} = data;
     const vDiskInternalViewerPath =
@@ -245,6 +231,7 @@ function buildVDiskFooter(
                             vDiskId={resolvedVDiskId}
                             donorMode={DonorMode}
                             onSuccess={onSuccess}
+                            onDialogOpen={onDialogOpen}
                         />
                     )}
                 </Flex>
@@ -257,6 +244,7 @@ interface VDiskPopupProps {
     data: PreparedVDisk;
     nodeData?: NodeMetadata;
     onClose?: VoidFunction;
+    onDialogOpen?: () => VoidFunction;
     view?: 'default' | 'space-distribution';
 }
 
@@ -264,6 +252,7 @@ export function VDiskPopup({
     data,
     nodeData: parentNodeData,
     onClose,
+    onDialogOpen,
     view = 'default',
 }: VDiskPopupProps) {
     const dispatch = useTypedDispatch();
@@ -274,7 +263,7 @@ export function VDiskPopup({
     const getVDiskLink = useVDiskPagePath();
     const fullData = isFullVDiskData(data) ? data : undefined;
     const vdiskId = fullData?.StringifiedId;
-    const handleAfterEvictVDisk = () => {
+    const handleAfterEvictVDisk = (isDialogOpen: boolean) => {
         dispatch(
             api.util.invalidateTags([
                 'TableData',
@@ -283,7 +272,9 @@ export function VDiskPopup({
                 {type: 'VDiskData', id: vdiskId},
             ]),
         );
-        onClose?.();
+        if (isDialogOpen) {
+            onClose?.();
+        }
     };
     const isSpaceDistribution = view === 'space-distribution';
     const runtimeItems = fullData ? getRuntimeItems(fullData, isSpaceDistribution) : [];
@@ -297,6 +288,7 @@ export function VDiskPopup({
               getVDiskLink,
               handleAfterEvictVDisk,
               !isSpaceDistribution,
+              onDialogOpen,
           )
         : buildUnavailableVDiskFooter(data, hasDeveloperUi);
     const locationItems = getLocationItems(data, nodeData, Boolean(pdisk));

package/src/components/VDiskPopup/i18n/en.json

@@ -2,8 +2,6 @@
   "label_storage-pool": "Storage Pool Name",
   "label_vdisk": "VDisk",
   "label_front-queues": "Front Queues",
-  "label_read": "Read Throughput",
-  "label_write": "Write Throughput",
   "action_open-in-developer-ui": "Open in Developer UI",
   "action_go-to-vdisk": "Go to VDisk",
   "label_compaction": "Compaction"

package/src/components/VDiskStatus/VDiskReplicationStatus.tsx

@@ -36,7 +36,7 @@ export function VDiskReplicationStatus({data, size}: VDiskReplicationStatusProps
 
     return (
         <React.Fragment>
-            {label && <DiskStatusLabel {...label} size={size} />}
+            {label && <DiskStatusLabel {...label} size={size} iconSize={size === 'xs' ? 12 : 14} />}
             {showProgress && <ReplicationProgress data={data} size={size} />}
         </React.Fragment>
     );

package/src/components/VDiskStatus/VDiskStatus.scss

@@ -11,6 +11,10 @@
         background-color: var(--g-color-base-selection);
         @include mixins.text-body-short();
 
+        &_size_s {
+            border-radius: var(--g-border-radius-s);
+        }
+
         &_size_xs {
             min-height: 20px;
             padding: 2px 6px;

package/src/components/VDiskStatus/VDiskStatus.tsx

@@ -10,7 +10,13 @@ import {vDiskStatusKeyset as i18n} from './i18n';
 import {getVDiskStateLabel} from './statuses';
 
 export function VDiskStateLabel({state, size}: {state?: EVDiskState} & Pick<LabelProps, 'size'>) {
-    return <DiskStatusLabel {...getVDiskStateLabel({VDiskState: state})} size={size} />;
+    return (
+        <DiskStatusLabel
+            {...getVDiskStateLabel({VDiskState: state})}
+            size={size}
+            iconSize={size === 'xs' ? 12 : 14}
+        />
+    );
 }
 
 export function VDiskDonorLabel({
@@ -18,7 +24,12 @@ export function VDiskDonorLabel({
     size,
 }: {donorMode?: boolean} & Pick<LabelProps, 'size'>) {
     return donorMode ? (
-        <DiskStatusLabel value={i18n('label_donor')} {...VDISK_LABEL_CONFIG.donor} size={size} />
+        <DiskStatusLabel
+            value={i18n('label_donor')}
+            {...VDISK_LABEL_CONFIG.donor}
+            size={size}
+            iconSize={size === 'xs' ? 12 : 14}
+        />
     ) : null;
 }
 

package/src/components/VDiskStatus/statuses.ts

@@ -3,7 +3,7 @@ import {
     ArrowsRotateLeftSlash,
     Check,
     CirclePause,
-    CircleQuestion,
+    CircleQuestionFill,
     CircleStop,
 } from '@gravity-ui/icons';
 
@@ -29,7 +29,7 @@ export function getVDiskStateLabel(data: PreparedVDisk): DiskStatusLabelData {
         return {
             value: i18n('value_no-data'),
             theme: 'unknown',
-            icon: CircleQuestion,
+            icon: CircleQuestionFill,
             tooltip: i18n('context_state-no-data'),
         };
     }

package/src/components/nodesColumns/columns.tsx

@@ -13,6 +13,7 @@ import {
     formatStorageValuesToGb,
 } from '../../utils/dataFormatters/dataFormatters';
 import {getUsageSeverity} from '../../utils/generateEvaluator';
+import {getNodeMemory} from '../../utils/memory';
 import type {Column} from '../../utils/tableUtils/types';
 import {formatToMs, parseUsToMs} from '../../utils/timeParsers';
 import {bytesToSpeed, isNumeric} from '../../utils/utils';
@@ -169,22 +170,26 @@ export function getUptimeColumn<
     };
 }
 
-export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: string}>(): Column<T> {
+export function getRAMColumn<
+    T extends {MemoryStats?: TMemoryStats; MemoryUsed?: string; MemoryLimit?: string},
+>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.RAM,
         header: NODES_COLUMNS_TITLES.RAM,
-        sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
+        sortAccessor: (row) => getNodeMemory(row).memoryUsed ?? 0,
         defaultOrder: DataTable.DESCENDING,
         render: ({row}) => {
+            const {memoryUsed: used, memoryLimit: limit} = getNodeMemory(row);
             const [memoryUsed, memoryLimit] = formatStorageValues(
-                isNumeric(row.MemoryUsed) ? Number(row.MemoryUsed) : undefined,
-                isNumeric(row.MemoryLimit) ? Number(row.MemoryLimit) : undefined,
+                used,
+                limit,
                 'gb',
                 undefined,
                 true,
             );
 
             const hasData = memoryUsed || memoryLimit;
+            const memoryContent = used === undefined ? EMPTY_DATA_PLACEHOLDER : memoryUsed;
 
             return (
                 <CellWithPopover
@@ -206,10 +211,10 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
                         </DefinitionList>
                     }
                 >
-                    {isNumeric(row.MemoryUsed) ? (
+                    {used !== undefined && limit !== undefined ? (
                         <ProgressViewer
-                            value={row.MemoryUsed}
-                            capacity={row.MemoryLimit}
+                            value={used}
+                            capacity={limit}
                             formatValues={(value, total) =>
                                 formatStorageValues(value, total, 'gb', undefined, true)
                             }
@@ -218,7 +223,7 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
                             hideCapacity
                         />
                     ) : (
-                        EMPTY_DATA_PLACEHOLDER
+                        memoryContent
                     )}
                 </CellWithPopover>
             );
@@ -238,18 +243,27 @@ export function getMemoryColumn<
         render: ({row}) => {
             if (row.MemoryStats) {
                 return (
-                    <MemoryViewer formatValues={formatStorageValuesToGb} stats={row.MemoryStats} />
+                    <MemoryViewer
+                        formatValues={formatStorageValuesToGb}
+                        stats={row.MemoryStats}
+                        memoryUsed={row.MemoryUsed}
+                        memoryLimit={row.MemoryLimit}
+                    />
                 );
             }
 
-            if (!isNumeric(row.MemoryUsed)) {
+            const {memoryUsed, memoryLimit} = getNodeMemory(row);
+            if (memoryUsed === undefined) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
+            if (memoryLimit === undefined) {
+                return formatStorageValuesToGb(memoryUsed)[0];
+            }
 
             return (
                 <ProgressViewer
-                    value={row.MemoryUsed}
-                    capacity={row.MemoryLimit}
+                    value={memoryUsed}
+                    capacity={memoryLimit}
                     formatValues={formatStorageValuesToGb}
                     colorizeProgress={true}
                 />

package/src/containers/Clusters/Clusters.scss

@@ -3,19 +3,37 @@
 .ydb-clusters {
     @include mixins.body-2-typography();
 
-    &__controls {
+    &__clusters-count {
         padding-bottom: var(--g-spacing-2);
     }
 
-    &__clusters-count {
-        padding-bottom: var(--g-spacing-2);
+    &__availability-popup .g-select-list__option {
+        align-items: flex-start;
+
+        padding-block: var(--g-spacing-2);
+    }
+
+    &__cluster-name-wrapper {
+        min-width: 0;
     }
 
     &__cluster-name {
-        white-space: normal;
-        text-decoration: none;
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__unavailable-label {
+        display: inline-flex;
+        flex-shrink: 0;
+
+        border-radius: var(--g-focus-border-radius);
 
-        color: var(--g-color-text-link);
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: 2px;
+        }
     }
     &__cluster-versions {
         text-decoration: none;

package/src/containers/Clusters/Clusters.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Magnifier} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import {Icon, Select, Text} from '@gravity-ui/uikit';
+import {Flex, Icon, Select, Text} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
@@ -13,13 +13,14 @@ import {useEmMetaAvailable} from '../../store/reducers/capabilities/hooks';
 import {changeClustersFilters, clustersApi} from '../../store/reducers/clusters/clusters';
 import {
     filterClusters,
+    selectAvailabilityFilter,
     selectClusterNameFilter,
     selectGalaxyFilter,
     selectServiceFilter,
     selectStatusFilter,
     selectVersionFilter,
 } from '../../store/reducers/clusters/selectors';
-import type {PreparedCluster} from '../../store/reducers/clusters/types';
+import type {ClusterAvailability, PreparedCluster} from '../../store/reducers/clusters/types';
 import {uiFactory} from '../../uiFactory/uiFactory';
 import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
@@ -61,6 +62,7 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     const service = useTypedSelector(selectServiceFilter);
     const version = useTypedSelector(selectVersionFilter);
     const galaxy = useTypedSelector(selectGalaxyFilter);
+    const availability = useTypedSelector(selectAvailabilityFilter);
 
     const changeStatus = (value: string[]) => {
         dispatch(changeClustersFilters({status: value}));
@@ -77,6 +79,16 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     const changeGalaxy = (value: string[]) => {
         dispatch(changeClustersFilters({galaxy: value}));
     };
+    const changeAvailability = (value: string[]) => {
+        dispatch(
+            changeClustersFilters({
+                availability: value.filter(
+                    (item): item is ClusterAvailability =>
+                        item === 'available' || item === 'unavailable',
+                ),
+            }),
+        );
+    };
 
     const [healthcheckClusterName, setHealthcheckClusterName] = React.useState<string | undefined>(
         undefined,
@@ -101,6 +113,19 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     }, [isDeleteClusterAvailable, isEditClusterAvailable, handleStatusClick]);
 
     const clusters = query.data;
+    const hasUnavailableClusters = clusters?.some(
+        (cluster) => cluster.settings?.unavailable === true,
+    );
+    const showAvailabilityFilter =
+        hasUnavailableClusters || availability.length !== 1 || availability[0] !== 'available';
+    const availabilityOptions = [
+        {value: 'available', content: i18n('value_available')},
+        {value: 'unavailable', content: i18n('value_unavailable')},
+    ];
+    const availabilitySummary =
+        availability.length === availabilityOptions.length
+            ? i18n('controls_select-placeholder')
+            : availabilityOptions.find((option) => option.value === availability[0])?.content;
 
     // Check which columns have data across all clusters
     const {hasAnyStatus, hasAnyService, hasAnyGalaxy} = React.useMemo(() => {
@@ -184,8 +209,15 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     }, [clusters]);
 
     const filteredClusters = React.useMemo(() => {
-        return filterClusters(clusters ?? [], {clusterName, status, service, version, galaxy});
-    }, [clusterName, clusters, service, status, version, galaxy]);
+        return filterClusters(clusters ?? [], {
+            clusterName,
+            status,
+            service,
+            version,
+            galaxy,
+            availability,
+        });
+    }, [clusterName, clusters, service, status, version, galaxy, availability]);
 
     const statuses = React.useMemo(() => {
         return Array.from(
@@ -260,6 +292,37 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
                         width={200}
                     />
                 ) : null}
+                {showAvailabilityFilter ? (
+                    <Select
+                        multiple
+                        label={i18n('controls_availability-select-label')}
+                        placeholder={i18n('value_none')}
+                        value={availability}
+                        options={availabilityOptions}
+                        onUpdate={changeAvailability}
+                        width={200}
+                        popupWidth={280}
+                        popupClassName={b('availability-popup')}
+                        hasCounter={false}
+                        qa="clusters-availability"
+                        getOptionHeight={(option) => (option.value === 'unavailable' ? 56 : 36)}
+                        renderOption={(option) => (
+                            <Flex direction="column">
+                                <Text>{option.content}</Text>
+                                {option.value === 'unavailable' ? (
+                                    <Text color="secondary" variant="body-1">
+                                        {i18n('context_unavailable-admin')}
+                                    </Text>
+                                ) : null}
+                            </Flex>
+                        )}
+                        renderSelectedOption={(_option, index) => (
+                            <React.Fragment>
+                                {index === 0 ? availabilitySummary : null}
+                            </React.Fragment>
+                        )}
+                    />
+                ) : null}
             </React.Fragment>
         );
     };
@@ -320,7 +383,13 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
                 <TableWithControlsLayout
                     fullHeight
                     className={b(null)}
-                    keyboardNavigationResetKey={JSON.stringify([status, service, version, galaxy])}
+                    keyboardNavigationResetKey={JSON.stringify([
+                        status,
+                        service,
+                        version,
+                        galaxy,
+                        availability,
+                    ])}
                 >
                     <TableWithControlsLayout.Controls
                         className={b('controls')}

package/src/containers/Clusters/columns.tsx

@@ -1,13 +1,15 @@
-import {Pencil, TrashBin} from '@gravity-ui/icons';
+import {CircleXmark, Pencil, TrashBin} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
 import type {Column} from '@gravity-ui/react-data-table';
 import {
     ClipboardButton,
     Link as ExternalLink,
     Flex,
+    Icon,
     Label,
     Progress,
     Text,
+    Tooltip,
 } from '@gravity-ui/uikit';
 
 import type {DropdownMenuItemWithDescription} from '../../components/DropdownMenu';
@@ -240,9 +242,9 @@ function getTitleColumn({
 
             return (
                 <Flex direction={'column'} gap={0.5}>
-                    <Flex alignItems={'flex-start'} justifyContent={'space-between'} gap={1}>
+                    <Flex alignItems="center" justifyContent="space-between" gap={1}>
                         {renderName()}
-                        <Flex gap={1}>
+                        <Flex alignItems="center" gap={1}>
                             {renderStatus()}
                             {renderActions()}
                         </Flex>
@@ -262,9 +264,37 @@ function ClusterName({row}: ClusterNameProps) {
     const clusterPath = calculateClusterPath(row);
 
     return (
-        <div className={b('cluster-name')}>
-            <ExternalLink href={clusterPath}>{row.title || row.name}</ExternalLink>
-        </div>
+        <Flex alignItems="center" gap={1} className={b('cluster-name-wrapper')}>
+            <ExternalLink
+                href={clusterPath}
+                className={b('cluster-name')}
+                title={row.title || row.name}
+            >
+                {row.title || row.name}
+            </ExternalLink>
+            {row.settings?.unavailable === true ? (
+                <Tooltip content={i18n('tooltip_unavailable')}>
+                    <span
+                        className={b('unavailable-label')}
+                        tabIndex={0}
+                        data-qa="cluster-unavailable-label"
+                        onKeyDown={(event) => {
+                            if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
+                                event.stopPropagation();
+                            }
+                        }}
+                    >
+                        <Label
+                            theme="unknown"
+                            size="xs"
+                            icon={<Icon data={CircleXmark} size={12} />}
+                        >
+                            {i18n('value_unavailable')}
+                        </Label>
+                    </span>
+                </Tooltip>
+            ) : null}
+        </Flex>
     );
 }
 

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

@@ -3,6 +3,11 @@
   "controls_service-select-label": "Service:",
   "controls_version-select-label": "Version:",
   "controls_galaxy-select-label": "Galaxy:",
+  "controls_availability-select-label": "Availability:",
+  "value_available": "Available",
+  "value_unavailable": "Unavailable",
+  "value_none": "None",
+  "context_unavailable-admin": "Marked by an administrator",
 
   "controls_search-placeholder": "Cluster name, version, domain, host...",
   "controls_select-placeholder": "All",
@@ -14,6 +19,7 @@
   "statistics_storage": "Storage",
 
   "tooltip_no-cluster-data": "No cluster data",
+  "tooltip_unavailable": "Marked as unavailable by an administrator. This is independent of healthcheck. You can still open the cluster",
 
   "clusters-count": {
     "one": "{{count}} cluster found",

package/src/containers/Header/Header.tsx

@@ -1,7 +1,9 @@
 import {HeaderBreadcrumbs} from './HeaderBreadcrumbs';
 import {HeaderLeftControls} from './HeaderLeftControls';
 import {HeaderRightControls} from './HeaderRightControls';
+import {PDiskLeftControls} from './PDiskLeftControls';
 import {StorageGroupLeftControls} from './StorageGroupLeftControls';
+import {VDiskLeftControls} from './VDiskLeftControls';
 import {b} from './constants';
 import {useHeaderBreadcrumbs} from './hooks/useHeaderBreadcrumbs';
 import {useHeaderData} from './hooks/useHeaderData';
@@ -71,6 +73,12 @@ export function Header() {
         if (page === 'storageGroup') {
             return <StorageGroupLeftControls />;
         }
+        if (page === 'vDisk') {
+            return <VDiskLeftControls />;
+        }
+        if (page === 'pDisk') {
+            return <PDiskLeftControls />;
+        }
         return database && isDatabasePage && isV2NavigationEnabled ? (
             <HeaderLeftControls
                 database={database}

package/src/containers/Header/HeaderLeftControls.tsx

@@ -4,6 +4,7 @@ import {ActionTooltip, Button, ClipboardButton, Flex, Icon} from '@gravity-ui/ui
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
 import {ServerlessDBLabel} from '../../components/ServerlessDBLabel/ServerlessDBLabel';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
+import {useDatabaseHealthcheckAvailable} from '../../utils/hooks/useDatabaseHealthcheckAvailable';
 import {HealthcheckPreview} from '../Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview';
 
 import {b} from './constants';
@@ -20,9 +21,10 @@ export function HeaderLeftControls({
     databaseData,
     isDatabaseDataLoading,
 }: HeaderLeftControlsProps) {
+    const healthcheckAvailable = useDatabaseHealthcheckAvailable(databaseData?.Type);
     const showCopyButton = Boolean(databaseData?.Name);
     const isServerless = databaseData?.Type === 'Serverless';
-    const showHealthcheck = !isServerless && !isDatabaseDataLoading;
+    const showHealthcheck = healthcheckAvailable && !isDatabaseDataLoading;
 
     return (
         <Flex direction="row" alignItems={'center'} gap={2} className={b('left-controls')}>

package/src/containers/Header/PDiskLeftControls.tsx

@@ -0,0 +1,41 @@
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {DiskStatusLabel} from '../../components/DiskStatus/DiskStatus';
+import {getPDiskStateLabel} from '../../components/PDiskInfo/statuses';
+import {pDiskApi} from '../../store/reducers/pdisk/pdisk';
+import {valueIsDefined} from '../../utils';
+import {getPDiskId} from '../../utils/disks/helpers';
+
+import {b} from './constants';
+import {headerKeyset} from './i18n';
+
+export function PDiskLeftControls() {
+    const [{nodeId, pDiskId}] = useQueryParams({
+        nodeId: StringParam,
+        pDiskId: StringParam,
+    });
+    const {currentData} = pDiskApi.endpoints.getPdiskInfo.useQueryState(
+        valueIsDefined(nodeId) && valueIsDefined(pDiskId) ? {nodeId, pDiskId} : skipToken,
+    );
+    const diskId = getPDiskId({nodeId, pDiskId});
+
+    if (!diskId) {
+        return null;
+    }
+
+    return (
+        <Flex alignItems="center" gap={2} className={b('left-controls')}>
+            <ClipboardButton
+                text={diskId}
+                size="s"
+                view="flat-secondary"
+                color="secondary"
+                aria-label={headerKeyset('action_copy-pdisk-id-from-breadcrumb')}
+                tooltipInitialText={headerKeyset('action_copy-pdisk-id')}
+            />
+            <DiskStatusLabel {...getPDiskStateLabel(currentData?.State)} size="xs" iconSize={12} />
+        </Flex>
+    );
+}