Skip to content

Commit a3488da

Browse files
artemmufazalovartemmufazalov
authored
refactor: use storageApi for all storage tables (#1278)
1 parent f09ccd3 commit a3488da

File tree

16 files changed

+134
-190
lines changed

16 files changed

+134
-190
lines changed

‎src/containers/PDiskPage/PDiskGroups/PDiskGroups.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
import React from 'react';
2+
13
import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
24
import {TableSkeleton} from '../../../components/TableSkeleton/TableSkeleton';
3-
import {pDiskApi} from '../../../store/reducers/pdisk/pdisk';
5+
import {storageApi} from '../../../store/reducers/storage/storage';
46
import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
57
import {useAutoRefreshInterval} from '../../../utils/hooks';
68
import {STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from '../../Storage/StorageGroups/columns/getStorageGroupsColumns';
79
import {useGetDiskStorageColumns} from '../../Storage/StorageGroups/columns/hooks';
810

11+
import {preparePDiskStorageResponse} from './utils';
12+
913
interface PDiskGroupsProps {
1014
nodeId: string | number;
1115
pDiskId: string | number;
@@ -14,12 +18,15 @@ interface PDiskGroupsProps {
1418
export function PDiskGroups({pDiskId, nodeId}: PDiskGroupsProps) {
1519
const [autoRefreshInterval] = useAutoRefreshInterval();
1620

17-
const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery(
21+
const {currentData, isFetching} = storageApi.useGetStorageGroupsInfoQuery(
1822
{pDiskId, nodeId},
1923
{pollingInterval: autoRefreshInterval},
2024
);
21-
const loading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
22-
const data = pDiskStorageQuery.currentData ?? [];
25+
const loading = isFetching && currentData === undefined;
26+
27+
const preparedGroups = React.useMemo(() => {
28+
return preparePDiskStorageResponse(currentData, pDiskId, nodeId) || [];
29+
}, [currentData, pDiskId, nodeId]);
2330

2431
const pDiskStorageColumns = useGetDiskStorageColumns();
2532

@@ -30,7 +37,7 @@ export function PDiskGroups({pDiskId, nodeId}: PDiskGroupsProps) {
3037
return (
3138
<ResizeableDataTable
3239
columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
33-
data={data}
40+
data={preparedGroups}
3441
columns={pDiskStorageColumns}
3542
settings={DEFAULT_TABLE_SETTINGS}
3643
/>

‎src/containers/PDiskPage/PDiskGroups/utils.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type {PreparedStorageResponse} from '../../../store/reducers/storage/types';
2+
3+
export function preparePDiskStorageResponse(
4+
data?: PreparedStorageResponse,
5+
pDiskId?: number | string,
6+
nodeId?: number | string,
7+
) {
8+
return data?.groups?.filter((group) => {
9+
return group.VDisks?.some((vdisk) => {
10+
// If VDisk has PDisk inside, PDiskId and NodeId fields could be only inside PDisk and vice versa
11+
const groupPDiskId = vdisk.PDiskId ?? vdisk.PDisk?.PDiskId;
12+
const groupNodeId = vdisk.NodeId ?? vdisk.PDisk?.NodeId;
13+
14+
return (
15+
Number(groupPDiskId) === Number(pDiskId) && Number(groupNodeId) === Number(nodeId)
16+
);
17+
});
18+
});
19+
}

‎src/containers/PDiskPage/PDiskPage.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export function PDiskPage() {
124124
if (pDiskParamsDefined) {
125125
dispatch(
126126
api.util.invalidateTags([{type: 'PDiskData', id: getPDiskId(nodeId, pDiskId)}]),
127+
'StorageData',
127128
);
128129
}
129130
};

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import React from 'react';
2+
3+
import {storageApi} from '../../../../../store/reducers/storage/storage';
14
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
2-
import {topStorageGroupsApi} from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
5+
import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../../utils/constants';
36
import {useAutoRefreshInterval, useSearchQuery} from '../../../../../utils/hooks';
47
import {
58
STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY,
@@ -10,6 +13,8 @@ import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
1013
import {getSectionTitle} from '../getSectionTitle';
1114
import i18n from '../i18n';
1215

16+
import {prepareTopStorageGroups} from './utils';
17+
1318
interface TopGroupsProps {
1419
tenant?: string;
1520
}
@@ -21,12 +26,21 @@ export function TopGroups({tenant}: TopGroupsProps) {
2126

2227
const columns = getStorageTopGroupsColumns();
2328

24-
const {currentData, isFetching, error} = topStorageGroupsApi.useGetTopStorageGroupsQuery(
25-
{tenant},
29+
const {currentData, isFetching, error} = storageApi.useGetStorageGroupsInfoQuery(
30+
{
31+
tenant,
32+
sort: '-Usage',
33+
with: 'all',
34+
limit: TENANT_OVERVIEW_TABLES_LIMIT,
35+
},
2636
{pollingInterval: autoRefreshInterval},
2737
);
38+
2839
const loading = isFetching && currentData === undefined;
29-
const topGroups = currentData;
40+
41+
const preparedGroups = React.useMemo(() => {
42+
return prepareTopStorageGroups(currentData);
43+
}, [currentData]);
3044

3145
const title = getSectionTitle({
3246
entity: i18n('groups'),
@@ -40,7 +54,7 @@ export function TopGroups({tenant}: TopGroupsProps) {
4054
return (
4155
<TenantOverviewTableLayout
4256
columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
43-
data={topGroups || []}
57+
data={preparedGroups}
4458
columns={columns}
4559
title={title}
4660
loading={loading}

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/utils.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type {PreparedStorageResponse} from '../../../../../store/reducers/storage/types';
2+
import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../../utils/constants';
3+
4+
export const prepareTopStorageGroups = (data?: PreparedStorageResponse) => {
5+
const {groups = []} = data || {};
6+
7+
const sortedGroups = [...groups].sort((a, b) => b.Usage - a.Usage);
8+
9+
return sortedGroups.slice(0, TENANT_OVERVIEW_TABLES_LIMIT);
10+
};

‎src/containers/VDiskPage/VDiskPage.tsx‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,22 @@ import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewer
1313
import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
1414
import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
1515
import {VDiskInfo} from '../../components/VDiskInfo/VDiskInfo';
16+
import {api} from '../../store/reducers/api';
1617
import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
1718
import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
18-
import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
19+
import {storageApi} from '../../store/reducers/storage/storage';
1920
import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
2021
import {valueIsDefined} from '../../utils';
2122
import {cn} from '../../utils/cn';
2223
import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
2324
import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
24-
import {getSeverityColor} from '../../utils/disks/helpers';
25+
import {getSeverityColor, getVDiskSlotBasedId} from '../../utils/disks/helpers';
2526
import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
2627
import {STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from '../Storage/StorageGroups/columns/getStorageGroupsColumns';
2728
import {useGetDiskStorageColumns} from '../Storage/StorageGroups/columns/hooks';
2829

2930
import {vDiskPageKeyset} from './i18n';
31+
import {prepareVDiskGroupResponse} from './utils';
3032

3133
import './VDiskPage.scss';
3234

@@ -52,11 +54,14 @@ export function VDiskPage() {
5254
valueIsDefined(nodeId) && valueIsDefined(pDiskId) && valueIsDefined(vDiskSlotId)
5355
? {nodeId, pDiskId, vDiskSlotId}
5456
: skipToken;
55-
const {currentData, isFetching, refetch, error} = vDiskApi.useGetVDiskDataQuery(params, {
57+
const {
58+
currentData: vDiskData = {},
59+
isFetching,
60+
error,
61+
} = vDiskApi.useGetVDiskDataQuery(params, {
5662
pollingInterval: autoRefreshInterval,
5763
});
58-
const loading = isFetching && currentData === undefined;
59-
const {vDiskData = {}, groupData} = currentData || {};
64+
const loading = isFetching && vDiskData === undefined;
6065
const {NodeHost, NodeId, NodeType, NodeDC, PDiskId, PDiskType, Severity, VDiskId} = vDiskData;
6166
const {GroupID, GroupGeneration, Ring, Domain, VDisk} = VDiskId || {};
6267
const vDiskIdParamsDefined =
@@ -91,8 +96,16 @@ export function VDiskPage() {
9196
return undefined;
9297
};
9398

94-
const handleAfterEvictVDisk = async () => {
95-
return refetch();
99+
const handleAfterEvictVDisk = () => {
100+
dispatch(
101+
api.util.invalidateTags([
102+
{
103+
type: 'VDiskData',
104+
id: getVDiskSlotBasedId(nodeId || 0, pDiskId || 0, vDiskSlotId || 0),
105+
},
106+
'StorageData',
107+
]),
108+
);
96109
};
97110

98111
const renderHelmet = () => {
@@ -166,11 +179,11 @@ export function VDiskPage() {
166179
};
167180

168181
const renderGroupInfo = () => {
169-
if (groupData) {
182+
if (valueIsDefined(GroupID)) {
170183
return (
171184
<React.Fragment>
172185
<div className={vDiskPageCn('group-title')}>{vDiskPageKeyset('group')}</div>
173-
<VDiskGroup data={groupData} />
186+
<VDiskGroup groupId={GroupID} />
174187
</React.Fragment>
175188
);
176189
}
@@ -203,13 +216,30 @@ export function VDiskPage() {
203216
);
204217
}
205218

206-
export function VDiskGroup({data}: {data: PreparedStorageGroup}) {
219+
export function VDiskGroup({groupId}: {groupId: string | number}) {
220+
const [autoRefreshInterval] = useAutoRefreshInterval();
221+
222+
const {currentData} = storageApi.useGetStorageGroupsInfoQuery(
223+
{groupId},
224+
{pollingInterval: autoRefreshInterval},
225+
);
226+
227+
const preparedGroups = React.useMemo(() => {
228+
const group = prepareVDiskGroupResponse(currentData, groupId);
229+
230+
return group ? [group] : undefined;
231+
}, [currentData, groupId]);
232+
207233
const vDiskStorageColumns = useGetDiskStorageColumns();
208234

235+
if (!preparedGroups) {
236+
return null;
237+
}
238+
209239
return (
210240
<ResizeableDataTable
211241
columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
212-
data={[data]}
242+
data={preparedGroups}
213243
columns={vDiskStorageColumns}
214244
settings={DEFAULT_TABLE_SETTINGS}
215245
/>

‎src/containers/VDiskPage/utils.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type {PreparedStorageResponse} from '../../store/reducers/storage/types';
2+
3+
export function prepareVDiskGroupResponse(
4+
data?: PreparedStorageResponse,
5+
groupId?: string | number,
6+
) {
7+
return data?.groups?.find((group) => {
8+
return Number(group.GroupId) === Number(groupId);
9+
});
10+
}

‎src/store/reducers/api.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const api = createApi({
99
*/
1010
endpoints: () => ({}),
1111
invalidationBehavior: 'immediately',
12-
tagTypes: ['All', 'PDiskData', 'UserData', 'PreviewData', 'Tablet'],
12+
tagTypes: ['All', 'PDiskData', 'PreviewData', 'StorageData', 'Tablet', 'UserData', 'VDiskData'],
1313
});
1414

1515
export const _NEVER = Symbol();

‎src/store/reducers/pdisk/pdisk.ts‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {getPDiskId} from '../../../utils/disks/helpers';
22
import {api} from '../api';
33

4-
import {preparePDiskDataResponse, preparePDiskStorageResponse} from './utils';
4+
import {preparePDiskDataResponse} from './utils';
55

66
interface PDiskParams {
77
nodeId: number | string;
@@ -31,27 +31,6 @@ export const pDiskApi = api.injectEndpoints({
3131
},
3232
],
3333
}),
34-
getStorageInfo: build.query({
35-
queryFn: async ({nodeId, pDiskId}: PDiskParams, {signal}) => {
36-
try {
37-
const response = await window.api.getStorageInfo(
38-
{nodeId, version: 'v1'},
39-
{signal},
40-
);
41-
const data = preparePDiskStorageResponse(response, pDiskId, nodeId);
42-
return {data};
43-
} catch (error) {
44-
return {error};
45-
}
46-
},
47-
providesTags: (_result, _error, arg) => [
48-
'All',
49-
{
50-
type: 'PDiskData',
51-
id: getPDiskId(arg.nodeId, arg.pDiskId),
52-
},
53-
],
54-
}),
5534
}),
5635
overrideExisting: 'throw',
5736
});

‎src/store/reducers/pdisk/utils.ts‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import type {TPDiskInfoResponse} from '../../../types/api/pdisk';
2-
import type {TStorageInfo} from '../../../types/api/storage';
32
import type {TEvSystemStateResponse} from '../../../types/api/systemState';
43
import {getArray, valueIsDefined} from '../../../utils';
54
import {preparePDiskData, prepareVDiskData} from '../../../utils/disks/prepareDisks';
65
import {prepareNodeSystemState} from '../../../utils/nodes';
7-
import type {PreparedStorageGroup} from '../storage/types';
8-
import {prepareStorageGroupData} from '../storage/utils';
96

107
import type {PDiskData, SlotItem} from './types';
118

@@ -109,29 +106,3 @@ export function preparePDiskDataResponse([pdiskResponse = {}, nodeResponse]: [
109106
SlotItems: diskSlots,
110107
};
111108
}
112-
113-
export function preparePDiskStorageResponse(
114-
data: TStorageInfo,
115-
pDiskId: number | string,
116-
nodeId: number | string,
117-
) {
118-
const preparedGroups: PreparedStorageGroup[] = [];
119-
120-
data.StoragePools?.forEach((pool) =>
121-
pool.Groups?.forEach((group) => {
122-
const groupHasPDiskVDisks = group.VDisks?.some((vdisk) => {
123-
// If VDisk has PDisk inside, PDiskId and NodeId fields could be only inside PDisk and vice versa
124-
const groupPDiskId = vdisk.PDiskId ?? vdisk.PDisk?.PDiskId;
125-
const groupNodeId = vdisk.NodeId ?? vdisk.PDisk?.NodeId;
126-
127-
return groupPDiskId === Number(pDiskId) && groupNodeId === Number(nodeId);
128-
});
129-
130-
if (groupHasPDiskVDisks) {
131-
preparedGroups.push(prepareStorageGroupData(group, pool));
132-
}
133-
}),
134-
);
135-
136-
return preparedGroups;
137-
}

0 commit comments

Comments
 (0)