ydb-embedded-ui 22.0.0 → 22.2.0

package/src/components/TenantNameWrapper/utils.ts

@@ -1,3 +1,4 @@
+import {getTenantPath} from '../../routes';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
 
@@ -17,3 +18,28 @@ export function getTenantBackend(
     }
     return additionalTenantsProps.prepareTenantBackend(nodeId);
 }
+
+export function getTenantLink({
+    tenant,
+    additionalTenantsProps,
+    externalLink,
+    useDatabaseId,
+}: {
+    tenant: PreparedTenant;
+    additionalTenantsProps?: AdditionalTenantsProps;
+    externalLink?: boolean;
+    useDatabaseId?: boolean;
+}) {
+    const backend = getTenantBackend(tenant, additionalTenantsProps);
+    const isExternalLink = Boolean(externalLink || backend);
+    const database = useDatabaseId ? tenant.Id : tenant.Name;
+
+    return {
+        database,
+        isExternalLink,
+        href: getTenantPath(
+            {clusterName: tenant.Cluster, database, backend},
+            {withBasename: isExternalLink},
+        ),
+    };
+}

package/src/components/VDisk/VDisk.tsx

@@ -3,15 +3,17 @@ import React from 'react';
 import type {PopupPlacement, PopupProps} from '@gravity-ui/uikit';
 
 import {useVDiskPagePath} from '../../routes';
+import {EFlag, isCapacityAlert} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
 import {NOT_AVAILABLE_SEVERITY} from '../../utils/disks/constants';
 import type {
-    AllModeIndicatorsState,
     DiskIndicatorValue,
+    VDiskDisplayState,
     VDiskDisplayStateGetter,
 } from '../../utils/disks/displayState';
 import {getDefaultDiskDisplayState} from '../../utils/disks/displayState';
 import {getDiskBarTone} from '../../utils/disks/getDiskBarTone';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
 import {getVDiskStatusIcon} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
 import {isNumeric} from '../../utils/utils';
@@ -35,7 +37,6 @@ const EMPTY_ALL_MODE_INDICATORS = {};
 interface GetVDiskBarContentParams {
     allocatedPercent?: number;
     compact?: boolean;
-    hidden: boolean;
     noDataPlaceholder?: React.ReactNode;
     severity: number;
     showAllocatedPercentLabel?: boolean;
@@ -45,16 +46,11 @@ interface GetVDiskBarContentParams {
 function getVDiskBarContent({
     allocatedPercent,
     compact,
-    hidden,
     noDataPlaceholder,
     severity,
     showAllocatedPercentLabel,
     showNoDataPlaceholder,
 }: GetVDiskBarContentParams) {
-    if (hidden) {
-        return null;
-    }
-
     const hasAllocatedPercent = isNumeric(allocatedPercent) && allocatedPercent >= 0;
     if (!compact && hasAllocatedPercent && showAllocatedPercentLabel !== false) {
         return <DiskBarLabel>{`${Math.floor(allocatedPercent)}%`}</DiskBarLabel>;
@@ -74,6 +70,9 @@ function getVDiskBarContent({
 interface GetVDiskBarIndicatorParams {
     hidden: boolean;
     icon?: DiskIndicatorValue;
+    indicatorClassName?: string;
+    iconGroupSize?: number;
+    iconSize?: number;
     isDonor?: boolean;
     placement: 'inline' | 'overlap';
     severity: number;
@@ -83,6 +82,9 @@ interface GetVDiskBarIndicatorParams {
 function getVDiskBarIndicator({
     hidden,
     icon,
+    indicatorClassName,
+    iconGroupSize,
+    iconSize,
     isDonor,
     placement,
     severity,
@@ -94,33 +96,49 @@ function getVDiskBarIndicator({
     }
 
     return {
-        leading: <DiskIndicator value={resolvedIndicator} placement={placement} />,
+        leading: (
+            <DiskIndicator
+                value={resolvedIndicator}
+                placement={placement}
+                iconSize={iconSize}
+                iconGroupSize={iconGroupSize}
+                className={indicatorClassName}
+            />
+        ),
         overflowVisible: placement === 'overlap',
         showIndicator: true,
     };
 }
 
-function getAllModeOverlay(
-    compact: boolean | undefined,
-    isAllMode: boolean,
-    indicators: AllModeIndicatorsState | undefined,
-) {
-    if (compact || !isAllMode) {
-        return null;
+function getFlagAccessibleName(flag: EFlag | undefined) {
+    switch (flag) {
+        case EFlag.Green:
+        case EFlag.Blue:
+            return i18n('value_ok');
+        case EFlag.Yellow:
+            return i18n('value_notice');
+        case EFlag.Orange:
+            return i18n('value_warning');
+        case EFlag.Red:
+            return i18n('value_impaired');
+        default:
+            return i18n('context_no-data');
     }
-
-    return <AllModeIndicators indicators={indicators ?? EMPTY_ALL_MODE_INDICATORS} />;
 }
 
-function getAccessibleName(
-    data: PreparedVDisk,
-    hasIssues: boolean | undefined,
-    isAllMode: boolean,
-) {
-    if (!isAllMode) {
-        return undefined;
+function getReplicationAccessibleName(replicated: boolean | undefined) {
+    if (replicated === undefined) {
+        return i18n('context_no-data');
     }
 
+    return i18n(
+        replicated
+            ? 'context_all-mode-replication-complete'
+            : 'context_all-mode-replication-in-progress',
+    );
+}
+
+function getAllModeAccessibleName(data: PreparedVDisk, hasIssues: boolean | undefined) {
     const noData = i18n('context_no-data');
     const health =
         hasIssues === undefined
@@ -132,20 +150,11 @@ function getAccessibleName(
         Number.isFinite(data.AllocatedPercent) && Number(data.AllocatedPercent) >= 0
             ? `${data.AllocatedPercent}%`
             : noData;
-    const replication =
-        data.Replicated === undefined
-            ? noData
-            : i18n(
-                  data.Replicated
-                      ? 'context_all-mode-replication-complete'
-                      : 'context_all-mode-replication-in-progress',
-              );
-
     return i18n('context_all-mode-accessible-name', {
         vdiskId: data.StringifiedId || noData,
         health,
-        state: data.VDiskState || noData,
-        replication,
+        state: data.VDiskState || data.Status || noData,
+        replication: getReplicationAccessibleName(data.Replicated),
         capacityAlert: data.CapacityAlert || noData,
         frontQueues: data.FrontQueues || noData,
         freshCompaction: data.SatisfactionRank?.FreshRank?.Flag || noData,
@@ -154,9 +163,72 @@ function getAccessibleName(
     });
 }
 
+function getAccessibleName(
+    data: PreparedVDisk,
+    {mode, allMode, isNoData, driveType}: VDiskDisplayState,
+) {
+    if (!mode) {
+        return undefined;
+    }
+    if (mode === 'all') {
+        return getAllModeAccessibleName(data, allMode?.hasIssues);
+    }
+
+    const noData = i18n('context_no-data');
+    let diskName = i18n(data.DonorMode ? 'context_donor-vdisk' : 'context_vdisk', {
+        vdiskId: data.StringifiedId || noData,
+        nodeId: data.NodeId ?? noData,
+    });
+    if (isNoData) {
+        const hasVDiskWhiteboardData = data.HasWhiteboardData ?? Boolean(data.VDiskId);
+        diskName = i18n(
+            mode === 'driveType' && hasVDiskWhiteboardData
+                ? 'context_pdisk-no-whiteboard'
+                : 'context_vdisk-no-whiteboard',
+            {disk: diskName, noData},
+        );
+    }
+
+    const {CapacityAlert, FrontQueues, SatisfactionRank, Replicated} = isNoData ? {} : data;
+    const {FreshRank, LevelRank} = SatisfactionRank ?? {};
+
+    switch (mode) {
+        case 'driveType':
+            return i18n('context_drive-type-accessible-name', {
+                disk: diskName,
+                driveType: formatPDiskType(driveType) || noData,
+            });
+        case 'state':
+            return i18n('context_state-accessible-name', {
+                disk: diskName,
+                state: data.VDiskState || data.Status || noData,
+                replication: getReplicationAccessibleName(Replicated),
+            });
+        case 'space':
+            return i18n('context_space-accessible-name', {
+                disk: diskName,
+                capacityAlert: isCapacityAlert(CapacityAlert) ? CapacityAlert : noData,
+            });
+        case 'frontQueues':
+            return i18n('context_front-queues-accessible-name', {
+                disk: diskName,
+                frontQueues: getFlagAccessibleName(FrontQueues),
+            });
+        case 'compaction':
+            return i18n('context_compaction-accessible-name', {
+                disk: diskName,
+                freshCompaction: getFlagAccessibleName(FreshRank?.Flag),
+                levelCompaction: getFlagAccessibleName(LevelRank?.Flag),
+            });
+        default:
+            return undefined;
+    }
+}
+
 export interface VDiskProps {
     data?: PreparedVDisk;
     compact?: boolean;
+    allModeSize?: 's' | 'm';
     inactive?: boolean;
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
@@ -165,16 +237,21 @@ export interface VDiskProps {
     delayOpen?: number;
     delayClose?: number;
     withIcon?: boolean;
+    iconSize?: number;
+    iconGroupSize?: number;
+    indicatorClassName?: string;
     highlighted?: boolean;
     placement?: PopupPlacement;
     popupOffset?: PopupProps['offset'];
     withOpaqueBackground?: boolean;
     getDisplayState?: VDiskDisplayStateGetter;
+    hidePDiskInPopup?: boolean;
 }
 
 export const VDisk = ({
     data = {},
     compact,
+    allModeSize,
     inactive,
     showPopup,
     onShowPopup,
@@ -183,11 +260,15 @@ export const VDisk = ({
     delayClose,
     delayOpen,
     withIcon,
+    iconSize,
+    iconGroupSize,
+    indicatorClassName,
     highlighted,
     placement = ['top', 'bottom', 'left', 'right'],
     popupOffset = DEFAULT_POPUP_OFFSET,
     withOpaqueBackground,
     getDisplayState,
+    hidePDiskInPopup,
 }: VDiskProps) => {
     const getVDiskLink = useVDiskPagePath();
     const vDiskPath = getVDiskLink({nodeId: data.NodeId, vDiskId: data.StringifiedId});
@@ -203,21 +284,25 @@ export const VDisk = ({
         icon,
         mode,
         isLegendInactive,
+        borderless,
         showNoDataPlaceholder,
         allocatedPercent,
         showAllocatedPercentLabel,
         striped,
         iconPlacement,
         allMode,
+        isNoData,
     } = displayState;
 
     const isAllMode = mode === 'all';
-    const accessibleName = getAccessibleName(data, allMode?.hasIssues, isAllMode);
-    const hideBarContent = Boolean(isLegendInactive && !isDonor);
+    const accessibleName = getAccessibleName(data, displayState);
     const {leading, overflowVisible, showIndicator} = getVDiskBarIndicator({
-        hidden: hideBarContent,
+        hidden: Boolean(isLegendInactive && !isDonor),
         icon,
-        isDonor,
+        indicatorClassName,
+        iconGroupSize,
+        iconSize,
+        isDonor: mode !== 'driveType' && isDonor,
         placement: iconPlacement,
         severity,
         withIcon,
@@ -226,18 +311,25 @@ export const VDisk = ({
     const barContent = getVDiskBarContent({
         allocatedPercent,
         compact,
-        hidden: hideBarContent,
         noDataPlaceholder,
         severity,
         showAllocatedPercentLabel,
         showNoDataPlaceholder,
     });
-    const overlay = getAllModeOverlay(compact, isAllMode, allMode?.indicators);
+    const overlay =
+        !compact && isAllMode && !isNoData ? (
+            <AllModeIndicators
+                indicators={allMode?.indicators ?? EMPTY_ALL_MODE_INDICATORS}
+                size={allModeSize}
+            />
+        ) : null;
     const tone = getDiskBarTone({
+        driveType: displayState.driveType,
         severity,
-        isDonor,
+        isDonor: mode !== 'driveType' && isDonor,
         showIndicator,
         indicator: icon,
+        isNoData,
     });
 
     return (
@@ -245,7 +337,12 @@ export const VDisk = ({
             showPopup={showPopup}
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
-            renderPopupContent={({onClose}) => <VDiskPopup data={data} onClose={onClose} />}
+            renderPopupContent={({onClose}) => (
+                <VDiskPopup
+                    data={hidePDiskInPopup ? {...data, PDisk: undefined} : data}
+                    onClose={onClose}
+                />
+            )}
             offset={popupOffset}
             delayClose={delayClose}
             delayOpen={delayOpen}
@@ -275,7 +372,7 @@ export const VDisk = ({
                         overlay={overlay}
                         highlighted={highlighted}
                         strongFill={allMode?.hasIssues}
-                        borderless={isLegendInactive}
+                        borderless={borderless}
                         overflowVisible={overflowVisible}
                     />
                 </InternalLink>

package/src/components/VDisk/VDiskWithDonorsStack.tsx

@@ -8,13 +8,17 @@ import {Stack} from '../Stack/Stack';
 import type {VDiskProps} from './VDisk';
 import {VDisk} from './VDisk';
 
-interface VDiskWithDonorsStackProps extends Omit<VDiskProps, 'withOpaqueBackground'> {
+interface VDiskWithDonorsStackProps
+    extends Omit<VDiskProps, 'withOpaqueBackground' | 'hidePDiskInPopup'> {
     data?: PreparedVDisk;
     className?: string;
     stackClassName?: string;
     highlightedVDisk?: string;
     setHighlightedVDisk?: (id?: string) => void;
     progressBarClassName?: string;
+    renderContent?: boolean;
+    placeholderProps?: React.HTMLAttributes<HTMLDivElement>;
+    hideMainPDiskInPopup?: boolean;
 }
 
 const diskInStackPlacement: PopupPlacement = ['left', 'right'];
@@ -27,12 +31,15 @@ export function VDiskWithDonorsStack({
     stackClassName,
     withIcon,
     compact,
+    hideMainPDiskInPopup,
     highlightedVDisk,
     setHighlightedVDisk,
     showPopup: _showPopup,
     onShowPopup: _onShowPopup,
     onHidePopup: _onHidePopup,
     highlighted: _highlighted,
+    renderContent = true,
+    placeholderProps,
     ...restProps
 }: VDiskWithDonorsStackProps) {
     const donors = data?.Donors ?? EMPTY_DONORS;
@@ -44,7 +51,7 @@ export function VDiskWithDonorsStack({
     const [internalHighlightedVDisk, setInternalHighlightedVDisk] = React.useState<string>();
 
     const donorIds = React.useMemo(
-        () => new Set(donors?.map((donor) => donor.StringifiedId) ?? []),
+        () => new Set(donors.map((donor) => donor.StringifiedId)),
         [donors],
     );
 
@@ -65,11 +72,19 @@ export function VDiskWithDonorsStack({
         setHighlightedVDisk?.(undefined);
     }, [setHighlightedVDisk]);
 
+    // Keep the stack's state and popup anchors until a main/donor interaction finishes.
+    if (!renderContent && !isHighlighted && !highlightedVDiskInStack) {
+        return (
+            <div className={className} data-disk-id={stackId} tabIndex={-1} {...placeholderProps} />
+        );
+    }
+
     // Spread restProps first, then explicitly override critical fields to prevent
     // external code from breaking the stack's highlight/popup coordination.
     const mainVDiskProps: Partial<VDiskProps> = {
         ...restProps,
         compact,
+        hidePDiskInPopup: hideMainPDiskInPopup,
         withIcon,
         showPopup: isHighlighted,
         highlighted: isHighlighted,
@@ -107,7 +122,7 @@ export function VDiskWithDonorsStack({
                     highlighted={donor.StringifiedId === internalHighlightedVDisk}
                     onShowPopup={() => {
                         if (donor.StringifiedId) {
-                            setInternalHighlightedVDisk?.(donor.StringifiedId);
+                            setInternalHighlightedVDisk(donor.StringifiedId);
                         }
                     }}
                     onHidePopup={() => {
@@ -121,5 +136,9 @@ export function VDiskWithDonorsStack({
         <VDisk data={data} withIcon={withIcon} {...mainVDiskProps} />
     );
 
-    return <div className={className}>{content}</div>;
+    return (
+        <div className={className} data-disk-id={stackId} tabIndex={-1}>
+            {content}
+        </div>
+    );
 }

package/src/components/VDisk/i18n/en.json

@@ -1,8 +1,21 @@
 {
   "context_no-data": "N/D",
+  "context_vdisk": "VDisk {{vdiskId}} on node {{nodeId}}",
+  "context_donor-vdisk": "Donor VDisk {{vdiskId}} on node {{nodeId}}",
+  "context_vdisk-no-whiteboard": "{{disk}}. Whiteboard: {{noData}}",
+  "context_pdisk-no-whiteboard": "{{disk}}. PDisk Whiteboard: {{noData}}",
+  "context_state-accessible-name": "{{disk}}. State: {{state}}. Replication: {{replication}}.",
+  "context_space-accessible-name": "{{disk}}. Capacity alert: {{capacityAlert}}.",
+  "context_front-queues-accessible-name": "{{disk}}. Front queues: {{frontQueues}}.",
+  "context_compaction-accessible-name": "{{disk}}. Fresh compaction: {{freshCompaction}}. Level compaction: {{levelCompaction}}.",
+  "value_ok": "OK",
+  "value_notice": "Notice",
+  "value_warning": "Warning",
+  "value_impaired": "Impaired",
   "context_all-mode-health-healthy": "healthy",
   "context_all-mode-health-issues": "issues detected",
   "context_all-mode-replication-complete": "complete",
   "context_all-mode-replication-in-progress": "in progress",
-  "context_all-mode-accessible-name": "VDisk {{vdiskId}}. Health: {{health}}. State: {{state}}. Replication: {{replication}}. Capacity alert: {{capacityAlert}}. Front queues: {{frontQueues}}. Fresh compaction: {{freshCompaction}}. Level compaction: {{levelCompaction}}. Allocated: {{allocatedPercent}}."
+  "context_all-mode-accessible-name": "VDisk {{vdiskId}}. Health: {{health}}. State: {{state}}. Replication: {{replication}}. Capacity alert: {{capacityAlert}}. Front queues: {{frontQueues}}. Fresh compaction: {{freshCompaction}}. Level compaction: {{levelCompaction}}. Allocated: {{allocatedPercent}}.",
+  "context_drive-type-accessible-name": "{{disk}}. Drive type: {{driveType}}."
 }

package/src/components/nodesColumns/columns.tsx

@@ -2,7 +2,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import {DefinitionList, Tooltip} from '@gravity-ui/uikit';
 
 import type {PreparedStorageNode} from '../../store/reducers/storage/types';
-import type {TMemoryStats, TPoolStats} from '../../types/api/nodes';
+import type {TEndpoint, TMemoryStats, TPoolStats} from '../../types/api/nodes';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
@@ -59,6 +59,18 @@ export function getHostColumn<T extends PreparedStorageNode>({
     };
 }
 
+export function getICPortColumn<T extends {Endpoints?: TEndpoint[]}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.ICPort,
+        header: NODES_COLUMNS_TITLES.ICPort,
+        render: ({row}) =>
+            row.Endpoints?.find(({Name}) => Name === 'ic')?.Address?.replace(/^:/, '') ||
+            EMPTY_DATA_PLACEHOLDER,
+        width: 100,
+        align: DataTable.RIGHT,
+    };
+}
+
 // Different column for different set of required fields
 // ConnectStatus is required here, it makes handler to return network stats
 // On versions before 25-1-2 ConnectStatus also makes handler to return peers - it can significantly increase response size

package/src/components/nodesColumns/constants.ts

@@ -12,6 +12,7 @@ export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
 export const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
     Host: 'Host',
+    ICPort: 'ICPort',
     NetworkHost: 'NetworkHost',
     Database: 'Database',
     NodeName: 'NodeName',
@@ -67,6 +68,9 @@ export const NODES_COLUMNS_TITLES = {
     get Host() {
         return i18n('host');
     },
+    get ICPort() {
+        return i18n('field_ic-port');
+    },
     get NetworkHost() {
         return i18n('host');
     },
@@ -219,6 +223,7 @@ export function getNodesGroupByFieldTitle(groupByField: NodesGroupByField) {
 export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredField[]> = {
     NodeId: ['NodeId'],
     Host: ['Host', 'Rack', 'Database', 'SystemState'],
+    ICPort: ['SystemState'],
     NetworkHost: ['Host', 'Rack', 'Database', 'SystemState', 'ConnectStatus'],
     Database: ['Database'],
     NodeName: ['NodeName'],
@@ -253,6 +258,7 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
 const NODES_COLUMNS_TO_SORT_FIELDS: Record<NodesColumnId, NodesSortValue | undefined> = {
     NodeId: 'NodeId',
     Host: 'Host',
+    ICPort: undefined,
     NetworkHost: 'Host',
     Database: 'Database',
     NodeName: 'NodeName',

package/src/components/nodesColumns/i18n/en.json

@@ -1,6 +1,7 @@
 {
   "node-id": "Node ID",
   "host": "Host",
+  "field_ic-port": "IC port",
   "database": "Database",
   "node-name": "Node Name",
   "dc": "DC",
@@ -17,7 +18,7 @@
   "load": "Load",
   "sessions": "Sessions",
   "missing": "Missing",
-  "pdisks": "PDisks",
+  "pdisks": "PDisks & VDisks",
   "field_memory-used": "Memory used",
   "field_memory-limit": "Memory limit",
   "field_pile-name": "Pile Name",

package/src/containers/Clusters/Clusters.tsx

@@ -19,8 +19,9 @@ import {
     selectStatusFilter,
     selectVersionFilter,
 } from '../../store/reducers/clusters/selectors';
+import type {PreparedCluster} from '../../store/reducers/clusters/types';
 import {uiFactory} from '../../uiFactory/uiFactory';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {useSelectedColumns} from '../../utils/hooks/useSelectedColumns';
 import {getMinorVersion} from '../../utils/versions';
@@ -35,6 +36,7 @@ import {
 } from './constants';
 import i18n from './i18n';
 import {b} from './shared';
+import {calculateClusterPath} from './utils';
 
 import './Clusters.scss';
 
@@ -87,7 +89,9 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     const handleDrawerClose = React.useCallback(() => {
         setHealthcheckClusterName(undefined);
     }, []);
-
+    const openCluster = React.useCallback((row: PreparedCluster) => {
+        window.location.assign(calculateClusterPath(row));
+    }, []);
     const rawColumns = React.useMemo(() => {
         return getClustersColumns({
             isEditClusterAvailable,
@@ -197,6 +201,7 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
         return (
             <React.Fragment>
                 <Search
+                    tableFilter
                     placeholder={i18n('controls_search-placeholder')}
                     endContent={<Icon data={Magnifier} className={b('search-icon')} />}
                     onChange={changeClusterName}
@@ -283,18 +288,25 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
 
     const renderContent = () => {
         return (
-            <ResizeableDataTable
-                isLoading={query.isLoading}
-                columnsWidthLSKey={CLUSTERS_COLUMNS_WIDTH_LS_KEY}
-                wrapperClassName={b('table')}
-                data={filteredClusters}
-                columns={filteredColumnsToShow}
-                settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
-                initialSortOrder={{
-                    columnId: COLUMNS_NAMES.TITLE,
-                    order: DataTable.ASCENDING,
-                }}
-            />
+            <div>
+                <ResizeableDataTable
+                    onKeyboardActivate={openCluster}
+                    getKeyboardRowKey={(cluster) => cluster.name}
+                    getKeyboardRowLabel={(cluster) =>
+                        cluster.title || cluster.name || EMPTY_DATA_PLACEHOLDER
+                    }
+                    isLoading={query.isLoading}
+                    columnsWidthLSKey={CLUSTERS_COLUMNS_WIDTH_LS_KEY}
+                    wrapperClassName={b('table')}
+                    data={filteredClusters}
+                    columns={filteredColumnsToShow}
+                    settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
+                    initialSortOrder={{
+                        columnId: COLUMNS_NAMES.TITLE,
+                        order: DataTable.ASCENDING,
+                    }}
+                />
+            </div>
         );
     };
 
@@ -304,22 +316,28 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
             isVisible={Boolean(healthcheckClusterName)}
             onClose={handleDrawerClose}
         >
-            <TableWithControlsLayout fullHeight className={b(null)}>
-                <TableWithControlsLayout.Controls
-                    className={b('controls')}
-                    renderExtraControls={renderColumnSetup}
-                >
-                    {renderControls()}
-                </TableWithControlsLayout.Controls>
-                {query.isError ? <ResponseError error={query.error} /> : null}
-                {renderClustersCount()}
-                <TableWithControlsLayout.Table
-                    scrollContainerRef={scrollContainerRef}
-                    className={b('table-wrapper')}
+            <div>
+                <TableWithControlsLayout
+                    fullHeight
+                    className={b(null)}
+                    keyboardNavigationResetKey={JSON.stringify([status, service, version, galaxy])}
                 >
-                    {renderContent()}
-                </TableWithControlsLayout.Table>
-            </TableWithControlsLayout>
+                    <TableWithControlsLayout.Controls
+                        className={b('controls')}
+                        renderExtraControls={renderColumnSetup}
+                    >
+                        {renderControls()}
+                    </TableWithControlsLayout.Controls>
+                    {query.isError ? <ResponseError error={query.error} /> : null}
+                    {renderClustersCount()}
+                    <TableWithControlsLayout.Table
+                        scrollContainerRef={scrollContainerRef}
+                        className={b('table-wrapper')}
+                    >
+                        <div>{renderContent()}</div>
+                    </TableWithControlsLayout.Table>
+                </TableWithControlsLayout>
+            </div>
         </ClusterDrawerHealthcheck>
     );
 }