refactor: migrate tenant reducer to ts (#408)

Author: artemmufazalov

src/containers/Tenant/Diagnostics/Consumers/columns/columns.tsx

@@ -3,13 +3,13 @@ import block from 'bem-cn-lite';
 import qs from 'qs';
 
 import type {IPreparedConsumerData} from '../../../../../types/store/topic';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import {InternalLink} from '../../../../../components/InternalLink';
 import {formatMsToUptime} from '../../../../../utils';
 import routes, {createHref} from '../../../../../routes';
 
 import {TenantTabsGroups} from '../../../TenantPages';
-import {GeneralPagesIds} from '../../DiagnosticsPages';
 
 import {
     CONSUMERS_COLUMNS_IDS,
@@ -42,7 +42,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
                 <InternalLink
                     to={createHref(routes.tenant, undefined, {
                         ...queryParams,
-                        [TenantTabsGroups.generalTab]: GeneralPagesIds.partitions,
+                        [TenantTabsGroups.generalTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
                         selectedConsumer: row.name,
                     })}
                 >

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -7,37 +7,36 @@ import {useLocation} from 'react-router';
 
 import {Switch, Tabs} from '@gravity-ui/uikit';
 
+import type {EPathType} from '../../../types/api/schema';
+
+import {useTypedSelector} from '../../../utils/hooks';
+import routes, {createHref} from '../../../routes';
+import type {TenantDiagnosticsTab, TenantGeneralTab} from '../../../store/reducers/tenant/types';
+import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
+
 import {Loader} from '../../../components/Loader';
 
-import {TopQueries} from './TopQueries';
-//@ts-ignore
-import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {TopShards} from './TopShards';
-//@ts-ignore
-import Storage from '../../Storage/Storage';
-//@ts-ignore
-import Network from './Network/Network';
-//@ts-ignore
-import Describe from './Describe/Describe';
-//@ts-ignore
-import HotKeys from './HotKeys/HotKeys';
-//@ts-ignore
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes';
-//@ts-ignore
+import Storage from '../../Storage/Storage';
 import {Tablets} from '../../Tablets';
-import {Consumers} from './Consumers';
+
+import Describe from './Describe/Describe';
+import HotKeys from './HotKeys/HotKeys';
+import Network from './Network/Network';
 import {Partitions} from './Partitions/Partitions';
+import {Consumers} from './Consumers';
+import {TopQueries} from './TopQueries';
+import {TopShards} from './TopShards';
+import DetailedOverview from './DetailedOverview/DetailedOverview';
 
-import routes, {createHref} from '../../../routes';
-import type {EPathType} from '../../../types/api/schema';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
-import {GeneralPagesIds, DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
-//@ts-ignore
-import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
-import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant';
 import {isDatabaseEntityType} from '../utils/schema';
 
+import {TenantTabsGroups} from '../TenantPages';
+import {DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
+
 import './Diagnostics.scss';
 
 interface DiagnosticsProps {
@@ -51,8 +50,8 @@ const b = cn('kv-tenant-diagnostics');
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
     const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
-    const {diagnosticsTab = GeneralPagesIds.overview, wasLoaded} = useSelector(
-        (state: any) => state.tenant,
+    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview, wasLoaded} = useTypedSelector(
+        (state) => state.tenant,
     );
 
     const location = useLocation();
@@ -73,7 +72,7 @@ function Diagnostics(props: DiagnosticsProps) {
         return getPagesByType(props.type);
     }, [props.type, isDatabase]);
 
-    const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
+    const forwardToDiagnosticTab = (tab: TenantDiagnosticsTab) => {
         dispatch(setDiagnosticsTab(tab));
     };
     const activeTab = useMemo(() => {
@@ -97,7 +96,7 @@ function Diagnostics(props: DiagnosticsProps) {
         }
     };
 
-    const forwardToGeneralTab = (tab: TenantGeneralTabsIds) => {
+    const forwardToGeneralTab = (tab: TenantGeneralTab) => {
         dispatch(setTopLevelTab(tab));
     };
 
@@ -107,7 +106,7 @@ function Diagnostics(props: DiagnosticsProps) {
         const tenantNameString = tenantName as string;
 
         switch (diagnosticsTab) {
-            case GeneralPagesIds.overview: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
                 return (
                     <DetailedOverview
                         type={type}
@@ -116,7 +115,7 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topQueries: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
                 return (
                     <TopQueries
                         path={tenantNameString}
@@ -125,10 +124,10 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topShards: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
                 return <TopShards tenantPath={tenantNameString} type={type} />;
             }
-            case GeneralPagesIds.nodes: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
                 return (
                     <Nodes
                         path={currentSchemaPath}
@@ -137,28 +136,28 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.tablets: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
                 return <Tablets path={currentSchemaPath} />;
             }
-            case GeneralPagesIds.storage: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
                 return <Storage tenant={tenantNameString} database={true} />;
             }
-            case GeneralPagesIds.network: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return <Network path={tenantNameString} />;
             }
-            case GeneralPagesIds.describe: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
                 return <Describe tenant={tenantNameString} type={type} />;
             }
-            case GeneralPagesIds.hotKeys: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
                 return <HotKeys type={type} />;
             }
-            case GeneralPagesIds.graph: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
                 return <Heatmap path={currentSchemaPath} />;
             }
-            case GeneralPagesIds.consumers: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
                 return <Consumers path={currentSchemaPath} type={type} />;
             }
-            case GeneralPagesIds.partitions: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
                 return <Partitions path={currentSchemaPath} />;
             }
             default: {

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -1,80 +1,67 @@
+import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {EPathType} from '../../../types/api/schema';
 
-export enum GeneralPagesIds {
-    'overview' = 'Overview',
-    'topQueries' = 'topQueries',
-    'topShards' = 'topShards',
-    'nodes' = 'Nodes',
-    'tablets' = 'Tablets',
-    'storage' = 'Storage',
-    'network' = 'Network',
-    'describe' = 'Describe',
-    'hotKeys' = 'hotKeys',
-    'graph' = 'graph',
-    'consumers' = 'consumers',
-    'partitions' = 'partitions',
-}
-
 type Page = {
-    id: GeneralPagesIds;
+    id: TenantDiagnosticsTab;
     title: string;
 };
 
 const overview = {
-    id: GeneralPagesIds.overview,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.overview,
     title: 'Info',
 };
 
 const topQueries = {
-    id: GeneralPagesIds.topQueries,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
     title: 'Top queries',
 };
 
 const topShards = {
-    id: GeneralPagesIds.topShards,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
     title: 'Top shards',
 };
 
 const nodes = {
-    id: GeneralPagesIds.nodes,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
     title: 'Nodes',
 };
 
 const tablets = {
-    id: GeneralPagesIds.tablets,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
     title: 'Tablets',
 };
 const storage = {
-    id: GeneralPagesIds.storage,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.storage,
     title: 'Storage',
 };
 const network = {
-    id: GeneralPagesIds.network,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.network,
     title: 'Network',
 };
 
 const describe = {
-    id: GeneralPagesIds.describe,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.describe,
     title: 'Describe',
 };
 
 const hotKeys = {
-    id: GeneralPagesIds.hotKeys,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.hotKeys,
     title: 'Hot keys',
 };
 
 const graph = {
-    id: GeneralPagesIds.graph,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.graph,
     title: 'Graph',
 };
 
 const consumers = {
-    id: GeneralPagesIds.consumers,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.consumers,
     title: 'Consumers',
 };
 
 const partitions = {
-    id: GeneralPagesIds.partitions,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
     title: 'Partitions',
 };
 

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -9,7 +9,7 @@ import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
 import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
 import {Tablet} from '../../../../components/Tablet';
 
-import {getTenantInfo} from '../../../../store/reducers/tenant';
+import {getTenantInfo} from '../../../../store/reducers/tenant/tenant';
 
 import {formatCPU} from '../../../../utils';
 import {bytesToGB} from '../../../../utils/utils';
@@ -191,7 +191,7 @@ class TenantOverview extends React.Component {
 }
 
 function mapStateToProps(state) {
-    const {tenant = {}, loading, data: {status} = {}} = state.tenant;
+    const {tenant = {}, loading, error: {status} = {}} = state.tenant;
     const {autorefresh} = state.schema;
 
     return {

src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -22,15 +22,17 @@ import type {KeyValueRow} from '../../../../types/api/query';
 import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
+import type {TenantGeneralTab} from '../../../../store/reducers/tenant/types';
 
+import {TENANT_GENERAL_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
 import routes, {createHref} from '../../../../routes';
 
 import {isColumnEntityType} from '../../utils/schema';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../../TenantPages';
+import {TenantTabsGroups} from '../../TenantPages';
 
 import i18n from './i18n';
 import './TopQueries.scss';
@@ -86,7 +88,7 @@ const COLUMNS: Column<KeyValueRow>[] = [
 
 interface TopQueriesProps {
     path: string;
-    changeSchemaTab: (tab: TenantGeneralTabsIds) => void;
+    changeSchemaTab: (tab: TenantGeneralTab) => void;
     type?: EPathType;
 }
 
@@ -178,7 +180,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
 
             const queryPath = createHref(routes.tenant, undefined, {
                 ...queryParams,
-                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
+                [TenantTabsGroups.general]: TENANT_GENERAL_TABS_IDS.query,
             });
 
             history.push(queryPath);

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -5,12 +5,11 @@ import cn from 'bem-cn-lite';
 import {useThemeValue} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../types/api/schema';
+import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import QueryEditor from '../QueryEditor/QueryEditor';
 import Diagnostics from '../Diagnostics/Diagnostics';
 
-import {TenantGeneralTabsIds} from '../TenantPages';
-
 import './ObjectGeneral.scss';
 
 const b = cn('object-general');
@@ -35,7 +34,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     const renderTabContent = () => {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
         switch (generalTab) {
-            case TenantGeneralTabsIds.query: {
+            case TENANT_GENERAL_TABS_IDS.query: {
                 return <QueryEditor path={tenantName as string} theme={theme} type={type} />;
             }
             default: {

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -35,7 +35,6 @@ import {
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
 import {
-    TenantGeneralTabsIds,
     TenantInfoTabsIds,
     TenantTabsGroups,
     TENANT_INFO_TABS,
@@ -48,7 +47,8 @@ import {
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant';
+import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import './ObjectSummary.scss';
 
@@ -275,7 +275,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
-        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
+        dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
     };
 
     const renderCommonInfoControls = () => {