feat: support meta/databases handler

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -4,6 +4,7 @@ import NiceModal from '@ebay/nice-modal-react';
 import {Dialog, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 
+import {useDatabasesAvailable} from '../../store/reducers/capabilities/hooks';
 import {tenantApi} from '../../store/reducers/tenant/tenant';
 import {cn} from '../../utils/cn';
 import {useTypedSelector} from '../../utils/hooks';
@@ -48,11 +49,15 @@ function ConnectToDBDialog({
     const clusterName = useClusterNameFromQuery();
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
 
+    const isMetaDatabasesAvailable = useDatabasesAvailable();
+
     // If there is endpoint from props, we don't need to request tenant data
     // Also we should not request tenant data if we are in single cluster mode
     // Since there is no ControlPlane data in this case
     const shouldRequestTenantData = database && !endpointFromProps && !singleClusterMode;
-    const params = shouldRequestTenantData ? {path: database, clusterName} : skipToken;
+    const params = shouldRequestTenantData
+        ? {path: database, clusterName, isMetaDatabasesAvailable}
+        : skipToken;
     const {currentData: tenantData, isLoading: isTenantDataLoading} =
         tenantApi.useGetTenantInfoQuery(params);
     const endpoint = endpointFromProps ?? tenantData?.ControlPlane?.endpoint;

src/containers/Header/Header.tsx

@@ -17,6 +17,7 @@ import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDial
 import {InternalLink} from '../../components/InternalLink';
 import {
     useAddClusterFeatureAvailable,
+    useDatabasesAvailable,
     useDeleteDatabaseFeatureAvailable,
     useEditDatabaseFeatureAvailable,
 } from '../../store/reducers/capabilities/hooks';
@@ -50,6 +51,8 @@ function Header() {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const isViewerUser = useIsViewerUser();
 
+    const isMetaDatabasesAvailable = useDatabasesAvailable();
+
     const {title: clusterTitle} = useClusterBaseInfo();
 
     const database = useDatabaseFromQuery();
@@ -71,7 +74,9 @@ function Header() {
     const shouldRequestTenantData =
         database && isDatabasePage && (isEditDBAvailable || isDeleteDBAvailable);
 
-    const params = shouldRequestTenantData ? {path: database, clusterName} : skipToken;
+    const params = shouldRequestTenantData
+        ? {path: database, clusterName, isMetaDatabasesAvailable}
+        : skipToken;
 
     const {currentData: databaseData, isLoading: isDatabaseDataLoading} =
         tenantApi.useGetTenantInfoQuery(params);

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -50,7 +50,6 @@ const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
     const {path, database, type, subType} = useCurrentSchema();
-    const {controlPlane} = useTenantBaseInfo(path);
     const containerRef = React.useRef<HTMLDivElement>(null);
     const dispatch = useTypedDispatch();
     const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
@@ -61,6 +60,8 @@ function Diagnostics(props: DiagnosticsProps) {
 
     const tenantName = isDatabaseEntityType(type) ? path : database;
 
+    const {controlPlane} = useTenantBaseInfo(isDatabaseEntityType(type) ? path : '');
+
     const hasFeatureFlags = useFeatureFlagsAvailable();
     const hasTopicData = useTopicDataAvailable();
     const isViewerUser = useIsViewerUser();

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -3,6 +3,7 @@ import {Button, Flex, Icon} from '@gravity-ui/uikit';
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
 import {QueriesActivityBar} from '../../../../components/QueriesActivityBar/QueriesActivityBar';
+import {useDatabasesAvailable} from '../../../../store/reducers/capabilities/hooks';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
 import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {tenantApi} from '../../../../store/reducers/tenant/tenant';
@@ -39,8 +40,10 @@ export function TenantOverview({
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const clusterName = useClusterNameFromQuery();
 
+    const isMetaDatabasesAvailable = useDatabasesAvailable();
+
     const {currentData: tenant, isFetching} = tenantApi.useGetTenantInfoQuery(
-        {path: tenantName, clusterName},
+        {path: tenantName, clusterName, isMetaDatabasesAvailable},
         {pollingInterval: autoRefreshInterval},
     );
     const tenantLoading = isFetching && tenant === undefined;

src/containers/Tenant/Tenant.tsx

@@ -8,6 +8,7 @@ import SplitPane from '../../components/SplitPane';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {overviewApi} from '../../store/reducers/overview/overview';
 import {selectSchemaObjectData} from '../../store/reducers/schema/schema';
+import {useTenantBaseInfo} from '../../store/reducers/tenant/tenant';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
@@ -55,6 +56,8 @@ export function Tenant(props: TenantProps) {
 
     const {database, schema} = useTenantQueryParams();
 
+    const {controlPlane, name} = useTenantBaseInfo(database ?? '');
+
     if (!database) {
         throw new Error('Tenant name is not defined');
     }
@@ -73,11 +76,6 @@ export function Tenant(props: TenantProps) {
         }
     }, [database]);
 
-    const dispatch = useTypedDispatch();
-    React.useEffect(() => {
-        dispatch(setHeaderBreadcrumbs('tenant', {tenantName: database}));
-    }, [database, dispatch]);
-
     const path = schema ?? database;
 
     const {
@@ -86,6 +84,13 @@ export function Tenant(props: TenantProps) {
         isLoading,
     } = overviewApi.useGetOverviewQuery({path, database: database});
 
+    const databaseName = name ?? controlPlane?.name ?? database;
+
+    const dispatch = useTypedDispatch();
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('tenant', {tenantName: databaseName}));
+    }, [databaseName, dispatch]);
+
     const preloadedData = useTypedSelector((state) =>
         selectSchemaObjectData(state, path, database),
     );

src/containers/Tenant/useTenantQueryParams.ts

@@ -18,7 +18,7 @@ export function useTenantQueryParams() {
     });
     const handleShowHealthcheckChange = React.useCallback(
         (value?: boolean) => {
-            setQueryParams({showHealthcheck: value}, 'replaceIn');
+            setQueryParams({showHealthcheck: value || undefined}, 'replaceIn');
         },
         [setQueryParams],
     );
@@ -56,7 +56,7 @@ export function useTenantQueryParams() {
     );
     const handleHealthcheckViewChange = React.useCallback(
         (value?: string) => {
-            setQueryParams({view: value || undefined}, 'replaceIn');
+            setQueryParams({view: value}, 'replaceIn');
         },
         [setQueryParams],
     );

src/containers/Tenants/Tenants.tsx

@@ -17,6 +17,7 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/
 import {TenantNameWrapper} from '../../components/TenantNameWrapper/TenantNameWrapper';
 import {
     useCreateDatabaseFeatureAvailable,
+    useDatabasesAvailable,
     useDeleteDatabaseFeatureAvailable,
     useEditDatabaseFeatureAvailable,
 } from '../../store/reducers/capabilities/hooks';
@@ -73,10 +74,10 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
     const dispatch = useTypedDispatch();
 
     const clusterName = useClusterNameFromQuery();
-
+    const isMetaDatabasesAvailable = useDatabasesAvailable();
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tenantsApi.useGetTenantsInfoQuery(
-        {clusterName},
+        {clusterName, isMetaDatabasesAvailable},
         {pollingInterval: autoRefreshInterval},
     );
     const loading = isFetching && currentData === undefined;

src/services/api/meta.ts

@@ -12,7 +12,7 @@ import type {AxiosOptions} from './base';
 import {BaseYdbAPI} from './base';
 
 export class MetaAPI extends BaseYdbAPI {
-    getPath(path: string) {
+    getPath(path: string, _clusterName?: string) {
         return `${META_BACKEND ?? ''}${path}`;
     }
 
@@ -31,14 +31,33 @@ export class MetaAPI extends BaseYdbAPI {
     }
 
     getTenants(
-        {clusterName, databaseName}: {clusterName?: string; databaseName?: string},
+        {
+            clusterName,
+            databaseName,
+            database,
+        }: {clusterName?: string; databaseName?: string; database?: string},
         {signal}: AxiosOptions = {},
     ) {
         return this.get<MetaTenants>(
-            this.getPath('/meta/cp_databases'),
+            this.getPath('/meta/cp_databases', clusterName),
             {
                 cluster_name: clusterName,
                 database_name: databaseName,
+                database,
+            },
+            {requestConfig: {signal}},
+        ).then(parseMetaTenants);
+    }
+
+    getTenantsV2(
+        {clusterName, database}: {clusterName?: string; database?: string},
+        {signal}: AxiosOptions = {},
+    ) {
+        return this.get<MetaTenants>(
+            this.getPath('/meta/databases', clusterName),
+            {
+                cluster_name: clusterName,
+                database,
             },
             {requestConfig: {signal}},
         ).then(parseMetaTenants);
@@ -49,7 +68,7 @@ export class MetaAPI extends BaseYdbAPI {
         {concurrentId, signal}: AxiosOptions = {},
     ): Promise<MetaBaseClusterInfo> {
         return this.get<MetaBaseClusters>(
-            this.getPath('/meta/db_clusters'),
+            this.getPath('/meta/db_clusters', clusterName),
             {
                 name: clusterName,
             },

src/store/reducers/capabilities/hooks.ts

@@ -161,3 +161,7 @@ export const useDeleteClusterFeatureAvailable = () => {
 export const useClusterEventsAvailable = () => {
     return useGetMetaFeatureVersion('/meta/events') >= 1;
 };
+
+export const useDatabasesAvailable = () => {
+    return useGetMetaFeatureVersion('/meta/databases') >= 1;
+};

src/store/reducers/tenant/tenant.ts

@@ -6,6 +6,7 @@ import type {TTenantInfo} from '../../../types/api/tenant';
 import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
 import {useClusterNameFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
 import {api} from '../api';
+import {useDatabasesAvailable} from '../capabilities/hooks';
 import {prepareTenants} from '../tenants/utils';
 
 import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_METRICS_TABS_IDS} from './constants';
@@ -62,12 +63,25 @@ export const tenantApi = api.injectEndpoints({
     endpoints: (builder) => ({
         getTenantInfo: builder.query({
             queryFn: async (
-                {path, clusterName}: {path: string; clusterName?: string},
+                {
+                    path,
+                    clusterName,
+                    isMetaDatabasesAvailable,
+                }: {
+                    path: string;
+                    clusterName?: string;
+                    isMetaDatabasesAvailable: boolean;
+                },
                 {signal},
             ) => {
                 try {
                     let tenantData: TTenantInfo;
-                    if (window.api.meta && clusterName) {
+                    if (window.api.meta && clusterName && isMetaDatabasesAvailable) {
+                        tenantData = await window.api.meta.getTenantsV2(
+                            {database: path, clusterName},
+                            {signal},
+                        );
+                    } else if (window.api.meta && clusterName) {
                         tenantData = await window.api.meta.getTenants(
                             {databaseName: path, clusterName},
                             {signal},
@@ -85,7 +99,12 @@ export const tenantApi = api.injectEndpoints({
                 }
             },
             providesTags: ['All'],
+            serializeQueryArgs: ({queryArgs}) => {
+                const {clusterName, path} = queryArgs;
+                return {clusterName, path};
+            },
         }),
+
         getClusterConfig: builder.query({
             queryFn: async ({database}: {database: string}, {signal}) => {
                 try {
@@ -105,15 +124,21 @@ export const tenantApi = api.injectEndpoints({
 
 export function useTenantBaseInfo(path: string) {
     const clusterNameFromQuery = useClusterNameFromQuery();
+    const isMetaDatabasesAvailable = useDatabasesAvailable();
 
-    const {currentData} = tenantApi.useGetTenantInfoQuery({
-        path,
-        clusterName: clusterNameFromQuery,
-    });
+    const {currentData} = tenantApi.useGetTenantInfoQuery(
+        {
+            path,
+            clusterName: clusterNameFromQuery,
+            isMetaDatabasesAvailable,
+        },
+        {skip: !path},
+    );
 
-    const {ControlPlane} = currentData || {};
+    const {ControlPlane, Name} = currentData || {};
 
     return {
         controlPlane: ControlPlane,
+        name: Name,
     };
 }

src/store/reducers/tenants/tenants.ts

@@ -1,6 +1,7 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
+import type {TTenantInfo} from '../../../types/api/tenant';
 import {api} from '../api';
 
 import type {PreparedTenant, TenantsState} from './types';
@@ -24,11 +25,23 @@ export default slice.reducer;
 export const tenantsApi = api.injectEndpoints({
     endpoints: (build) => ({
         getTenantsInfo: build.query({
-            queryFn: async ({clusterName}: {clusterName?: string}, {signal}) => {
+            queryFn: async (
+                {
+                    clusterName,
+                    isMetaDatabasesAvailable,
+                }: {clusterName?: string; isMetaDatabasesAvailable?: boolean},
+                {signal},
+            ) => {
                 try {
-                    const response = window.api.meta
-                        ? await window.api.meta.getTenants({clusterName}, {signal})
-                        : await window.api.viewer.getTenants({clusterName}, {signal});
+                    let response: TTenantInfo;
+
+                    if (isMetaDatabasesAvailable && window.api.meta) {
+                        response = await window.api.meta.getTenantsV2({clusterName}, {signal});
+                    } else if (window.api.meta) {
+                        response = await window.api.meta.getTenants({clusterName}, {signal});
+                    } else {
+                        response = await window.api.viewer.getTenants({clusterName}, {signal});
+                    }
                     let data: PreparedTenant[];
                     if (Array.isArray(response.TenantInfo)) {
                         data = prepareTenants(response.TenantInfo);
@@ -40,6 +53,10 @@ export const tenantsApi = api.injectEndpoints({
                     return {error};
                 }
             },
+            serializeQueryArgs: ({queryArgs}) => {
+                const {clusterName} = queryArgs;
+                return {clusterName};
+            },
             providesTags: ['All'],
         }),
     }),

src/types/api/capabilities.ts

@@ -50,4 +50,5 @@ export type MetaCapability =
     | '/meta/create_cluster'
     | '/meta/update_cluster'
     | '/meta/delete_cluster'
-    | '/meta/events';
+    | '/meta/events'
+    | '/meta/databases';