fix: pass database to capabilities query

artemmufazalov · artemmufazalov · commit 5f2fa44c7184 · 2024-10-28T18:05:36.000+03:00
diff --git a/src/components/Tablet/Tablet.tsx b/src/components/Tablet/Tablet.tsx
@@ -17,10 +17,10 @@ interface TabletProps {
 }
 
 export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId, Type} = tablet;
+    const {TabletId: id} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath = id && getTabletPagePath(id, {nodeId: NodeId, tenantName, type: Type});
+    const tabletPath = id && getTabletPagePath(id, {database: tenantName});
 
     return (
         <ContentWithPopup
diff --git a/src/components/TabletNameWrapper/TabletNameWrapper.tsx b/src/components/TabletNameWrapper/TabletNameWrapper.tsx
@@ -18,9 +18,7 @@ interface TabletNameWrapperProps {
 export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps) {
     const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
-    const tabletPath = getTabletPagePath(tabletId, {
-        tenantName: database,
-    });
+    const tabletPath = getTabletPagePath(tabletId, {database});
 
     return (
         <CellWithPopover
diff --git a/src/components/TenantNameWrapper/TenantNameWrapper.tsx b/src/components/TenantNameWrapper/TenantNameWrapper.tsx
@@ -66,7 +66,7 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
                 status={tenant.Overall}
                 hasClipboardButton
                 path={getTenantPath({
-                    name: tenant.Name,
+                    database: tenant.Name,
                     backend,
                 })}
             />
diff --git a/src/containers/App/Content.tsx b/src/containers/App/Content.tsx
@@ -12,7 +12,7 @@ import type {SlotComponent} from '../../components/slots/types';
 import routes from '../../routes';
 import type {RootState} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
-import {capabilitiesApi} from '../../store/reducers/capabilities/capabilities';
+import {useCapabilitiesQuery} from '../../store/reducers/capabilities/hooks';
 import {nodesListApi} from '../../store/reducers/nodesList';
 import {cn} from '../../utils/cn';
 import {lazyComponent} from '../../utils/lazyComponent';
@@ -200,7 +200,7 @@ function GetNodesList() {
 }
 
 function GetCapabilities() {
-    capabilitiesApi.useGetClusterCapabilitiesQuery(undefined);
+    useCapabilitiesQuery();
     return null;
 }
 
diff --git a/src/containers/Header/breadcrumbs.tsx b/src/containers/Header/breadcrumbs.tsx
@@ -67,7 +67,7 @@ const getTenantBreadcrumbs: GetBreadcrumbs<TenantBreadcrumbsOptions> = (options,
     const breadcrumbs = getClusterBreadcrumbs(options, query);
 
     const text = tenantName ? prepareTenantName(tenantName) : headerKeyset('breadcrumbs.tenant');
-    const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
+    const link = tenantName ? getTenantPath({...query, database: tenantName}) : undefined;
 
     const lastItem = {text, link, icon: <DatabaseIcon />};
     breadcrumbs.push(lastItem);
@@ -92,7 +92,7 @@ const getNodeBreadcrumbs: GetBreadcrumbs<NodeBreadcrumbsOptions> = (options, que
     const lastItem = {
         text,
         link: nodeId
-            ? getDefaultNodePath(nodeId, {tenantName, ...query}, nodeActiveTab)
+            ? getDefaultNodePath(nodeId, {database: tenantName, ...query}, nodeActiveTab)
             : undefined,
         icon: getNodeIcon(nodeRole),
     };
diff --git a/src/containers/Node/Node.tsx b/src/containers/Node/Node.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 
 import {Tabs} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
-import {Link, useLocation, useRouteMatch} from 'react-router-dom';
+import {Link, useRouteMatch} from 'react-router-dom';
+import {useQueryParams} from 'use-query-params';
 
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
 import {Loader} from '../../components/Loader';
-import routes, {createHref, parseQuery} from '../../routes';
+import routes, {createHref} from '../../routes';
 import {
     useCapabilitiesLoaded,
     useDiskPagesAvailable,
@@ -22,7 +23,7 @@ import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {StorageWrapper} from '../Storage/StorageWrapper';
 import {Tablets} from '../Tablets';
 
-import {NODE_PAGES, OVERVIEW, STORAGE, STRUCTURE, TABLETS} from './NodePages';
+import {NODE_PAGES, OVERVIEW, STORAGE, STRUCTURE, TABLETS, nodePageQueryParams} from './NodePages';
 import NodeStructure from './NodeStructure/NodeStructure';
 
 import './Node.scss';
@@ -40,13 +41,12 @@ export function Node(props: NodeProps) {
     const container = React.useRef<HTMLDivElement>(null);
 
     const dispatch = useTypedDispatch();
-    const location = useLocation();
 
     const match =
         useRouteMatch<{id: string; activeTab: string}>(routes.node) ?? Object.create(null);
 
     const {id: nodeId, activeTab} = match.params;
-    const {tenantName: tenantNameFromQuery} = parseQuery(location);
+    const [{database: tenantNameFromQuery}] = useQueryParams(nodePageQueryParams);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = nodeApi.useGetNodeInfoQuery(
diff --git a/src/containers/Node/NodePages.ts b/src/containers/Node/NodePages.ts
@@ -1,4 +1,6 @@
-import type {Query} from '../../routes';
+import {StringParam} from 'use-query-params';
+
+import type {QueryParamsTypeFromQueryObject} from '../../routes';
 import routes, {createHref} from '../../routes';
 
 export const STORAGE = 'storage';
@@ -27,9 +29,15 @@ export const NODE_PAGES = [
     },
 ];
 
+export const nodePageQueryParams = {
+    database: StringParam,
+};
+
+type NodePageQuery = QueryParamsTypeFromQueryObject<typeof nodePageQueryParams>;
+
 export function getDefaultNodePath(
     nodeId: string | number,
-    query: Query = {},
+    query: NodePageQuery = {},
     activeTab: NodeTab = OVERVIEW,
 ) {
     return createHref(
diff --git a/src/containers/Tablet/Tablet.tsx b/src/containers/Tablet/Tablet.tsx
@@ -4,7 +4,7 @@ import {Flex, Tabs} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
 import {useParams} from 'react-router-dom';
-import {StringParam, useQueryParams} from 'use-query-params';
+import {useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
 import {EmptyStateWrapper} from '../../components/EmptyState';
@@ -13,7 +13,7 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {InternalLink} from '../../components/InternalLink';
 import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
-import {getTabletPagePath} from '../../routes';
+import {getTabletPagePath, tabletPageQueryParams} from '../../routes';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {tabletApi} from '../../store/reducers/tablet';
@@ -58,19 +58,13 @@ const TABLET_PAGE_TABS = [
 
 const tabletTabSchema = z.nativeEnum(TABLET_TABS_IDS).catch(TABLET_TABS_IDS.history);
 
-const tabletQueryParams = {
-    tenantName: StringParam,
-    clusterName: StringParam,
-    activeTab: StringParam,
-};
-
 export function Tablet() {
     const dispatch = useTypedDispatch();
 
     const {id} = useParams<{id: string}>();
 
-    const [{tenantName: queryDatabase, clusterName: queryClusterName}] =
-        useQueryParams(tabletQueryParams);
+    const [{database: queryDatabase, clusterName: queryClusterName}] =
+        useQueryParams(tabletPageQueryParams);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tabletApi.useGetTabletQuery(
@@ -168,7 +162,7 @@ function TabletTabs({
     hiveId?: string;
     history: ITabletPreparedHistoryItem[];
 }) {
-    const [{activeTab, ...restParams}, setParams] = useQueryParams(tabletQueryParams);
+    const [{activeTab, ...restParams}, setParams] = useQueryParams(tabletPageQueryParams);
     const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
     const noAdvancedInfo = !isUserAllowedToMakeChanges || !hasHive(hiveId);
diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
@@ -55,7 +55,7 @@ function Diagnostics(props: DiagnosticsProps) {
     );
 
     const [queryParams] = useQueryParams({
-        name: StringParam,
+        database: StringParam,
         schema: StringParam,
         backend: StringParam,
         clusterName: StringParam,
diff --git a/src/containers/Tenant/Tenant.tsx b/src/containers/Tenant/Tenant.tsx
@@ -48,7 +48,21 @@ export function Tenant(props: TenantProps) {
         getTenantSummaryState,
     );
 
-    const [{name: tenantName, schema}] = useQueryParams({name: StringParam, schema: StringParam});
+    // TODO: name is used together with database to keep old links valid
+    // Remove it after some time - 1-2 weeks
+    const [{database, name, schema}, setQuery] = useQueryParams({
+        database: StringParam,
+        name: StringParam,
+        schema: StringParam,
+    });
+
+    React.useEffect(() => {
+        if (name && !database) {
+            setQuery({database: name, name: undefined}, 'replaceIn');
+        }
+    }, [database, name, setQuery]);
+
+    const tenantName = database ?? name;
 
     if (!tenantName) {
         throw new Error('Tenant name is not defined');
diff --git a/src/containers/Tenant/TenantPages.tsx b/src/containers/Tenant/TenantPages.tsx
@@ -8,6 +8,7 @@ type TenantQueryParams = {
 };
 
 type AdditionalQueryParams = {
+    database?: string;
     name?: string;
     backend?: string;
 };
diff --git a/src/routes.ts b/src/routes.ts
@@ -2,6 +2,8 @@ import type {Location} from 'history';
 import isEmpty from 'lodash/isEmpty';
 import {compile} from 'path-to-regexp';
 import qs from 'qs';
+import type {QueryParamConfig} from 'use-query-params';
+import {StringParam} from 'use-query-params';
 
 import {backend, clusterName, webVersion} from './store';
 
@@ -91,6 +93,13 @@ export function getLocationObjectFromHref(href: string) {
     return {pathname, search, hash};
 }
 
+// ==== Get page path functions ====
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type QueryParamsTypeFromQueryObject<T extends Record<string, QueryParamConfig<any, any>>> = {
+    [QueryParamName in keyof T]?: Parameters<T[QueryParamName]['encode']>[0];
+};
+
 export function getPDiskPagePath(
     pDiskId: string | number,
     nodeId: string | number,
@@ -112,6 +121,14 @@ export function getStorageGroupPath(groupId: string | number, query: Query = {})
     return createHref(routes.storageGroup, undefined, {...query, groupId});
 }
 
-export function getTabletPagePath(tabletId: string | number, query: Query = {}) {
+export const tabletPageQueryParams = {
+    database: StringParam,
+    clusterName: StringParam,
+    activeTab: StringParam,
+} as const;
+
+export type TabletPageQuery = QueryParamsTypeFromQueryObject<typeof tabletPageQueryParams>;
+
+export function getTabletPagePath(tabletId: string | number, query: TabletPageQuery = {}) {
     return createHref(routes.tablet, {id: tabletId}, {...query});
 }
diff --git a/src/services/api.ts b/src/services/api.ts
@@ -142,8 +142,8 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         return arr.join(',');
     }
 
-    getClusterCapabilities() {
-        return this.get<CapabilitiesResponse>(this.getPath('/viewer/capabilities'), {}, {});
+    getClusterCapabilities({database}: {database?: string}) {
+        return this.get<CapabilitiesResponse>(this.getPath('/viewer/capabilities'), {database}, {});
     }
     getClusterInfo(clusterName?: string, {concurrentId, signal}: AxiosOptions = {}) {
         return this.get<TClusterInfo>(
diff --git a/src/store/reducers/capabilities/capabilities.ts b/src/store/reducers/capabilities/capabilities.ts
@@ -8,9 +8,9 @@ import {api} from './../api';
 export const capabilitiesApi = api.injectEndpoints({
     endpoints: (build) => ({
         getClusterCapabilities: build.query({
-            queryFn: async () => {
+            queryFn: async (params: {database?: string}) => {
                 try {
-                    const data = await window.api.getClusterCapabilities();
+                    const data = await window.api.getClusterCapabilities(params);
                     return {data};
                 } catch (error) {
                     // If capabilities endpoint is not available, there will be an error
@@ -23,20 +23,26 @@ export const capabilitiesApi = api.injectEndpoints({
     overrideExisting: 'throw',
 });
 
-export const selectCapabilities =
-    capabilitiesApi.endpoints.getClusterCapabilities.select(undefined);
+const createCapabilitiesSelector = createSelector(
+    (database?: string) => database,
+    (database) => capabilitiesApi.endpoints.getClusterCapabilities.select({database}),
+);
 
 export const selectCapabilityVersion = createSelector(
     (state: RootState) => state,
     (_state: RootState, capability: Capability) => capability,
-    (state, capability) => selectCapabilities(state).data?.Capabilities?.[capability],
+    (_state: RootState, _capability: Capability, database?: string) =>
+        createCapabilitiesSelector(database),
+    (state, capability, selectCapabilities) =>
+        selectCapabilities(state).data?.Capabilities?.[capability],
 );
 
 export async function queryCapability(
     capability: Capability,
+    database: string | undefined,
     {dispatch, getState}: {dispatch: AppDispatch; getState: () => RootState},
 ) {
-    const thunk = capabilitiesApi.util.getRunningQueryThunk('getClusterCapabilities', undefined);
+    const thunk = capabilitiesApi.util.getRunningQueryThunk('getClusterCapabilities', {database});
     await dispatch(thunk);
 
     return selectCapabilityVersion(getState(), capability) || 0;
diff --git a/src/store/reducers/capabilities/hooks.ts b/src/store/reducers/capabilities/hooks.ts
@@ -1,16 +1,30 @@
+import {StringParam, useQueryParam} from 'use-query-params';
+
 import type {Capability} from '../../../types/api/capabilities';
 import {useTypedSelector} from '../../../utils/hooks';
 
 import {capabilitiesApi, selectCapabilityVersion} from './capabilities';
 
+export function useCapabilitiesQuery() {
+    const [database] = useQueryParam('database', StringParam);
+
+    return capabilitiesApi.useGetClusterCapabilitiesQuery({
+        database: database ?? undefined,
+    });
+}
+
 export function useCapabilitiesLoaded() {
-    const {data, error} = capabilitiesApi.useGetClusterCapabilitiesQuery(undefined);
+    const {currentData, error} = useCapabilitiesQuery();
 
-    return Boolean(data || error);
+    return Boolean(currentData || error);
 }
 
 const useGetFeatureVersion = (feature: Capability) => {
-    return useTypedSelector((state) => selectCapabilityVersion(state, feature) || 0);
+    const [database] = useQueryParam('database', StringParam);
+
+    return useTypedSelector(
+        (state) => selectCapabilityVersion(state, feature, database ?? undefined) || 0,
+    );
 };
 
 export const useCreateDirectoryFeatureAvailable = () => {
diff --git a/src/store/reducers/pdisk/pdisk.ts b/src/store/reducers/pdisk/pdisk.ts
@@ -15,7 +15,7 @@ export const pDiskApi = api.injectEndpoints({
     endpoints: (build) => ({
         getPdiskInfo: build.query({
             queryFn: async ({nodeId, pDiskId}: PDiskParams, {signal, getState, dispatch}) => {
-                const pDiskInfoHandlerVersion = await queryCapability('/pdisk/info', {
+                const pDiskInfoHandlerVersion = await queryCapability('/pdisk/info', undefined, {
                     getState: getState as GetState,
                     dispatch,
                 });
