ydb-embedded-ui 20.3.0 → 20.4.0

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

@@ -15,6 +15,7 @@ interface HealthcheckDrawerProps {
     children: React.ReactNode;
     isDrawerVisible: boolean;
     onCloseDrawer: () => void;
+    onTransitionInComplete?: () => void;
     renderDrawerContent: () => React.ReactNode;
     drawerId: string;
     storageKey: string;
@@ -30,6 +31,7 @@ export function HealthcheckDrawer({
     children,
     isDrawerVisible,
     onCloseDrawer,
+    onTransitionInComplete,
     renderDrawerContent,
     drawerId,
     storageKey,
@@ -83,6 +85,7 @@ export function HealthcheckDrawer({
         <DrawerWrapper
             isDrawerVisible={isDrawerVisible}
             onCloseDrawer={onCloseDrawer}
+            onTransitionInComplete={onTransitionInComplete}
             renderDrawerContent={renderDrawerContent}
             drawerId={drawerId}
             storageKey={storageKey}

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

@@ -15,11 +15,19 @@ import {HealthcheckIssueTabs} from './HealthcheckIssueTabs';
 interface HealthcheckIssueProps {
     issue: IssuesTree;
     expanded?: boolean;
+    targeted?: boolean;
+    targetIssueId?: string;
+    targetRef?: React.Ref<HTMLDivElement>;
 }
 
-export function HealthcheckIssue({issue, expanded}: HealthcheckIssueProps) {
+export function HealthcheckIssue({
+    issue,
+    expanded,
+    targeted,
+    targetIssueId,
+    targetRef,
+}: HealthcheckIssueProps) {
     const {assistant} = useHealthcheckContext();
-    const [selectedTab, setSelectedTab] = React.useState(issue.id);
     const parents = React.useMemo(() => {
         const parents = [];
         let current: IssuesTree | undefined = issue;
@@ -29,6 +37,11 @@ export function HealthcheckIssue({issue, expanded}: HealthcheckIssueProps) {
         }
         return parents.reverse();
     }, [issue]);
+    const [selectedTab, setSelectedTab] = React.useState(
+        targetIssueId && parents.some((parentIssue) => parentIssue.id === targetIssueId)
+            ? targetIssueId
+            : issue.id,
+    );
 
     const currentIssue = React.useMemo(() => {
         return parents.find((parent) => parent.id === selectedTab);
@@ -39,8 +52,8 @@ export function HealthcheckIssue({issue, expanded}: HealthcheckIssueProps) {
     );
 
     return (
-        <Flex className={b('issue-wrapper')}>
-            <Disclosure className={b('issue-content')} defaultExpanded={expanded}>
+        <Flex ref={targetRef} className={b('issue-wrapper')} qa={`healthcheck-issue-${issue.id}`}>
+            <Disclosure className={b('issue-content')} defaultExpanded={expanded || targeted}>
                 <Disclosure.Summary>
                     {(props) => {
                         const {

package/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/ComputeLocation.tsx

@@ -13,7 +13,7 @@ import {NodeInfo} from './NodeInfo';
 import {PoolInfo} from './PoolInfo';
 import {IdList, LocationDetails, SectionWithTitle} from './utils';
 
-export type LocationFieldCompute = 'tablet' | 'schema' | 'node' | 'pool' | 'state_storage';
+export type LocationFieldCompute = 'tablet' | 'schema' | 'node' | 'pool' | 'pile' | 'state_storage';
 
 type ComputeLocationType = Location['compute'];
 
@@ -25,6 +25,12 @@ const LocationFieldRenderer: Record<
     pool: (location: ComputeLocationType) => <PoolInfo location={location} key="pool" />,
     tablet: (location: ComputeLocationType) => <TabletInfo location={location} key="tablet" />,
     schema: (location: ComputeLocationType) => <SchemaInfo location={location} key="schema" />,
+    pile: (location: ComputeLocationType) => (
+        <LocationDetails
+            fields={[{value: location?.pile?.name, title: i18n('label_pile')}]}
+            key="pile"
+        />
+    ),
     state_storage: (location: ComputeLocationType) => (
         <StateStorageInfo location={location} key="state_storage" />
     ),
@@ -36,7 +42,7 @@ interface ComputeLocationProps {
 }
 
 export function ComputeLocation({location, hiddenFields = []}: ComputeLocationProps) {
-    const {node, tablet, schema, pool, state_storage: stateStorage} = location ?? {};
+    const {node, tablet, schema, pool, pile, state_storage: stateStorage} = location ?? {};
 
     const fields = React.useMemo(() => {
         const fields: LocationFieldCompute[] = [];
@@ -52,11 +58,14 @@ export function ComputeLocation({location, hiddenFields = []}: ComputeLocationPr
         if (schema) {
             fields.push('schema');
         }
+        if (pile) {
+            fields.push('pile');
+        }
         if (stateStorage) {
             fields.push('state_storage');
         }
         return fields.filter((field) => !hiddenFields.includes(field));
-    }, [node, pool, tablet, schema, stateStorage, hiddenFields]);
+    }, [node, pool, tablet, schema, pile, stateStorage, hiddenFields]);
 
     if (!location || isEmpty(location) || fields.length === 0) {
         return null;
@@ -142,6 +151,7 @@ function StateStorageInfo({location}: ComputeSectionProps) {
                                 : undefined,
                         title: i18n('label_state-storage-ring'),
                     },
+                    {value: stateStorage.pile?.name, title: i18n('label_pile')},
                 ]}
             />
             <NodeInfo node={stateStorage.node} />

package/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/NodeInfo.tsx

@@ -33,6 +33,7 @@ export function NodeInfo({node, title}: NodeInfoProps) {
                 {value: nodeLink, title: i18n('label_node-id')},
                 {value: node.host, title: i18n('label_node-host'), copy: node.host},
                 {value: node.port, title: i18n('label_node-port')},
+                {value: node.pile?.name, title: i18n('label_pile')},
             ]}
         />
     );

package/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx

@@ -81,8 +81,9 @@ function GroupInfo({location}: StorageSectionProps) {
     const {group} = pool ?? {};
 
     const ids = group?.id;
+    const pileName = group?.pile?.name;
 
-    if (!ids?.length) {
+    if (!ids?.length && !pileName) {
         return null;
     }
 
@@ -93,6 +94,7 @@ function GroupInfo({location}: StorageSectionProps) {
                     value: ids?.length ? <IdList ids={ids} /> : undefined,
                     title: i18n('label_group-id'),
                 },
+                {value: pileName, title: i18n('label_pile')},
             ]}
         />
     );

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

@@ -14,9 +14,17 @@ import {HealthcheckIssue} from './HealthcheckIssue';
 
 interface IssuesProps {
     issues: IssuesTree[];
+    targetIssueId?: string;
+    targetLeafIssueId?: string;
+    targetLeafIssueRef?: React.Ref<HTMLDivElement>;
 }
 
-export function Issues({issues}: IssuesProps) {
+export function Issues({
+    issues,
+    targetIssueId,
+    targetLeafIssueId,
+    targetLeafIssueRef,
+}: IssuesProps) {
     const SuccessImage = getIllustration('SuccessOperation');
 
     const {view, issuesFilter} = useTenantQueryParams();
@@ -72,8 +80,13 @@ export function Issues({issues}: IssuesProps) {
     return filteredIssuesCurrentView.map((issue) => (
         <HealthcheckIssue
             issue={issue}
-            key={issue.id + Boolean(issuesFilter)}
+            key={`${issue.id}:${Boolean(issuesFilter)}:${
+                issue.id === targetLeafIssueId ? targetIssueId : ''
+            }`}
             expanded={Boolean(issuesFilter)}
+            targeted={issue.id === targetLeafIssueId}
+            targetIssueId={issue.id === targetLeafIssueId ? targetIssueId : undefined}
+            targetRef={issue.id === targetLeafIssueId ? targetLeafIssueRef : undefined}
         />
     ));
 }

package/src/containers/Tenant/Healthcheck/i18n/en.json

@@ -44,5 +44,6 @@
   "label_pdisk-path": "PDisk Path",
   "label_node_location": "Node Location",
   "label_peer_location": "Peer Node Location",
-  "label_state-storage-ring": "Ring"
+  "label_state-storage-ring": "Ring",
+  "label_pile": "Pile"
 }

package/src/containers/Tenant/Query/SavedQueries/SavedQueries.scss

@@ -15,6 +15,8 @@
 
     @include mixins.flex-container();
 
+    @include mixins.freeze-nth-column(4, 0, 0, 'right');
+
     .data-table__th {
         height: 40px;
     }

package/src/routes.ts

@@ -185,8 +185,14 @@ export const getClusterPath = (
     return createHref(routes.cluster, params, query, options, domain);
 };
 
-export const getTenantPath = (query: TenantQuery, options?: CreateHrefOptions) => {
-    return createHref(routes.tenant, undefined, query, options);
+export interface TenantPathOptions extends CreateHrefOptions {
+    environment?: string;
+}
+
+export const getTenantPath = (query: TenantQuery, options: TenantPathOptions = {}) => {
+    const {environment: routeEnvironment, ...createHrefOptions} = options;
+
+    return createHref(routes.tenant, {environment: routeEnvironment}, query, createHrefOptions);
 };
 
 export const homePageTabSchema = z.enum(['clusters', 'databases']);

package/src/services/api/viewer.ts

@@ -83,12 +83,20 @@ export class ViewerAPI extends BaseYdbAPI {
         );
     }
 
-    getTenants({clusterName}: {clusterName?: string}, {concurrentId, signal}: AxiosOptions = {}) {
+    getTenants(
+        {
+            clusterName,
+            metadataCache,
+            storage = true,
+        }: {clusterName?: string; metadataCache?: boolean; storage?: boolean},
+        {concurrentId, signal}: AxiosOptions = {},
+    ) {
         return this.get<TTenantInfo>(
             this.getPath('/viewer/json/tenantinfo'),
             {
                 tablets: false,
-                storage: true,
+                storage,
+                metadata_cache: metadataCache,
                 cluster_name: clusterName,
             },
             {concurrentId, requestConfig: {signal}},

package/src/store/reducers/cluster/cluster.ts

@@ -177,6 +177,7 @@ export function useClusterBaseInfo() {
         settings: parseSettingsField(data.settings),
         links: parseLinksField(data.links),
 
+        isError,
         isResolved,
     };
 }
@@ -201,7 +202,7 @@ export function useClusterProxySettingResolved() {
 
 type ClusterBaseInfo = ReturnType<typeof useClusterBaseInfo>;
 
-export type ClusterInfo = Omit<ClusterBaseInfo, 'isResolved'>;
+export type ClusterInfo = Omit<ClusterBaseInfo, 'isError' | 'isResolved'>;
 
 const createClusterInfoSelector = createSelector(
     (clusterName?: string) => clusterName,

package/src/store/reducers/healthcheckInfo/types.ts

@@ -4,4 +4,5 @@ export interface IssuesTree extends IssueLog {
     reasonsItems?: IssuesTree[];
     parent?: IssuesTree;
     categoryForUI: string;
+    sourceOrderPath?: number[];
 }

package/src/store/reducers/healthcheckInfo/utils.ts

@@ -23,6 +23,23 @@ export const selfCheckResultToHcStatus: Record<SelfCheckResult, StatusFlag> = {
     [SelfCheckResult.EMERGENCY]: StatusFlag.RED,
 };
 
+export function getHealthcheckIssuePileNames(issue: Pick<IssueLog, 'location'>): string[] {
+    const rawNames = [
+        issue.location?.storage?.pool?.group?.pile?.name,
+        issue.location?.compute?.pile?.name,
+        issue.location?.compute?.state_storage?.pile?.name,
+    ];
+
+    const names = new Set<string>();
+    for (const rawName of rawNames) {
+        if (rawName?.trim()) {
+            names.add(rawName);
+        }
+    }
+
+    return Array.from(names);
+}
+
 // Issue type prefixes that should be routed to the "storage" tab in the UI,
 // covering regular disk issues alongside ring/board/state-storage issues.
 // 'BOARD_' (with underscore) is intentionally narrow to match only BOARD_RING /
@@ -35,6 +52,7 @@ const STORAGE_TAB_PREFIXES = [
     'BOARD_',
     'STATE_STORAGE',
 ];
+const STORAGE_TAB_EXACT_TYPES = new Set(['BOARD']);
 
 // Maps a state-storage summary issue type to the corresponding `_RING` type.
 // Backend reports the summary (BLUE) and the detailed RING/NODE chain as
@@ -50,7 +68,10 @@ export function isStorageRelatedType(type?: string): boolean {
     if (!type) {
         return false;
     }
-    return STORAGE_TAB_PREFIXES.some((prefix) => type.startsWith(prefix));
+    return (
+        STORAGE_TAB_EXACT_TYPES.has(type) ||
+        STORAGE_TAB_PREFIXES.some((prefix) => type.startsWith(prefix))
+    );
 }
 
 export function isComputeRelatedType(type?: string): boolean {
@@ -112,9 +133,18 @@ export function linkStateStorageSummaries(issues: IssueLog[]): IssueLog[] {
 
 function getCategoryForUI(issueType?: string) {
     if (issueType) {
-        for (const category of uiFactory.healthcheck.issueCategories) {
-            if (uiFactory.healthcheck.isIssueTypeOfCategory(issueType, category)) {
-                return category;
+        // Compatibility fallback until HealthCheck links every PILE_* summary to its
+        // *_RING children through reason. Once those links are guaranteed, the branch
+        // category will come from the direct child after the root and this can be removed.
+        const issueTypeVariants = issueType.startsWith('PILE_')
+            ? [issueType, issueType.slice('PILE_'.length)]
+            : [issueType];
+
+        for (const type of issueTypeVariants) {
+            for (const category of uiFactory.healthcheck.issueCategories) {
+                if (uiFactory.healthcheck.isIssueTypeOfCategory(type, category)) {
+                    return category;
+                }
             }
         }
     }
@@ -125,7 +155,7 @@ function getCategoryForUI(issueType?: string) {
 function extendIssue(
     issue: IssueLog,
     rootTypeForUI?: string,
-    fields?: {parent: IssuesTree},
+    fields?: {parent?: IssuesTree; sourceOrderPath?: number[]},
 ): IssuesTree {
     return {
         ...issue,
@@ -136,12 +166,14 @@ function extendIssue(
 
 export function getLeavesFromTree(issues: IssueLog[], root: IssueLog): IssuesTree[] {
     const result: IssuesTree[] = [];
+    const rootSourceIndex = issues.findIndex((issue) => issue.id === root.id);
+    const rootSourceOrderPath = [rootSourceIndex];
 
     if (!root.reason || root.reason.length === 0) {
-        return [extendIssue(root)];
+        return [extendIssue(root, undefined, {sourceOrderPath: rootSourceOrderPath})];
     }
 
-    for (const issueId of root.reason) {
+    for (const [reasonIndex, issueId] of root.reason.entries()) {
         const directChild: IssueLog | undefined = issues.find((issue) => issue.id === issueId);
         if (!directChild) {
             continue;
@@ -157,9 +189,12 @@ export function getLeavesFromTree(issues: IssueLog[], root: IssueLog): IssuesTre
         // standalone card (when it has no `reason` and is not referenced
         // by any other issue) or as a tab in some leaf's breadcrumb. The
         // leaf (issue without `reason`) is the rightmost tab.
-        const rootNode = extendIssue(root, directChildCategory);
+        const rootNode = extendIssue(root, directChildCategory, {
+            sourceOrderPath: rootSourceOrderPath,
+        });
         const initialNode: IssuesTree = extendIssue(directChild, directChildCategory, {
             parent: rootNode,
+            sourceOrderPath: [...rootSourceOrderPath, reasonIndex],
         });
         const stack: IssuesTree[] = [initialNode];
 
@@ -174,12 +209,17 @@ export function getLeavesFromTree(issues: IssueLog[], root: IssueLog): IssuesTre
                 continue;
             }
 
-            for (const reason of currentNode.reason) {
+            for (const [childReasonIndex, reason] of currentNode.reason.entries()) {
                 const child: IssueLog | undefined = issues.find((issue) => issue.id === reason);
                 if (!child) {
                     continue;
                 }
-                stack.push(extendIssue(child, directChildCategory, {parent: currentNode}));
+                stack.push(
+                    extendIssue(child, directChildCategory, {
+                        parent: currentNode,
+                        sourceOrderPath: [...(currentNode.sourceOrderPath ?? []), childReasonIndex],
+                    }),
+                );
             }
         }
     }

package/src/store/reducers/tenants/tenants.ts

@@ -1,7 +1,7 @@
 import type {TTenantInfo} from '../../../types/api/tenant';
 import {api} from '../api';
 
-import type {PreparedTenant} from './types';
+import type {PreparedTenant, SharedDatabaseTarget} from './types';
 import {prepareTenants} from './utils';
 
 export const tenantsApi = api.injectEndpoints({
@@ -49,6 +49,60 @@ export const tenantsApi = api.injectEndpoints({
             },
             providesTags: ['All'],
         }),
+        getSharedDatabase: build.query<
+            SharedDatabaseTarget | null,
+            {
+                backend?: string;
+                clusterName?: string;
+                database?: string;
+                environmentName?: string;
+                isMonitoringAllowed: boolean;
+                needNodeIds?: boolean;
+                resourceId: string;
+            }
+        >({
+            queryFn: async (
+                {clusterName, database, isMonitoringAllowed, needNodeIds, resourceId},
+                {signal},
+            ) => {
+                if (isMonitoringAllowed && database && !needNodeIds) {
+                    try {
+                        const data = await window.api.viewer.getTabletDescribe(
+                            {PathId: resourceId},
+                            database,
+                            {signal},
+                        );
+                        const sharedDatabaseName = data?.Path?.trim();
+
+                        if (sharedDatabaseName) {
+                            return {data: {name: sharedDatabaseName}};
+                        }
+                    } catch (error) {
+                        if (signal.aborted) {
+                            return {error};
+                        }
+                    }
+                }
+
+                try {
+                    const response = await window.api.viewer.getTenants(
+                        {clusterName, metadataCache: false, storage: false},
+                        {signal},
+                    );
+                    const sharedDatabase = response.TenantInfo?.find(({Id}) => Id === resourceId);
+                    const sharedDatabaseName = sharedDatabase?.Name?.trim();
+
+                    return {
+                        data: sharedDatabaseName
+                            ? {name: sharedDatabaseName, nodeIds: sharedDatabase?.NodeIds}
+                            : null,
+                    };
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
     }),
     overrideExisting: 'throw',
 });

package/src/store/reducers/tenants/types.ts

@@ -14,4 +14,9 @@ export interface PreparedTenant extends TTenant {
     groupsCount: number;
 }
 
+export interface SharedDatabaseTarget {
+    name: string;
+    nodeIds?: number[];
+}
+
 export type MetricStatus = ValueOf<typeof METRIC_STATUS>;

package/src/types/api/healthcheck.ts

@@ -17,10 +17,15 @@ export enum StatusFlag {
     RED = 'RED',
 }
 
+interface LocationBridgePile {
+    name?: string;
+}
+
 interface LocationNode {
     id?: number;
     host?: string;
     port?: number;
+    pile?: LocationBridgePile;
 }
 
 interface LocationStoragePDisk {
@@ -36,6 +41,7 @@ interface LocationStorageVDisk {
 interface LocationStorageGroup {
     id?: string[];
     vdisk?: LocationStorageVDisk;
+    pile?: LocationBridgePile;
 }
 
 interface LocationStoragePool {
@@ -66,6 +72,7 @@ interface LocationComputeSchema {
 interface LocationComputeStateStorage {
     node?: LocationNode;
     ring?: number;
+    pile?: LocationBridgePile;
 }
 
 interface LocationCompute {
@@ -73,6 +80,7 @@ interface LocationCompute {
     pool?: LocationComputePool;
     tablet?: LocationComputeTablet;
     schema?: LocationComputeSchema;
+    pile?: LocationBridgePile;
     state_storage?: LocationComputeStateStorage;
 }