ydb-embedded-ui 20.3.0 → 20.4.0

package/src/containers/Cluster/ClusterOverview/components/BridgeInfoTable.tsx

@@ -1,30 +1,39 @@
 import React from 'react';
 
-import {ArrowChevronRight, Ban, CircleCheck, CirclePause, LinkSlash} from '@gravity-ui/icons';
-import {Flex, Icon, Text} from '@gravity-ui/uikit';
+import {
+    Archive,
+    ArrowChevronRight,
+    Ban,
+    ChevronRight,
+    CirclePause,
+    LinkSlash,
+    MapPin,
+} from '@gravity-ui/icons';
+import {Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 import type {LabelProps} from '@gravity-ui/uikit';
 
+import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {LabelWithHelpMark} from '../../../../components/LabelWithHelpMark/LabelWithHelpMark';
+import {Skeleton} from '../../../../components/Skeleton/Skeleton';
+import {
+    healthcheckApi,
+    selectLeavesIssues,
+} from '../../../../store/reducers/healthcheckInfo/healthcheckInfo';
 import type {TBridgePile} from '../../../../types/api/cluster';
-import {BridgePileGroupStatus, BridgePileState} from '../../../../types/api/cluster';
+import {BridgePileState} from '../../../../types/api/cluster';
 import {cn} from '../../../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../../../utils/constants';
 import {formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
+import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
+import {useClusterHealthcheckQueryParams} from '../../ClusterDrawerHealthcheck';
 import i18n from '../../i18n';
 
+import type {BridgePileHealthcheckTarget} from './bridgePileHealthcheck';
+import {getBridgePileHealthcheck} from './bridgePileHealthcheck';
+
 import './BridgeInfoTable.scss';
 
 const b = cn('ydb-bridge-info-table');
-const progressB = cn('ydb-bridge-info-table-progress');
-const legendB = cn('ydb-bridge-info-table-legend');
-
-type GroupStatusTheme = 'positive' | 'warning' | 'danger' | 'dark-complementary' | 'secondary';
-
-interface PreparedGroupStatus {
-    label: string;
-    theme: GroupStatusTheme;
-    value: number;
-}
 
 interface BridgePileStateInfo {
     label?: string;
@@ -39,25 +48,25 @@ function getBridgePileStateInfo(state?: BridgePileState): BridgePileStateInfo {
             return {
                 label: i18n('value_bridge-state-primary'),
                 theme: 'normal',
+                help: i18n('context_bridge-pile-state-primary'),
             };
         case BridgePileState.PROMOTED:
             return {
                 label: i18n('value_bridge-state-promoted'),
-                theme: 'normal',
+                theme: 'info',
                 icon: <Icon data={ArrowChevronRight} size={12} />,
                 help: i18n('context_bridge-pile-state-promoted'),
             };
         case BridgePileState.SYNCHRONIZED:
             return {
                 label: i18n('value_bridge-state-synchronised'),
-                theme: 'success',
-                icon: <Icon data={CircleCheck} size={12} />,
+                theme: 'normal',
                 help: i18n('context_bridge-pile-state-synchronised'),
             };
         case BridgePileState.NOT_SYNCHRONIZED:
             return {
                 label: i18n('value_bridge-state-not-synchronised'),
-                theme: 'normal',
+                theme: 'warning',
                 icon: <Icon data={Ban} size={12} />,
                 help: i18n('context_bridge-pile-state-not-synchronised'),
             };
@@ -71,7 +80,7 @@ function getBridgePileStateInfo(state?: BridgePileState): BridgePileStateInfo {
         case BridgePileState.DISCONNECTED:
             return {
                 label: i18n('value_bridge-state-disconnected'),
-                theme: 'unknown',
+                theme: 'danger',
                 icon: <Icon data={LinkSlash} size={12} />,
                 help: i18n('context_bridge-pile-state-disconnected'),
             };
@@ -88,182 +97,43 @@ function getBridgePileStateInfo(state?: BridgePileState): BridgePileStateInfo {
     }
 }
 
-interface BridgePileGroupStatusInfo {
-    label: string;
-    theme: GroupStatusTheme;
-}
-
-function getNodesLabel(nodes?: number) {
-    if (nodes === undefined) {
-        return EMPTY_DATA_PLACEHOLDER;
-    }
-
-    return i18n('value_nodes', {
-        count: nodes,
-        formattedCount: formatNumber(nodes),
-    });
-}
-
-function getBridgePileGroupStatusInfo(status?: BridgePileGroupStatus): BridgePileGroupStatusInfo {
-    switch (status) {
-        case BridgePileGroupStatus.UNKNOWN:
-            return {
-                label: i18n('value_bridge-group-status-unknown'),
-                theme: 'secondary',
-            };
-        case BridgePileGroupStatus.FULL:
-            return {
-                label: i18n('value_bridge-group-status-full'),
-                theme: 'positive',
-            };
-        case BridgePileGroupStatus.PARTIAL:
-            return {
-                label: i18n('value_bridge-group-status-partial'),
-                theme: 'warning',
-            };
-        case BridgePileGroupStatus.DEGRADED:
-            return {
-                label: i18n('value_bridge-group-status-degraded'),
-                theme: 'danger',
-            };
-        case BridgePileGroupStatus.DISINTEGRATED:
-            return {
-                label: i18n('value_bridge-group-status-disintegrated'),
-                theme: 'dark-complementary',
-            };
-        default:
-            return {
-                label: EMPTY_DATA_PLACEHOLDER,
-                theme: 'secondary',
-            };
-    }
-}
-
-function getBridgePileGroupStatus(status: string): BridgePileGroupStatus | undefined {
-    if (Object.values(BridgePileGroupStatus).includes(status as BridgePileGroupStatus)) {
-        return status as BridgePileGroupStatus;
-    }
-
-    return undefined;
-}
-
-function prepareGroupStatuses(groupStatuses?: TBridgePile['GroupStatuses']): PreparedGroupStatus[] {
-    return Object.entries(groupStatuses ?? {})
-        .map(([status, value]) => {
-            const groupStatus = getBridgePileGroupStatus(status);
-            const {label, theme} = groupStatus
-                ? getBridgePileGroupStatusInfo(groupStatus)
-                : {label: status, theme: 'secondary' as const};
-            const numericValue = Number(value);
-
-            if (!Number.isFinite(numericValue) || numericValue <= 0) {
-                return undefined;
-            }
-
-            return {
-                label,
-                theme,
-                value: numericValue,
-            };
-        })
-        .filter((status): status is PreparedGroupStatus => status !== undefined);
-}
-
-interface SegmentedProgressBarProps {
-    statuses: PreparedGroupStatus[];
-    describedBy?: string;
-}
-
-function SegmentedProgressBar({statuses, describedBy}: SegmentedProgressBarProps) {
-    const total = statuses.reduce((sum, {value}) => sum + value, 0);
-
-    if (!Number.isFinite(total) || total <= 0) {
-        return (
-            <div
-                className={progressB({empty: true})}
-                role="img"
-                aria-label={i18n('context_group-statuses-empty')}
-            />
-        );
-    }
-
-    return (
-        <div
-            className={progressB()}
-            role="img"
-            aria-label={i18n('context_group-statuses')}
-            aria-describedby={describedBy}
-        >
-            {statuses.map(({label, theme, value}) => (
-                <div
-                    key={`${label}-${value}`}
-                    className={progressB('item', {theme})}
-                    aria-hidden="true"
-                    style={{
-                        width: `${(value / total) * 100}%`,
-                    }}
-                />
-            ))}
-        </div>
-    );
-}
-
-interface GroupStatusesLegendProps {
-    statuses: PreparedGroupStatus[];
-    id?: string;
-}
-
-function GroupStatusesLegend({statuses, id}: GroupStatusesLegendProps) {
-    if (!statuses.length) {
-        return (
-            <Text variant="caption-2" color="secondary">
-                {EMPTY_DATA_PLACEHOLDER}
-            </Text>
-        );
-    }
-
-    return (
-        <ul id={id} className={legendB()} aria-label={i18n('context_group-statuses')}>
-            {statuses.map(({label, theme, value}) => (
-                <li key={`${label}-${value}`} className={legendB('item')}>
-                    <span aria-hidden="true" className={legendB('dot', {theme})} />
-                    <Text variant="caption-2" className={legendB('label')}>
-                        {label}
-                    </Text>
-                    <Text variant="caption-2" color="secondary">
-                        {formatNumber(value)}
-                    </Text>
-                </li>
-            ))}
-        </ul>
-    );
-}
-
 interface BridgeInfoTableProps {
     piles: TBridgePile[];
+    database?: string;
+    clusterName?: string;
 }
 
 interface BridgePileCardProps {
     pile: TBridgePile;
+    current: boolean;
+    healthcheckAvailable: boolean;
+    healthcheckSupportsPiles: boolean;
+    healthcheckLoading: boolean;
+    leavesIssues: ReturnType<typeof selectLeavesIssues>;
+    onHealthcheckClick: (target: BridgePileHealthcheckTarget) => void;
 }
 
-const BridgePileCard = React.memo(function BridgePileCard({pile}: BridgePileCardProps) {
-    const groupStatusesLegendId = React.useId();
-
+const BridgePileCard = React.memo(function BridgePileCard({
+    pile,
+    current,
+    healthcheckAvailable,
+    healthcheckSupportsPiles,
+    healthcheckLoading,
+    leavesIssues,
+    onHealthcheckClick,
+}: BridgePileCardProps) {
     const stateStatus = React.useMemo(() => {
         const {label, theme, icon, help} = getBridgePileStateInfo(pile.State);
         if (!label) {
             return null;
         }
 
-        const showStateHelp = Boolean(help);
-
         return (
             <LabelWithHelpMark
                 theme={theme}
                 size="xs"
                 icon={icon}
-                className={b('state-label', {'with-help': showStateHelp})}
+                className={b('state-label')}
                 contentGap={2}
                 help={help}
                 helpMarkProps={{
@@ -279,45 +149,131 @@ const BridgePileCard = React.memo(function BridgePileCard({pile}: BridgePileCard
         );
     }, [pile.State]);
 
-    const groupStatuses = React.useMemo(
-        () => prepareGroupStatuses(pile.GroupStatuses),
-        [pile.GroupStatuses],
+    const pileHealthcheck = React.useMemo(
+        () =>
+            getBridgePileHealthcheck(
+                pile.Name,
+                leavesIssues,
+                healthcheckAvailable,
+                healthcheckSupportsPiles,
+            ),
+        [healthcheckAvailable, healthcheckSupportsPiles, leavesIssues, pile.Name],
     );
-    const groupStatusesDescriptionId = groupStatuses.length ? groupStatusesLegendId : undefined;
+
+    const pileName = pile.Name?.trim() || EMPTY_DATA_PLACEHOLDER;
+    const nodes = pile.Nodes === undefined ? EMPTY_DATA_PLACEHOLDER : formatNumber(pile.Nodes);
+    const handleHealthcheckClick = () => {
+        if (pileHealthcheck.target) {
+            onHealthcheckClick(pileHealthcheck.target);
+        }
+    };
 
     return (
         <Flex direction="column" gap={2} className={b('pile')}>
-            <Flex justifyContent="space-between" alignItems="flex-start" gap={3}>
-                <Flex direction="column" className={b('pile-title')}>
-                    <Text variant="subheader-1" ellipsis>
-                        {pile.Name?.trim() || EMPTY_DATA_PLACEHOLDER}
-                    </Text>
-                    <Text variant="caption-2" color="secondary">
-                        {getNodesLabel(pile.Nodes)}
-                    </Text>
-                </Flex>
+            <Flex justifyContent="space-between" alignItems="flex-start" gap={2} width="100%">
+                <Text variant="subheader-1" ellipsis className={b('pile-name')}>
+                    {pileName}
+                </Text>
+                {current ? (
+                    <Label
+                        theme="clear"
+                        size="xs"
+                        icon={<Icon data={MapPin} size={12} />}
+                        className={b('current-pile')}
+                    >
+                        {i18n('label_you-are-here')}
+                    </Label>
+                ) : null}
+            </Flex>
+            <Flex gap={2} alignItems="center" wrap>
                 {stateStatus}
+                {healthcheckLoading ? (
+                    <Skeleton className={b('healthcheck-skeleton')} />
+                ) : (
+                    <EntityStatus.Label
+                        status={pileHealthcheck.status}
+                        size="xs"
+                        className={b('healthcheck-status')}
+                        onClick={pileHealthcheck.target ? handleHealthcheckClick : undefined}
+                        endContent={
+                            pileHealthcheck.target ? (
+                                <Icon data={ChevronRight} size={12} />
+                            ) : undefined
+                        }
+                        qa="bridge-pile-healthcheck"
+                    >
+                        {pileHealthcheck.target ? (
+                            <span className={b('healthcheck-accessible-prefix')}>
+                                {i18n('label_bridge-pile-health-status-prefix', {pileName})}
+                            </span>
+                        ) : null}
+                    </EntityStatus.Label>
+                )}
             </Flex>
-            <Flex direction="column" gap={1} className={b('statuses')}>
-                <SegmentedProgressBar
-                    statuses={groupStatuses}
-                    describedBy={groupStatusesDescriptionId}
-                />
-                <GroupStatusesLegend statuses={groupStatuses} id={groupStatusesDescriptionId} />
+            <Flex gap={1} alignItems="center" className={b('nodes')}>
+                <Icon data={Archive} size={14} />
+                <Text variant="body-1">
+                    {i18n('field_nodes')}: {nodes}
+                </Text>
             </Flex>
         </Flex>
     );
 });
 
-export const BridgeInfoTable = React.memo(function BridgeInfoTable({piles}: BridgeInfoTableProps) {
-    const renderedPiles = React.useMemo(
-        () => piles.map((pile, index) => <BridgePileCard key={pile.PileId ?? index} pile={pile} />),
-        [piles],
+export const BridgeInfoTable = React.memo(function BridgeInfoTable({
+    piles,
+    database,
+    clusterName,
+}: BridgeInfoTableProps) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {handleOpenHealthcheckIssue} = useClusterHealthcheckQueryParams();
+    const {
+        currentData: healthcheckData,
+        isFetching: healthcheckFetching,
+        error: healthcheckError,
+    } = healthcheckApi.useGetHealthcheckInfoQuery(
+        {database: database ?? '', clusterName},
+        {
+            pollingInterval: autoRefreshInterval,
+            skip: !database,
+        },
     );
+    const leavesIssues = useTypedSelector((state) =>
+        selectLeavesIssues(state, database ?? '', clusterName),
+    );
+
+    const healthcheckAvailable = healthcheckData !== undefined && healthcheckError === undefined;
+    const healthcheckLoading = healthcheckData === undefined && healthcheckFetching;
+    const currentPileName = healthcheckData?.location?.pile?.name;
+    const healthcheckSupportsPiles = healthcheckData?.location?.pile !== undefined;
+
+    const sortedPiles = React.useMemo(() => {
+        return piles
+            .map((pile, index) => ({pile, index}))
+            .sort((left, right) => {
+                const leftPrimary = left.pile.State === BridgePileState.PRIMARY;
+                const rightPrimary = right.pile.State === BridgePileState.PRIMARY;
+                if (leftPrimary !== rightPrimary) {
+                    return leftPrimary ? -1 : 1;
+                }
+                return left.index - right.index;
+            });
+    }, [piles]);
 
     return (
-        <Flex gap={2} wrap className={b()}>
-            {renderedPiles}
+        <Flex wrap className={b()}>
+            {sortedPiles.map(({pile, index}) => (
+                <BridgePileCard
+                    key={pile.PileId ?? pile.Name ?? index}
+                    pile={pile}
+                    current={Boolean(currentPileName?.trim() && pile.Name === currentPileName)}
+                    healthcheckAvailable={healthcheckAvailable}
+                    healthcheckSupportsPiles={healthcheckSupportsPiles}
+                    healthcheckLoading={healthcheckLoading}
+                    leavesIssues={leavesIssues}
+                    onHealthcheckClick={handleOpenHealthcheckIssue}
+                />
+            ))}
         </Flex>
     );
 });

package/src/containers/Cluster/ClusterOverview/components/bridgePileHealthcheck.ts

@@ -0,0 +1,142 @@
+import type {IssuesTree} from '../../../../store/reducers/healthcheckInfo/types';
+import {
+    getHealthcheckIssuePileNames,
+    hcStatusToColorFlag,
+} from '../../../../store/reducers/healthcheckInfo/utils';
+import {EFlag} from '../../../../types/api/enums';
+import {StatusFlag} from '../../../../types/api/healthcheck';
+
+export interface BridgePileHealthcheckTarget {
+    issueId: string;
+    leafIssueId: string;
+    view: string;
+}
+
+interface BridgePileHealthcheck {
+    status: EFlag;
+    target?: BridgePileHealthcheckTarget;
+}
+
+interface Candidate {
+    issue: IssuesTree;
+    leaf: IssuesTree;
+    level: number;
+}
+
+const STATUS_PRIORITY: Record<StatusFlag, number> = {
+    [StatusFlag.UNSPECIFIED]: 0,
+    [StatusFlag.GREY]: 0,
+    [StatusFlag.GREEN]: 1,
+    [StatusFlag.BLUE]: 2,
+    [StatusFlag.YELLOW]: 3,
+    [StatusFlag.ORANGE]: 4,
+    [StatusFlag.RED]: 5,
+};
+
+function normalizeStatus(status: unknown): StatusFlag {
+    return typeof status === 'string' && Object.hasOwn(STATUS_PRIORITY, status)
+        ? (status as StatusFlag)
+        : StatusFlag.UNSPECIFIED;
+}
+
+function getBranch(leaf: IssuesTree): IssuesTree[] {
+    const branch: IssuesTree[] = [];
+    let current: IssuesTree | undefined = leaf;
+
+    while (current) {
+        branch.push(current);
+        current = current.parent;
+    }
+
+    return branch.reverse();
+}
+
+function getBranchCandidate(leaf: IssuesTree, pileName: string): Candidate | undefined {
+    const branch = getBranch(leaf);
+
+    for (const [branchIndex, issue] of branch.entries()) {
+        if (!getHealthcheckIssuePileNames(issue).includes(pileName)) {
+            continue;
+        }
+
+        // Backend guarantees increasing levels; add validation here if that can change.
+        const level = issue.level ?? branchIndex;
+        return {issue, leaf, level};
+    }
+
+    return undefined;
+}
+
+function compareSourceOrder(left?: number[], right?: number[]): number {
+    if (!left) {
+        return right ? 1 : 0;
+    }
+    if (!right) {
+        return -1;
+    }
+
+    const commonLength = Math.min(left.length, right.length);
+    for (let index = 0; index < commonLength; index += 1) {
+        if (left[index] !== right[index]) {
+            return left[index] - right[index];
+        }
+    }
+
+    return left.length - right.length;
+}
+
+function isWorseCandidate(candidate: Candidate, current: Candidate): boolean {
+    const candidatePriority = STATUS_PRIORITY[normalizeStatus(candidate.issue.status)];
+    const currentPriority = STATUS_PRIORITY[normalizeStatus(current.issue.status)];
+
+    if (candidatePriority !== currentPriority) {
+        return candidatePriority > currentPriority;
+    }
+
+    if (candidate.level !== current.level) {
+        return candidate.level < current.level;
+    }
+
+    const issueOrder = compareSourceOrder(
+        candidate.issue.sourceOrderPath,
+        current.issue.sourceOrderPath,
+    );
+    if (issueOrder !== 0) {
+        return issueOrder < 0;
+    }
+
+    return compareSourceOrder(candidate.leaf.sourceOrderPath, current.leaf.sourceOrderPath) < 0;
+}
+
+export function getBridgePileHealthcheck(
+    pileName: string | undefined,
+    leavesIssues: IssuesTree[],
+    healthcheckAvailable: boolean,
+    healthcheckSupportsPiles = healthcheckAvailable,
+): BridgePileHealthcheck {
+    if (!healthcheckAvailable || !pileName?.trim()) {
+        return {status: EFlag.Grey};
+    }
+
+    let selectedCandidate: Candidate | undefined;
+    for (const leaf of leavesIssues) {
+        const candidate = getBranchCandidate(leaf, pileName);
+        if (candidate && (!selectedCandidate || isWorseCandidate(candidate, selectedCandidate))) {
+            selectedCandidate = candidate;
+        }
+    }
+
+    if (!selectedCandidate) {
+        return {status: healthcheckSupportsPiles ? EFlag.Green : EFlag.Grey};
+    }
+
+    const issueStatus = normalizeStatus(selectedCandidate.issue.status);
+    return {
+        status: hcStatusToColorFlag[issueStatus],
+        target: {
+            issueId: selectedCandidate.issue.id,
+            leafIssueId: selectedCandidate.leaf.id,
+            view: selectedCandidate.leaf.categoryForUI,
+        },
+    };
+}

package/src/containers/Cluster/i18n/en.json

@@ -24,16 +24,19 @@
   "value_bridge-state-suspended": "Suspended",
   "value_bridge-state-disconnected": "Disconnected",
   "value_bridge-state-unspecified": "Unspecified",
+  "label_you-are-here": "You are here",
+  "label_bridge-pile-health-status-prefix": "Health status for pile {{pileName}}:",
   "value_bridge-group-status-unknown": "Unknown",
   "value_bridge-group-status-full": "Full",
   "value_bridge-group-status-partial": "Partial",
   "value_bridge-group-status-degraded": "Degraded",
   "value_bridge-group-status-disintegrated": "Disintegrated",
-  "context_bridge-pile-state-promoted": "Pile that is being promoted from SYNCHRONIZED\nto PRIMARY. It stays in this state during the graceful\nswitchover. After completion, YDB will automatically\nset it to PRIMARY.",
-  "context_bridge-pile-state-synchronised": "Secondary pile where all storage groups are fully\nsynchronized with PRIMARY. In normal operation,\nthe pair works as PRIMARY + SYNCHRONISED.",
-  "context_bridge-pile-state-not-synchronised": "Storage groups of this pile are not yet fully synchronized\nwith PRIMARY. After synchronization is complete, YDB\nwill automatically transition the pile to SYNCHRONIZED.",
-  "context_bridge-pile-state-suspended": "Pile is being gracefully transitioned to DISCONNECTED\nstate. It remains in this state during the graceful shutdown.\nAfter completion, YDB will automatically move it\nto DISCONNECTED.",
-  "context_bridge-pile-state-disconnected": "Pile is disconnected from PRIMARY and does\nnot participate in operation execution.",
+  "context_bridge-pile-state-promoted": "Pile that is being promoted from Synchronized to\u00a0Primary",
+  "context_bridge-pile-state-primary": "Primary pile that currently participates in operation execution.",
+  "context_bridge-pile-state-synchronised": "Secondary pile where all storage groups are fully synchronized with Primary",
+  "context_bridge-pile-state-not-synchronised": "Storage groups are not yet fully synchronized with Primary",
+  "context_bridge-pile-state-suspended": "Pile is being transitioned to\u00a0Disconnected state",
+  "context_bridge-pile-state-disconnected": "Pile is disconnected from Primary and does not participate in operation execution",
   "context_group-statuses": "Storage group statuses",
   "context_group-statuses-empty": "No storage group status data",
   "context_cpu": "CPU load",

package/src/containers/Header/DatabaseRightControls.tsx

@@ -5,7 +5,7 @@ import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
 
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
-import type {ClusterLinkWithTitle} from '../../types/additionalProps';
+import type {AdditionalTenantsProps, ClusterLinkWithTitle} from '../../types/additionalProps';
 import {CLUSTER_LINK_CONTEXT} from '../../utils/clusterLinks/clusterLinkConstants';
 
 import {DeveloperUIControl} from './GlobalRightControls';
@@ -19,6 +19,8 @@ interface DatabaseRightControlsProps {
     databaseData?: PreparedTenant;
     isDatabaseDataLoading: boolean;
     isV2NavigationEnabled: boolean;
+    isViewerUser?: boolean;
+    prepareTenantBackend?: AdditionalTenantsProps['prepareTenantBackend'];
     showDeveloperUI: boolean;
     databaseLinks: ClusterLinkWithTitle[];
 }
@@ -29,6 +31,8 @@ export function DatabaseRightControls({
     databaseData,
     isDatabaseDataLoading,
     isV2NavigationEnabled,
+    isViewerUser,
+    prepareTenantBackend,
     showDeveloperUI,
     databaseLinks,
 }: DatabaseRightControlsProps) {
@@ -62,6 +66,8 @@ export function DatabaseRightControls({
                 databaseData={databaseData}
                 isDatabaseDataLoading={isDatabaseDataLoading}
                 isV2NavigationEnabled={isV2NavigationEnabled}
+                isViewerUser={isViewerUser}
+                prepareTenantBackend={prepareTenantBackend}
                 databaseLinks={actionDatabaseLinks}
             />
         </React.Fragment>

package/src/containers/Header/Header.tsx

@@ -38,6 +38,7 @@ export function Header() {
         isDatabaseDataLoading,
         clusterLinks,
         databaseLinks,
+        prepareTenantBackend,
     } = useHeaderData({
         metaCapabilitiesLoaded,
         database,
@@ -89,6 +90,8 @@ export function Header() {
                 isDatabaseDataLoading={isDatabaseDataLoading}
                 isAddClusterAvailable={isAddClusterAvailable}
                 isV2NavigationEnabled={isV2NavigationEnabled}
+                isViewerUser={isViewerUser}
+                prepareTenantBackend={prepareTenantBackend}
                 clusterLinks={clusterLinks}
                 databaseLinks={databaseLinks}
                 handleEditCluster={handleEditCluster}