ydb-embedded-ui 22.2.0 → 22.4.0

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

@@ -4,7 +4,7 @@ import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/Dis
 import {HoverPopup} from '../../../components/HoverPopup/HoverPopup';
 import {InternalLink} from '../../../components/InternalLink';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import {VDiskInfo} from '../../../components/VDiskInfo/VDiskInfo';
+import {VDiskPopup} from '../../../components/VDiskPopup/VDiskPopup';
 import type {YDBDefinitionListItem} from '../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YDBDefinitionList} from '../../../components/YDBDefinitionList/YDBDefinitionList';
 import {useVDiskPagePath} from '../../../routes';
@@ -15,6 +15,7 @@ import type {
     SlotItem,
     SlotItemType,
 } from '../../../store/reducers/pdisk/types';
+import type {NodeMetadata} from '../../../types/store/nodesList';
 import {valueIsDefined} from '../../../utils';
 import {formatBytes} from '../../../utils/bytesParsers';
 import {cn} from '../../../utils/cn';
@@ -80,6 +81,7 @@ export function PDiskSpaceDistribution({data}: PDiskSpaceDistributionProps) {
                     minNonLogTotal={minNonLogTotal}
                     pDiskId={PDiskId}
                     nodeId={NodeId}
+                    nodeData={{Host: data.NodeHost, DC: data.NodeDC, Rack: data.NodeRack}}
                     getVDiskPagePath={getVDiskPagePath}
                     key={index}
                 />
@@ -110,6 +112,7 @@ interface SlotProps<T extends SlotItemType> {
 
     pDiskId?: string | number;
     nodeId?: string | number;
+    nodeData?: NodeMetadata;
     getVDiskPagePath?: (
         params: {nodeId: string | number | undefined; vDiskId: string | undefined},
         query?: {activeTab?: string},
@@ -138,6 +141,7 @@ function Slot<T extends SlotItemType>({
     item,
     minNonLogTotal,
     nodeId,
+    nodeData,
     getVDiskPagePath,
 }: SlotProps<T>) {
     const renderContent = () => {
@@ -152,7 +156,14 @@ function Slot<T extends SlotItemType>({
 
             return (
                 <HoverPopup
-                    renderPopupContent={() => <VDiskInfo data={item.SlotData} withTitle />}
+                    renderPopupContent={({onClose}) => (
+                        <VDiskPopup
+                            data={item.SlotData}
+                            nodeData={nodeData}
+                            onClose={onClose}
+                            view="space-distribution"
+                        />
+                    )}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >

package/src/containers/Storage/Disks/Disks.tsx

@@ -31,6 +31,19 @@ import './Disks.scss';
 
 const b = cn('ydb-storage-disks');
 
+interface DiskPopupState {
+    id: string;
+    vdisk: boolean;
+    pdisk: boolean;
+}
+
+type DiskPopupChangeHandler = (
+    id: string | undefined,
+    source: 'vdisk' | 'pdisk',
+    open: boolean,
+    closePair?: boolean,
+) => void;
+
 interface DisksProps {
     vDisks?: PreparedVDisk[];
     viewContext?: StorageViewContext;
@@ -44,7 +57,7 @@ interface DisksItemProps {
     viewContext?: StorageViewContext;
     inactive?: boolean;
     highlighted: boolean;
-    setHighlightedVDisk?: (id?: string) => void;
+    onPopupChange: DiskPopupChangeHandler;
     compactVDiskWidth?: number;
     withDCMargin?: boolean;
     withIcon?: boolean;
@@ -58,7 +71,7 @@ const VDiskItem = React.memo(function VDiskItem({
     vDisk,
     highlighted,
     inactive,
-    setHighlightedVDisk,
+    onPopupChange,
     compactVDiskWidth,
     withIcon,
     getDisplayState,
@@ -66,6 +79,15 @@ const VDiskItem = React.memo(function VDiskItem({
     renderContent,
     placeholderProps,
 }: DisksItemProps) {
+    const vDiskId = vDisk.StringifiedId;
+    const setHighlightedVDisk = React.useCallback(
+        (id?: string) => onPopupChange(vDiskId, 'vdisk', Boolean(id)),
+        [onPopupChange, vDiskId],
+    );
+    const onClosePopup = React.useCallback(
+        () => onPopupChange(vDiskId, 'vdisk', false, true),
+        [onPopupChange, vDiskId],
+    );
     const style: React.CSSProperties = isAllVDisksLayout
         ? {width: ALL_VDISK_WIDTH, flexBasis: ALL_VDISK_WIDTH}
         : {width: compactVDiskWidth, flexBasis: compactVDiskWidth};
@@ -98,6 +120,7 @@ const VDiskItem = React.memo(function VDiskItem({
                 delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
                 highlightedVDisk={highlighted ? vDisk.StringifiedId : undefined}
                 setHighlightedVDisk={setHighlightedVDisk}
+                onClosePopup={onClosePopup}
                 progressBarClassName={b('vdisk-progress-bar')}
                 getDisplayState={getDisplayState}
             />
@@ -109,7 +132,7 @@ const PDiskItem = React.memo(function PDiskItem({
     vDisk,
     viewContext,
     highlighted,
-    setHighlightedVDisk,
+    onPopupChange,
     withDCMargin,
     withIcon,
     getDisplayState,
@@ -119,12 +142,16 @@ const PDiskItem = React.memo(function PDiskItem({
     const vDiskId = vDisk.StringifiedId;
 
     const onShowPopup = React.useCallback(
-        () => setHighlightedVDisk?.(vDiskId),
-        [setHighlightedVDisk, vDiskId],
+        () => onPopupChange(vDiskId, 'pdisk', true),
+        [onPopupChange, vDiskId],
     );
     const onHidePopup = React.useCallback(
-        () => setHighlightedVDisk?.(undefined),
-        [setHighlightedVDisk],
+        () => onPopupChange(vDiskId, 'pdisk', false),
+        [onPopupChange, vDiskId],
+    );
+    const onClosePopup = React.useCallback(
+        () => onPopupChange(vDiskId, 'pdisk', false, true),
+        [onPopupChange, vDiskId],
     );
 
     if (!vDisk.PDisk) {
@@ -150,6 +177,7 @@ const PDiskItem = React.memo(function PDiskItem({
                     delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
                     onShowPopup={onShowPopup}
                     onHidePopup={onHidePopup}
+                    onClosePopup={onClosePopup}
                     withIcon={withIcon}
                     highlighted={highlighted}
                     getDisplayState={getDisplayState}
@@ -170,7 +198,33 @@ export const Disks = React.memo(function Disks({
     const getVDiskDisplayState = useStorageVDiskDisplayStateGetter();
     const getPDiskDisplayState = useStoragePDiskDisplayStateGetter();
 
-    const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
+    const [popupState, setPopupState] = React.useState<DiskPopupState>();
+    const highlightedVDisk = popupState?.id;
+    const onPopupChange = React.useCallback<DiskPopupChangeHandler>(
+        (id, source, open, closePair) => {
+            if (!id) {
+                return;
+            }
+            setPopupState((current) => {
+                // A delayed close from another pair must not clear the current pair.
+                if (!open && current?.id !== id) {
+                    return current;
+                }
+                if (closePair) {
+                    return undefined;
+                }
+                const next = {
+                    id,
+                    vdisk: false,
+                    pdisk: false,
+                    ...(current?.id === id ? current : {}),
+                    [source]: open,
+                };
+                return next.vdisk || next.pdisk ? next : undefined;
+            });
+        },
+        [],
+    );
     const vDiskList = useVirtualizedDiskList(
         vDisks,
         vDisks.every((disk) => Boolean(disk.StringifiedId)),
@@ -182,8 +236,8 @@ export const Disks = React.memo(function Disks({
     );
 
     React.useEffect(() => {
-        setHighlightedVDisk((id) =>
-            vDisks.some((disk) => disk.StringifiedId === id) ? id : undefined,
+        setPopupState((current) =>
+            vDisks.some((disk) => disk.StringifiedId === current?.id) ? current : undefined,
         );
     }, [vDisks]);
 
@@ -218,7 +272,7 @@ export const Disks = React.memo(function Disks({
                         vDisk={vDisk}
                         inactive={!isVdiskActive(vDisk, viewContext)}
                         highlighted={highlightedVDisk === vDisk.StringifiedId}
-                        setHighlightedVDisk={setHighlightedVDisk}
+                        onPopupChange={onPopupChange}
                         compactVDiskWidth={compactVDiskWidths[index]}
                         withIcon={withIcon}
                         getDisplayState={getVDiskDisplayState}
@@ -236,7 +290,7 @@ export const Disks = React.memo(function Disks({
                         vDisk={vDisk}
                         viewContext={viewContext}
                         highlighted={highlightedVDisk === vDisk.StringifiedId}
-                        setHighlightedVDisk={setHighlightedVDisk}
+                        onPopupChange={onPopupChange}
                         withDCMargin={vDisksWithDCMargins.includes(index)}
                         withIcon={withIcon}
                         getDisplayState={getPDiskDisplayState}

package/src/containers/Storage/PDisk/PDisk.tsx

@@ -257,6 +257,7 @@ export interface PDiskProps {
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
+    onClosePopup?: VoidFunction;
     className?: string;
     progressBarClassName?: string;
     // Nodes derive this width from their VDisk rows, overriding the Groups mode defaults.
@@ -276,6 +277,7 @@ export const PDisk = ({
     showPopup,
     onShowPopup,
     onHidePopup,
+    onClosePopup,
     className,
     progressBarClassName,
     width,
@@ -359,6 +361,7 @@ export const PDisk = ({
                 anchorRef={anchorRef}
                 onShowPopup={onShowPopup}
                 onHidePopup={onHidePopup}
+                onClosePopup={onClosePopup}
                 renderPopupContent={() => <PDiskPopup data={data} />}
                 delayOpen={delayOpen}
                 delayClose={delayClose}

package/src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx

@@ -6,6 +6,7 @@ import {Flex, Icon, Label, Popover} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
 import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPopover';
+import {DiskStatusLabel} from '../../../../components/DiskStatus/DiskStatus';
 import {EntityName} from '../../../../components/EntityName/EntityName';
 import {StatusIcon} from '../../../../components/StatusIcon/StatusIcon';
 import {TitleWithHelpMark} from '../../../../components/TitleWithHelpmark/TitleWithHelpmark';
@@ -35,6 +36,7 @@ import {
 } from '../../Disks/constants';
 import {VDisks} from '../../VDisks/VDisks';
 import {getDegradedSeverity} from '../../utils';
+import {getStorageGroupStateLabel} from '../../utils/getStorageGroupStateLabel';
 import i18n from '../i18n';
 
 import {
@@ -122,9 +124,14 @@ const degradedColumn: StorageGroupsColumn = {
     resizeMinWidth: 110,
     render: ({row}) =>
         row.Degraded ? (
-            <Label theme={getDegradedSeverity(row)}>Degraded: {row.Degraded}</Label>
+            <DiskStatusLabel
+                size="xs"
+                title="Degraded"
+                value={String(row.Degraded)}
+                theme={getDegradedSeverity(row)}
+            />
         ) : (
-            '-'
+            EMPTY_DATA_PLACEHOLDER
         ),
     align: DataTable.LEFT,
     defaultOrder: DataTable.DESCENDING,
@@ -133,7 +140,21 @@ const stateColumn: StorageGroupsColumn = {
     name: STORAGE_GROUPS_COLUMNS_IDS.State,
     header: STORAGE_GROUPS_COLUMNS_TITLES.State,
     width: 150,
-    render: ({row}) => row.State ?? EMPTY_DATA_PLACEHOLDER,
+    render: ({row}) => {
+        const state = getStorageGroupStateLabel(row.State);
+
+        return state ? (
+            <DiskStatusLabel
+                size="xs"
+                title={state.title}
+                value={state.value}
+                theme={state.theme}
+                dangerHeavy={state.dangerHeavy}
+            />
+        ) : (
+            EMPTY_DATA_PLACEHOLDER
+        );
+    },
     align: DataTable.LEFT,
     defaultOrder: DataTable.DESCENDING,
 };

package/src/containers/Storage/StorageExpertModePanel/components/SpaceLegend.scss

@@ -1,6 +1,20 @@
+@use '../../../../styles/mixins';
+
 .ydb-storage-expert-mode-panel {
     --label-checkbox-size: 14px;
 
+    @each $color in 'green', 'cyan', 'light-yellow', 'yellow', 'light-orange', 'pre-orange',
+        'orange', 'red', 'black'
+    {
+        &__label_#{$color} {
+            @include mixins.capacity-alert-label-colors($color);
+
+            &:hover {
+                background-color: var(--ydb-capacity-alert-label-background) !important;
+            }
+        }
+    }
+
     &__label {
         border-radius: var(--g-border-radius-s);
         .g-label__addon_side_start {
@@ -30,86 +44,4 @@
         border: none;
         background-color: var(--g-color-base-generic-medium);
     }
-
-    // Custom color labels
-    &__label_green {
-        color: var(--g-color-text-positive-heavy);
-        background-color: var(--g-color-base-positive-light);
-
-        &:hover {
-            background-color: var(--g-color-base-positive-light) !important;
-        }
-    }
-
-    &__label_cyan {
-        color: var(--ydb-space-cyan-text);
-        background-color: var(--ydb-space-cyan-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-cyan-bg) !important;
-        }
-    }
-
-    &__label_light-yellow {
-        color: var(--ydb-space-light-yellow-text);
-        background-color: var(--ydb-space-light-yellow-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-light-yellow-bg) !important;
-        }
-    }
-
-    &__label_yellow {
-        color: var(--g-color-text-warning-heavy);
-        background-color: var(--g-color-base-warning-light);
-
-        &:hover {
-            background-color: var(--g-color-base-warning-light) !important;
-        }
-    }
-
-    &__label_light-orange {
-        color: var(--ydb-space-light-orange-text);
-        background-color: var(--ydb-space-light-orange-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-light-orange-bg) !important;
-        }
-    }
-
-    &__label_pre-orange {
-        color: var(--ydb-space-pre-orange-text);
-        background-color: var(--ydb-space-pre-orange-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-pre-orange-bg) !important;
-        }
-    }
-
-    &__label_orange {
-        color: var(--ydb-space-orange-text);
-        background-color: var(--ydb-space-orange-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-orange-bg) !important;
-        }
-    }
-
-    &__label_red {
-        color: var(--g-color-base-danger-heavy);
-        background-color: var(--g-color-base-danger-light);
-
-        &:hover {
-            background-color: var(--g-color-base-danger-light) !important;
-        }
-    }
-
-    &__label_black {
-        color: var(--g-color-text-primary);
-        background-color: var(--g-color-text-dark-hint);
-
-        &:hover {
-            background-color: var(--g-color-text-dark-hint) !important;
-        }
-    }
 }

package/src/containers/Storage/StorageGroupStateLabel.tsx

@@ -0,0 +1,22 @@
+import {Check} from '@gravity-ui/icons';
+import type {LabelProps} from '@gravity-ui/uikit';
+
+import {DiskStatusLabel} from '../../components/DiskStatus/DiskStatus';
+
+import {getStorageGroupStateLabel} from './utils/getStorageGroupStateLabel';
+
+export function StorageGroupStateLabel({
+    state,
+    size = 's',
+}: {state?: string} & Pick<LabelProps, 'size'>) {
+    const label = getStorageGroupStateLabel(state);
+
+    return label ? (
+        <DiskStatusLabel
+            {...label}
+            size={size}
+            iconSize={size === 'xs' ? 12 : 14}
+            icon={label.theme === 'success' ? Check : undefined}
+        />
+    ) : null;
+}

package/src/containers/Storage/utils/getStorageGroupStateLabel.ts

@@ -0,0 +1,49 @@
+import type {TitledDiskStatusLabelData} from '../../../components/DiskStatus/DiskStatus';
+import {
+    DATA_SEVERITY,
+    NUMERIC_SEVERITY_TO_LABEL_VIEW,
+    SOLID_RED_SEVERITY,
+} from '../../../utils/disks/constants';
+import type {DisplaySeverity} from '../../../utils/disks/types';
+
+const stateSeverities = new Map<string, DisplaySeverity>([
+    ['ok', DATA_SEVERITY.GREEN],
+    ['replicating', DATA_SEVERITY.BLUE],
+    ['starting', DATA_SEVERITY.YELLOW],
+    ['degraded', DATA_SEVERITY.YELLOW],
+    ['dead', SOLID_RED_SEVERITY],
+]);
+
+export function getStorageGroupStateLabel(
+    state?: string | null,
+): TitledDiskStatusLabelData | undefined {
+    const normalizedState = state?.trim();
+
+    if (!normalizedState) {
+        return undefined;
+    }
+
+    const match = normalizedState.match(/^([^:]+)(?::\s*(.+))?$/);
+    const status = (match?.[1] ?? normalizedState).trim();
+    const value = match?.[2]?.trim();
+    let severity = stateSeverities.get(status) ?? DATA_SEVERITY.GREY;
+
+    if (status === 'degraded') {
+        const count = value?.split('(', 1)[0].trim();
+
+        if (count === '2') {
+            severity = DATA_SEVERITY.RED;
+        }
+    }
+
+    const labelView = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
+    const title = status[0].toUpperCase() + status.slice(1);
+    const formattedValue = value?.replace(/\s*\(/g, ' (');
+
+    return {
+        title,
+        value: formattedValue,
+        theme: labelView.theme,
+        dangerHeavy: Boolean(labelView.dangerHeavy),
+    };
+}

package/src/containers/StorageGroupPage/StorageGroupPage.scss

@@ -1,5 +1,3 @@
-@use '../../styles/mixins.scss';
-
 .ydb-storage-group-page {
     position: relative;
 
@@ -8,9 +6,7 @@
     height: 100%;
     padding: 0 20px;
 
-    &__meta,
-    &__title,
-    &__info,
+    &__summary,
     &__storage-title {
         position: sticky;
         left: 0;
@@ -18,20 +14,20 @@
         margin-bottom: 20px;
     }
 
+    &__summary {
+        margin-top: var(--g-spacing-4);
+        margin-bottom: var(--g-spacing-6);
+    }
+
     &__meta {
-        margin-top: 20px;
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__title {
-        margin-bottom: 60px;
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__storage-title {
-        margin-bottom: 0;
-        @include mixins.header-1-typography();
-    }
-
-    &__info {
-        margin-top: var(--g-spacing-10);
+        margin: 0;
     }
 }

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -1,24 +1,27 @@
 import React from 'react';
 
+import {ArrowLeft} from '@gravity-ui/icons';
+import {Button, ClipboardButton, Flex, Icon, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
+import {useHistory} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
-import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
+import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {StorageGroupInfo} from '../../components/StorageGroupInfo/StorageGroupInfo';
 import {useCapabilitiesLoaded} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {storageApi} from '../../store/reducers/storage/storage';
-import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {useAppTitle} from '../App/AppTitleContext';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
+import {StorageGroupStateLabel} from '../Storage/StorageGroupStateLabel';
 
 import {storageGroupPageKeyset} from './i18n';
 
@@ -28,15 +31,12 @@ const storageGroupPageCn = cn('ydb-storage-group-page');
 
 export function StorageGroupPage() {
     const dispatch = useTypedDispatch();
+    const history = useHistory();
     const database = useDatabaseFromQuery();
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const [{groupId}] = useQueryParams({groupId: StringParam});
 
-    React.useEffect(() => {
-        dispatch(setHeaderBreadcrumbs('storageGroup', {groupId, database}));
-    }, [dispatch, groupId, database]);
-
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const capabilitiesLoaded = useCapabilitiesLoaded();
     const groupQuery = storageApi.useGetStorageGroupsInfoQuery(
@@ -49,7 +49,12 @@ export function StorageGroupPage() {
         },
     );
 
-    const storageGroupData = groupQuery.data?.groups?.[0];
+    const storageGroupData = groupQuery.currentData?.groups?.[0];
+    const state = storageGroupData?.State;
+
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('storageGroup', {groupId: groupId ?? undefined, database}));
+    }, [dispatch, groupId, database]);
 
     const loading = groupQuery.isFetching && storageGroupData === undefined;
     const {appTitle} = useAppTitle();
@@ -72,25 +77,46 @@ export function StorageGroupPage() {
             return null;
         }
 
-        const items = [`${storageGroupPageKeyset('pool-name')}: ${storageGroupData?.PoolName}`];
+        const hasPreviousPage = history.length > 1;
 
         return (
-            <PageMetaWithAutorefresh
+            <Flex
                 className={storageGroupPageCn('meta')}
-                loading={loading}
-                items={items}
-            />
+                alignItems="center"
+                justifyContent={hasPreviousPage ? 'space-between' : 'flex-end'}
+                gap={2}
+            >
+                {hasPreviousPage && (
+                    <Button view="outlined" onClick={() => history.goBack()}>
+                        <Icon data={ArrowLeft} />
+                        {storageGroupPageKeyset('action_back')}
+                    </Button>
+                )}
+                <AutoRefreshControl />
+            </Flex>
         );
     };
 
     const renderPageTitle = () => {
         return (
-            <EntityPageTitle
-                className={storageGroupPageCn('title')}
-                entityName={storageGroupPageKeyset('storage-group')}
-                status={storageGroupData?.Overall || EFlag.Grey}
-                id={groupId}
-            />
+            <Flex className={storageGroupPageCn('title')} alignItems="center" gap={2} wrap="wrap">
+                <Text variant="header-1">{storageGroupPageKeyset('storage-group')}</Text>
+                <Flex alignItems="center" gap={1}>
+                    <Text variant="header-1" color="hint">
+                        {groupId || EMPTY_DATA_PLACEHOLDER}
+                    </Text>
+                    {groupId && (
+                        <ClipboardButton
+                            text={groupId}
+                            view="flat-secondary"
+                            size="s"
+                            aria-label={storageGroupPageKeyset('action_copy-group-id-from-title')}
+                            tooltipInitialText={storageGroupPageKeyset('action_copy-group-id')}
+                        />
+                    )}
+                </Flex>
+                <StorageGroupStateLabel state={state} />
+            </Flex>
         );
     };
 
@@ -107,9 +133,9 @@ export function StorageGroupPage() {
         }
         return (
             <React.Fragment>
-                <div className={storageGroupPageCn('storage-title')}>
+                <Text as="h2" variant="subheader-3" className={storageGroupPageCn('storage-title')}>
                     {storageGroupPageKeyset('storage')}
-                </div>
+                </Text>
                 <PaginatedStorage
                     database={database}
                     groupId={groupId}
@@ -132,10 +158,12 @@ export function StorageGroupPage() {
     return (
         <div className={storageGroupPageCn(null)} ref={containerRef}>
             {renderHelmet()}
-            {renderPageMeta()}
-            {renderPageTitle()}
-            {renderError()}
-            {renderInfo()}
+            <div className={storageGroupPageCn('summary')}>
+                {renderPageMeta()}
+                {renderPageTitle()}
+                {renderError()}
+                {renderInfo()}
+            </div>
             {renderStorage()}
         </div>
     );

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

@@ -1,5 +1,7 @@
 {
   "storage-group": "Storage Group",
   "storage": "Storage",
-  "pool-name": "Pool Name"
+  "action_back": "Back",
+  "action_copy-group-id": "Copy Storage Group ID",
+  "action_copy-group-id-from-title": "Copy Storage Group ID from page title"
 }