ydb-embedded-ui 22.0.0 → 22.2.0

package/src/containers/Node/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx

@@ -23,6 +23,7 @@ export function NodeNetworkControls({
     return (
         <React.Fragment>
             <Search
+                tableFilter
                 value={searchValue}
                 onChange={onSearchChange}
                 placeholder={i18n('search-placeholder')}

package/src/containers/Node/NodeNetwork/NodeNetworkTable.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 
+import {useHistory} from 'react-router-dom';
+
+import {
+    getNodeHostLabel,
+    getNodeHostPath,
+} from '../../../components/NodeHostWrapper/NodeHostWrapper';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import type {PaginatedTableData} from '../../../components/PaginatedTable';
+import {useDatabaseFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {Column} from '../../../utils/tableUtils/types';
 
@@ -25,6 +32,8 @@ export function NodeNetworkTable({
     scrollContainerRef,
     onDataFetched,
 }: NodeNetworkTableProps) {
+    const history = useHistory();
+    const database = useDatabaseFromQuery();
     const filters = React.useMemo(
         () => ({
             nodeId,
@@ -37,6 +46,14 @@ export function NodeNetworkTable({
 
     return (
         <ResizeablePaginatedTable
+            getKeyboardRowKey={(node) => node.NodeId}
+            getKeyboardRowLabel={getNodeHostLabel}
+            onKeyboardActivate={(node) => {
+                const nodePath = getNodeHostPath(node, database);
+                if (nodePath) {
+                    history.push(nodePath);
+                }
+            }}
             columnsWidthLSKey={NODE_NETWORK_COLUMNS_WIDTH_LS_KEY}
             scrollContainerRef={scrollContainerRef}
             columns={columns}

package/src/containers/Nodes/NodesControls/NodesControls.tsx

@@ -67,6 +67,7 @@ export function NodesControls({
     return (
         <React.Fragment>
             <Search
+                tableFilter
                 onChange={handleSearchQueryChange}
                 placeholder={i18n('controls_search-placeholder')}
                 width={238}

package/src/containers/Nodes/NodesTable.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import {useHistory} from 'react-router-dom';
+
+import {getNodeHostLabel, getNodeHostPath} from '../../components/NodeHostWrapper/NodeHostWrapper';
 import type {PaginatedTableData} from '../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../components/PaginatedTable';
 import {
@@ -19,6 +22,8 @@ import {getNodes} from './getNodes';
 import i18n from './i18n';
 import {getRowClassName} from './shared';
 
+const ROW_HEIGHT_WITH_PDISKS = 51;
+
 interface NodesTableProps {
     path?: string;
     database?: string;
@@ -55,6 +60,7 @@ export function NodesTable({
     initialEntitiesCount,
     onDataFetched,
 }: NodesTableProps) {
+    const history = useHistory();
     const SuccessImage = getIllustration('SuccessOperation');
 
     const useMetaProxy = useClusterWithProxy();
@@ -94,11 +100,21 @@ export function NodesTable({
 
     return (
         <ResizeablePaginatedTable
+            getKeyboardRowKey={(node) => node.NodeId}
+            getKeyboardRowLabel={getNodeHostLabel}
+            onKeyboardActivate={(node) => {
+                const nodePath = getNodeHostPath(node, database);
+                if (nodePath) {
+                    history.push(nodePath);
+                }
+            }}
             columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
             scrollContainerRef={scrollContainerRef}
             columns={columns}
             rowHeight={
-                columns.some((column) => column.name === NODES_COLUMNS_IDS.PDisks) ? 51 : undefined
+                columns.some(({name}) => name === NODES_COLUMNS_IDS.PDisks)
+                    ? ROW_HEIGHT_WITH_PDISKS
+                    : undefined
             }
             fetchData={getNodes}
             initialEntitiesCount={initialEntitiesCount}

package/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -65,6 +65,7 @@ const NodeGroup = React.memo(function NodeGroup({
             onIsExpandedChange={onIsExpandedChange}
         >
             <PaginatedTableWithLayout
+                inheritKeyboardNavigation
                 initialState={{sortParams: undefined}}
                 table={
                     <NodesTable

package/src/containers/Nodes/columns/columns.tsx

@@ -3,6 +3,7 @@ import {
     getDataCenterColumn,
     getDatabaseColumn,
     getHostColumn,
+    getICPortColumn,
     getLoadAverageColumn,
     getMemoryColumn,
     getNodeIdColumn,
@@ -23,6 +24,7 @@ export function getNodesColumns(params: GetNodesColumnsParams): NodesColumn[] {
     const columns: NodesColumn[] = [
         getNodeIdColumn(),
         getHostColumn(params),
+        getICPortColumn(),
         getNodeNameColumn(),
         getDatabaseColumn(),
         getDataCenterColumn(),

package/src/containers/Storage/Disks/Disks.scss

@@ -19,6 +19,7 @@
         flex-shrink: 0;
 
         min-width: 24px;
+        min-height: 20px;
 
         &_all {
             position: relative;
@@ -30,6 +31,7 @@
 
             width: 65px;
             min-width: 65px;
+            min-height: 24px;
         }
     }
     &__vdisk-size-indicator {
@@ -48,7 +50,10 @@
     }
 
     &__pdisk-item {
+        flex-shrink: 0;
+
         min-width: 55px;
+        min-height: 20px;
         margin-right: var(--g-spacing-1);
 
         &_with-dc-margin {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {Flex, useLayoutContext} from '@gravity-ui/uikit';
+import {isNil} from 'lodash';
 
 import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
 import type {Erasure} from '../../../types/api/storage';
@@ -16,9 +17,15 @@ import type {StorageViewContext} from '../types';
 import {useStoragePDiskDisplayStateGetter} from '../useStoragePDiskDisplayStateGetter';
 import {useStorageVDiskDisplayStateGetter} from '../useStorageVDiskDisplayStateGetter';
 import {isPdiskActive, isVdiskActive, useVDisksWithDCMargins} from '../utils';
+import {useVirtualizedDiskList} from '../utils/useVirtualizedDiskList';
 
 import {calculateCompactVDiskWidths} from './calculateCompactVDiskWidths';
-import {ALL_VDISK_WIDTH, VDISKS_CONTAINER_WIDTH, getAllVDisksContainerWidth} from './constants';
+import {
+    ALL_VDISK_WIDTH,
+    EXPERT_MODE_PDISK_WIDTH,
+    VDISKS_CONTAINER_WIDTH,
+    getAllVDisksContainerWidth,
+} from './constants';
 
 import './Disks.scss';
 
@@ -32,157 +39,212 @@ interface DisksProps {
     isAllVDisksLayout?: boolean;
 }
 
-export function Disks({
-    vDisks = [],
-    viewContext,
-    erasure,
-    withIcon,
-    isAllVDisksLayout,
-}: DisksProps) {
-    const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
-    const getVDiskDisplayState = useStorageVDiskDisplayStateGetter();
-    const getPDiskDisplayState = useStoragePDiskDisplayStateGetter();
-
-    const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
-
-    const {
-        theme: {spaceBaseSize},
-    } = useLayoutContext();
-    const compactVDiskWidths = React.useMemo(
-        () => calculateCompactVDiskWidths(vDisks, spaceBaseSize),
-        [spaceBaseSize, vDisks],
-    );
-
-    if (!vDisks.length) {
-        return null;
-    }
-
-    const vDisksContainerWidth = isAllVDisksLayout
-        ? getAllVDisksContainerWidth()
-        : VDISKS_CONTAINER_WIDTH;
-
-    return (
-        <div className={b(null)}>
-            <Flex direction="row" gap={1} grow style={{width: vDisksContainerWidth}}>
-                {vDisks?.map((vDisk, index) => (
-                    <VDiskItem
-                        key={vDisk.StringifiedId || index}
-                        vDisk={vDisk}
-                        inactive={!isVdiskActive(vDisk, viewContext)}
-                        highlightedVDisk={highlightedVDisk}
-                        setHighlightedVDisk={setHighlightedVDisk}
-                        compactVDiskWidth={compactVDiskWidths[index]}
-                        withIcon={withIcon}
-                        getDisplayState={getVDiskDisplayState}
-                        isAllVDisksLayout={isAllVDisksLayout}
-                    />
-                ))}
-            </Flex>
-
-            <div className={b('pdisks-wrapper')}>
-                {vDisks?.map((vDisk, index) => (
-                    <PDiskItem
-                        key={vDisk?.PDisk?.StringifiedId || index}
-                        vDisk={vDisk}
-                        viewContext={viewContext}
-                        highlightedVDisk={highlightedVDisk}
-                        setHighlightedVDisk={setHighlightedVDisk}
-                        withDCMargin={vDisksWithDCMargins.includes(index)}
-                        withIcon={withIcon}
-                        getDisplayState={getPDiskDisplayState}
-                    />
-                ))}
-            </div>
-        </div>
-    );
-}
-
 interface DisksItemProps {
     vDisk: PreparedVDisk;
     viewContext?: StorageViewContext;
     inactive?: boolean;
-    highlightedVDisk?: string;
+    highlighted: boolean;
     setHighlightedVDisk?: (id?: string) => void;
     compactVDiskWidth?: number;
     withDCMargin?: boolean;
     withIcon?: boolean;
     getDisplayState?: VDiskDisplayStateGetter;
     isAllVDisksLayout?: boolean;
+    renderContent: boolean;
+    placeholderProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
-function VDiskItem({
+const VDiskItem = React.memo(function VDiskItem({
     vDisk,
-    highlightedVDisk,
+    highlighted,
     inactive,
     setHighlightedVDisk,
     compactVDiskWidth,
     withIcon,
     getDisplayState,
     isAllVDisksLayout,
+    renderContent,
+    placeholderProps,
 }: DisksItemProps) {
-    // Do not show PDisk popup for VDisk
-    const vDiskToShow = {...vDisk, PDisk: undefined};
-
     const style: React.CSSProperties = isAllVDisksLayout
         ? {width: ALL_VDISK_WIDTH, flexBasis: ALL_VDISK_WIDTH}
         : {width: compactVDiskWidth, flexBasis: compactVDiskWidth};
 
     return (
-        <div style={style} className={b('vdisk-item', {all: isAllVDisksLayout})}>
+        <div
+            style={style}
+            className={b('vdisk-item', {all: isAllVDisksLayout})}
+            data-disk-id={vDisk.StringifiedId}
+        >
             {isAllVDisksLayout ? (
                 <div
                     aria-hidden
                     className={b('vdisk-size-indicator')}
-                    style={{width: compactVDiskWidth}}
+                    style={{
+                        width: compactVDiskWidth,
+                        visibility: renderContent ? undefined : 'hidden',
+                    }}
                 />
             ) : null}
             <VDiskWithDonorsStack
-                data={vDiskToShow}
+                renderContent={renderContent}
+                placeholderProps={placeholderProps}
+                data={vDisk}
+                hideMainPDiskInPopup
                 compact={!isAllVDisksLayout}
                 withIcon={withIcon}
                 inactive={inactive}
                 delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
                 delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
-                highlightedVDisk={highlightedVDisk}
+                highlightedVDisk={highlighted ? vDisk.StringifiedId : undefined}
                 setHighlightedVDisk={setHighlightedVDisk}
                 progressBarClassName={b('vdisk-progress-bar')}
                 getDisplayState={getDisplayState}
             />
         </div>
     );
-}
+});
 
-function PDiskItem({
+const PDiskItem = React.memo(function PDiskItem({
     vDisk,
     viewContext,
-    highlightedVDisk,
+    highlighted,
     setHighlightedVDisk,
     withDCMargin,
     withIcon,
     getDisplayState,
+    renderContent,
+    placeholderProps,
 }: Omit<DisksItemProps, 'getDisplayState'> & {getDisplayState?: PDiskDisplayStateGetter}) {
     const vDiskId = vDisk.StringifiedId;
 
-    const isHighlighted = highlightedVDisk === vDiskId;
+    const onShowPopup = React.useCallback(
+        () => setHighlightedVDisk?.(vDiskId),
+        [setHighlightedVDisk, vDiskId],
+    );
+    const onHidePopup = React.useCallback(
+        () => setHighlightedVDisk?.(undefined),
+        [setHighlightedVDisk],
+    );
 
     if (!vDisk.PDisk) {
-        return null;
+        // Preserve disk indices for focus tracking while virtualization is disabled.
+        return <div data-disk-id={vDiskId} hidden />;
     }
 
     return (
-        <PDisk
+        <div
             className={b('pdisk-item', {['with-dc-margin']: withDCMargin})}
-            progressBarClassName={b('pdisk-progress-bar')}
-            data={vDisk.PDisk}
-            inactive={!isPdiskActive(vDisk.PDisk, viewContext)}
-            showPopup={isHighlighted}
-            delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
-            delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
-            onShowPopup={() => setHighlightedVDisk?.(vDiskId)}
-            onHidePopup={() => setHighlightedVDisk?.(undefined)}
-            withIcon={withIcon}
-            highlighted={isHighlighted}
-            getDisplayState={getDisplayState}
-        />
+            data-disk-id={vDiskId}
+            style={{width: getDisplayState?.(vDisk.PDisk).width ?? EXPERT_MODE_PDISK_WIDTH}}
+            tabIndex={-1}
+            {...(renderContent || highlighted ? undefined : placeholderProps)}
+        >
+            {(renderContent || highlighted) && (
+                <PDisk
+                    progressBarClassName={b('pdisk-progress-bar')}
+                    data={vDisk.PDisk}
+                    inactive={!isPdiskActive(vDisk.PDisk, viewContext)}
+                    showPopup={highlighted}
+                    delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
+                    delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
+                    onShowPopup={onShowPopup}
+                    onHidePopup={onHidePopup}
+                    withIcon={withIcon}
+                    highlighted={highlighted}
+                    getDisplayState={getDisplayState}
+                />
+            )}
+        </div>
     );
-}
+});
+
+export const Disks = React.memo(function Disks({
+    vDisks = [],
+    viewContext,
+    erasure,
+    withIcon,
+    isAllVDisksLayout,
+}: DisksProps) {
+    const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
+    const getVDiskDisplayState = useStorageVDiskDisplayStateGetter();
+    const getPDiskDisplayState = useStoragePDiskDisplayStateGetter();
+
+    const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
+    const vDiskList = useVirtualizedDiskList(
+        vDisks,
+        vDisks.every((disk) => Boolean(disk.StringifiedId)),
+    );
+    // Missing disk identities produce non-focusable placeholders; keep all links reachable.
+    const pDiskList = useVirtualizedDiskList(
+        vDisks,
+        vDisks.every(({PDisk: pDisk}) => !isNil(pDisk?.NodeId) && !isNil(pDisk?.PDiskId)),
+    );
+
+    React.useEffect(() => {
+        setHighlightedVDisk((id) =>
+            vDisks.some((disk) => disk.StringifiedId === id) ? id : undefined,
+        );
+    }, [vDisks]);
+
+    const {
+        theme: {spaceBaseSize},
+    } = useLayoutContext();
+    const compactVDiskWidths = React.useMemo(
+        () => calculateCompactVDiskWidths(vDisks, spaceBaseSize),
+        [spaceBaseSize, vDisks],
+    );
+
+    if (!vDisks.length) {
+        return null;
+    }
+
+    const vDisksContainerWidth = isAllVDisksLayout
+        ? getAllVDisksContainerWidth()
+        : VDISKS_CONTAINER_WIDTH;
+
+    return (
+        <div className={b(null)}>
+            <Flex
+                direction="row"
+                gap={1}
+                grow
+                style={{width: vDisksContainerWidth}}
+                ref={vDiskList.containerRef}
+            >
+                {vDisks.map((vDisk, index) => (
+                    <VDiskItem
+                        key={vDisk.StringifiedId || index}
+                        vDisk={vDisk}
+                        inactive={!isVdiskActive(vDisk, viewContext)}
+                        highlighted={highlightedVDisk === vDisk.StringifiedId}
+                        setHighlightedVDisk={setHighlightedVDisk}
+                        compactVDiskWidth={compactVDiskWidths[index]}
+                        withIcon={withIcon}
+                        getDisplayState={getVDiskDisplayState}
+                        isAllVDisksLayout={isAllVDisksLayout}
+                        renderContent={vDiskList.shouldRenderDisk(index)}
+                        placeholderProps={vDiskList.getPlaceholderProps(index)}
+                    />
+                ))}
+            </Flex>
+
+            <div className={b('pdisks-wrapper')} ref={pDiskList.containerRef}>
+                {vDisks.map((vDisk, index) => (
+                    <PDiskItem
+                        key={vDisk.StringifiedId || index}
+                        vDisk={vDisk}
+                        viewContext={viewContext}
+                        highlighted={highlightedVDisk === vDisk.StringifiedId}
+                        setHighlightedVDisk={setHighlightedVDisk}
+                        withDCMargin={vDisksWithDCMargins.includes(index)}
+                        withIcon={withIcon}
+                        getDisplayState={getPDiskDisplayState}
+                        renderContent={pDiskList.shouldRenderDisk(index)}
+                        placeholderProps={pDiskList.getPlaceholderProps(index)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+});

package/src/containers/Storage/PDisk/PDisk.scss

@@ -24,11 +24,22 @@
     &__vdisks {
         display: flex;
         flex: 0 0 auto;
-        gap: var(--pdisk-gap-width);
+        flex-direction: column;
 
         margin-bottom: 4px;
 
         white-space: nowrap;
+
+        &_expert {
+            gap: var(--g-spacing-half);
+
+            margin-bottom: 6px;
+        }
+    }
+
+    &__vdisks-row {
+        display: flex;
+        gap: var(--pdisk-gap-width);
     }
 
     &__vdisks-item {
@@ -36,10 +47,77 @@
 
         min-width: var(--pdisk-vdisk-width);
 
+        &_all {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
         .ydb-stack__item {
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
             }
         }
     }
+
+    &__vdisk-size-indicator {
+        flex: none;
+        align-self: center;
+
+        max-width: 100%;
+        height: 2px;
+
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-generic-medium);
+    }
+
+    &__vdisk-progress-bar_expert {
+        --progress-bar-full-height: 14px;
+        --progress-bar-compact-height: 14px;
+        --progress-bar-compact-placeholder-margin-left: var(--g-spacing-half);
+    }
+
+    &__vdisk-progress-bar_all {
+        --disk-border-radius: 3px;
+
+        min-width: 0;
+    }
+
+    &__vdisk-indicator {
+        flex-shrink: 0;
+
+        margin: var(--g-spacing-half);
+    }
+
+    &__node-bar-content {
+        position: absolute;
+        z-index: 2;
+        inset: 0;
+
+        display: grid;
+        align-items: center;
+        grid-template-columns: 1fr auto 1fr;
+    }
+
+    &__node-bar-left {
+        justify-self: start;
+    }
+
+    &__node-bar-center {
+        justify-self: center;
+
+        .storage-disk-progress-bar__title {
+            margin-right: 0;
+        }
+    }
+
+    &__node-bar-type {
+        --ydb-progress-bar-font-color: var(--entity-state-font-color);
+
+        display: flex;
+        align-items: center;
+        justify-self: end;
+
+        gap: var(--g-spacing-1);
+    }
 }