ydb-embedded-ui 22.4.0 → 22.5.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/Nodes/NodesControls/NodesControls.tsx

@@ -68,6 +68,7 @@ export function NodesControls({
         <React.Fragment>
             <Search
                 tableFilter
+                debounce={0}
                 onChange={handleSearchQueryChange}
                 placeholder={i18n('controls_search-placeholder')}
                 width={238}

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

@@ -22,6 +22,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,6 +124,7 @@ export function GroupedNodesComponent({
         groupByParams,
         withPeerRoleFilter,
     );
+    const searchFilter = useDebouncedSearch(searchValue);
     const useMetaProxy = useClusterWithProxy();
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -145,7 +147,7 @@ export function GroupedNodesComponent({
         {
             path: schemaPathParam,
             database,
-            filter: searchValue.trim(),
+            filter: searchFilter.trim(),
             filter_peer_role: peerRoleFilter,
             group: groupByParam,
             limit: 0,
@@ -185,7 +187,7 @@ export function GroupedNodesComponent({
                         path={path}
                         databaseFullPath={databaseFullPath}
                         database={database}
-                        searchValue={searchValue}
+                        searchValue={searchFilter}
                         peerRoleFilter={peerRoleFilter}
                         groupByParam={groupByParam}
                         columns={columnsToShow}
@@ -225,7 +227,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

@@ -11,6 +11,7 @@ import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
 import {NodesTable} from '../NodesTable';
+import {useDebouncedSearch} from '../useDebouncedSearch';
 import {useNodesPageQueryParams} from '../useNodesPageQueryParams';
 
 import {NodesControlsWithTableState} from './NodesControlsWithTableState';
@@ -46,6 +47,7 @@ export function NodesComponent({
         groupByParams,
         withPeerRoleFilter,
     );
+    const searchFilter = useDebouncedSearch(searchValue);
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
 
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
@@ -78,7 +80,7 @@ export function NodesComponent({
                     path={path}
                     database={database}
                     databaseFullPath={databaseFullPath}
-                    searchValue={searchValue}
+                    searchValue={searchFilter}
                     withProblems={withProblems}
                     uptimeFilter={uptimeFilter}
                     peerRoleFilter={peerRoleFilter}
@@ -89,7 +91,7 @@ export function NodesComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, withProblems, uptimeFilter, peerRoleFilter],
+                scrollDependencies: [searchFilter, withProblems, uptimeFilter, 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

@@ -4,12 +4,14 @@
     position: relative;
 
     overflow: auto;
+    overflow-anchor: none;
 
     height: 100%;
-    padding: 0 20px;
+    padding: 20px 20px 0;
 
     &__meta,
     &__title,
+    &__storage-details,
     &__info,
     &__controls,
     &__tabs {
@@ -19,8 +21,23 @@
         margin-bottom: 20px;
     }
 
-    &__meta {
-        margin-top: 20px;
+    &__heading {
+        margin: 0;
+        overflow-wrap: anywhere;
+    }
+
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
+    }
+
+    &__refresh-control {
+        flex-shrink: 0;
+    }
+
+    &__storage-details {
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__tabs {
@@ -31,17 +48,11 @@
         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 {

package/src/containers/PDiskPage/PDiskPage.tsx

@@ -1,36 +1,45 @@
 import React from 'react';
 
-import {ArrowRotateLeft} from '@gravity-ui/icons';
-import {Icon, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {ArrowLeft, ArrowRotateLeft, Wrench} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Tab, TabList, TabProvider, 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 {z} from 'zod';
 
+import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 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 +70,9 @@ const pDiskTabSchema = z.nativeEnum(PDISK_TABS_IDS).catch(PDISK_TABS_IDS.spaceDi
 
 export function PDiskPage() {
     const dispatch = useTypedDispatch();
+    const history = useHistory();
+    const showBackButton = history.length > 1;
+    const hasDeveloperUi = useHasDeveloperUi();
 
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
@@ -87,7 +99,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 +118,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(
@@ -153,39 +145,75 @@ export function PDiskPage() {
     };
 
     const renderPageMeta = () => {
-        const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
-        const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-
+        if (!showBackButton) {
+            return null;
+        }
         return (
-            <PageMetaWithAutorefresh
-                loading={pDiskLoading}
-                items={[hostItem, nodeIdItem, NodeType, NodeDC]}
+            <Flex
                 className={pdiskPageCn('meta')}
-            />
+                alignItems="center"
+                justifyContent="space-between"
+                gap={1}
+            >
+                <Button size="m" view="outlined" onClick={() => history.goBack()}>
+                    <Icon data={ArrowLeft} size={16} />
+                    {pDiskPageKeyset('action_back')}
+                </Button>
+                <AutoRefreshControl className={pdiskPageCn('refresh-control')} />
+            </Flex>
         );
     };
 
     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>
+                {!showBackButton && (
+                    <AutoRefreshControl className={pdiskPageCn('refresh-control')} />
+                )}
+            </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 +226,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 +242,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 = () => {

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}),
         });
     }
 

package/src/containers/PDiskPage/PDiskStorageDetails.scss

@@ -0,0 +1,51 @@
+.ydb-pdisk-storage-details {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--g-spacing-5);
+
+    width: fit-content;
+    max-width: 100%;
+    padding: var(--g-spacing-3) var(--g-spacing-5);
+
+    border-radius: var(--g-border-radius-m);
+    background-color: var(--g-color-base-generic);
+
+    &__detail {
+        --g-definition-list-item-gap: 0px;
+
+        min-width: 0;
+        max-width: 200px;
+
+        &_location {
+            min-width: 100px;
+        }
+
+        .g-definition-list__definition {
+            min-width: 0;
+            max-width: 100%;
+        }
+    }
+
+    &__value-popover {
+        flex: 0 1 auto;
+
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    &__value-popover-content {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+
+        &_with-left-trim {
+            text-align: end;
+            direction: rtl;
+
+            > span {
+                unicode-bidi: plaintext;
+            }
+        }
+    }
+}

package/src/containers/PDiskPage/PDiskStorageDetails.tsx

@@ -0,0 +1,64 @@
+import {DefinitionList} from '@gravity-ui/uikit';
+
+import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import type {PDiskData} from '../../store/reducers/pdisk/types';
+import {cn} from '../../utils/cn';
+import {getDiskLocationItems} from '../../utils/disks/diskInfo/getDiskLocationItems';
+
+import './PDiskStorageDetails.scss';
+
+const b = cn('ydb-pdisk-storage-details');
+const LOCATION_IDS = ['datacenter', 'rack', 'fqdn', 'pdisk-path'];
+const FIELD_ORDER = [...LOCATION_IDS, 'node-id', 'pdisk-id'];
+
+export function PDiskStorageDetails({
+    data = {},
+    className,
+}: {
+    data?: PDiskData;
+    className?: string;
+}) {
+    const items = getDiskLocationItems(data, {
+        Host: data.NodeHost,
+        Rack: data.NodeRack,
+        DC: data.NodeDC,
+    });
+
+    return (
+        <div className={b(null, className)} data-qa="pdisk-location">
+            {FIELD_ORDER.map((id) => {
+                const item = items.find((entry) => entry.id === id);
+                if (!item) {
+                    return null;
+                }
+                const copyText = item.copyText === undefined ? undefined : String(item.copyText);
+                return (
+                    <DefinitionList
+                        key={id}
+                        direction="vertical"
+                        className={b('detail', {location: LOCATION_IDS.includes(id)})}
+                        qa={`pdisk-location-${id}`}
+                    >
+                        <DefinitionList.Item name={item.name}>
+                            <CopyableValue copyText={copyText} fieldName={item.name}>
+                                <CellWithPopover
+                                    content={copyText}
+                                    disabled={!copyText}
+                                    placement={['top', 'bottom']}
+                                    fullWidth
+                                    wrapperClassName={b('value-popover')}
+                                    className={b('value-popover-content', {
+                                        'with-left-trim': id === 'pdisk-path',
+                                    })}
+                                >
+                                    <span tabIndex={copyText ? 0 : undefined}>{item.content}</span>
+                                </CellWithPopover>
+                            </CopyableValue>
+                        </DefinitionList.Item>
+                    </DefinitionList>
+                );
+            })}
+        </div>
+    );
+}

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

@@ -2,6 +2,8 @@
   "fqdn": "FQDN",
   "pdisk": "PDisk",
   "node": "Node",
+  "action_back": "Back",
+  "action_open-in-developer-ui": "Open in Developer UI",
 
   "storage": "Storage",
   "space-distribution": "Space distribution",

package/src/containers/StorageGroupPage/StorageGroupPage.scss

@@ -27,6 +27,16 @@
         margin-bottom: var(--g-spacing-4);
     }
 
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
+    }
+
+    &__refresh-control {
+        flex-shrink: 0;
+    }
+
     &__storage-title {
         margin: 0;
     }