fix(Diagnostics): remove unneded tenantInfo fetch (#420)

* refactor(Overview): use separate reducer

* fix(Diagnostics): remove unnneded tenantInfo fetch

* fixup! refactor(Overview): use separate reducer

Author: artemmufazalov

src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -4,6 +4,9 @@ $section-title-line-height: 24px;
 .kv-detailed-overview {
     display: flex;
     gap: 20px;
+
+    height: 100%;
+
     &__section {
         display: flex;
         overflow-x: hidden;

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -49,8 +49,8 @@ const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
-    const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
-    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview, wasLoaded} = useTypedSelector(
+    const {currentSchemaPath, autorefresh, wasLoaded} = useSelector((state: any) => state.schema);
+    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
         (state) => state.tenant,
     );
 

src/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.tsx

@@ -7,7 +7,6 @@ import {
 } from '../../../../../components/InfoViewer/formatters';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
-import {selectSchemaData} from '../../../../../store/reducers/schema/schema';
 
 import {getEntityName} from '../../../utils';
 
@@ -42,27 +41,26 @@ const prepareChangefeedInfo = (
 
 interface ChangefeedProps {
     data?: TEvDescribeSchemeResult;
-    childrenPaths?: string[];
+    topic?: TEvDescribeSchemeResult;
 }
 
 /** Displays overview for CDCStream EPathType */
-export const ChangefeedInfo = ({data, childrenPaths}: ChangefeedProps) => {
+export const ChangefeedInfo = ({data, topic}: ChangefeedProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
     const {error: schemaError} = useTypedSelector((state) => state.schema);
-    const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
 
     if (schemaError) {
         return <div className="error">{schemaError.statusText}</div>;
     }
 
-    if (!data || !pqGroupData) {
+    if (!data || !topic) {
         return <div className="error">No {entityName} data</div>;
     }
 
     return (
         <div>
-            <InfoViewer title={entityName} info={prepareChangefeedInfo(data, pqGroupData)} />
+            <InfoViewer title={entityName} info={prepareChangefeedInfo(data, topic)} />
             <TopicStats />
         </div>
     );

src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,85 +1,88 @@
 import {ReactNode, useCallback} from 'react';
-import {shallowEqual, useDispatch, useSelector} from 'react-redux';
+import {shallowEqual, useDispatch} from 'react-redux';
 
 import {Loader} from '../../../../components/Loader';
-
-//@ts-ignore
 import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 
-import {TopicInfo} from './TopicInfo';
-import {ChangefeedInfo} from './ChangefeedInfo';
-import {TableInfo} from './TableInfo';
-
 import {EPathType} from '../../../../types/api/schema';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema';
+import {getTopic} from '../../../../store/reducers/topic';
+import {
+    getOlapStats,
+    resetLoadingState as resetOlapLoadingState,
+} from '../../../../store/reducers/olapStats';
+import {
+    getOverview,
+    getOverviewBatched,
+    setCurrentOverviewPath,
+    setDataWasNotLoaded,
+} from '../../../../store/reducers/overview/overview';
+
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
     isTableType,
     isPathTypeWithTopic,
 } from '../../utils/schema';
-//@ts-ignore
-import {
-    getSchema,
-    getSchemaBatched,
-    resetLoadingState,
-    selectSchemaMergedChildrenPaths,
-} from '../../../../store/reducers/schema/schema';
-import {getTopic} from '../../../../store/reducers/topic';
-//@ts-ignore
-import {
-    getOlapStats,
-    resetLoadingState as resetOlapLoadingState,
-} from '../../../../store/reducers/olapStats';
-import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+
+import {TopicInfo} from './TopicInfo';
+import {ChangefeedInfo} from './ChangefeedInfo';
+import {TableInfo} from './TableInfo';
 
 interface OverviewProps {
     type?: EPathType;
-    className?: string;
     tenantName?: string;
 }
 
-function Overview({type, tenantName, className}: OverviewProps) {
+function Overview({type, tenantName}: OverviewProps) {
     const dispatch = useDispatch();
 
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
     const {
-        currentSchema: currentItem = {},
-        loading: schemaLoading,
-        wasLoaded,
-        autorefresh,
-        currentSchemaPath,
-        error,
-    } = useSelector((state: any) => state.schema);
-
-    const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
-        useTypedSelector((state) => state.olapStats);
-
-    const loading = schemaLoading || olapStatsLoading;
+        data,
+        additionalData,
+        loading: overviewLoading,
+        wasLoaded: overviewWasLoaded,
+        error: overviewError,
+    } = useTypedSelector((state) => state.overview);
+    const {
+        data: {result: olapStats} = {result: undefined},
+        loading: olapStatsLoading,
+        wasLoaded: olapStatsWasLoaded,
+    } = useTypedSelector((state) => state.olapStats);
 
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
 
-    // There is a circular dependency here. Fetch data depends on children paths
-    // When data in store updated on fetch request,
-    // new object is set there, so source children array is updated
-    // This updates selector, the selector returns a new array, and data is fetched again
-    // To prevent it, shallowEqual, which compares array content, was added
+    // shalloEqual prevents rerenders when new schema data is loaded
     const mergedChildrenPaths = useTypedSelector(
         (state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type),
         shallowEqual,
     );
 
+    const entityLoading =
+        (overviewLoading && !overviewWasLoaded) || (olapStatsLoading && !olapStatsWasLoaded);
+    const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
+
     const fetchData = useCallback(
         (isBackground: boolean) => {
-            if (!isBackground) {
-                dispatch(resetLoadingState());
+            const schemaPath = currentSchemaPath || tenantName;
+
+            if (!schemaPath) {
+                return;
             }
 
-            const schemaPath = currentSchemaPath || tenantName;
+            dispatch(setCurrentOverviewPath(schemaPath));
+
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
 
             if (!isEntityWithMergedImpl) {
-                dispatch(getSchema({path: schemaPath}));
+                dispatch(getOverview({path: schemaPath}));
             } else if (mergedChildrenPaths) {
-                dispatch(getSchemaBatched([schemaPath, ...mergedChildrenPaths]));
+                dispatch(getOverviewBatched([schemaPath, ...mergedChildrenPaths]));
             }
 
             if (isTableType(type) && isColumnEntityType(type)) {
@@ -113,32 +116,32 @@ function Overview({type, tenantName, className}: OverviewProps) {
             [EPathType.EPathTypeDir]: undefined,
             [EPathType.EPathTypeTable]: undefined,
             [EPathType.EPathTypeSubDomain]: undefined,
-            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={currentItem} />,
+            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={data} />,
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
             [EPathType.EPathTypeCdcStream]: () => (
-                <ChangefeedInfo data={currentItem} childrenPaths={mergedChildrenPaths} />
+                <ChangefeedInfo data={data} topic={additionalData?.[0]} />
             ),
-            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={currentItem} />,
+            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={data} />,
         };
 
         return (
             (type && pathTypeToComponent[type]?.()) || (
-                <TableInfo data={currentItem} type={type} olapStats={olapStats} />
+                <TableInfo data={data} type={type} olapStats={olapStats} />
             )
         );
     };
 
-    if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
+    if (entityLoading || entityNotReady) {
         return <Loader size="m" />;
     }
 
-    if (error) {
-        return <ResponseError error={error} />;
+    if (overviewError) {
+        return <ResponseError error={overviewError} />;
     }
 
-    return <div className={className}>{renderContent()}</div>;
+    return <div>{renderContent()}</div>;
 }
 
 export default Overview;

src/containers/Tenant/Tenant.tsx

@@ -10,9 +10,8 @@ import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../.
 import {useTypedSelector} from '../../utils/hooks';
 import routes, {createHref} from '../../routes';
 import {setHeader} from '../../store/reducers/header';
-import {disableAutorefresh, getSchema, resetLoadingState} from '../../store/reducers/schema/schema';
+import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema';
 import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
-import {getTenantInfo, clearTenant} from '../../store/reducers/tenant/tenant';
 
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
@@ -64,7 +63,6 @@ function Tenant(props: TenantProps) {
     const {PathType: currentPathType, PathSubType: currentPathSubType} =
         (currentItem as TEvDescribeSchemeResult).PathDescription?.Self || {};
 
-    const {error: {status: tenantStatus = 200} = {}} = useTypedSelector((state) => state.tenant);
     const {error: {status: schemaStatus = 200} = {}} = useTypedSelector((state) => state.schema);
 
     const dispatch = useDispatch();
@@ -84,7 +82,6 @@ function Tenant(props: TenantProps) {
     }, [tenantName, dispatch]);
 
     useEffect(() => {
-        dispatch(resetLoadingState());
         dispatch(getSchema({path: currentSchemaPath}));
         dispatch(getSchemaAcl({path: currentSchemaPath}));
     }, [currentSchemaPath, dispatch]);
@@ -95,7 +92,6 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         if (tenantName) {
-            dispatch(getTenantInfo({path: tenantName}));
             dispatch(
                 setHeader([
                     {
@@ -111,9 +107,6 @@ function Tenant(props: TenantProps) {
                 ]),
             );
         }
-        return () => {
-            dispatch(clearTenant());
-        };
     }, [tenantName, dispatch]);
 
     const onCollapseSummaryHandler = () => {
@@ -127,7 +120,7 @@ function Tenant(props: TenantProps) {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
     };
 
-    const showBlockingError = tenantStatus === 403 || schemaStatus === 403;
+    const showBlockingError = schemaStatus === 403;
 
     return (
         <div className={b()}>

src/store/reducers/index.ts

@@ -10,6 +10,7 @@ import tooltip from './tooltip';
 import tablets from './tablets';
 import heatmap from './heatmap';
 import schema from './schema/schema';
+import overview from './overview/overview';
 import host from './host';
 import network from './network/network';
 import tenants from './tenants/tenants';
@@ -46,6 +47,7 @@ export const rootReducer = {
     tooltip,
     tablets,
     schema,
+    overview,
     olapStats,
     host,
     network,