feat: 2dc (ydb-platform#2699)

Author: astandrik

.github/copilot-instructions.md

@@ -1,3 +1,11 @@
+# Copilot Instructions
+
+## Internationalization (i18n)
+
+- Do NOT hardcode user-facing strings.
+- ALWAYS use the component i18n keysets.
+- For key naming, see `i18n-naming-ruleset.md` in the repo root.
+
 # GitHub Copilot Instructions for YDB Embedded UI
 
 > **Note**: This file contains project-specific instructions for GitHub Copilot code review and assistance.
@@ -82,6 +90,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

@@ -232,21 +232,7 @@ Uses BEM naming convention with `cn()` utility from `utils/cn`. Create a block f
 
 ### Internationalization (i18n)
 
-All user-facing text must be internationalized using the i18n system. Follow the naming rules from `i18n-naming-ruleset.md`:
-
-- **Component Structure**: Each component has an `i18n/` folder with `en.json` and `index.ts`
-- **Registration**: Use `registerKeysets()` with a unique component name
-- **Key Format**: Follow `<context>_<content>` pattern (e.g., `action_save`, `field_name`, `alert_error`)
-- **Context Prefixes**:
-  - `action_` - buttons, links, menu items
-  - `field_` - form fields, table columns
-  - `title_` - page/section titles
-  - `alert_` - notifications, errors
-  - `context_` - descriptions, hints
-  - `confirm_` - confirmation dialogs
-  - `value_` - status values, options
-- **NEVER** use hardcoded strings in UI components
-- **ALWAYS** create i18n entries for all user-visible text
+See `i18n-naming-ruleset.md` in the repo root for all i18n conventions (naming and usage).
 
 ### Performance Considerations
 
@@ -297,6 +283,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

@@ -232,21 +232,7 @@ Uses BEM naming convention with `cn()` utility from `utils/cn`. Create a block f
 
 ### Internationalization (i18n)
 
-All user-facing text must be internationalized using the i18n system. Follow the naming rules from `i18n-naming-ruleset.md`:
-
-- **Component Structure**: Each component has an `i18n/` folder with `en.json` and `index.ts`
-- **Registration**: Use `registerKeysets()` with a unique component name
-- **Key Format**: Follow `<context>_<content>` pattern (e.g., `action_save`, `field_name`, `alert_error`)
-- **Context Prefixes**:
-  - `action_` - buttons, links, menu items
-  - `field_` - form fields, table columns
-  - `title_` - page/section titles
-  - `alert_` - notifications, errors
-  - `context_` - descriptions, hints
-  - `confirm_` - confirmation dialogs
-  - `value_` - status values, options
-- **NEVER** use hardcoded strings in UI components
-- **ALWAYS** create i18n entries for all user-visible text
+See `i18n-naming-ruleset.md` in the repo root for all i18n conventions (naming and usage).
 
 ### Performance Considerations
 
@@ -297,6 +283,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('field_pile-name'),
+        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('field_pile-name');
+    },
 } 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('field_pile-name');
+    },
 } 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",
-
+  "field_pile-name": "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.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';
 
@@ -25,6 +26,7 @@ interface ClusterInfoProps {
     error?: IResponseError | string;
     additionalClusterProps?: AdditionalClusterProps;
     groupStats?: ClusterGroupsStats;
+    bridgePiles?: TBridgePile[];
 }
 
 export const ClusterInfo = ({
@@ -33,6 +35,7 @@ export const ClusterInfo = ({
     error,
     additionalClusterProps = {},
     groupStats = {},
+    bridgePiles,
 }: ClusterInfoProps) => {
     const {info = [], links = []} = additionalClusterProps;
 
@@ -96,13 +99,28 @@ 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={6} 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 variant="subheader-2" color="secondary">
+                                    {formatNumber(bridgePiles.length)}
+                                </Text>
+                            </Text>
+                            <BridgeInfoTable piles={bridgePiles} />
+                        </Flex>
+                    ) : null}
+                </Flex>
             </InfoSection>
         );
     };

src/containers/Cluster/ClusterOverview/ClusterOverview.tsx

@@ -1,7 +1,12 @@
+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';
@@ -36,6 +41,16 @@ interface ClusterOverviewProps {
 
 export function ClusterOverview(props: ClusterOverviewProps) {
     const [expandDashboard, setExpandDashboard] = useSetting<boolean>(EXPAND_CLUSTER_DASHBOARD);
+    const bridgeModeEnabled = useBridgeModeEnabled();
+
+    const bridgePiles = React.useMemo(() => {
+        if (!bridgeModeEnabled || !isClusterInfoV5(props.cluster)) {
+            return undefined;
+        }
+
+        const {BridgeInfo} = props.cluster;
+        return BridgeInfo?.Piles?.length ? BridgeInfo.Piles : undefined;
+    }, [props.cluster, bridgeModeEnabled]);
     if (props.error) {
         return <ResponseError error={props.error} className={b('error')} />;
     }
@@ -67,7 +82,7 @@ export function ClusterOverview(props: ClusterOverviewProps) {
                     )}
                 </Disclosure.Summary>
                 <ClusterDashboard {...props} />
-                <ClusterInfo {...props} />
+                <ClusterInfo {...props} bridgePiles={bridgePiles} />
             </Disclosure>
         </Flex>
     );
@@ -93,7 +108,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;

src/containers/Cluster/ClusterOverview/components/BridgeInfoTable.scss

@@ -0,0 +1,27 @@
+@use '../../../../styles/mixins.scss';
+
+.bridge-info-table {
+    height: 100%;
+
+    &__pile-card {
+        --g-definition-list-item-gap: var(--g-spacing-3);
+
+        width: 347px;
+        padding: var(--g-spacing-3) var(--g-spacing-4);
+
+        border-radius: var(--g-border-radius-s);
+        background-color: var(--g-color-base-generic-ultralight);
+
+        @include mixins.body-2-typography();
+    }
+
+    &__status-icon {
+        &_primary {
+            color: var(--g-color-text-positive);
+        }
+
+        &:not(&_primary) {
+            color: var(--g-color-private-white-250);
+        }
+    }
+}