ydb-embedded-ui 21.1.0 → 22.1.0

package/src/containers/Storage/PDisks/PDisks.tsx

@@ -1,56 +1,191 @@
 import React from 'react';
 
+import {isNil} from 'lodash';
+
 import {cn} from '../../../utils/cn';
+import type {
+    PDiskDisplayStateGetter,
+    VDiskDisplayStateGetter,
+} from '../../../utils/disks/displayState';
+import {VDisksGroupBy} from '../../../utils/disks/groupBy';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
-import {PDisk} from '../PDisk/';
+import {PDiskWithVDisks} from '../PDisk/';
 import type {StorageViewContext} from '../types';
+import {useStorageNodesPDiskDisplayStateGetter} from '../useStoragePDiskDisplayStateGetter';
+import {useNodesVDisksGroupByParam} from '../useStorageQueryParams';
+import {useStorageNodesVDiskDisplayStateGetter} from '../useStorageVDiskDisplayStateGetter';
 import {isPdiskActive} from '../utils';
+import {useVirtualizedDiskList} from '../utils/useVirtualizedDiskList';
 
 import './PDisks.scss';
 
 const b = cn('ydb-storage-pdisks');
+const EMPTY_VDISKS: PreparedVDisk[] = [];
 
 interface PDisksProps {
     pDisks?: PreparedPDisk[];
     vDisks?: PreparedVDisk[];
     viewContext?: StorageViewContext;
     pDiskWidth?: number;
+    pDiskHeight?: number;
+    expertMode?: boolean;
+}
+
+interface PDiskItemProps {
+    pDisk: PreparedPDisk;
+    vDisks?: PreparedVDisk[];
+    viewContext?: StorageViewContext;
+    pDiskWidth?: number;
+    expertMode: boolean;
+    isAllVDisksLayout: boolean;
+    getPDiskDisplayState?: PDiskDisplayStateGetter;
+    getVDiskDisplayState?: VDiskDisplayStateGetter;
+    highlighted: boolean;
+    highlightedDisk?: string;
+    setHighlightedDisk: (id?: string) => void;
 }
 
-export function PDisks({pDisks = [], vDisks = [], viewContext, pDiskWidth}: PDisksProps) {
+const PDiskItem = React.memo(function PDiskItem({
+    pDisk,
+    vDisks,
+    viewContext,
+    pDiskWidth,
+    expertMode,
+    isAllVDisksLayout,
+    getPDiskDisplayState,
+    getVDiskDisplayState,
+    highlighted,
+    highlightedDisk,
+    setHighlightedDisk,
+}: PDiskItemProps) {
+    const id = pDisk.StringifiedId;
+    const onShowPopup = React.useCallback(() => setHighlightedDisk(id), [id, setHighlightedDisk]);
+    const onHidePopup = React.useCallback(
+        () => setHighlightedDisk(undefined),
+        [setHighlightedDisk],
+    );
+
+    return (
+        <PDiskWithVDisks
+            data={pDisk}
+            inactive={!isPdiskActive(pDisk, viewContext)}
+            vDisks={vDisks}
+            viewContext={viewContext}
+            width={pDiskWidth}
+            withIcon={expertMode}
+            withVDiskIcons={expertMode}
+            getVDiskDisplayState={getVDiskDisplayState}
+            expertMode={expertMode}
+            isAllVDisksLayout={isAllVDisksLayout}
+            showTypeLabel={expertMode}
+            getDisplayState={getPDiskDisplayState}
+            showPopup={highlighted}
+            onShowPopup={onShowPopup}
+            onHidePopup={onHidePopup}
+            highlighted={highlighted}
+            highlightedDisk={highlightedDisk}
+            setHighlightedDisk={setHighlightedDisk}
+        />
+    );
+});
+
+export const PDisks = React.memo(function PDisks({
+    pDisks = [],
+    vDisks = EMPTY_VDISKS,
+    viewContext,
+    pDiskWidth,
+    pDiskHeight,
+    expertMode = false,
+}: PDisksProps) {
     const [highlightedDisk, setHighlightedDisk] = React.useState<string | undefined>();
+    const {containerRef, shouldRenderDisk, getPlaceholderProps} = useVirtualizedDiskList(
+        pDisks,
+        pDisks.every((disk) => !isNil(disk.NodeId) && !isNil(disk.PDiskId)),
+    );
+    const vDisksGroupBy = useNodesVDisksGroupByParam();
+    const isAllVDisksLayout = expertMode && vDisksGroupBy === VDisksGroupBy.All;
+    const getStoragePDiskDisplayState = useStorageNodesPDiskDisplayStateGetter();
+    const getStorageVDiskDisplayState = useStorageNodesVDiskDisplayStateGetter();
+    const vDisksByPDisk = React.useMemo(() => {
+        const disks = new Map<PreparedVDisk['PDiskId'], PreparedVDisk[]>();
+        for (const vDisk of vDisks) {
+            const relatedDisks = disks.get(vDisk.PDiskId);
+            if (relatedDisks) {
+                relatedDisks.push(vDisk);
+            } else {
+                disks.set(vDisk.PDiskId, [vDisk]);
+            }
+        }
+        return disks;
+    }, [vDisks]);
+
+    React.useEffect(() => {
+        setHighlightedDisk((id) =>
+            pDisks.some((disk) => disk.StringifiedId === id) ||
+            vDisks.some((disk) => disk.StringifiedId === id)
+                ? id
+                : undefined,
+        );
+    }, [pDisks, vDisks]);
 
     if (!pDisks.length) {
         return null;
     }
 
     return (
-        <div className={b('pdisks-wrapper')}>
-            {pDisks.map((pDisk) => {
+        <div className={b('pdisks-wrapper')} ref={containerRef} style={{height: pDiskHeight}}>
+            {pDisks.map((pDisk, index) => {
                 const id = pDisk.StringifiedId;
-
-                const relatedVDisks = vDisks.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
-
                 const highlighted = id !== undefined && highlightedDisk === id;
+                const relatedVDisks = vDisksByPDisk.get(pDisk.PDiskId);
+                // Keep the popup anchor mounted until interaction and delayed close finish.
+                const hasOpenPopup =
+                    highlighted ||
+                    Boolean(
+                        highlightedDisk &&
+                            relatedVDisks?.some((vDisk) => vDisk.StringifiedId === highlightedDisk),
+                    );
 
                 return (
-                    <div className={b('pdisks-item')} key={id}>
-                        <PDisk
-                            data={pDisk}
-                            inactive={!isPdiskActive(pDisk, viewContext)}
-                            vDisks={relatedVDisks}
-                            viewContext={viewContext}
-                            width={pDiskWidth}
-                            showPopup={highlighted}
-                            onShowPopup={() => setHighlightedDisk(id)}
-                            onHidePopup={() => setHighlightedDisk(undefined)}
-                            highlighted={highlighted}
-                            highlightedDisk={highlightedDisk}
-                            setHighlightedDisk={setHighlightedDisk}
-                        />
+                    // Keep the full row geometry while offscreen disks are unmounted.
+                    <div
+                        className={b('pdisks-item')}
+                        key={id || index}
+                        data-disk-id={id}
+                        style={{width: pDiskWidth}}
+                        tabIndex={-1}
+                        {...(hasOpenPopup ? undefined : getPlaceholderProps(index))}
+                    >
+                        {(shouldRenderDisk(index) || hasOpenPopup) && (
+                            <PDiskItem
+                                pDisk={pDisk}
+                                vDisks={relatedVDisks}
+                                viewContext={viewContext}
+                                pDiskWidth={pDiskWidth}
+                                expertMode={expertMode}
+                                isAllVDisksLayout={isAllVDisksLayout}
+                                getPDiskDisplayState={
+                                    expertMode ? getStoragePDiskDisplayState : undefined
+                                }
+                                getVDiskDisplayState={
+                                    expertMode ? getStorageVDiskDisplayState : undefined
+                                }
+                                highlighted={highlighted}
+                                highlightedDisk={
+                                    relatedVDisks?.some(
+                                        (vDisk) =>
+                                            !vDisk.StringifiedId ||
+                                            vDisk.StringifiedId === highlightedDisk,
+                                    )
+                                        ? highlightedDisk
+                                        : undefined
+                                }
+                                setHighlightedDisk={setHighlightedDisk}
+                            />
+                        )}
                     </div>
                 );
             })}
         </div>
     );
-}
+});

package/src/containers/Storage/PaginatedStorage.tsx

@@ -4,6 +4,8 @@ import {PaginatedStorageGroups} from './PaginatedStorageGroups';
 import {PaginatedStorageNodes} from './PaginatedStorageNodes';
 import type {StorageViewContext} from './types';
 import {
+    useSaveNodesPDisksGroupBy,
+    useSaveNodesVDisksGroupBy,
     useSavePDisksGroupBy,
     useSaveStorageExpertMode,
     useSaveStorageType,
@@ -31,6 +33,8 @@ export const PaginatedStorage = (props: PaginatedStorageProps) => {
     useSaveStorageExpertMode();
     useSaveVDisksGroupBy();
     useSavePDisksGroupBy();
+    useSaveNodesVDisksGroupBy();
+    useSaveNodesPDisksGroupBy();
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const isNodes = storageType === 'nodes';

package/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx

@@ -61,6 +61,7 @@ export const StorageGroupGroup = React.memo(function StorageGroupGroup({
             onIsExpandedChange={onIsExpandedChange}
         >
             <PaginatedTableWithLayout
+                inheritKeyboardNavigation
                 initialState={{sortParams: undefined}}
                 table={
                     <PaginatedStorageGroupsTable
@@ -112,7 +113,6 @@ export function GroupedStorageGroupsComponent({
             groupId,
             pDiskId,
             filter: groupsSearchValue.trim(),
-            shouldUseGroupsHandler: true,
             group: storageGroupsGroupByParam,
         },
         {

package/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx

@@ -19,7 +19,7 @@ import {
     getStorageGroupsGroupByOptions,
 } from '../PaginatedStorageGroupsTable/columns/constants';
 import type {StorageGroupsColumn} from '../PaginatedStorageGroupsTable/columns/types';
-import {StorageExpertModePanel} from '../StorageExpertModePanel/StorageExpertModePanel';
+import {StorageGroupsExpertModePanel} from '../StorageExpertModePanel/StorageGroupsExpertModePanel';
 import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
 import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
 import i18n from '../i18n';
@@ -90,6 +90,7 @@ export function StorageGroupsControls({
         <Flex direction="column" gap={2} width="100%">
             <Flex gap={2} alignItems="center" wrap className={b('controls-row')}>
                 <Search
+                    tableFilter
                     value={groupsSearchValue}
                     onChange={handleTextFilterGroupsChange}
                     placeholder={i18n('controls_groups-search-placeholder')}
@@ -137,7 +138,7 @@ export function StorageGroupsControls({
                 ) : null}
             </Flex>
             {canUseStorageExpertMode && isStorageExpertMode && isVDisksPDisksColumnVisible ? (
-                <StorageExpertModePanel />
+                <StorageGroupsExpertModePanel />
             ) : null}
         </Flex>
     );

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

@@ -1,16 +1,17 @@
 import React from 'react';
 
+import {useHistory} from 'react-router-dom';
+
 import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
 import type {RenderErrorMessage} from '../../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
-import {
-    useCapabilitiesLoaded,
-    useStorageGroupsHandlerAvailable,
-} from '../../../store/reducers/capabilities/hooks';
+import {useStorageGroupPath} from '../../../routes';
+import {useCapabilitiesLoaded} from '../../../store/reducers/capabilities/hooks';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {VisibleEntities} from '../../../store/reducers/storage/types';
 import type {GroupsGroupByField} from '../../../types/api/storage';
 import {cn} from '../../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../utils/constants';
 
 import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage';
 import {STORAGE_GROUPS_COLUMNS_IDS, STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
@@ -64,10 +65,11 @@ export const PaginatedStorageGroupsTable = ({
     renderErrorMessage,
     initialEntitiesCount,
 }: PaginatedStorageGroupsTableProps) => {
+    const history = useHistory();
+    const getStorageGroupPath = useStorageGroupPath();
     const capabilitiesLoaded = useCapabilitiesLoaded();
-    const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();
 
-    const fetchData = useGroupsGetter(groupsHandlerAvailable);
+    const fetchData = useGroupsGetter();
 
     const hasVDisksColumns = React.useMemo(() => {
         return columns.some((column) => columnsWithVDisks.has(column.name));
@@ -113,6 +115,13 @@ export const PaginatedStorageGroupsTable = ({
     return (
         <LoaderWrapper loading={!capabilitiesLoaded}>
             <ResizeablePaginatedTable
+                getKeyboardRowKey={(group) => group.GroupId}
+                getKeyboardRowLabel={(group) => group.GroupId?.toString() || EMPTY_DATA_PLACEHOLDER}
+                onKeyboardActivate={(group) => {
+                    if (group.GroupId !== undefined) {
+                        history.push(getStorageGroupPath(group.GroupId));
+                    }
+                }}
                 columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
                 scrollContainerRef={scrollContainerRef}
                 columns={columns}

package/src/containers/Storage/PaginatedStorageGroupsTable/columns/constants.ts

@@ -8,7 +8,7 @@ import {
 import type {
     GroupsGroupByField,
     GroupsRequiredField,
-    StorageV2SortValue,
+    GroupsSortField,
 } from '../../../../types/api/storage';
 import type {ValueOf} from '../../../../types/common';
 
@@ -295,7 +295,7 @@ export const GROUPS_COLUMNS_TO_DATA_FIELDS: Record<StorageGroupsColumnId, Groups
 
 const STORAGE_GROUPS_COLUMNS_TO_SORT_FIELDS: Record<
     StorageGroupsColumnId,
-    StorageV2SortValue | undefined
+    GroupsSortField | undefined
 > = {
     GroupId: 'GroupId',
     PoolName: 'PoolName',

package/src/containers/Storage/PaginatedStorageGroupsTable/getGroups.ts

@@ -13,53 +13,46 @@ import {GROUPS_COLUMNS_TO_DATA_FIELDS, getStorageGroupsColumnSortField} from './
 
 type GetStorageGroups = FetchData<PreparedStorageGroup, PreparedStorageGroupFilters>;
 
-export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
-    const fetchData: GetStorageGroups = React.useCallback(
-        async (params) => {
-            const {limit, offset, sortParams, filters, columnsIds} = params;
-            const {sortOrder, columnId} = sortParams ?? {};
-            const {
-                searchValue,
-                visibleEntities,
-                database,
-                nodeId,
-                groupId,
-                pDiskId,
-                filterGroup,
-                filterGroupBy,
-            } = filters ?? {};
-
-            const sortField = getStorageGroupsColumnSortField(columnId);
-            const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
-            const dataFieldsRequired = getRequiredDataFields(
-                columnsIds,
-                GROUPS_COLUMNS_TO_DATA_FIELDS,
-            );
-
-            const {groups, found, total} = await requestStorageData({
-                limit,
-                offset,
-                sort,
-                filter: searchValue?.trim(),
-                with: visibleEntities,
-                database,
-                nodeId,
-                groupId,
-                pDiskId,
-                filter_group: filterGroup,
-                filter_group_by: filterGroupBy,
-                fieldsRequired: dataFieldsRequired,
-                shouldUseGroupsHandler,
-            });
-
-            return {
-                data: groups || [],
-                found: found || 0,
-                total: total || 0,
-            };
-        },
-        [shouldUseGroupsHandler],
-    );
+export function useGroupsGetter() {
+    const fetchData: GetStorageGroups = React.useCallback(async (params) => {
+        const {limit, offset, sortParams, filters, columnsIds} = params;
+        const {sortOrder, columnId} = sortParams ?? {};
+        const {
+            searchValue,
+            visibleEntities,
+            database,
+            nodeId,
+            groupId,
+            pDiskId,
+            filterGroup,
+            filterGroupBy,
+        } = filters ?? {};
+
+        const sortField = getStorageGroupsColumnSortField(columnId);
+        const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
+        const dataFieldsRequired = getRequiredDataFields(columnsIds, GROUPS_COLUMNS_TO_DATA_FIELDS);
+
+        const {groups, found, total} = await requestStorageData({
+            limit,
+            offset,
+            sort,
+            filter: searchValue?.trim(),
+            with: visibleEntities,
+            database,
+            nodeId,
+            groupId,
+            pDiskId,
+            filter_group: filterGroup,
+            filter_group_by: filterGroupBy,
+            fieldsRequired: dataFieldsRequired,
+        });
+
+        return {
+            data: groups || [],
+            found: found || 0,
+            total: total || 0,
+        };
+    }, []);
 
     return fetchData;
 }

package/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx

@@ -16,7 +16,7 @@ import {TableGroup} from '../TableGroup/TableGroup';
 import {useExpandedGroups} from '../TableGroup/useExpandedTableGroups';
 import i18n from '../i18n';
 import {b} from '../shared';
-import {useStorageQueryParams} from '../useStorageQueryParams';
+import {useIsStorageExpertMode, useStorageQueryParams} from '../useStorageQueryParams';
 import {useStorageColumnsSettings} from '../utils';
 
 import {StorageNodesControls} from './StorageNodesControls';
@@ -39,6 +39,7 @@ interface StorageNodeGroupProps {
     onIsExpandedChange: (name: string, isExpanded: boolean) => void;
     handleShowAllNodes: VoidFunction;
     onDataFetched: (data: any) => void;
+    rowHeight: number;
 }
 
 export const StorageNodeGroup = React.memo(function StorageNodeGroup({
@@ -55,6 +56,7 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
     onIsExpandedChange,
     handleShowAllNodes,
     onDataFetched,
+    rowHeight,
 }: StorageNodeGroupProps) {
     return (
         <TableGroup
@@ -66,6 +68,7 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
             onIsExpandedChange={onIsExpandedChange}
         >
             <PaginatedTableWithLayout
+                inheritKeyboardNavigation
                 initialState={{sortParams: undefined}}
                 table={
                     <PaginatedStorageNodesTable
@@ -82,6 +85,7 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
                         renderErrorMessage={renderPaginatedTableErrorMessage}
                         columns={columns}
                         initialEntitiesCount={count}
+                        rowHeight={rowHeight}
                         onDataFetched={onDataFetched}
                     />
                 }
@@ -105,7 +109,10 @@ export function GroupedStorageNodesComponent({
     const {nodesSearchValue, storageNodesGroupByParam, handleShowAllNodes} =
         useStorageQueryParams();
 
-    const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
+    const expertMode = useIsStorageExpertMode();
+    const {handleDataFetched, columnsSettings, rowHeight} = useStorageColumnsSettings({
+        expertMode,
+    });
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
         viewContext,
@@ -173,6 +180,7 @@ export function GroupedStorageNodesComponent({
                         onIsExpandedChange={setIsGroupExpanded}
                         handleShowAllNodes={handleShowAllNodes}
                         columns={columnsToShow}
+                        rowHeight={rowHeight}
                         onDataFetched={handleDataFetched}
                     />
                 );

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx

@@ -4,7 +4,7 @@ import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabili
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {PaginatedStorageProps} from '../PaginatedStorage';
 import {PaginatedStorageNodesTable} from '../PaginatedStorageNodesTable/PaginatedStorageNodesTable';
-import {useStorageQueryParams} from '../useStorageQueryParams';
+import {useIsStorageExpertMode, useStorageQueryParams} from '../useStorageQueryParams';
 import {useStorageColumnsSettings} from '../utils';
 
 import {StorageNodesControlsWithTableState} from './StorageNodesControls';
@@ -23,7 +23,10 @@ export function StorageNodesComponent({
 
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
 
-    const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
+    const expertMode = useIsStorageExpertMode();
+    const {handleDataFetched, columnsSettings, rowHeight} = useStorageColumnsSettings({
+        expertMode,
+    });
 
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
@@ -60,6 +63,7 @@ export function StorageNodesComponent({
                     renderErrorMessage={renderPaginatedTableErrorMessage}
                     columns={columnsToShow}
                     initialEntitiesCount={initialEntitiesCount}
+                    rowHeight={rowHeight}
                     onDataFetched={handleDataFetched}
                 />
             }