Skip to content

Commit 524e815

Browse files
ValeraSValeraS
authored
feat(schema): use rtk-query (#948)
1 parent 6161d97 commit 524e815

File tree

38 files changed

+353
-560
lines changed

38 files changed

+353
-560
lines changed

‎src/containers/Tenant/Acl/Acl.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22

33
import type {Column} from '@gravity-ui/react-data-table';
4-
import {skipToken} from '@reduxjs/toolkit/query';
54

65
import {ResponseError} from '../../../components/Errors/ResponseError';
76
import {Loader} from '../../../components/Loader';
@@ -10,7 +9,6 @@ import {schemaAclApi} from '../../../store/reducers/schemaAcl/schemaAcl';
109
import type {TACE} from '../../../types/api/acl';
1110
import {cn} from '../../../utils/cn';
1211
import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
13-
import {useTypedSelector} from '../../../utils/hooks';
1412
import i18n from '../i18n';
1513

1614
import './Acl.scss';
@@ -71,11 +69,8 @@ const columns: Column<TACE>[] = [
7169
},
7270
];
7371

74-
export const Acl = () => {
75-
const {currentSchemaPath} = useTypedSelector((state) => state.schema);
76-
const {currentData, isFetching, error} = schemaAclApi.useGetSchemaAclQuery(
77-
currentSchemaPath ? {path: currentSchemaPath} : skipToken,
78-
);
72+
export const Acl = ({path}: {path: string}) => {
73+
const {currentData, isFetching, error} = schemaAclApi.useGetSchemaAclQuery({path});
7974

8075
const loading = isFetching && !currentData;
8176
const {acl, owner} = currentData || {};

‎src/containers/Tenant/Diagnostics/Describe/Describe.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,20 @@ const b = cn('kv-describe');
2020
const expandMap = new Map();
2121

2222
interface IDescribeProps {
23-
tenant: string;
23+
path: string;
2424
type?: EPathType;
2525
}
2626

27-
const Describe = ({tenant, type}: IDescribeProps) => {
27+
const Describe = ({path, type}: IDescribeProps) => {
2828
const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
29-
const {currentSchemaPath} = useTypedSelector((state) => state.schema);
3029

3130
const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
3231

3332
const mergedChildrenPaths = useTypedSelector(
34-
(state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type),
33+
(state) => selectSchemaMergedChildrenPaths(state, path, type),
3534
shallowEqual,
3635
);
3736

38-
const path = currentSchemaPath || tenant;
3937
let paths: string[] | typeof skipToken = skipToken;
4038
if (!isEntityWithMergedImpl) {
4139
paths = [path];

‎src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import {useSelector} from 'react-redux';
2-
31
import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../../types/additionalProps';
42
import type {EPathType} from '../../../../types/api/schema';
53
import {cn} from '../../../../utils/cn';
@@ -12,16 +10,15 @@ interface DetailedOverviewProps {
1210
type?: EPathType;
1311
className?: string;
1412
tenantName: string;
13+
path: string;
1514
additionalTenantProps?: AdditionalTenantsProps;
1615
additionalNodesProps?: AdditionalNodesProps;
1716
}
1817

1918
const b = cn('kv-detailed-overview');
2019

2120
function DetailedOverview(props: DetailedOverviewProps) {
22-
const {type, tenantName, additionalTenantProps, additionalNodesProps} = props;
23-
24-
const {currentSchemaPath} = useSelector((state: any) => state.schema);
21+
const {type, tenantName, path, additionalTenantProps, additionalNodesProps} = props;
2522

2623
const renderTenantOverview = () => {
2724
return (
@@ -35,11 +32,11 @@ function DetailedOverview(props: DetailedOverviewProps) {
3532
);
3633
};
3734

38-
const isTenant = tenantName === currentSchemaPath;
35+
const isTenant = tenantName === path;
3936

4037
return (
4138
<div className={b()}>
42-
{isTenant ? renderTenantOverview() : <Overview type={type} tenantName={tenantName} />}
39+
{isTenant ? renderTenantOverview() : <Overview type={type} path={path} />}
4340
</div>
4441
);
4542
}

‎src/containers/Tenant/Diagnostics/Diagnostics.tsx‎

Lines changed: 30 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@ import {Helmet} from 'react-helmet-async';
55
import {Link} from 'react-router-dom';
66
import {StringParam, useQueryParams} from 'use-query-params';
77

8-
import {Loader} from '../../../components/Loader';
98
import routes, {createHref} from '../../../routes';
109
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
1110
import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
12-
import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
1311
import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
1412
import type {EPathType} from '../../../types/api/schema';
1513
import {cn} from '../../../utils/cn';
@@ -37,6 +35,8 @@ import './Diagnostics.scss';
3735

3836
interface DiagnosticsProps {
3937
type?: EPathType;
38+
tenantName: string;
39+
path: string;
4040
additionalTenantProps?: AdditionalTenantsProps;
4141
additionalNodesProps?: AdditionalNodesProps;
4242
}
@@ -47,115 +47,88 @@ function Diagnostics(props: DiagnosticsProps) {
4747
const container = React.useRef<HTMLDivElement>(null);
4848

4949
const dispatch = useTypedDispatch();
50-
const {currentSchemaPath, wasLoaded} = useTypedSelector((state) => state.schema);
5150
const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
5251
(state) => state.tenant,
5352
);
5453

5554
const [queryParams] = useQueryParams({
5655
name: StringParam,
56+
schema: StringParam,
5757
backend: StringParam,
5858
clusterName: StringParam,
5959
});
6060

61-
const {name: rootTenantName} = queryParams;
62-
const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;
63-
const isDatabase = isDatabaseEntityType(props.type) || currentSchemaPath === rootTenantName;
61+
const tenantName = isDatabaseEntityType(props.type) ? props.path : props.tenantName;
62+
const isDatabase = isDatabaseEntityType(props.type) || props.path === props.tenantName;
6463

65-
const pages = React.useMemo(() => {
66-
if (isDatabase) {
67-
return DATABASE_PAGES;
68-
}
69-
70-
return getPagesByType(props.type);
71-
}, [props.type, isDatabase]);
64+
const pages = isDatabase ? DATABASE_PAGES : getPagesByType(props.type);
65+
let activeTab = pages.find((el) => el.id === diagnosticsTab);
66+
if (!activeTab) {
67+
activeTab = pages[0];
68+
}
7269

73-
const forwardToDiagnosticTab = (tab: TenantDiagnosticsTab) => {
74-
dispatch(setDiagnosticsTab(tab));
75-
};
76-
const activeTab = React.useMemo(() => {
77-
if (wasLoaded) {
78-
let page = pages.find((el) => el.id === diagnosticsTab);
79-
if (!page) {
80-
page = pages[0];
81-
}
82-
if (page && page.id !== diagnosticsTab) {
83-
forwardToDiagnosticTab(page.id);
84-
}
85-
return page;
70+
React.useEffect(() => {
71+
if (activeTab && activeTab.id !== diagnosticsTab) {
72+
dispatch(setDiagnosticsTab(activeTab.id));
8673
}
87-
return undefined;
88-
}, [pages, diagnosticsTab, wasLoaded]);
74+
}, [activeTab, diagnosticsTab, dispatch]);
8975

9076
const renderTabContent = () => {
91-
const {type} = props;
92-
93-
const tenantNameString = tenantName as string;
77+
const {type, path} = props;
9478

9579
switch (activeTab?.id) {
9680
case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
9781
return (
9882
<DetailedOverview
9983
type={type}
100-
tenantName={tenantNameString}
84+
tenantName={tenantName}
85+
path={path}
10186
additionalTenantProps={props.additionalTenantProps}
10287
additionalNodesProps={props.additionalNodesProps}
10388
/>
10489
);
10590
}
10691
case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
107-
return (
108-
<SchemaViewer
109-
path={currentSchemaPath}
110-
tenantName={tenantName}
111-
type={type}
112-
extended
113-
/>
114-
);
92+
return <SchemaViewer path={path} tenantName={tenantName} type={type} extended />;
11593
}
11694
case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
117-
return <TopQueries path={tenantNameString} type={type} />;
95+
return <TopQueries tenantName={tenantName} type={type} />;
11896
}
11997
case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
120-
return <TopShards tenantPath={tenantNameString} type={type} />;
98+
return <TopShards tenantName={tenantName} path={path} type={type} />;
12199
}
122100
case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
123101
return (
124102
<NodesWrapper
125-
path={currentSchemaPath}
103+
path={path}
126104
additionalNodesProps={props.additionalNodesProps}
127105
parentContainer={container.current}
128106
/>
129107
);
130108
}
131109
case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
132-
return <Tablets path={currentSchemaPath} />;
110+
return <Tablets path={path} />;
133111
}
134112
case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
135-
return (
136-
<StorageWrapper tenant={tenantNameString} parentContainer={container.current} />
137-
);
113+
return <StorageWrapper tenant={tenantName} parentContainer={container.current} />;
138114
}
139115
case TENANT_DIAGNOSTICS_TABS_IDS.network: {
140-
return <Network path={tenantNameString} />;
116+
return <Network tenantName={tenantName} />;
141117
}
142118
case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
143-
return <Describe tenant={tenantNameString} type={type} />;
119+
return <Describe path={path} type={type} />;
144120
}
145121
case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
146-
// @ts-expect-error
147-
return <HotKeys path={currentSchemaPath} />;
122+
return <HotKeys path={path} />;
148123
}
149124
case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
150-
// @ts-expect-error
151-
return <Heatmap path={currentSchemaPath} />;
125+
return <Heatmap path={path} />;
152126
}
153127
case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
154-
// @ts-expect-error
155-
return <Consumers path={currentSchemaPath} type={type} />;
128+
return <Consumers path={path} type={type} />;
156129
}
157130
case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
158-
return <Partitions path={currentSchemaPath} />;
131+
return <Partitions path={path} />;
159132
}
160133
default: {
161134
return <div>No data...</div>;
@@ -169,7 +142,7 @@ function Diagnostics(props: DiagnosticsProps) {
169142
<Tabs
170143
size="l"
171144
items={pages}
172-
activeTab={activeTab?.id as string}
145+
activeTab={activeTab?.id}
173146
wrapTo={({id}, node) => {
174147
const path = createHref(routes.tenant, undefined, {
175148
...queryParams,
@@ -190,13 +163,6 @@ function Diagnostics(props: DiagnosticsProps) {
190163
);
191164
};
192165

193-
// Loader prevents incorrect loading of tabs
194-
// After tabs are initially loaded it is no longer needed
195-
// Thus there is no also "loading" check as in other parts of the project
196-
if (!wasLoaded) {
197-
return <Loader size="l" />;
198-
}
199-
200166
return (
201167
<div className={b()} ref={container}>
202168
{activeTab ? (

‎src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import {Button, Card, Icon} from '@gravity-ui/uikit';
88
import {ResponseError} from '../../../../components/Errors/ResponseError';
99
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
1010
import {hotKeysApi} from '../../../../store/reducers/hotKeys/hotKeys';
11+
import {schemaApi} from '../../../../store/reducers/schema/schema';
1112
import type {HotKey} from '../../../../types/api/hotkeys';
1213
import {cn} from '../../../../utils/cn';
1314
import {DEFAULT_TABLE_SETTINGS, IS_HOTKEYS_HELP_HIDDDEN_KEY} from '../../../../utils/constants';
14-
import {useSetting, useTypedSelector} from '../../../../utils/hooks';
15+
import {useSetting} from '../../../../utils/hooks';
1516

1617
import i18n from './i18n';
1718

@@ -60,9 +61,11 @@ export function HotKeys({path}: HotKeysProps) {
6061
const {currentData: data, isFetching, error} = hotKeysApi.useGetHotKeysQuery({path});
6162
const loading = isFetching && data === undefined;
6263

63-
const {loading: schemaLoading, data: schemaData} = useTypedSelector((state) => state.schema);
64+
const {currentData: schemaData, isFetching: schemaIsFetching} =
65+
schemaApi.endpoints.getSchema.useQueryState({path});
66+
const schemaLoading = schemaIsFetching && schemaData === undefined;
6467

65-
const keyColumnsIds = schemaData[path]?.PathDescription?.Table?.KeyColumnNames;
68+
const keyColumnsIds = schemaData?.PathDescription?.Table?.KeyColumnNames;
6669

6770
const tableColumns = React.useMemo(() => {
6871
return getHotKeysColumns(keyColumnsIds);

‎src/containers/Tenant/Diagnostics/Network/Network.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ import './Network.scss';
2929
const b = cn('network');
3030

3131
interface NetworkProps {
32-
path: string;
32+
tenantName: string;
3333
}
34-
export function Network({path}: NetworkProps) {
34+
export function Network({tenantName}: NetworkProps) {
3535
const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
3636
const filter = useTypedSelector(selectProblemFilter);
3737
const dispatch = useTypedDispatch();
@@ -40,7 +40,7 @@ export function Network({path}: NetworkProps) {
4040
const [showId, setShowId] = React.useState(false);
4141
const [showRacks, setShowRacks] = React.useState(false);
4242

43-
const {currentData, isFetching, error} = networkApi.useGetNetworkInfoQuery(path, {
43+
const {currentData, isFetching, error} = networkApi.useGetNetworkInfoQuery(tenantName, {
4444
pollingInterval: autoRefreshInterval,
4545
});
4646
const loading = isFetching && currentData === undefined;

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {Flex, Text} from '@gravity-ui/uikit';
33
import {AsyncReplicationState} from '../../../../../components/AsyncReplicationState';
44
import {InfoViewer} from '../../../../../components/InfoViewer';
55
import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
6-
import {useTypedSelector} from '../../../../../utils/hooks';
76
import {getEntityName} from '../../../utils';
87
import {AsyncReplicationPaths} from '../AsyncReplicationPaths';
98

@@ -18,12 +17,6 @@ interface AsyncReplicationProps {
1817
export function AsyncReplicationInfo({data}: AsyncReplicationProps) {
1918
const entityName = getEntityName(data?.PathDescription);
2019

21-
const {error: schemaError} = useTypedSelector((state) => state.schema);
22-
23-
if (schemaError) {
24-
return <div className="error">{schemaError.statusText}</div>;
25-
}
26-
2720
if (!data) {
2821
return (
2922
<div className="error">

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
formatCommonItem,
66
} from '../../../../../components/InfoViewer/formatters';
77
import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
8-
import {useTypedSelector} from '../../../../../utils/hooks';
98
import {getEntityName} from '../../../utils';
109
import {TopicStats} from '../TopicStats';
1110
import {prepareTopicSchemaInfo} from '../utils';
@@ -36,28 +35,23 @@ const prepareChangefeedInfo = (
3635
};
3736

3837
interface ChangefeedProps {
38+
path: string;
3939
data?: TEvDescribeSchemeResult;
4040
topic?: TEvDescribeSchemeResult;
4141
}
4242

4343
/** Displays overview for CDCStream EPathType */
44-
export const ChangefeedInfo = ({data, topic}: ChangefeedProps) => {
44+
export const ChangefeedInfo = ({path, data, topic}: ChangefeedProps) => {
4545
const entityName = getEntityName(data?.PathDescription);
4646

47-
const {error: schemaError} = useTypedSelector((state) => state.schema);
48-
49-
if (schemaError) {
50-
return <div className="error">{schemaError.statusText}</div>;
51-
}
52-
5347
if (!data || !topic) {
5448
return <div className="error">No {entityName} data</div>;
5549
}
5650

5751
return (
5852
<div>
5953
<InfoViewer title={entityName} info={prepareChangefeedInfo(data, topic)} />
60-
<TopicStats />
54+
<TopicStats path={path} />
6155
</div>
6256
);
6357
};

0 commit comments

Comments
 (0)