Skip to content

Commit 19487b1

Browse files
ValeraSValeraS
authored
feat(Tenant): use rtk query (#802)
1 parent 65e25f8 commit 19487b1

File tree

30 files changed

+256
-1185
lines changed

30 files changed

+256
-1185
lines changed

‎src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,16 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) {
4141
<div className={b('preview-header')}>
4242
<div className={b('preview-title-wrapper')}>
4343
<div className={b('preview-title')}>{i18n('title.healthcheck')}</div>
44-
<Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
44+
<Button
45+
size="s"
46+
onClick={(event) => {
47+
// FIXME: refactor card to remove the button from the anchor link.
48+
event.preventDefault();
49+
onUpdate();
50+
}}
51+
loading={loading}
52+
view="flat-secondary"
53+
>
4554
<Icon data={updateArrow} width={20} height={20} />
4655
</Button>
4756
</div>

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
import React from 'react';
2-
31
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
4-
import {
5-
getTopNodesByCpu,
6-
selectTopNodesByCpu,
7-
setDataWasNotLoaded,
8-
} from '../../../../../store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu';
2+
import {topNodesApi} from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
93
import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
10-
import {
11-
useAutofetcher,
12-
useSearchQuery,
13-
useTypedDispatch,
14-
useTypedSelector,
15-
} from '../../../../../utils/hooks';
4+
import {DEFAULT_POLLING_INTERVAL} from '../../../../../utils/constants';
5+
import {useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
166
import {getTopNodesByCpuColumns} from '../../../../Nodes/getNodesColumns';
177
import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
188
import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -25,27 +15,18 @@ interface TopNodesByCpuProps {
2515
}
2616

2717
export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps) {
28-
const dispatch = useTypedDispatch();
29-
3018
const query = useSearchQuery();
3119

32-
const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByCpu);
3320
const {autorefresh} = useTypedSelector((state) => state.schema);
34-
const topNodes = useTypedSelector(selectTopNodesByCpu);
3521
const columns = getTopNodesByCpuColumns(additionalNodesProps?.getNodeRef);
3622

37-
const fetchNodes = React.useCallback(
38-
(isBackground: boolean) => {
39-
if (!isBackground) {
40-
dispatch(setDataWasNotLoaded());
41-
}
42-
43-
dispatch(getTopNodesByCpu({tenant: path}));
44-
},
45-
[dispatch, path],
23+
const {currentData, isFetching, error} = topNodesApi.useGetTopNodesQuery(
24+
{tenant: path, sortValue: 'CPU'},
25+
{pollingInterval: autorefresh ? DEFAULT_POLLING_INTERVAL : 0},
4626
);
4727

48-
useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
28+
const loading = isFetching && currentData === undefined;
29+
const topNodes = currentData;
4930

5031
const title = getSectionTitle({
5132
entity: i18n('nodes'),
@@ -62,7 +43,6 @@ export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps)
6243
columns={columns}
6344
title={title}
6445
loading={loading}
65-
wasLoaded={wasLoaded}
6646
error={error}
6747
emptyDataMessage={i18n('top-nodes.empty-data')}
6848
/>

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
import React from 'react';
2-
31
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
4-
import {
5-
getTopNodesByLoad,
6-
selectTopNodesByLoad,
7-
setDataWasNotLoaded,
8-
} from '../../../../../store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad';
2+
import {topNodesApi} from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
93
import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
10-
import {
11-
useAutofetcher,
12-
useSearchQuery,
13-
useTypedDispatch,
14-
useTypedSelector,
15-
} from '../../../../../utils/hooks';
4+
import {DEFAULT_POLLING_INTERVAL} from '../../../../../utils/constants';
5+
import {useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
166
import {getTopNodesByLoadColumns} from '../../../../Nodes/getNodesColumns';
177
import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
188
import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -25,27 +15,18 @@ interface TopNodesByLoadProps {
2515
}
2616

2717
export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps) {
28-
const dispatch = useTypedDispatch();
29-
3018
const query = useSearchQuery();
3119

32-
const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByLoad);
3320
const {autorefresh} = useTypedSelector((state) => state.schema);
34-
const topNodes = useTypedSelector(selectTopNodesByLoad);
3521
const columns = getTopNodesByLoadColumns(additionalNodesProps?.getNodeRef);
3622

37-
const fetchNodes = React.useCallback(
38-
(isBackground: boolean) => {
39-
if (!isBackground) {
40-
dispatch(setDataWasNotLoaded());
41-
}
42-
43-
dispatch(getTopNodesByLoad({tenant: path}));
44-
},
45-
[dispatch, path],
23+
const {currentData, isFetching, error} = topNodesApi.useGetTopNodesQuery(
24+
{tenant: path, sortValue: 'LoadAverage'},
25+
{pollingInterval: autorefresh ? DEFAULT_POLLING_INTERVAL : 0},
4626
);
4727

48-
useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
28+
const loading = isFetching && currentData === undefined;
29+
const topNodes = currentData;
4930

5031
const title = getSectionTitle({
5132
entity: i18n('nodes'),
@@ -62,7 +43,6 @@ export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps
6243
columns={columns}
6344
title={title}
6445
loading={loading}
65-
wasLoaded={wasLoaded}
6646
error={error}
6747
emptyDataMessage={i18n('top-nodes.empty-data')}
6848
/>

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ import {
1010
TENANT_PAGES_IDS,
1111
TENANT_QUERY_TABS_ID,
1212
} from '../../../../../store/reducers/tenant/constants';
13-
import {
14-
fetchTenantOverviewTopQueries,
15-
setDataWasNotLoaded,
16-
} from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
17-
import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks';
13+
import {topQueriesApi} from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
14+
import {DEFAULT_POLLING_INTERVAL} from '../../../../../utils/constants';
15+
import {useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks';
1816
import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
1917
import {getTenantOverviewTopQueriesColumns} from '../../TopQueries/getTopQueriesColumns';
2018
import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -33,27 +31,16 @@ export function TopQueries({path}: TopQueriesProps) {
3331
const query = parseQuery(location);
3432

3533
const {autorefresh} = useTypedSelector((state) => state.schema);
36-
37-
const {
38-
loading,
39-
wasLoaded,
40-
error,
41-
data: {result: data = undefined} = {},
42-
} = useTypedSelector((state) => state.tenantOverviewTopQueries);
4334
const columns = getTenantOverviewTopQueriesColumns();
4435

45-
useAutofetcher(
46-
(isBackground) => {
47-
if (!isBackground) {
48-
dispatch(setDataWasNotLoaded());
49-
}
50-
51-
dispatch(fetchTenantOverviewTopQueries(path));
52-
},
53-
[dispatch, path],
54-
autorefresh,
36+
const {currentData, isFetching, error} = topQueriesApi.useGetTopQueriesQuery(
37+
{database: path},
38+
{pollingInterval: autorefresh ? DEFAULT_POLLING_INTERVAL : 0},
5539
);
5640

41+
const loading = isFetching && currentData === undefined;
42+
const {result: data} = currentData || {};
43+
5744
const handleRowClick = React.useCallback(
5845
(row: any) => {
5946
const {QueryText: input} = row;
@@ -89,7 +76,6 @@ export function TopQueries({path}: TopQueriesProps) {
8976
onRowClick={handleRowClick}
9077
title={title}
9178
loading={loading}
92-
wasLoaded={wasLoaded}
9379
error={error}
9480
tableClassNameModifiers={{'top-queries': true}}
9581
/>

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@ import {useLocation} from 'react-router';
22

33
import {parseQuery} from '../../../../../routes';
44
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
5-
import {
6-
sendTenantOverviewTopShardsQuery,
7-
setDataWasNotLoaded,
8-
} from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
9-
import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks';
5+
import {topShardsApi} from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
6+
import {DEFAULT_POLLING_INTERVAL} from '../../../../../utils/constants';
7+
import {useTypedSelector} from '../../../../../utils/hooks';
108
import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
119
import {getTopShardsColumns} from '../../TopShards/getTopShardsColumns';
1210
import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -18,31 +16,20 @@ interface TopShardsProps {
1816
}
1917

2018
export const TopShards = ({path}: TopShardsProps) => {
21-
const dispatch = useTypedDispatch();
2219
const location = useLocation();
2320

2421
const query = parseQuery(location);
2522

2623
const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
2724

28-
const {
29-
loading,
30-
data: {result: data = undefined} = {},
31-
error,
32-
wasLoaded,
33-
} = useTypedSelector((state) => state.tenantOverviewTopShards);
34-
35-
useAutofetcher(
36-
(isBackground) => {
37-
if (!isBackground) {
38-
dispatch(setDataWasNotLoaded());
39-
}
40-
dispatch(sendTenantOverviewTopShardsQuery(path, currentSchemaPath));
41-
},
42-
[dispatch, path, currentSchemaPath],
43-
autorefresh,
25+
const {currentData, isFetching, error} = topShardsApi.useGetTopShardsQuery(
26+
{database: path, path: currentSchemaPath},
27+
{pollingInterval: autorefresh ? DEFAULT_POLLING_INTERVAL : 0},
4428
);
4529

30+
const loading = isFetching && currentData === undefined;
31+
const {result: data} = currentData || {};
32+
4633
const columns = getTopShardsColumns(path, location);
4734

4835
const title = getSectionTitle({
@@ -60,7 +47,6 @@ export const TopShards = ({path}: TopShardsProps) => {
6047
columns={columns}
6148
title={title}
6249
loading={loading}
63-
wasLoaded={wasLoaded}
6450
error={error}
6551
tableClassNameModifiers={{'top-queries': true}}
6652
/>

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
import React from 'react';
2-
31
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
4-
import {
5-
getTopNodesByMemory,
6-
selectTopNodesByMemory,
7-
setDataWasNotLoaded,
8-
} from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
2+
import {topNodesApi} from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
93
import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
10-
import {
11-
useAutofetcher,
12-
useSearchQuery,
13-
useTypedDispatch,
14-
useTypedSelector,
15-
} from '../../../../../utils/hooks';
4+
import {DEFAULT_POLLING_INTERVAL} from '../../../../../utils/constants';
5+
import {useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
166
import {getTopNodesByMemoryColumns} from '../../../../Nodes/getNodesColumns';
177
import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
188
import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -25,29 +15,20 @@ interface TopNodesByMemoryProps {
2515
}
2616

2717
export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryProps) {
28-
const dispatch = useTypedDispatch();
29-
3018
const query = useSearchQuery();
3119

32-
const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByMemory);
3320
const {autorefresh} = useTypedSelector((state) => state.schema);
34-
const topNodes = useTypedSelector(selectTopNodesByMemory);
3521
const columns = getTopNodesByMemoryColumns({
3622
getNodeRef: additionalNodesProps?.getNodeRef,
3723
});
3824

39-
const fetchNodes = React.useCallback(
40-
(isBackground: boolean) => {
41-
if (!isBackground) {
42-
dispatch(setDataWasNotLoaded());
43-
}
44-
45-
dispatch(getTopNodesByMemory({tenant: path}));
46-
},
47-
[dispatch, path],
25+
const {currentData, isFetching, error} = topNodesApi.useGetTopNodesQuery(
26+
{tenant: path, sortValue: 'Memory'},
27+
{pollingInterval: autorefresh ? DEFAULT_POLLING_INTERVAL : 0},
4828
);
4929

50-
useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
30+
const loading = isFetching && currentData === undefined;
31+
const topNodes = currentData;
5132

5233
const title = getSectionTitle({
5334
entity: i18n('nodes'),
@@ -64,7 +45,6 @@ export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryP
6445
columns={columns}
6546
title={title}
6647
loading={loading}
67-
wasLoaded={wasLoaded}
6848
error={error}
6949
emptyDataMessage={i18n('top-nodes.empty-data')}
7050
/>

0 commit comments

Comments
 (0)