feat: add storage group page

src/components/StorageGroupInfo/StorageGroupInfo.scss

@@ -0,0 +1,7 @@
+.ydb-storage-group-info {
+    &__wrapper {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 7px;
+    }
+}

src/components/StorageGroupInfo/StorageGroupInfo.tsx

@@ -0,0 +1,174 @@
+import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
+import {valueIsDefined} from '../../utils';
+import {cn} from '../../utils/cn';
+import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
+import {bytesToSpeed} from '../../utils/utils';
+import {EntityStatus} from '../EntityStatus/EntityStatus';
+import {InfoViewer} from '../InfoViewer';
+import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
+import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+
+import {storageGroupInfoKeyset} from './i18n';
+
+import './StorageGroupInfo.scss';
+
+const b = cn('ydb-storage-group-info');
+
+interface StorageGroupInfoProps extends Omit<InfoViewerProps, 'info'> {
+    data?: PreparedStorageGroup;
+    className?: string;
+}
+
+// eslint-disable-next-line complexity
+export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageGroupInfoProps) {
+    const {
+        Encryption,
+        Overall,
+        DiskSpace,
+        MediaType,
+        ErasureSpecies,
+        Used,
+        Limit,
+        Usage,
+        Read,
+        Write,
+        GroupGeneration,
+        Latency,
+        AllocationUnits,
+        State,
+        MissingDisks,
+        Available,
+        LatencyPutTabletLog,
+        LatencyPutUserData,
+        LatencyGetFast,
+    } = data || {};
+
+    const storageGroupInfoFirstColumn = [];
+
+    if (valueIsDefined(GroupGeneration)) {
+        storageGroupInfoFirstColumn.push({
+            label: storageGroupInfoKeyset('group-generation'),
+            value: GroupGeneration,
+        });
+    }
+    if (valueIsDefined(ErasureSpecies)) {
+        storageGroupInfoFirstColumn.push({
+            label: storageGroupInfoKeyset('erasure-species'),
+            value: ErasureSpecies,
+        });
+    }
+    if (valueIsDefined(MediaType)) {
+        storageGroupInfoFirstColumn.push({
+            label: storageGroupInfoKeyset('media-type'),
+            value: MediaType,
+        });
+    }
+    if (valueIsDefined(Encryption)) {
+        storageGroupInfoFirstColumn.push({
+            label: storageGroupInfoKeyset('encryption'),
+            value: Encryption ? storageGroupInfoKeyset('yes') : storageGroupInfoKeyset('no'),
+        });
+    }
+    if (valueIsDefined(Overall)) {
+        storageGroupInfoFirstColumn.push({
+            label: storageGroupInfoKeyset('overall'),
+            value: <EntityStatus status={Overall} />,
+        });
+    }
+    if (valueIsDefined(State)) {
+        storageGroupInfoFirstColumn.push({label: storageGroupInfoKeyset('state'), value: State});
+    }
+    if (valueIsDefined(MissingDisks)) {
+        storageGroupInfoFirstColumn.push({
+            label: storageGroupInfoKeyset('missing-disks'),
+            value: MissingDisks,
+        });
+    }
+
+    const storageGroupInfoSecondColumn = [];
+
+    if (valueIsDefined(Used) && valueIsDefined(Limit)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('used-space'),
+            value: (
+                <ProgressViewer
+                    value={Number(Used)}
+                    capacity={Number(Limit)}
+                    formatValues={formatStorageValuesToGb}
+                    colorizeProgress={true}
+                />
+            ),
+        });
+    }
+    if (valueIsDefined(Available)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('available'),
+            value: formatStorageValuesToGb(Number(Available)),
+        });
+    }
+    if (valueIsDefined(Usage)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('usage'),
+            value: `${Usage.toFixed(2)}%`,
+        });
+    }
+    if (valueIsDefined(DiskSpace)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('disk-space'),
+            value: <EntityStatus status={DiskSpace} />,
+        });
+    }
+    if (valueIsDefined(Latency)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('latency'),
+            value: <EntityStatus status={Latency} />,
+        });
+    }
+    if (valueIsDefined(LatencyPutTabletLog)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('latency-put-tablet-log'),
+            value: `${LatencyPutTabletLog} ms`,
+        });
+    }
+    if (valueIsDefined(LatencyPutUserData)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('latency-put-user-data'),
+            value: `${LatencyPutUserData} ms`,
+        });
+    }
+    if (valueIsDefined(LatencyGetFast)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('latency-get-fast'),
+            value: `${LatencyGetFast} ms`,
+        });
+    }
+    if (valueIsDefined(AllocationUnits)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('allocation-units'),
+            value: AllocationUnits,
+        });
+    }
+    if (valueIsDefined(Read)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('read-throughput'),
+            value: bytesToSpeed(Number(Read)),
+        });
+    }
+    if (valueIsDefined(Write)) {
+        storageGroupInfoSecondColumn.push({
+            label: storageGroupInfoKeyset('write-throughput'),
+            value: bytesToSpeed(Number(Write)),
+        });
+    }
+
+    return (
+        <div className={b('wrapper', className)}>
+            <div className={b('col')}>
+                <InfoViewer info={storageGroupInfoFirstColumn} {...infoViewerProps} />
+            </div>
+            <div className={b('col')}>
+                <InfoViewer info={storageGroupInfoSecondColumn} {...infoViewerProps} />
+            </div>
+        </div>
+    );
+}

src/components/StorageGroupInfo/i18n/en.json

@@ -0,0 +1,22 @@
+{
+  "encryption": "Encryption",
+  "overall": "Overall",
+  "disk-space": "Disk Space",
+  "media-type": "Media Type",
+  "erasure-species": "Erasure Species",
+  "used-space": "Used Space",
+  "usage": "Usage",
+  "read-throughput": "Read Throughput",
+  "write-throughput": "Write Throughput",
+  "yes": "Yes",
+  "no": "No",
+  "group-generation": "Group Generation",
+  "latency": "Latency",
+  "allocation-units": "Units",
+  "state": "State",
+  "missing-disks": "Missing Disks",
+  "available": "Available Space",
+  "latency-put-tablet-log": "Latency (Put Tablet Log)",
+  "latency-put-user-data": "Latency (Put User Data)",
+  "latency-get-fast": "Latency (Get Fast)"
+}

src/components/StorageGroupInfo/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'storage-group-info';
+
+export const storageGroupInfoKeyset = registerKeysets(COMPONENT, {en});

src/containers/App/Content.tsx

@@ -28,6 +28,7 @@ import {
     PDiskPageSlot,
     RedirectSlot,
     RoutesSlot,
+    StorageGroupSlot,
     TabletSlot,
     TenantSlot,
     VDiskPageSlot,
@@ -76,6 +77,15 @@ const routesSlots: RouteSlot[] = [
         component: lazyComponent(() => import('../VDiskPage/VDiskPage'), 'VDiskPage'),
         wrapper: DataWrapper,
     },
+    {
+        path: routes.storageGroup,
+        slot: StorageGroupSlot,
+        component: lazyComponent(
+            () => import('../StorageGroupPage/StorageGroupPage'),
+            'StorageGroupPage',
+        ),
+        wrapper: DataWrapper,
+    },
     {
         path: routes.tablet,
         slot: TabletSlot,

src/containers/App/appSlots.tsx

@@ -5,6 +5,7 @@ import type {Cluster} from '../Cluster/Cluster';
 import type {Clusters} from '../Clusters/Clusters';
 import type {Node} from '../Node/Node';
 import type {PDiskPage} from '../PDiskPage/PDiskPage';
+import type {StorageGroupPage} from '../StorageGroupPage/StorageGroupPage';
 import type {Tablet} from '../Tablet';
 import type {Tenant} from '../Tenant/Tenant';
 import type {VDiskPage} from '../VDiskPage/VDiskPage';
@@ -39,6 +40,11 @@ export const VDiskPageSlot = createSlot<{
         | React.ReactNode
         | ((props: {component: typeof VDiskPage} & RouteComponentProps) => React.ReactNode);
 }>('vDisk');
+export const StorageGroupSlot = createSlot<{
+    children:
+        | React.ReactNode
+        | ((props: {component: typeof StorageGroupPage} & RouteComponentProps) => React.ReactNode);
+}>('storageGroup');
 export const TabletSlot = createSlot<{
     children:
         | React.ReactNode

src/containers/Header/breadcrumbs.tsx

@@ -13,6 +13,7 @@ import type {
     NodeBreadcrumbsOptions,
     PDiskBreadcrumbsOptions,
     Page,
+    StorageGroupBreadcrumbsOptions,
     TabletBreadcrumbsOptions,
     TenantBreadcrumbsOptions,
     VDiskBreadcrumbsOptions,
@@ -156,6 +157,27 @@ const getVDiskBreadcrumbs: GetBreadcrumbs<VDiskBreadcrumbsOptions> = (options, q
     return breadcrumbs;
 };
 
+const getStorageGroupBreadcrumbs: GetBreadcrumbs<StorageGroupBreadcrumbsOptions> = (
+    options,
+    query = {},
+) => {
+    const {groupId} = options;
+
+    const breadcrumbs = getClusterBreadcrumbs(options, query);
+
+    let text = headerKeyset('breadcrumbs.storageGroup');
+    if (groupId) {
+        text += ` ${groupId}`;
+    }
+
+    const lastItem = {
+        text,
+    };
+    breadcrumbs.push(lastItem);
+
+    return breadcrumbs;
+};
+
 const getTabletBreadcrumbs: GetBreadcrumbs<TabletBreadcrumbsOptions> = (options, query = {}) => {
     const {tabletId, tabletType, nodeId, nodeRole, nodeActiveTab = TABLETS, tenantName} = options;
 
@@ -178,6 +200,7 @@ const mapPageToGetter = {
     tablet: getTabletBreadcrumbs,
     tenant: getTenantBreadcrumbs,
     vDisk: getVDiskBreadcrumbs,
+    storageGroup: getStorageGroupBreadcrumbs,
 } as const;
 
 export const getBreadcrumbs = (

src/containers/Header/i18n/en.json

@@ -4,5 +4,6 @@
   "breadcrumbs.pDisk": "PDisk",
   "breadcrumbs.vDisk": "VDisk",
   "breadcrumbs.tablet": "Tablet",
-  "breadcrumbs.tablets": "Tablets"
+  "breadcrumbs.tablets": "Tablets",
+  "breadcrumbs.storageGroup": "Storage Group"
 }

src/containers/Storage/StorageGroups/columns/getStorageGroupsColumns.tsx

@@ -6,8 +6,10 @@ import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
+import {InternalLink} from '../../../../components/InternalLink';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
 import {VDiskWithDonorsStack} from '../../../../components/VDisk/VDiskWithDonorsStack';
+import {getStorageGroupPath} from '../../../../routes';
 import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants';
 import type {VisibleEntities} from '../../../../store/reducers/storage/types';
 import type {NodesMap} from '../../../../types/store/nodesList';
@@ -139,7 +141,13 @@ const groupIdColumn: StorageGroupsColumn = {
     header: 'Group ID',
     width: 130,
     render: ({row}) => {
-        return <span className={b('group-id')}>{row.GroupId}</span>;
+        return row.GroupId ? (
+            <InternalLink className={b('group-id')} to={getStorageGroupPath(row.GroupId)}>
+                {row.GroupId}
+            </InternalLink>
+        ) : (
+            '-'
+        );
     },
     sortAccessor: (row) => Number(row.GroupId),
     align: DataTable.RIGHT,

src/containers/StorageGroupPage/StorageGroupPage.scss

@@ -0,0 +1,29 @@
+@import '../../styles/mixins.scss';
+
+.ydb-storage-group-page {
+    position: relative;
+
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+    gap: 20px;
+
+    height: 100%;
+    padding: 20px;
+
+    &__meta,
+    &__title,
+    &__info,
+    &__tabs {
+        position: sticky;
+        left: 0;
+    }
+
+    &__info {
+        margin-top: var(--g-spacing-10);
+    }
+
+    &__tabs {
+        @include tabs-wrapper-styles();
+    }
+}