feat: Bridge Piles

Author: astandrik

.github/copilot-instructions.md

@@ -82,6 +82,10 @@ const handleInputChange = useCallback(
 - Follow key format: `<context>_<content>` (e.g., `action_save`, `field_name`)
 - Register keysets with `registerKeysets()` using unique component name
 
+### Display Placeholders (MANDATORY)
+
+- ALWAYS use `EMPTY_DATA_PLACEHOLDER` for empty UI values. Do not hardcode em or en dashes (`—`, `–`) as placeholders. Hyphen `-`/dashes may be used as separators in titles/ranges. Before submitting a PR, grep for `—` and `–` and ensure placeholder usages use `EMPTY_DATA_PLACEHOLDER` from `src/utils/constants.ts`.
+
 ### State Management
 
 - Use Redux Toolkit with domain-based organization

AGENTS.md

@@ -297,6 +297,7 @@ const [urlParam, setUrlParam] = useQueryParam('sort', SortOrderParam);
 - **NEVER** call APIs directly - use `window.api.module.method()`
 - **NEVER** mutate state in RTK Query - return new objects/arrays
 - **NEVER** hardcode user-facing strings - use i18n
+- **ALWAYS** use `EMPTY_DATA_PLACEHOLDER` for empty UI values. Do not hardcode em dashes `—` or en dashes `–` as placeholders. Hyphen `-` and dashes may be used as separators in titles/ranges. Before submitting, grep the code for `—`/`–` and ensure placeholders use `EMPTY_DATA_PLACEHOLDER` from `src/utils/constants.ts`.
 - **ALWAYS** use `cn()` for classNames: `const b = cn('component-name')`
 - **ALWAYS** clear errors on user input
 - **ALWAYS** handle loading states in UI

CLAUDE.md

@@ -297,6 +297,7 @@ const [urlParam, setUrlParam] = useQueryParam('sort', SortOrderParam);
 - **NEVER** call APIs directly - use `window.api.module.method()`
 - **NEVER** mutate state in RTK Query - return new objects/arrays
 - **NEVER** hardcode user-facing strings - use i18n
+- **ALWAYS** use `EMPTY_DATA_PLACEHOLDER` for empty UI values. Do not hardcode em dashes `—` or en dashes `–` as placeholders. Hyphen `-` and dashes may be used as separators in titles/ranges. Before submitting, grep the code for `—`/`–` and ensure placeholders use `EMPTY_DATA_PLACEHOLDER` from `src/utils/constants.ts`.
 - **ALWAYS** use `cn()` for classNames: `const b = cn('component-name')`
 - **ALWAYS** clear errors on user input
 - **ALWAYS** handle loading states in UI

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -1,6 +1,7 @@
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import type {GetNodeRefFunc, NodeAddress} from '../../types/additionalProps';
 import type {TNodeInfo, TSystemStateInfo} from '../../types/api/nodes';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {
     createDeveloperUIInternalPageHref,
     createDeveloperUILinkWithNodeId,
@@ -30,7 +31,7 @@ export const NodeHostWrapper = ({
     statusForIcon = 'SystemState',
 }: NodeHostWrapperProps) => {
     if (!node.Host) {
-        return <span>—</span>;
+        return EMPTY_DATA_PLACEHOLDER;
     }
 
     const status = statusForIcon === 'ConnectStatus' ? node.ConnectStatus : node.SystemState;

src/components/nodesColumns/columns.tsx

@@ -110,6 +110,16 @@ export function getRackColumn<T extends {Rack?: string}>(): Column<T> {
         width: 100,
     };
 }
+
+export function getPileNameColumn<T extends {PileName?: string}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.PileName,
+        header: i18n('PileName'),
+        align: DataTable.LEFT,
+        render: ({row}) => row.PileName || EMPTY_DATA_PLACEHOLDER,
+        width: 100,
+    };
+}
 export function getVersionColumn<T extends {Version?: string}>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.Version,

src/components/nodesColumns/constants.ts

@@ -32,6 +32,7 @@ export const NODES_COLUMNS_IDS = {
     Missing: 'Missing',
     Tablets: 'Tablets',
     PDisks: 'PDisks',
+    PileName: 'PileName',
 } as const;
 
 export type NodesColumnId = ValueOf<typeof NODES_COLUMNS_IDS>;
@@ -130,6 +131,9 @@ export const NODES_COLUMNS_TITLES = {
     get PDisks() {
         return i18n('pdisks');
     },
+    get PileName() {
+        return i18n('PileName');
+    },
 } as const satisfies Record<NodesColumnId, string>;
 
 const NODES_COLUMNS_GROUP_BY_TITLES = {
@@ -178,6 +182,9 @@ const NODES_COLUMNS_GROUP_BY_TITLES = {
     get PingTime() {
         return i18n('ping-time');
     },
+    get PileName() {
+        return i18n('PileName');
+    },
 } as const satisfies Record<NodesGroupByField, string>;
 
 export function getNodesGroupByFieldTitle(groupByField: NodesGroupByField) {
@@ -213,6 +220,7 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
     Missing: ['Missing'],
     Tablets: ['Tablets', 'Database'],
     PDisks: ['PDisks'],
+    PileName: ['PileName'],
 };
 
 const NODES_COLUMNS_TO_SORT_FIELDS: Record<NodesColumnId, NodesSortValue | undefined> = {
@@ -242,6 +250,7 @@ const NODES_COLUMNS_TO_SORT_FIELDS: Record<NodesColumnId, NodesSortValue | undef
     Missing: 'Missing',
     Tablets: undefined,
     PDisks: undefined,
+    PileName: undefined,
 };
 
 export function getNodesColumnSortField(columnId?: string) {

src/components/nodesColumns/i18n/en.json

@@ -18,10 +18,9 @@
   "sessions": "Sessions",
   "missing": "Missing",
   "pdisks": "PDisks",
-
   "field_memory-used": "Memory used",
   "field_memory-limit": "Memory limit",
-
+  "PileName": "Pile Name",
   "system-state": "System State",
   "connect-status": "Connect Status",
   "utilization": "Utilization",
@@ -33,7 +32,6 @@
   "ping": "Ping",
   "send": "Send",
   "receive": "Receive",
-
   "max": "Max",
   "min": "Min",
   "avg": "Avg",

src/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -20,4 +20,15 @@
 
         margin-left: 5px;
     }
+
+    &__details-layout {
+        align-items: flex-start;
+        gap: var(--g-spacing-6);
+    }
+
+    &__bridge-table {
+        flex: 0 0 360px; // do not shrink, fixed basis so stats don't take all space
+
+        min-width: 360px;
+    }
 }

src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -7,9 +7,10 @@ import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoVie
 import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
 import type {ClusterGroupsStats} from '../../../store/reducers/cluster/types';
 import type {AdditionalClusterProps} from '../../../types/additionalProps';
-import type {TClusterInfo} from '../../../types/api/cluster';
+import type {TBridgePile, TClusterInfo} from '../../../types/api/cluster';
 import type {IResponseError} from '../../../types/api/error';
 import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
+import {BridgeInfoTable} from '../ClusterOverview/components/BridgeInfoTable';
 import i18n from '../i18n';
 import {getTotalStorageGroupsUsed} from '../utils';
 
@@ -19,12 +20,15 @@ import {getInfo, getStorageGroupStats} from './utils/utils';
 
 import './ClusterInfo.scss';
 
+const GROUPS_SECTION_GAP = 10;
+
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
     loading?: boolean;
     error?: IResponseError | string;
     additionalClusterProps?: AdditionalClusterProps;
     groupStats?: ClusterGroupsStats;
+    bridgePiles?: TBridgePile[];
 }
 
 export const ClusterInfo = ({
@@ -33,6 +37,7 @@ export const ClusterInfo = ({
     error,
     additionalClusterProps = {},
     groupStats = {},
+    bridgePiles,
 }: ClusterInfoProps) => {
     const {info = [], links = []} = additionalClusterProps;
 
@@ -96,13 +101,25 @@ export const ClusterInfo = ({
         }
         return (
             <InfoSection>
-                <Text as="div" variant="subheader-2" className={b('section-title')}>
-                    {i18n('title_storage-groups')}{' '}
-                    <Text variant="subheader-2" color="secondary">
-                        {formatNumber(total)}
-                    </Text>
-                </Text>
-                <Flex gap={2}>{stats}</Flex>
+                <Flex gap={GROUPS_SECTION_GAP} width="full">
+                    <Flex direction="column" gap={2}>
+                        <Text as="div" variant="subheader-2" className={b('section-title')}>
+                            {i18n('title_storage-groups')}{' '}
+                            <Text variant="subheader-2" color="secondary">
+                                {formatNumber(total)}
+                            </Text>
+                        </Text>
+                        <Flex gap={2}>{stats}</Flex>
+                    </Flex>
+                    {bridgePiles?.length ? (
+                        <Flex direction="column" gap={2} className={b('bridge-table')}>
+                            <Text as="div" variant="subheader-2" className={b('section-title')}>
+                                {i18n('title_bridge')}
+                            </Text>
+                            <BridgeInfoTable piles={bridgePiles} />
+                        </Flex>
+                    ) : null}
+                </Flex>
             </InfoSection>
         );
     };

src/containers/Cluster/ClusterOverview/ClusterOverview.tsx

@@ -1,11 +1,16 @@
+import React from 'react';
+
 import {ArrowToggle, Disclosure, Flex, Icon, Text} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../../components/Errors/ResponseError';
-import {useClusterDashboardAvailable} from '../../../store/reducers/capabilities/hooks';
+import {
+    useBridgeModeEnabled,
+    useClusterDashboardAvailable,
+} from '../../../store/reducers/capabilities/hooks';
 import type {ClusterGroupsStats} from '../../../store/reducers/cluster/types';
 import type {AdditionalClusterProps} from '../../../types/additionalProps';
 import {isClusterInfoV2, isClusterInfoV5} from '../../../types/api/cluster';
-import type {TClusterInfo} from '../../../types/api/cluster';
+import type {TBridgePile, TClusterInfo} from '../../../types/api/cluster';
 import type {IResponseError} from '../../../types/api/error';
 import {valueIsDefined} from '../../../utils';
 import {EXPAND_CLUSTER_DASHBOARD} from '../../../utils/constants';
@@ -36,6 +41,15 @@ interface ClusterOverviewProps {
 
 export function ClusterOverview(props: ClusterOverviewProps) {
     const [expandDashboard, setExpandDashboard] = useSetting<boolean>(EXPAND_CLUSTER_DASHBOARD);
+    const bridgeModeEnabled = useBridgeModeEnabled();
+    let bridgePiles: TBridgePile[] | undefined;
+    if (isClusterInfoV5(props.cluster)) {
+        const {BridgeInfo} = props.cluster;
+        const shouldShowBridge = bridgeModeEnabled && Boolean(BridgeInfo?.Piles?.length);
+        if (shouldShowBridge) {
+            bridgePiles = BridgeInfo?.Piles;
+        }
+    }
     if (props.error) {
         return <ResponseError error={props.error} className={b('error')} />;
     }
@@ -67,7 +81,7 @@ export function ClusterOverview(props: ClusterOverviewProps) {
                     )}
                 </Disclosure.Summary>
                 <ClusterDashboard {...props} />
-                <ClusterInfo {...props} />
+                <ClusterInfo {...props} bridgePiles={bridgePiles} />
             </Disclosure>
         </Flex>
     );
@@ -93,7 +107,7 @@ function ClusterDoughnuts({cluster, groupStats = {}, loading, collapsed}: Cluste
     if (loading) {
         return <ClusterDashboardSkeleton collapsed={collapsed} />;
     }
-    const metricsCards = [];
+    const metricsCards: React.ReactNode[] = [];
     if (isClusterInfoV2(cluster)) {
         const {CoresUsed, NumberOfCpus, CoresTotal} = cluster;
         const total = CoresTotal ?? NumberOfCpus;