ydb-embedded-ui 20.3.0 → 20.4.0

package/src/containers/Header/HeaderActionsMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Pencil, PlugConnection, TrashBin} from '@gravity-ui/icons';
+import {DatabaseArrowRight, Pencil, PlugConnection, TrashBin} from '@gravity-ui/icons';
 import {useHistory} from 'react-router-dom';
 
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
@@ -9,11 +9,12 @@ import {DropdownMenu} from '../../components/DropdownMenu';
 import {getClusterPath} from '../../routes';
 import {useEmMetaAvailable} from '../../store/reducers/capabilities/hooks';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
-import type {ClusterLinkWithTitle} from '../../types/additionalProps';
+import type {AdditionalTenantsProps, ClusterLinkWithTitle} from '../../types/additionalProps';
 import {uiFactory} from '../../uiFactory/uiFactory';
 import {clusterTabsIds} from '../Cluster/utils';
 
 import {b} from './constants';
+import {useSharedDatabasePath} from './hooks/useSharedDatabasePath';
 import {headerKeyset} from './i18n';
 
 export interface HeaderActionsMenuProps {
@@ -22,6 +23,8 @@ export interface HeaderActionsMenuProps {
     databaseData?: PreparedTenant;
     isDatabaseDataLoading: boolean;
     isV2NavigationEnabled: boolean;
+    isViewerUser?: boolean;
+    prepareTenantBackend?: AdditionalTenantsProps['prepareTenantBackend'];
     databaseLinks: ClusterLinkWithTitle[];
 }
 
@@ -31,11 +34,19 @@ export function DBHeaderActionsMenu({
     databaseData,
     isDatabaseDataLoading,
     isV2NavigationEnabled,
+    isViewerUser,
+    prepareTenantBackend,
     databaseLinks,
 }: HeaderActionsMenuProps) {
     const history = useHistory();
 
     const emMetaAvailable = useEmMetaAvailable();
+    const sharedDatabasePath = useSharedDatabasePath({
+        clusterName,
+        databaseData,
+        isViewerUser,
+        prepareTenantBackend,
+    });
 
     const isEditDBAvailable = emMetaAvailable && uiFactory.onEditDB !== undefined;
     const isDeleteDBAvailable = emMetaAvailable && uiFactory.onDeleteDB !== undefined;
@@ -70,6 +81,16 @@ export function DBHeaderActionsMenu({
             ]);
         }
 
+        if (sharedDatabasePath) {
+            menuItems.push([
+                {
+                    title: headerKeyset('action_go-to-shared-db'),
+                    iconStart: DatabaseArrowRight,
+                    href: sharedDatabasePath,
+                },
+            ]);
+        }
+
         const {onEditDB, onDeleteDB} = uiFactory;
 
         const isEnoughData = clusterName && databaseData;
@@ -115,6 +136,7 @@ export function DBHeaderActionsMenu({
         history,
         isEditDBAvailable,
         isDeleteDBAvailable,
+        sharedDatabasePath,
     ]);
 
     if (!menuItems.length) {

package/src/containers/Header/HeaderRightControls.tsx

@@ -1,7 +1,7 @@
 import {Flex} from '@gravity-ui/uikit';
 
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
-import type {ClusterLinkWithTitle} from '../../types/additionalProps';
+import type {AdditionalTenantsProps, ClusterLinkWithTitle} from '../../types/additionalProps';
 import {useHasDeveloperUi} from '../../utils/developerUI/developerUI';
 
 import {ClusterRightControls} from './ClusterRightControls';
@@ -20,6 +20,8 @@ interface HeaderRightControlsProps {
     isDatabaseDataLoading: boolean;
     isAddClusterAvailable: boolean;
     isV2NavigationEnabled: boolean;
+    isViewerUser?: boolean;
+    prepareTenantBackend?: AdditionalTenantsProps['prepareTenantBackend'];
     clusterLinks: ClusterLinkWithTitle[];
     databaseLinks: ClusterLinkWithTitle[];
     handleEditCluster?: () => Promise<boolean>;
@@ -37,6 +39,8 @@ export function HeaderRightControls({
     isDatabaseDataLoading,
     isAddClusterAvailable,
     isV2NavigationEnabled,
+    isViewerUser,
+    prepareTenantBackend,
     clusterLinks,
     databaseLinks,
     handleEditCluster,
@@ -58,6 +62,8 @@ export function HeaderRightControls({
                     databaseData={databaseData}
                     isDatabaseDataLoading={isDatabaseDataLoading}
                     isV2NavigationEnabled={isV2NavigationEnabled}
+                    isViewerUser={isViewerUser}
+                    prepareTenantBackend={prepareTenantBackend}
                     showDeveloperUI={showDeveloperUI}
                     databaseLinks={databaseLinks}
                 />

package/src/containers/Header/hooks/useHeaderData.ts

@@ -82,5 +82,6 @@ export function useHeaderData({
         isDatabaseDataLoading,
         clusterLinks,
         databaseLinks,
+        prepareTenantBackend: additionalTenantProps.prepareTenantBackend,
     };
 }

package/src/containers/Header/hooks/useSharedDatabasePath.ts

@@ -0,0 +1,195 @@
+import React from 'react';
+
+import {skipToken} from '@reduxjs/toolkit/query';
+
+import {getTenantBackend} from '../../../components/TenantNameWrapper/utils';
+import {getTenantPath} from '../../../routes';
+import {backend as activeBackend, environment} from '../../../store';
+import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
+import {tenantsApi} from '../../../store/reducers/tenants/tenants';
+import type {PreparedTenant, SharedDatabaseTarget} from '../../../store/reducers/tenants/types';
+import type {AdditionalTenantsProps} from '../../../types/additionalProps';
+import {uiFactory} from '../../../uiFactory/uiFactory';
+import {useDatabasesV2} from '../../../utils/hooks/useDatabasesV2';
+import {useIsUserAllowedToMakeChanges} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
+
+interface UseSharedDatabasePathParams {
+    clusterName?: string;
+    databaseData?: PreparedTenant;
+    isViewerUser?: boolean;
+    prepareTenantBackend?: AdditionalTenantsProps['prepareTenantBackend'];
+}
+
+interface SharedDatabaseNameResolutionParams {
+    databaseData?: PreparedTenant;
+    isClusterBaseInfoResolved: boolean;
+    isViewerUser?: boolean;
+    useDatabaseId?: boolean;
+}
+
+function canResolveSharedDatabaseName({
+    databaseData,
+    isClusterBaseInfoResolved,
+    isViewerUser,
+    useDatabaseId,
+}: SharedDatabaseNameResolutionParams) {
+    return Boolean(
+        isViewerUser &&
+            isClusterBaseInfoResolved &&
+            databaseData?.Type === 'Serverless' &&
+            databaseData.ResourceId &&
+            !useDatabaseId &&
+            !databaseData.sharedTenantName,
+    );
+}
+
+function getSharedDatabaseBackend(
+    sharedDatabase: SharedDatabaseTarget | undefined,
+    prepareTenantBackend: AdditionalTenantsProps['prepareTenantBackend'],
+) {
+    if (!sharedDatabase) {
+        return activeBackend;
+    }
+
+    return (
+        getTenantBackend({NodeIds: sharedDatabase.nodeIds}, {prepareTenantBackend}) ?? activeBackend
+    );
+}
+
+function shouldResolveSharedDatabaseNodeIds(
+    balancer: string | undefined,
+    settings: {use_meta_proxy?: boolean} | undefined,
+    prepareTenantBackend: AdditionalTenantsProps['prepareTenantBackend'],
+) {
+    const useMetaProxy = Boolean(
+        window.api.meta && uiFactory.useMetaProxy && settings?.use_meta_proxy !== false,
+    );
+
+    return Boolean(
+        balancer && !useMetaProxy && prepareTenantBackend && !prepareTenantBackend(undefined),
+    );
+}
+
+function getResolvedSharedDatabasePath({
+    backend,
+    clusterName,
+    databaseData,
+    isClusterBaseInfoResolved,
+    isViewerUser,
+    sharedDatabase,
+}: {
+    backend?: string;
+    clusterName?: string;
+    databaseData?: PreparedTenant;
+    isClusterBaseInfoResolved: boolean;
+    isViewerUser?: boolean;
+    sharedDatabase?: string;
+}) {
+    if (
+        !isViewerUser ||
+        !isClusterBaseInfoResolved ||
+        databaseData?.Type !== 'Serverless' ||
+        !sharedDatabase
+    ) {
+        return undefined;
+    }
+
+    return getTenantPath(
+        {clusterName, database: sharedDatabase, backend},
+        {withBasename: true, environment},
+    );
+}
+
+export function useSharedDatabasePath({
+    clusterName,
+    databaseData,
+    isViewerUser,
+    prepareTenantBackend,
+}: UseSharedDatabasePathParams) {
+    const isMetaDatabasesAvailable = useDatabasesV2();
+    const {
+        balancer,
+        settings,
+        isError: isClusterBaseInfoError,
+        isResolved: isClusterBaseInfoResolved,
+    } = useClusterBaseInfo();
+    const isMonitoringAllowed = useIsUserAllowedToMakeChanges();
+    const isClusterBaseInfoAvailable = isClusterBaseInfoResolved && !isClusterBaseInfoError;
+
+    const useDatabaseId = uiFactory.useDatabaseId && settings?.use_meta_proxy !== false;
+    const needSharedDatabaseNodeIds = shouldResolveSharedDatabaseNodeIds(
+        balancer,
+        settings,
+        prepareTenantBackend,
+    );
+    const shouldResolveSharedDatabaseName = canResolveSharedDatabaseName({
+        databaseData,
+        isClusterBaseInfoResolved: isClusterBaseInfoAvailable,
+        isViewerUser,
+        useDatabaseId,
+    });
+
+    const shouldResolveSharedDatabaseFromViewer =
+        shouldResolveSharedDatabaseName && !window.api.meta;
+
+    const {currentData: sharedDatabaseFromViewer} = tenantsApi.useGetSharedDatabaseQuery(
+        shouldResolveSharedDatabaseFromViewer && databaseData?.ResourceId
+            ? {
+                  clusterName,
+                  database: databaseData.Name,
+                  backend: activeBackend,
+                  environmentName: environment,
+                  isMonitoringAllowed: isMonitoringAllowed === true,
+                  needNodeIds: needSharedDatabaseNodeIds,
+                  resourceId: databaseData.ResourceId,
+              }
+            : skipToken,
+    );
+
+    const shouldResolveSharedDatabaseFromMetaList =
+        shouldResolveSharedDatabaseName && Boolean(window.api.meta);
+
+    const {currentData: databases} = tenantsApi.useGetTenantsInfoQuery(
+        shouldResolveSharedDatabaseFromMetaList
+            ? {clusterName, environmentName: environment, isMetaDatabasesAvailable}
+            : skipToken,
+    );
+
+    const sharedDatabaseTarget = React.useMemo<SharedDatabaseTarget | undefined>(() => {
+        if (databaseData?.sharedTenantName) {
+            return {
+                name: databaseData.sharedTenantName,
+                nodeIds: databaseData.sharedNodeIds,
+            };
+        }
+
+        if (sharedDatabaseFromViewer) {
+            return sharedDatabaseFromViewer;
+        }
+
+        const sharedDatabase = databases?.find(({Id}) => Id === databaseData?.ResourceId);
+        const sharedDatabaseName = sharedDatabase?.Name?.trim();
+
+        return sharedDatabaseName
+            ? {name: sharedDatabaseName, nodeIds: sharedDatabase?.NodeIds}
+            : undefined;
+    }, [
+        databaseData?.ResourceId,
+        databaseData?.sharedNodeIds,
+        databaseData?.sharedTenantName,
+        databases,
+        sharedDatabaseFromViewer,
+    ]);
+
+    const sharedDatabase = useDatabaseId ? databaseData?.ResourceId : sharedDatabaseTarget?.name;
+    const backend = getSharedDatabaseBackend(sharedDatabaseTarget, prepareTenantBackend);
+
+    return getResolvedSharedDatabasePath({
+        backend,
+        clusterName,
+        databaseData,
+        isClusterBaseInfoResolved: isClusterBaseInfoAvailable,
+        isViewerUser,
+        sharedDatabase,
+    });
+}

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

@@ -15,6 +15,7 @@
   "action_edit-cluster": "Edit Cluster",
   "action_delete-cluster": "Delete Cluster",
   "action_connect-to-db": "Connect to database",
+  "action_go-to-shared-db": "Go to shared database",
   "action_manage": "Manage",
 
   "title_developer-ui": "Developer UI",

package/src/containers/Tablets/Tablets.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import {skipToken} from '@reduxjs/toolkit/query';
 import {isNil} from 'lodash';
-import {StringParam, useQueryParams} from 'use-query-params';
 
 import {useClusterWithProxy} from '../../store/reducers/cluster/cluster';
 import {selectTabletsWithFqdn, tabletsApi} from '../../store/reducers/tablets';
@@ -12,6 +11,7 @@ import {valueIsDefined} from '../../utils';
 import {useAutoRefreshInterval, useTypedSelector} from '../../utils/hooks';
 
 import {TabletsTable} from './TabletsTable';
+import {useTabletQueryParams} from './useTabletQueryParams';
 
 const TABLET_ID_SEARCH_DEBOUNCE = 1000;
 const TABLET_ID_PATTERN = /^\d+$/;
@@ -60,8 +60,8 @@ export function Tablets({
     // search remains client-side over the already loaded tablets list.
     const isDatabasePage = !isNil(path) && !isNil(databaseFullPath) && path === databaseFullPath;
 
-    const [{tabletsSearch}] = useQueryParams({tabletsSearch: StringParam});
-    const currentSearch = tabletsSearch ?? '';
+    const {tabletsSearch} = useTabletQueryParams();
+    const currentSearch = tabletsSearch;
 
     // Debounce the search value before sending it to the backend, since the
     // request can be heavy.

package/src/containers/Tablets/TabletsTable.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 
 import {ArrowRotateLeft} from '@gravity-ui/icons';
 import type {Column as DataTableColumn, SortOrder} from '@gravity-ui/react-data-table';
-import {Icon, Text} from '@gravity-ui/uikit';
+import {Icon, Select, Text} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
-import {StringParam, useQueryParams} from 'use-query-params';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {EntitiesCount} from '../../components/EntitiesCount';
@@ -24,6 +23,8 @@ import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/consta
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 
 import i18n from './i18n';
+import {useTabletQueryParams} from './useTabletQueryParams';
+import {filterTablets, getAvailableTabletTypes} from './utils';
 
 function isFollowerTablet(state: TTabletStateInfo) {
     return state.Leader === false;
@@ -228,55 +229,58 @@ export function TabletsTable({
     nodeId,
     backendSearchActive,
 }: TabletsTableProps) {
-    const [{tabletsSearch}, setQueryParams] = useQueryParams({
-        tabletsSearch: StringParam,
-    });
+    const {tabletsSearch, tabletTypes, handleTabletsSearchChange, handleTabletTypesChange} =
+        useTabletQueryParams();
 
     // Track sort state for scroll dependencies
     const [sortParams, setSortParams] = React.useState<SortOrder | SortOrder[] | undefined>();
 
     const {filteredTablets, showEndOfRange} = React.useMemo(() => {
-        let showEnd = false;
-        if (backendSearchActive) {
-            // Backend already filtered the list; just scan once for showEndOfRange.
-            for (const tablet of tablets) {
-                if (tablet.EndOfRangeKeyPrefix) {
-                    showEnd = true;
-                    break;
-                }
-            }
-            return {filteredTablets: tablets, showEndOfRange: showEnd};
-        }
-
-        const preparedTabletsSearch = tabletsSearch?.trim() ?? '';
-
         return {
-            filteredTablets: tablets.filter((tablet) => {
-                showEnd = showEnd || Boolean(tablet.EndOfRangeKeyPrefix);
-                return String(tablet.TabletId).includes(preparedTabletsSearch);
+            filteredTablets: filterTablets(tablets, {
+                tabletIdSearch: backendSearchActive ? undefined : tabletsSearch,
+                tabletTypes,
             }),
-            showEndOfRange: showEnd,
+            showEndOfRange: tablets.some((tablet) => Boolean(tablet.EndOfRangeKeyPrefix)),
         };
-    }, [tablets, tabletsSearch, backendSearchActive]);
+    }, [tablets, tabletsSearch, tabletTypes, backendSearchActive]);
+
+    const tabletTypeOptions = React.useMemo(() => {
+        return getAvailableTabletTypes(tablets, tabletTypes).map((tabletType) => ({
+            value: tabletType,
+            content: tabletType,
+        }));
+    }, [tablets, tabletTypes]);
 
     const columns = React.useMemo(
         () => getColumns({nodeId, showEndOfRange}),
         [nodeId, showEndOfRange],
     );
 
-    const handleSearchQueryChange = (value: string) => {
-        setQueryParams({tabletsSearch: value || undefined}, 'replaceIn');
-    };
+    const filtersActive = Boolean(tabletsSearch.trim()) || tabletTypes.length > 0;
 
     return (
         <TableWithControlsLayout fullHeight>
             <TableWithControlsLayout.Controls>
                 <Search
                     placeholder={i18n('controls.search-placeholder')}
-                    onChange={handleSearchQueryChange}
-                    value={tabletsSearch ?? ''}
+                    onChange={handleTabletsSearchChange}
+                    value={tabletsSearch}
                     width={238}
                 />
+                <Select
+                    multiple
+                    filterable
+                    hasClear
+                    qa="tablets-type-filter"
+                    aria-label={i18n('controls.type-filter-label')}
+                    label={i18n('controls.type-filter-label')}
+                    placeholder={i18n('controls.type-filter-placeholder')}
+                    value={tabletTypes}
+                    options={tabletTypeOptions}
+                    onUpdate={handleTabletTypesChange}
+                    width={220}
+                />
                 <EntitiesCount
                     label={i18n('controls.entities-count-label')}
                     loading={loading}
@@ -287,14 +291,16 @@ export function TabletsTable({
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table
                 scrollContainerRef={scrollContainerRef}
-                scrollDependencies={[tabletsSearch, sortParams]}
+                scrollDependencies={[tabletsSearch, tabletTypes, sortParams]}
                 loading={loading}
             >
                 <ResizeableDataTable
                     columns={columns}
                     data={filteredTablets}
                     settings={DEFAULT_TABLE_SETTINGS}
-                    emptyDataMessage={i18n('noTabletsData')}
+                    emptyDataMessage={
+                        filtersActive ? i18n('noTabletsMatchFilters') : i18n('noTabletsData')
+                    }
                     onSortChange={setSortParams}
                 />
             </TableWithControlsLayout.Table>

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

@@ -1,5 +1,6 @@
 {
   "noTabletsData": "No tablets data",
+  "noTabletsMatchFilters": "No tablets match the selected filters",
   "Type": "Type",
   "Tablet": "Tablet",
   "State": "State",
@@ -13,5 +14,7 @@
   "controls.kill-not-allowed": "You don't have enough rights to restart tablet",
   "controls.kill-impossible-follower": "It's impossible to restart a follower",
   "controls.search-placeholder": "Tablet ID",
+  "controls.type-filter-label": "Type",
+  "controls.type-filter-placeholder": "All types",
   "controls.entities-count-label": "Tablets"
 }

package/src/containers/Tablets/useTabletQueryParams.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import type {QueryParamConfig} from 'use-query-params';
+import {StringParam, useQueryParams} from 'use-query-params';
+import {z} from 'zod';
+
+const tabletTypesSchema = z
+    .array(
+        z
+            .string()
+            .trim()
+            .min(1)
+            .max(128)
+            .regex(/^[A-Za-z_][A-Za-z0-9_]*$/),
+    )
+    .max(100)
+    .catch([]);
+
+export const TabletTypesParam: QueryParamConfig<string[] | undefined, string[]> = {
+    encode: (value) => (value?.length ? value.join(',') : undefined),
+    decode: (value) => {
+        if (typeof value !== 'string') {
+            return [];
+        }
+
+        return Array.from(new Set(tabletTypesSchema.parse(value.split(','))));
+    },
+};
+
+export function useTabletQueryParams() {
+    const [{tabletsSearch, tabletTypes}, setQueryParams] = useQueryParams({
+        tabletsSearch: StringParam,
+        tabletTypes: TabletTypesParam,
+    });
+    const handleTabletsSearchChange = React.useCallback(
+        (value: string) => {
+            setQueryParams({tabletsSearch: value || undefined}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+    const handleTabletTypesChange = React.useCallback(
+        (value: string[]) => {
+            setQueryParams({tabletTypes: value.length ? value : undefined}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    return {
+        tabletsSearch: tabletsSearch ?? '',
+        tabletTypes: tabletTypes ?? [],
+        handleTabletsSearchChange,
+        handleTabletTypesChange,
+    };
+}

package/src/containers/Tablets/utils.ts

@@ -0,0 +1,43 @@
+interface FilterTabletsOptions {
+    tabletIdSearch?: string | null;
+    tabletTypes: string[];
+}
+
+interface FilterableTablet {
+    TabletId?: string;
+    Type?: string;
+}
+
+export function filterTablets<T extends FilterableTablet>(
+    tablets: T[],
+    options: FilterTabletsOptions,
+) {
+    const tabletIdSearch = options.tabletIdSearch?.trim() ?? '';
+    const tabletTypes = new Set(options.tabletTypes);
+
+    if (!tabletIdSearch && tabletTypes.size === 0) {
+        return tablets;
+    }
+
+    return tablets.filter((tablet) => {
+        const matchesTabletId = String(tablet.TabletId).includes(tabletIdSearch);
+        const matchesTabletType =
+            tabletTypes.size === 0 || (tablet.Type !== undefined && tabletTypes.has(tablet.Type));
+
+        return matchesTabletId && matchesTabletType;
+    });
+}
+
+export function getAvailableTabletTypes<T extends FilterableTablet>(
+    tablets: T[],
+    selectedTabletTypes: string[],
+) {
+    const availableTabletTypes = new Set(selectedTabletTypes);
+    tablets.forEach((tablet) => {
+        if (tablet.Type) {
+            availableTabletTypes.add(tablet.Type);
+        }
+    });
+
+    return Array.from(availableTabletTypes).sort();
+}

package/src/containers/Tenant/Healthcheck/Healthcheck.tsx

@@ -34,7 +34,7 @@ import cryCatIcon from '../../../assets/icons/cry-cat.svg';
 
 import './Healthcheck.scss';
 
-type HealthcheckDetailsProps =
+type HealthcheckDetailsProps = (
     | {
           database: string;
           clusterName?: string;
@@ -46,7 +46,12 @@ type HealthcheckDetailsProps =
           database?: undefined;
           databaseType?: undefined;
           scope?: 'cluster';
-      };
+      }
+) & {
+    targetIssueId?: string;
+    targetLeafIssueId?: string;
+    targetLeafIssueRef?: React.Ref<HTMLDivElement>;
+};
 
 export function Healthcheck(props: HealthcheckDetailsProps) {
     if (props.database !== undefined) {
@@ -59,6 +64,9 @@ export function Healthcheck(props: HealthcheckDetailsProps) {
                     clusterName={props.clusterName}
                     databaseType={props.databaseType}
                     scope={props.scope}
+                    targetIssueId={props.targetIssueId}
+                    targetLeafIssueId={props.targetLeafIssueId}
+                    targetLeafIssueRef={props.targetLeafIssueRef}
                 />
             </HealthcheckContext.Provider>
         );
@@ -76,16 +84,30 @@ function DatabaseHealthcheckInner({
     clusterName,
     databaseType,
     scope = 'database',
+    targetIssueId,
+    targetLeafIssueId,
+    targetLeafIssueRef,
 }: {
     database: string;
     clusterName?: string;
     databaseType?: ETenantType;
     scope?: 'cluster' | 'database';
+    targetIssueId?: string;
+    targetLeafIssueId?: string;
+    targetLeafIssueRef?: React.Ref<HTMLDivElement>;
 }) {
     const healthcheck = useHealthcheck(database, {clusterName, databaseType});
     const target = getDatabaseHealthcheckAssistantTarget({database, clusterName, scope});
 
-    return <HealthcheckContent healthcheck={healthcheck} target={target} />;
+    return (
+        <HealthcheckContent
+            healthcheck={healthcheck}
+            target={target}
+            targetIssueId={targetIssueId}
+            targetLeafIssueId={targetLeafIssueId}
+            targetLeafIssueRef={targetLeafIssueRef}
+        />
+    );
 }
 
 function ClusterHealthcheckInner({clusterName}: {clusterName: string}) {
@@ -112,9 +134,15 @@ interface HealthcheckResult {
 function HealthcheckContent({
     healthcheck,
     target,
+    targetIssueId,
+    targetLeafIssueId,
+    targetLeafIssueRef,
 }: {
     healthcheck: HealthcheckResult;
     target: HealthcheckAssistantTarget;
+    targetIssueId?: string;
+    targetLeafIssueId?: string;
+    targetLeafIssueRef?: React.Ref<HTMLDivElement>;
 }) {
     const SuccessImage = getIllustration('SuccessOperation');
     const renderAssistantAction = uiFactory.healthcheck.renderAssistantAction;
@@ -214,7 +242,12 @@ function HealthcheckContent({
             <Flex direction="column" grow={1}>
                 {renderControls()}
                 <Flex direction="column" gap={4} grow={1} className={b('issues')}>
-                    <Issues issues={leavesIssues} />
+                    <Issues
+                        issues={leavesIssues}
+                        targetIssueId={targetIssueId}
+                        targetLeafIssueId={targetLeafIssueId}
+                        targetLeafIssueRef={targetLeafIssueRef}
+                    />
                 </Flex>
             </Flex>
         );