ydb-embedded-ui 22.2.0 → 22.4.0

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

@@ -1,26 +1,10 @@
 {
-  "context_not-available": "Not available",
-  "label_storage-pool": "StoragePool",
-  "label_donor": "Donor",
-  "label_node-id": "NodeId",
-  "label_pdisk-id": "PDiskId",
-  "label_vslot-id": "VSlotId",
-  "label_links": "Links",
+  "label_storage-pool": "Storage Pool Name",
   "label_vdisk": "VDisk",
-  "label_fresh": "Fresh",
-  "label_level": "Level",
-  "label_space": "Space",
-  "label_front-queues": "FrontQueues",
-  "label_replicated": "Replicated",
-  "label_progress": "Progress",
-  "label_remaining": "Remaining",
-  "label_unsync-vdisks": "UnsyncVDisks",
-  "label_allocated": "Allocated",
-  "label_available": "Available",
-  "label_read": "Read",
-  "label_write": "Write",
-  "label_replication": "Replication",
-  "label_recipient": "Recipient",
+  "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"
+  "action_go-to-vdisk": "Go to VDisk",
+  "label_compaction": "Compaction"
 }

package/src/components/VDiskStatus/VDiskReplicationStatus.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import type {LabelProps} from '@gravity-ui/uikit';
+import {Flex, Progress} from '@gravity-ui/uikit';
+
+import {EVDiskDetailedReplicationStatus} from '../../types/api/vdisk';
+import {cn} from '../../utils/cn';
+import {formatPercent} from '../../utils/dataFormatters/dataFormatters';
+import type {PreparedVDisk} from '../../utils/disks/types';
+import {formatDurationToShortTimeFormat} from '../../utils/timeParsers';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+import {DiskStatusLabel} from '../DiskStatus/DiskStatus';
+
+import {vDiskStatusKeyset as i18n} from './i18n';
+import {getVDiskReplicationLabel} from './statuses';
+
+import './VDiskStatus.scss';
+
+const b = cn('ydb-vdisk-status');
+
+interface VDiskReplicationStatusProps extends Pick<LabelProps, 'size'> {
+    data: Pick<
+        PreparedVDisk,
+        | 'DetailedReplicationStatus'
+        | 'Replicated'
+        | 'ReplicationProgress'
+        | 'ReplicationSecondsRemaining'
+    >;
+}
+
+export function VDiskReplicationStatus({data, size}: VDiskReplicationStatusProps) {
+    const label = getVDiskReplicationLabel(data);
+    const showProgress =
+        data.DetailedReplicationStatus === EVDiskDetailedReplicationStatus.InProgress ||
+        (!data.DetailedReplicationStatus && data.Replicated === false);
+
+    return (
+        <React.Fragment>
+            {label && <DiskStatusLabel {...label} size={size} />}
+            {showProgress && <ReplicationProgress data={data} size={size} />}
+        </React.Fragment>
+    );
+}
+
+function ReplicationProgress({data, size}: VDiskReplicationStatusProps) {
+    const progress = parseOptionalNonNegativeNumber(data.ReplicationProgress);
+    const percentage =
+        progress !== undefined && progress <= 1 ? Math.round(progress * 100) : undefined;
+    const seconds = parseOptionalNonNegativeNumber(data.ReplicationSecondsRemaining);
+    const remaining =
+        seconds === undefined
+            ? undefined
+            : formatDurationToShortTimeFormat(Math.ceil(seconds) * 1000, 2, {compact: true});
+    if (percentage === undefined && !remaining) {
+        return null;
+    }
+    return (
+        <Flex alignItems="center" gap={2} className={b('replication-progress', {size})}>
+            {percentage !== undefined && (
+                <React.Fragment>
+                    <span>{formatPercent(percentage / 100, 0)}</span>
+                    <div
+                        role="progressbar"
+                        aria-label={i18n('label_replication-progress')}
+                        aria-valuemin={0}
+                        aria-valuemax={100}
+                        aria-valuenow={percentage}
+                        className={b('progress-bar')}
+                    >
+                        <Progress value={percentage} theme="info" size="xs" />
+                    </div>
+                </React.Fragment>
+            )}
+            {remaining && <span>{i18n('context_remaining', {duration: remaining})}</span>}
+        </Flex>
+    );
+}

package/src/components/VDiskStatus/VDiskStatus.scss

@@ -0,0 +1,32 @@
+@use '../../styles/mixins';
+
+.ydb-vdisk-status {
+    &__replication-progress {
+        box-sizing: border-box;
+        min-height: 24px;
+        padding: 0 10px;
+
+        color: var(--g-color-text-info-heavy);
+        border-radius: var(--g-border-radius-xs);
+        background-color: var(--g-color-base-selection);
+        @include mixins.text-body-short();
+
+        &_size_xs {
+            min-height: 20px;
+            padding: 2px 6px;
+        }
+
+        > span {
+            white-space: nowrap;
+        }
+    }
+
+    &__progress-bar {
+        --g-progress-empty-background-color: var(--g-color-base-info-light);
+        --g-progress-filled-background-color: var(--g-color-base-info-heavy);
+
+        flex-shrink: 0;
+
+        width: 103px;
+    }
+}

package/src/components/VDiskStatus/VDiskStatus.tsx

@@ -0,0 +1,38 @@
+import type {LabelProps} from '@gravity-ui/uikit';
+
+import {EFlag} from '../../types/api/enums';
+import type {EVDiskState} from '../../types/api/vdisk';
+import {VDISK_LABEL_CONFIG} from '../../utils/disks/constants';
+import {calculateFrontQueuesIcon} from '../../utils/disks/iconCalculators';
+import {DiskFlagLabel, DiskStatusLabel} from '../DiskStatus/DiskStatus';
+
+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} />;
+}
+
+export function VDiskDonorLabel({
+    donorMode,
+    size,
+}: {donorMode?: boolean} & Pick<LabelProps, 'size'>) {
+    return donorMode ? (
+        <DiskStatusLabel value={i18n('label_donor')} {...VDISK_LABEL_CONFIG.donor} size={size} />
+    ) : null;
+}
+
+export function VDiskFrontQueuesLabel({flag}: {flag?: EFlag}) {
+    return (
+        <DiskFlagLabel
+            flag={flag}
+            icon={calculateFrontQueuesIcon({FrontQueues: flag || EFlag.Grey})}
+        />
+    );
+}
+
+export function VDiskCompactionRankLabel({flag, rank}: {flag?: EFlag; rank: 'fresh' | 'level'}) {
+    return (
+        <DiskFlagLabel flag={flag} title={i18n(rank === 'fresh' ? 'label_fresh' : 'label_level')} />
+    );
+}

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

@@ -0,0 +1,33 @@
+{
+  "label_donor": "Donor",
+  "label_fresh": "Fresh Rank",
+  "label_level": "Level Rank",
+  "label_replicated": "Replicated",
+  "label_replication": "Replication",
+  "label_replication-progress": "Replication progress",
+  "value_ok": "Ok",
+  "value_in-progress": "In progress",
+  "value_initial": "Initial",
+  "value_sync-guid-recovery": "Sync Guid Recovery",
+  "value_pdisk-error": "PDisk Error",
+  "value_local-recovery-error": "Local Recovery Error",
+  "value_sync-guid-recovery-error": "Sync Guid Recovery Error",
+  "value_no-data": "No data",
+  "value_waiting-for-token": "Waiting for token",
+  "value_phantoms-only": "Phantoms only",
+  "label_not-replicated": "Not replicated",
+  "value_no-detailed-status": "No detailed status",
+  "context_state-ok": "The VDisk is operating normally",
+  "context_state-initial": "The VDisk is starting",
+  "context_state-sync-guid-recovery": "The VDisk is synchronizing with other VDisks of the group",
+  "context_state-pdisk-error": "The VDisk cannot operate because its underlying PDisk reported an error",
+  "context_state-local-recovery-error": "The VDisk failed to restore its state from the PDisk",
+  "context_state-sync-guid-recovery-error": "The VDisk failed to complete synchronization identity with other VDisks in the group",
+  "context_state-no-data": "The VDisk state is unknown",
+  "context_replicated": "The VDisk is fully replicated",
+  "context_not-replicated": "The VDisk isn't replicated",
+  "context_replication-in-progress": "Replication is in progress, data is being transferred to VDisk",
+  "context_replication-waiting-for-token": "Replication is waiting for a token from the broker",
+  "context_replication-phantoms-only": "Replication cannot finish due to phantom blobs",
+  "context_remaining": "{{duration}} left"
+}

package/src/components/VDiskStatus/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-vdisk-status';
+
+export const vDiskStatusKeyset = registerKeysets(COMPONENT, {en});

package/src/components/VDiskStatus/index.ts

@@ -0,0 +1,7 @@
+export {
+    VDiskCompactionRankLabel,
+    VDiskDonorLabel,
+    VDiskFrontQueuesLabel,
+    VDiskStateLabel,
+} from './VDiskStatus';
+export {VDiskReplicationStatus} from './VDiskReplicationStatus';

package/src/components/VDiskStatus/statuses.ts

@@ -0,0 +1,139 @@
+import {
+    ArrowsRotateLeft,
+    ArrowsRotateLeftSlash,
+    Check,
+    CirclePause,
+    CircleQuestion,
+    CircleStop,
+} from '@gravity-ui/icons';
+
+import {EVDiskDetailedReplicationStatus, EVDiskState} from '../../types/api/vdisk';
+import {
+    NOT_AVAILABLE_SEVERITY,
+    NUMERIC_SEVERITY_TO_LABEL_VIEW,
+    VDISK_STATE_SEVERITY_FOR_STATE_MODE,
+} from '../../utils/disks/constants';
+import {calculateStateIcon} from '../../utils/disks/iconCalculators';
+import type {PreparedVDisk} from '../../utils/disks/types';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+import type {DiskStatusLabelData} from '../DiskStatus/DiskStatus';
+
+import {vDiskStatusKeyset as i18n} from './i18n';
+
+export function getVDiskStateLabel(data: PreparedVDisk): DiskStatusLabelData {
+    const state = data.VDiskState;
+    const severity = state
+        ? (VDISK_STATE_SEVERITY_FOR_STATE_MODE[state] ?? NOT_AVAILABLE_SEVERITY)
+        : NOT_AVAILABLE_SEVERITY;
+    if (!state || severity === NOT_AVAILABLE_SEVERITY) {
+        return {
+            value: i18n('value_no-data'),
+            theme: 'unknown',
+            icon: CircleQuestion,
+            tooltip: i18n('context_state-no-data'),
+        };
+    }
+
+    const labels: Record<EVDiskState, Pick<DiskStatusLabelData, 'value' | 'tooltip'>> = {
+        [EVDiskState.OK]: {
+            value: i18n('value_ok'),
+            tooltip: i18n('context_state-ok'),
+        },
+        [EVDiskState.Initial]: {
+            value: i18n('value_initial'),
+            tooltip: i18n('context_state-initial'),
+        },
+        [EVDiskState.SyncGuidRecovery]: {
+            value: i18n('value_sync-guid-recovery'),
+            tooltip: i18n('context_state-sync-guid-recovery'),
+        },
+        [EVDiskState.PDiskError]: {
+            value: i18n('value_pdisk-error'),
+            tooltip: i18n('context_state-pdisk-error'),
+        },
+        [EVDiskState.LocalRecoveryError]: {
+            value: i18n('value_local-recovery-error'),
+            tooltip: i18n('context_state-local-recovery-error'),
+        },
+        [EVDiskState.SyncGuidRecoveryError]: {
+            value: i18n('value_sync-guid-recovery-error'),
+            tooltip: i18n('context_state-sync-guid-recovery-error'),
+        },
+    };
+
+    const labelView = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
+
+    return {
+        ...labels[state],
+        theme: labelView.theme,
+        icon: state === EVDiskState.OK ? Check : calculateStateIcon(data),
+        dangerHeavy: Boolean(labelView.dangerHeavy),
+    };
+}
+
+export function getVDiskReplicationLabel(data: PreparedVDisk): DiskStatusLabelData | undefined {
+    switch (data.DetailedReplicationStatus) {
+        case EVDiskDetailedReplicationStatus.Replicated:
+            return replicatedLabel();
+        case EVDiskDetailedReplicationStatus.InProgress:
+            return {
+                title: i18n('label_replication'),
+                value: i18n('value_in-progress'),
+                theme: 'info',
+                icon: ArrowsRotateLeft,
+                tooltip: i18n('context_replication-in-progress'),
+            };
+        case EVDiskDetailedReplicationStatus.WaitingForToken:
+            return {
+                title: i18n('label_replication'),
+                value: i18n('value_waiting-for-token'),
+                theme: 'info',
+                icon: CirclePause,
+                tooltip: i18n('context_replication-waiting-for-token'),
+            };
+        case EVDiskDetailedReplicationStatus.PhantomsOnly:
+            return {
+                title: i18n('label_replication'),
+                value: i18n('value_phantoms-only'),
+                theme: 'info',
+                icon: CircleStop,
+                tooltip: i18n('context_replication-phantoms-only'),
+            };
+        default:
+            if (data.DetailedReplicationStatus) {
+                return undefined;
+            }
+            if (data.Replicated === true) {
+                return replicatedLabel();
+            }
+            if (data.Replicated === false) {
+                const progress = parseOptionalNonNegativeNumber(data.ReplicationProgress);
+                const seconds = parseOptionalNonNegativeNumber(data.ReplicationSecondsRemaining);
+                if ((progress !== undefined && progress <= 1) || seconds !== undefined) {
+                    return {
+                        title: i18n('label_replication'),
+                        value: i18n('value_no-detailed-status'),
+                        theme: 'info',
+                        icon: ArrowsRotateLeft,
+                        tooltip: i18n('context_not-replicated'),
+                    };
+                }
+                return {
+                    value: i18n('label_not-replicated'),
+                    theme: 'normal',
+                    icon: ArrowsRotateLeftSlash,
+                    tooltip: i18n('context_not-replicated'),
+                };
+            }
+            return undefined;
+    }
+}
+
+function replicatedLabel(): DiskStatusLabelData {
+    return {
+        value: i18n('label_replicated'),
+        theme: 'success',
+        icon: Check,
+        tooltip: i18n('context_replicated'),
+    };
+}

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

@@ -5,11 +5,11 @@
   "field_normalized-occupancy": "Normalized Occupancy",
   "field_capacity-alert": "Capacity Alert",
   "value_implicit-unit-count": "1 (implicit)",
-  "context_pdisk-usage": "Share of PDisk space used by VDisks. System and log reserves are not included.",
-  "context_vdisk-slot-usage": "Percentage of VDisk space used relative to the first low-space warning. Can exceed 100%.",
-  "context_vdisk-raw-usage": "Percentage of VDisk space used relative to its fair share on the PDisk. Can exceed 100%.",
+  "context_pdisk-usage": "The share of PDisk chunk space used by the residing VDisks. Doesn't include SysLog and CommonLog usage",
+  "context_vdisk-slot-usage": "Percentage of used VDisk space relative to the first low-space warning. Can exceed 100%.",
+  "context_vdisk-raw-usage": "Percentage of used VDisk space relative to its fair share on the PDisk. Can exceed 100%.",
   "context_normalized-occupancy": "Internal score used for gently handling low-space cases.",
-  "context_capacity-alert": "Named status used for gently handling low-space cases.",
+  "context_capacity-alert": "The named status used for the graceful low space handling.",
   "context_group-size-in-units": "Relative capacity of this group (1 = single, 2 = double, …). Affects VDisk space quota on the PDisk.",
   "context_slot-size-in-units": "Relative size of this PDisk in the cluster (1 = single, 2 = double, …). Same units as Group Size In Units."
 }

package/src/containers/Authentication/Authentication.tsx

@@ -4,7 +4,7 @@ import {Eye, EyeSlash, Xmark} from '@gravity-ui/icons';
 import {ActionTooltip, Button, Link as ExternalLink, Icon, TextInput} from '@gravity-ui/uikit';
 import {useHistory, useLocation, useRouteMatch} from 'react-router-dom';
 
-import routes, {getHomePagePath, parseQuery} from '../../routes';
+import routes, {getClusterPath, getHomePagePath, parseQuery} from '../../routes';
 import {basename} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
 import {useLoginWithDatabase, useOidcAvailable} from '../../store/reducers/capabilities/hooks';
@@ -12,11 +12,12 @@ import {cn} from '../../utils/cn';
 import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {prepareCommonErrorMessage} from '../../utils/errors';
 import {useMetaAuth} from '../../utils/hooks/useMetaAuth';
+import {useTypedSelector} from '../../utils/hooks/useTypedSelector';
 
 import i18n from './i18n';
 import {
     createSsoAuthorizeUrl,
-    getSsoReturnTo,
+    getAuthReturnTo,
     isDatabaseError,
     isPasswordError,
     isUserError,
@@ -36,6 +37,7 @@ function Authentication({closable = false}: AuthenticationProps) {
     const history = useHistory();
     const location = useLocation();
     const isDirectAuthPage = Boolean(useRouteMatch({path: routes.auth, exact: true}));
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
 
     const needDatabase = useLoginWithDatabase();
     const oidcAvailable = useOidcAvailable();
@@ -45,49 +47,40 @@ function Authentication({closable = false}: AuthenticationProps) {
     const {returnUrl, database: databaseFromQuery} = parseQuery(location);
     const currentHref = window.location.href;
 
-    const path = React.useMemo(() => {
-        let path: string | undefined;
+    const returnTo = React.useMemo(() => {
+        const fallbackPath = singleClusterMode
+            ? getClusterPath(undefined, undefined, {withBasename: true})
+            : getHomePagePath(undefined, undefined, {withBasename: true});
 
-        if (returnUrl) {
-            const decodedUrl = decodeURIComponent(returnUrl.toString());
-
-            // to prevent page reload we use router history
-            // history navigates relative to origin
-            // so we remove origin to make it work properly
-            const url = new URL(decodedUrl);
-            let pathname = url.pathname;
-
-            // Remove basename from pathname since history.replace expects paths relative to basename
-            if (basename && pathname.startsWith(basename)) {
-                pathname = pathname.slice(basename.length);
-            }
-
-            // Ensure pathname starts with /
-            if (pathname && !pathname.startsWith('/')) {
-                pathname = '/' + pathname;
-            }
-
-            path = pathname + url.search;
-        }
-        return path;
-    }, [returnUrl]);
+        return getAuthReturnTo({
+            currentUrl: new URL(currentHref),
+            fallbackPath,
+            isDirectAuthPage,
+            returnUrl,
+        });
+    }, [currentHref, isDirectAuthPage, returnUrl, singleClusterMode]);
 
-    const useMeta = useMetaAuth(path);
+    const pathname = new URL(returnTo, currentHref).pathname;
+    // Route matching for meta authentication expects a pathname without the router basename.
+    const authPath =
+        basename && pathname.startsWith(`${basename}/`)
+            ? pathname.slice(basename.length)
+            : pathname;
+    const useMeta = useMetaAuth(authPath);
 
     const ssoUrl = React.useMemo(() => {
         if (!oidcAvailable) {
             return undefined;
         }
 
-        const homePath = getHomePagePath(undefined, undefined, {withBasename: true});
         const currentUrl = new URL(currentHref);
-        const returnTo = getSsoReturnTo({
+        const ssoReturnTo = getAuthReturnTo({
             currentUrl,
-            fallbackPath: homePath,
+            fallbackPath: getHomePagePath(undefined, undefined, {withBasename: true}),
             isDirectAuthPage,
             returnUrl,
         });
-        return createSsoAuthorizeUrl(currentUrl.host, returnTo);
+        return createSsoAuthorizeUrl(currentUrl.host, ssoReturnTo);
     }, [currentHref, isDirectAuthPage, oidcAvailable, returnUrl]);
 
     const [login, setLogin] = React.useState('');
@@ -121,8 +114,10 @@ function Authentication({closable = false}: AuthenticationProps) {
         authenticate({user: login, password, database, useMeta})
             .unwrap()
             .then(() => {
-                if (path) {
-                    history.replace(path);
+                if (isDirectAuthPage) {
+                    window.location.replace(returnTo);
+                } else {
+                    window.location.reload();
                 }
             })
             .catch((error) => {

package/src/containers/Authentication/utils.ts

@@ -11,7 +11,7 @@ export function createSsoAuthorizeUrl(host: string, returnTo: string) {
     return url.href;
 }
 
-interface GetSsoReturnToParams {
+interface GetAuthReturnToParams {
     currentUrl: URL;
     fallbackPath: string;
     isDirectAuthPage: boolean;
@@ -28,12 +28,12 @@ function isSafeLocalReturnTo(path: string) {
     );
 }
 
-export function getSsoReturnTo({
+export function getAuthReturnTo({
     currentUrl,
     fallbackPath,
     isDirectAuthPage,
     returnUrl,
-}: GetSsoReturnToParams) {
+}: GetAuthReturnToParams) {
     if (!isDirectAuthPage) {
         const path = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
         return isSafeLocalReturnTo(path) ? path : fallbackPath;

package/src/containers/Cluster/ClusterDrawerHealthcheck.tsx

@@ -9,6 +9,7 @@ import {
 import {useTypedSelector} from '../../utils/hooks';
 import {Healthcheck} from '../Tenant/Healthcheck/Healthcheck';
 import {HealthcheckDrawer} from '../Tenant/Healthcheck/components/HealthcheckDrawer';
+import {getDatabaseHealthcheckAssistantTarget} from '../Tenant/Healthcheck/utils';
 
 import i18n from './i18n';
 
@@ -184,6 +185,11 @@ export function ClusterDrawerHealthcheck({
 
     return (
         <HealthcheckDrawer
+            target={getDatabaseHealthcheckAssistantTarget({
+                database,
+                clusterName,
+                scope: 'cluster',
+            })}
             isDrawerVisible={Boolean(showHealthcheck) && Boolean(database)}
             onCloseDrawer={handleCloseDrawer}
             onTransitionInComplete={

package/src/containers/Clusters/ClusterDrawerHealthcheck.tsx

@@ -48,6 +48,7 @@ export function ClusterDrawerHealthcheck({
 
     return (
         <HealthcheckDrawer
+            target={clusterName ? {scope: 'cluster', request: {clusterName}} : undefined}
             isDrawerVisible={isVisible && Boolean(clusterName)}
             onCloseDrawer={handleCloseDrawer}
             renderDrawerContent={renderDrawerContent}

package/src/containers/Header/Header.tsx

@@ -1,6 +1,7 @@
 import {HeaderBreadcrumbs} from './HeaderBreadcrumbs';
 import {HeaderLeftControls} from './HeaderLeftControls';
 import {HeaderRightControls} from './HeaderRightControls';
+import {StorageGroupLeftControls} from './StorageGroupLeftControls';
 import {b} from './constants';
 import {useHeaderBreadcrumbs} from './hooks/useHeaderBreadcrumbs';
 import {useHeaderData} from './hooks/useHeaderData';
@@ -66,18 +67,25 @@ export function Header() {
         return null;
     }
 
-    const leftControls =
-        database && isDatabasePage && isV2NavigationEnabled ? (
+    const renderLeftControls = () => {
+        if (page === 'storageGroup') {
+            return <StorageGroupLeftControls />;
+        }
+        return database && isDatabasePage && isV2NavigationEnabled ? (
             <HeaderLeftControls
                 database={database}
                 databaseData={databaseData}
                 isDatabaseDataLoading={isDatabaseDataLoading}
             />
         ) : null;
+    };
 
     return (
         <header className={b()}>
-            <HeaderBreadcrumbs breadcrumbItems={breadcrumbItems} endContent={leftControls} />
+            <HeaderBreadcrumbs
+                breadcrumbItems={breadcrumbItems}
+                endContent={renderLeftControls()}
+            />
 
             <HeaderRightControls
                 clusterName={clusterName}

package/src/containers/Header/StorageGroupLeftControls.tsx

@@ -0,0 +1,38 @@
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {storageApi} from '../../store/reducers/storage/storage';
+import {valueIsDefined} from '../../utils';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+import {StorageGroupStateLabel} from '../Storage/StorageGroupStateLabel';
+
+import {b} from './constants';
+import {headerKeyset} from './i18n';
+
+export function StorageGroupLeftControls() {
+    const [{groupId}] = useQueryParams({groupId: StringParam});
+    const database = useDatabaseFromQuery();
+    const {currentData} = storageApi.endpoints.getStorageGroupsInfo.useQueryState(
+        valueIsDefined(groupId)
+            ? {groupId, with: 'all', fieldsRequired: 'all', database}
+            : skipToken,
+    );
+
+    if (!groupId) {
+        return null;
+    }
+
+    return (
+        <Flex alignItems="center" gap={2} className={b('left-controls')}>
+            <ClipboardButton
+                text={groupId}
+                view="flat-secondary"
+                size="s"
+                aria-label={headerKeyset('action_copy-group-id-from-breadcrumb')}
+                tooltipInitialText={headerKeyset('action_copy-group-id')}
+            />
+            <StorageGroupStateLabel state={currentData?.groups?.[0]?.State} size="xs" />
+        </Flex>
+    );
+}

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

@@ -24,5 +24,7 @@
   "description_connect-to-db": "Connect to database",
 
   "title_monitoring": "Open in {{system}}",
-  "action_copy-path": "Copy path"
+  "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"
 }