feat(schema): use rtk-query (#948)

ydb-platform · Jun 27, 2024 · 524e815 · 524e815
1 parent 6161d97
commit 524e815
Show file tree

Hide file tree

Showing 38 changed files with 353 additions and 560 deletions.
diff --git a/src/containers/Tenant/Acl/Acl.tsx b/src/containers/Tenant/Acl/Acl.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import type {Column} from '@gravity-ui/react-data-table';
-import {skipToken} from '@reduxjs/toolkit/query';
 
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {Loader} from '../../../components/Loader';
@@ -10,7 +9,6 @@ import {schemaAclApi} from '../../../store/reducers/schemaAcl/schemaAcl';
 import type {TACE} from '../../../types/api/acl';
 import {cn} from '../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {useTypedSelector} from '../../../utils/hooks';
 import i18n from '../i18n';
 
 import './Acl.scss';
@@ -71,11 +69,8 @@ const columns: Column<TACE>[] = [
     },
 ];
 
-export const Acl = () => {
-    const {currentSchemaPath} = useTypedSelector((state) => state.schema);
-    const {currentData, isFetching, error} = schemaAclApi.useGetSchemaAclQuery(
-        currentSchemaPath ? {path: currentSchemaPath} : skipToken,
-    );
+export const Acl = ({path}: {path: string}) => {
+    const {currentData, isFetching, error} = schemaAclApi.useGetSchemaAclQuery({path});
 
     const loading = isFetching && !currentData;
     const {acl, owner} = currentData || {};

diff --git a/src/containers/Tenant/Diagnostics/Describe/Describe.tsx b/src/containers/Tenant/Diagnostics/Describe/Describe.tsx
@@ -20,22 +20,20 @@ const b = cn('kv-describe');
 const expandMap = new Map();
 
 interface IDescribeProps {
-    tenant: string;
+    path: string;
     type?: EPathType;
 }
 
-const Describe = ({tenant, type}: IDescribeProps) => {
+const Describe = ({path, type}: IDescribeProps) => {
     const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
-    const {currentSchemaPath} = useTypedSelector((state) => state.schema);
 
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
 
     const mergedChildrenPaths = useTypedSelector(
-        (state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type),
+        (state) => selectSchemaMergedChildrenPaths(state, path, type),
         shallowEqual,
     );
 
-    const path = currentSchemaPath || tenant;
     let paths: string[] | typeof skipToken = skipToken;
     if (!isEntityWithMergedImpl) {
         paths = [path];

diff --git a/src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx b/src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx
@@ -1,5 +1,3 @@
-import {useSelector} from 'react-redux';
-
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../../types/additionalProps';
 import type {EPathType} from '../../../../types/api/schema';
 import {cn} from '../../../../utils/cn';
@@ -12,16 +10,15 @@ interface DetailedOverviewProps {
     type?: EPathType;
     className?: string;
     tenantName: string;
+    path: string;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
 
 const b = cn('kv-detailed-overview');
 
 function DetailedOverview(props: DetailedOverviewProps) {
-    const {type, tenantName, additionalTenantProps, additionalNodesProps} = props;
-
-    const {currentSchemaPath} = useSelector((state: any) => state.schema);
+    const {type, tenantName, path, additionalTenantProps, additionalNodesProps} = props;
 
     const renderTenantOverview = () => {
         return (
@@ -35,11 +32,11 @@ function DetailedOverview(props: DetailedOverviewProps) {
         );
     };
 
-    const isTenant = tenantName === currentSchemaPath;
+    const isTenant = tenantName === path;
 
     return (
         <div className={b()}>
-            {isTenant ? renderTenantOverview() : <Overview type={type} tenantName={tenantName} />}
+            {isTenant ? renderTenantOverview() : <Overview type={type} path={path} />}
         </div>
     );
 }

diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
@@ -5,11 +5,9 @@ import {Helmet} from 'react-helmet-async';
 import {Link} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
-import {Loader} from '../../../components/Loader';
 import routes, {createHref} from '../../../routes';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
-import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
 import type {EPathType} from '../../../types/api/schema';
 import {cn} from '../../../utils/cn';
@@ -37,6 +35,8 @@ import './Diagnostics.scss';
 
 interface DiagnosticsProps {
     type?: EPathType;
+    tenantName: string;
+    path: string;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
@@ -47,115 +47,88 @@ function Diagnostics(props: DiagnosticsProps) {
     const container = React.useRef<HTMLDivElement>(null);
 
     const dispatch = useTypedDispatch();
-    const {currentSchemaPath, wasLoaded} = useTypedSelector((state) => state.schema);
     const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
         (state) => state.tenant,
     );
 
     const [queryParams] = useQueryParams({
         name: StringParam,
+        schema: StringParam,
         backend: StringParam,
         clusterName: StringParam,
     });
 
-    const {name: rootTenantName} = queryParams;
-    const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;
-    const isDatabase = isDatabaseEntityType(props.type) || currentSchemaPath === rootTenantName;
+    const tenantName = isDatabaseEntityType(props.type) ? props.path : props.tenantName;
+    const isDatabase = isDatabaseEntityType(props.type) || props.path === props.tenantName;
 
-    const pages = React.useMemo(() => {
-        if (isDatabase) {
-            return DATABASE_PAGES;
-        }
-
-        return getPagesByType(props.type);
-    }, [props.type, isDatabase]);
+    const pages = isDatabase ? DATABASE_PAGES : getPagesByType(props.type);
+    let activeTab = pages.find((el) => el.id === diagnosticsTab);
+    if (!activeTab) {
+        activeTab = pages[0];
+    }
 
-    const forwardToDiagnosticTab = (tab: TenantDiagnosticsTab) => {
-        dispatch(setDiagnosticsTab(tab));
-    };
-    const activeTab = React.useMemo(() => {
-        if (wasLoaded) {
-            let page = pages.find((el) => el.id === diagnosticsTab);
-            if (!page) {
-                page = pages[0];
-            }
-            if (page && page.id !== diagnosticsTab) {
-                forwardToDiagnosticTab(page.id);
-            }
-            return page;
+    React.useEffect(() => {
+        if (activeTab && activeTab.id !== diagnosticsTab) {
+            dispatch(setDiagnosticsTab(activeTab.id));
         }
-        return undefined;
-    }, [pages, diagnosticsTab, wasLoaded]);
+    }, [activeTab, diagnosticsTab, dispatch]);
 
     const renderTabContent = () => {
-        const {type} = props;
-
-        const tenantNameString = tenantName as string;
+        const {type, path} = props;
 
         switch (activeTab?.id) {
             case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
                 return (
                     <DetailedOverview
                         type={type}
-                        tenantName={tenantNameString}
+                        tenantName={tenantName}
+                        path={path}
                         additionalTenantProps={props.additionalTenantProps}
                         additionalNodesProps={props.additionalNodesProps}
                     />
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
-                return (
-                    <SchemaViewer
-                        path={currentSchemaPath}
-                        tenantName={tenantName}
-                        type={type}
-                        extended
-                    />
-                );
+                return <SchemaViewer path={path} tenantName={tenantName} type={type} extended />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
-                return <TopQueries path={tenantNameString} type={type} />;
+                return <TopQueries tenantName={tenantName} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
-                return <TopShards tenantPath={tenantNameString} type={type} />;
+                return <TopShards tenantName={tenantName} path={path} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
                 return (
                     <NodesWrapper
-                        path={currentSchemaPath}
+                        path={path}
                         additionalNodesProps={props.additionalNodesProps}
                         parentContainer={container.current}
                     />
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
-                return <Tablets path={currentSchemaPath} />;
+                return <Tablets path={path} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
-                return (
-                    <StorageWrapper tenant={tenantNameString} parentContainer={container.current} />
-                );
+                return <StorageWrapper tenant={tenantName} parentContainer={container.current} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.network: {
-                return <Network path={tenantNameString} />;
+                return <Network tenantName={tenantName} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
-                return <Describe tenant={tenantNameString} type={type} />;
+                return <Describe path={path} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
-                // @ts-expect-error
-                return <HotKeys path={currentSchemaPath} />;
+                return <HotKeys path={path} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
-                // @ts-expect-error
-                return <Heatmap path={currentSchemaPath} />;
+                return <Heatmap path={path} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
-                // @ts-expect-error
-                return <Consumers path={currentSchemaPath} type={type} />;
+                return <Consumers path={path} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
-                return <Partitions path={currentSchemaPath} />;
+                return <Partitions path={path} />;
             }
             default: {
                 return <div>No data...</div>;
@@ -169,7 +142,7 @@ function Diagnostics(props: DiagnosticsProps) {
                     <Tabs
                         size="l"
                         items={pages}
-                        activeTab={activeTab?.id as string}
+                        activeTab={activeTab?.id}
                         wrapTo={({id}, node) => {
                             const path = createHref(routes.tenant, undefined, {
                                 ...queryParams,
@@ -190,13 +163,6 @@ function Diagnostics(props: DiagnosticsProps) {
         );
     };
 
-    // Loader prevents incorrect loading of tabs
-    // After tabs are initially loaded it is no longer needed
-    // Thus there is no also "loading" check as in other parts of the project
-    if (!wasLoaded) {
-        return <Loader size="l" />;
-    }
-
     return (
         <div className={b()} ref={container}>
             {activeTab ? (

diff --git a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx
@@ -8,10 +8,11 @@ import {Button, Card, Icon} from '@gravity-ui/uikit';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {hotKeysApi} from '../../../../store/reducers/hotKeys/hotKeys';
+import {schemaApi} from '../../../../store/reducers/schema/schema';
 import type {HotKey} from '../../../../types/api/hotkeys';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS, IS_HOTKEYS_HELP_HIDDDEN_KEY} from '../../../../utils/constants';
-import {useSetting, useTypedSelector} from '../../../../utils/hooks';
+import {useSetting} from '../../../../utils/hooks';
 
 import i18n from './i18n';
 
@@ -60,9 +61,11 @@ export function HotKeys({path}: HotKeysProps) {
     const {currentData: data, isFetching, error} = hotKeysApi.useGetHotKeysQuery({path});
     const loading = isFetching && data === undefined;
 
-    const {loading: schemaLoading, data: schemaData} = useTypedSelector((state) => state.schema);
+    const {currentData: schemaData, isFetching: schemaIsFetching} =
+        schemaApi.endpoints.getSchema.useQueryState({path});
+    const schemaLoading = schemaIsFetching && schemaData === undefined;
 
-    const keyColumnsIds = schemaData[path]?.PathDescription?.Table?.KeyColumnNames;
+    const keyColumnsIds = schemaData?.PathDescription?.Table?.KeyColumnNames;
 
     const tableColumns = React.useMemo(() => {
         return getHotKeysColumns(keyColumnsIds);

diff --git a/src/containers/Tenant/Diagnostics/Network/Network.tsx b/src/containers/Tenant/Diagnostics/Network/Network.tsx
@@ -29,9 +29,9 @@ import './Network.scss';
 const b = cn('network');
 
 interface NetworkProps {
-    path: string;
+    tenantName: string;
 }
-export function Network({path}: NetworkProps) {
+export function Network({tenantName}: NetworkProps) {
     const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
     const filter = useTypedSelector(selectProblemFilter);
     const dispatch = useTypedDispatch();
@@ -40,7 +40,7 @@ export function Network({path}: NetworkProps) {
     const [showId, setShowId] = React.useState(false);
     const [showRacks, setShowRacks] = React.useState(false);
 
-    const {currentData, isFetching, error} = networkApi.useGetNetworkInfoQuery(path, {
+    const {currentData, isFetching, error} = networkApi.useGetNetworkInfoQuery(tenantName, {
         pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;

diff --git a/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/AsyncReplicationInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/AsyncReplicationInfo.tsx
@@ -3,7 +3,6 @@ import {Flex, Text} from '@gravity-ui/uikit';
 import {AsyncReplicationState} from '../../../../../components/AsyncReplicationState';
 import {InfoViewer} from '../../../../../components/InfoViewer';
 import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
-import {useTypedSelector} from '../../../../../utils/hooks';
 import {getEntityName} from '../../../utils';
 import {AsyncReplicationPaths} from '../AsyncReplicationPaths';
 
@@ -18,12 +17,6 @@ interface AsyncReplicationProps {
 export function AsyncReplicationInfo({data}: AsyncReplicationProps) {
     const entityName = getEntityName(data?.PathDescription);
 
-    const {error: schemaError} = useTypedSelector((state) => state.schema);
-
-    if (schemaError) {
-        return <div className="error">{schemaError.statusText}</div>;
-    }
-
     if (!data) {
         return (
             <div className="error">

diff --git a/src/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.tsx
@@ -5,7 +5,6 @@ import {
     formatCommonItem,
 } from '../../../../../components/InfoViewer/formatters';
 import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
-import {useTypedSelector} from '../../../../../utils/hooks';
 import {getEntityName} from '../../../utils';
 import {TopicStats} from '../TopicStats';
 import {prepareTopicSchemaInfo} from '../utils';
@@ -36,28 +35,23 @@ const prepareChangefeedInfo = (
 };
 
 interface ChangefeedProps {
+    path: string;
     data?: TEvDescribeSchemeResult;
     topic?: TEvDescribeSchemeResult;
 }
 
 /** Displays overview for CDCStream EPathType */
-export const ChangefeedInfo = ({data, topic}: ChangefeedProps) => {
+export const ChangefeedInfo = ({path, data, topic}: ChangefeedProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
-    const {error: schemaError} = useTypedSelector((state) => state.schema);
-
-    if (schemaError) {
-        return <div className="error">{schemaError.statusText}</div>;
-    }
-
     if (!data || !topic) {
         return <div className="error">No {entityName} data</div>;
     }
 
     return (
         <div>
             <InfoViewer title={entityName} info={prepareChangefeedInfo(data, topic)} />
-            <TopicStats />
+            <TopicStats path={path} />
         </div>
     );
 };