Skip to content

Commit 03b3187

Browse files
artemmufazalovartemmufazalov
authored
refactor(Storage): move reducers, rename types, separate filters (#441)
1 parent c93c9c1 commit 03b3187

File tree

17 files changed

+223
-190
lines changed

17 files changed

+223
-190
lines changed

‎src/components/NodeHostWrapper/NodeHostWrapper.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import block from 'bem-cn-lite';
22

33
import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
44

5-
import type {INodesPreparedEntity} from '../../types/store/nodes';
5+
import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
66
import {getDefaultNodePath} from '../../containers/Node/NodePages';
77
import {isUnavailableNode, NodeAddress} from '../../utils/nodes';
88

@@ -15,7 +15,7 @@ import './NodeHostWrapper.scss';
1515
const b = block('ydb-node-host-wrapper');
1616

1717
interface NodeHostWrapperProps {
18-
node: INodesPreparedEntity;
18+
node: NodesPreparedEntity;
1919
getNodeRef?: (node?: NodeAddress) => string | null;
2020
}
2121

‎src/containers/Nodes/Nodes.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
setSearchValue,
2727
resetNodesState,
2828
getComputeNodes,
29-
} from '../../store/reducers/nodes';
29+
} from '../../store/reducers/nodes/nodes';
3030
import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
3131

3232
import {isDatabaseEntityType} from '../Tenant/utils/schema';

‎src/containers/Nodes/getNodesColumns.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper'
99
import type {NodeAddress} from '../../utils/nodes';
1010
import {formatBytesToGigabyte} from '../../utils/index';
1111

12-
import type {INodesPreparedEntity} from '../../types/store/nodes';
12+
import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
1313

1414
interface GetNodesColumnsProps {
1515
tabletsPath?: string;
1616
getNodeRef?: (node?: NodeAddress) => string | null;
1717
}
1818

1919
export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {
20-
const columns: Column<INodesPreparedEntity>[] = [
20+
const columns: Column<NodesPreparedEntity>[] = [
2121
{
2222
name: 'NodeId',
2323
header: '#',

‎src/containers/Storage/PDisk/PDisk.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {InternalLink} from '../../../components/InternalLink';
55
import {Stack} from '../../../components/Stack/Stack';
66

77
import routes, {createHref} from '../../../routes';
8-
import {getVDisksForPDisk} from '../../../store/reducers/storage';
8+
import {getVDisksForPDisk} from '../../../store/reducers/storage/storage';
99
import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
1010
import {TVDiskStateInfo} from '../../../types/api/vdisk';
1111
import {stringifyVdiskId} from '../../../utils';

‎src/containers/Storage/Storage.js‎

Lines changed: 26 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
33
import {connect} from 'react-redux';
44
import cn from 'bem-cn-lite';
55
import DataTable from '@gravity-ui/react-data-table';
6-
import {RadioButton} from '@gravity-ui/uikit';
76

87
import {Search} from '../../components/Search';
98
import {UsageFilter} from './UsageFilter';
@@ -18,33 +17,29 @@ import {
1817
getStorageInfo,
1918
setInitialState,
2019
getFilteredEntities,
21-
VisibleEntities,
2220
setVisibleEntities,
2321
setStorageFilter,
2422
setUsageFilter,
25-
StorageTypes,
2623
setStorageType,
2724
setNodesUptimeFilter,
2825
setDataWasNotLoaded,
29-
VisibleEntitiesTitles,
3026
getStoragePoolsGroupsCount,
3127
getStorageNodesCount,
3228
getUsageFilterOptions,
33-
} from '../../store/reducers/storage';
29+
} from '../../store/reducers/storage/storage';
30+
import {VISIBLE_ENTITIES, STORAGE_TYPES} from '../../store/reducers/storage/constants';
3431
import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
3532
import StorageGroups from './StorageGroups/StorageGroups';
3633
import StorageNodes from './StorageNodes/StorageNodes';
3734
import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
3835

36+
import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
37+
import {StorageVisibleEntityFilter} from './StorageVisibleEntityFilter/StorageVisibleEntityFilter';
38+
3939
import './Storage.scss';
4040

4141
const b = cn('global-storage');
4242

43-
const FILTER_OPTIONS = {
44-
Missing: 'missing',
45-
Space: 'space',
46-
};
47-
4843
const tableSettings = {
4944
...DEFAULT_TABLE_SETTINGS,
5045
defaultOrder: DataTable.DESCENDING,
@@ -74,25 +69,23 @@ class Storage extends React.Component {
7469
};
7570

7671
componentDidMount() {
77-
const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} =
78-
this.props;
72+
const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} = this.props;
7973

8074
this.autofetcher = new AutoFetcher();
8175
getNodesList();
8276
if (tenant || nodeId) {
83-
setVisibleEntities(VisibleEntities.All);
77+
setVisibleEntities(VISIBLE_ENTITIES.all);
8478
this.getStorageInfo({
85-
filter: FILTER_OPTIONS.All,
8679
type: storageType,
8780
});
8881
} else {
8982
this.getStorageInfo({
90-
filter: FILTER_OPTIONS.Missing,
83+
visibleEntities: VISIBLE_ENTITIES.missing,
9184
type: storageType,
9285
});
9386
this.autofetcher.fetch(() =>
9487
this.getStorageInfo({
95-
filter: FILTER_OPTIONS.Missing,
88+
visibleEntities: VISIBLE_ENTITIES.missing,
9689
type: storageType,
9790
}),
9891
);
@@ -105,7 +98,7 @@ class Storage extends React.Component {
10598

10699
const startFetch = () => {
107100
this.getStorageInfo({
108-
filter: FILTER_OPTIONS[visibleEntities],
101+
visibleEntities,
109102
type: storageType,
110103
});
111104
};
@@ -115,7 +108,7 @@ class Storage extends React.Component {
115108
this.autofetcher.start();
116109
this.autofetcher.fetch(() =>
117110
this.getStorageInfo({
118-
filter: FILTER_OPTIONS[visibleEntities],
111+
visibleEntities,
119112
type: storageType,
120113
}),
121114
);
@@ -183,16 +176,16 @@ class Storage extends React.Component {
183176

184177
return (
185178
<div className={b('table-wrapper')}>
186-
{storageType === StorageTypes.groups && (
179+
{storageType === STORAGE_TYPES.groups && (
187180
<StorageGroups
188181
visibleEntities={visibleEntities}
189182
data={flatListStorageEntities}
190183
tableSettings={tableSettings}
191184
nodes={nodes}
192-
onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
185+
onShowAll={() => this.onGroupVisibilityChange(VISIBLE_ENTITIES.all)}
193186
/>
194187
)}
195-
{storageType === StorageTypes.nodes && (
188+
{storageType === STORAGE_TYPES.nodes && (
196189
<StorageNodes
197190
visibleEntities={visibleEntities}
198191
nodesUptimeFilter={nodesUptimeFilter}
@@ -221,16 +214,16 @@ class Storage extends React.Component {
221214
};
222215

223216
onShowAllNodes = () => {
224-
this.onGroupVisibilityChange(VisibleEntities.All);
217+
this.onGroupVisibilityChange(VISIBLE_ENTITIES.all);
225218
this.onUptimeFilterChange(NodesUptimeFilterValues.All);
226219
};
227220

228221
renderEntitiesCount() {
229222
const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
230223
this.props;
231224

232-
const entityName = storageType === StorageTypes.groups ? 'Groups' : 'Nodes';
233-
const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
225+
const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
226+
const count = storageType === STORAGE_TYPES.groups ? groupsCount : nodesCount;
234227

235228
return (
236229
<EntitiesCount
@@ -259,7 +252,7 @@ class Storage extends React.Component {
259252
<div className={b('search')}>
260253
<Search
261254
placeholder={
262-
storageType === StorageTypes.groups
255+
storageType === STORAGE_TYPES.groups
263256
? 'Group ID, Pool name'
264257
: 'Node ID, FQDN'
265258
}
@@ -268,32 +261,17 @@ class Storage extends React.Component {
268261
/>
269262
</div>
270263

271-
<RadioButton value={storageType} onUpdate={this.onStorageTypeChange}>
272-
<RadioButton.Option value={StorageTypes.groups}>
273-
{StorageTypes.groups}
274-
</RadioButton.Option>
275-
<RadioButton.Option value={StorageTypes.nodes}>
276-
{StorageTypes.nodes}
277-
</RadioButton.Option>
278-
</RadioButton>
279-
280-
<RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
281-
<RadioButton.Option value={VisibleEntities.Missing}>
282-
{VisibleEntitiesTitles[VisibleEntities.Missing]}
283-
</RadioButton.Option>
284-
<RadioButton.Option value={VisibleEntities.Space}>
285-
{VisibleEntitiesTitles[VisibleEntities.Space]}
286-
</RadioButton.Option>
287-
<RadioButton.Option value={VisibleEntities.All}>
288-
{VisibleEntitiesTitles[VisibleEntities.All]}
289-
</RadioButton.Option>
290-
</RadioButton>
291-
292-
{storageType === StorageTypes.nodes && (
264+
<StorageTypeFilter value={storageType} onChange={this.onStorageTypeChange} />
265+
<StorageVisibleEntityFilter
266+
value={visibleEntities}
267+
onChange={this.onGroupVisibilityChange}
268+
/>
269+
270+
{storageType === STORAGE_TYPES.nodes && (
293271
<UptimeFilter value={nodesUptimeFilter} onChange={this.onUptimeFilterChange} />
294272
)}
295273

296-
{storageType === StorageTypes.groups && (
274+
{storageType === STORAGE_TYPES.groups && (
297275
<UsageFilter
298276
value={usageFilter}
299277
onChange={setUsageFilter}

‎src/containers/Storage/StorageGroups/StorageGroups.tsx‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
import _ from 'lodash';
22
import cn from 'bem-cn-lite';
3+
34
import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
45
import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
56

67
import type {NodesMap} from '../../../types/store/nodesList';
8+
import type {TVDiskStateInfo} from '../../../types/api/vdisk';
9+
import type {VisibleEntities} from '../../../store/reducers/storage/types';
710

8-
import shieldIcon from '../../../assets/icons/shield.svg';
9-
10-
import {Stack} from '../../../components/Stack/Stack';
11-
//@ts-ignore
12-
import EntityStatus from '../../../components/EntityStatus/EntityStatus';
13-
14-
import {TVDiskStateInfo} from '../../../types/api/vdisk';
15-
//@ts-ignore
16-
import {VisibleEntities} from '../../../store/reducers/storage';
17-
//@ts-ignore
11+
import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
1812
import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
19-
//@ts-ignore
2013
import {stringifyVdiskId} from '../../../utils';
2114
import {getUsage, isFullVDiskData} from '../../../utils/storage';
2215

16+
import shieldIcon from '../../../assets/icons/shield.svg';
17+
import {Stack} from '../../../components/Stack/Stack';
18+
import EntityStatus from '../../../components/EntityStatus/EntityStatus';
19+
2320
import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
2421
import {VDisk} from '../VDisk';
2522
import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
@@ -49,7 +46,7 @@ interface StorageGroupsProps {
4946
data: any;
5047
nodes: NodesMap;
5148
tableSettings: Settings;
52-
visibleEntities: keyof typeof VisibleEntities;
49+
visibleEntities: VisibleEntities;
5350
onShowAll?: VoidFunction;
5451
}
5552

@@ -70,21 +67,21 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
7067

7168
const b = cn('global-storage-groups');
7269

73-
function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
70+
function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
7471
switch (visibleEntities) {
75-
case VisibleEntities.All: {
72+
case VISIBLE_ENTITIES.all: {
7673
return {
7774
columnId: TableColumnsIds.PoolName,
7875
order: DataTable.ASCENDING,
7976
};
8077
}
81-
case VisibleEntities.Missing: {
78+
case VISIBLE_ENTITIES.missing: {
8279
return {
8380
columnId: TableColumnsIds.Missing,
8481
order: DataTable.DESCENDING,
8582
};
8683
}
87-
case VisibleEntities.Space: {
84+
case VISIBLE_ENTITIES.space: {
8885
return {
8986
columnId: TableColumnsIds.UsedSpaceFlag,
9087
order: DataTable.DESCENDING,
@@ -295,15 +292,15 @@ function StorageGroups({
295292

296293
let columns = allColumns;
297294

298-
if (visibleEntities === VisibleEntities.All) {
295+
if (visibleEntities === VISIBLE_ENTITIES.all) {
299296
columns = allColumns.filter((col) => {
300297
return (
301298
col.name !== TableColumnsIds.Missing && col.name !== TableColumnsIds.UsedSpaceFlag
302299
);
303300
});
304301
}
305302

306-
if (visibleEntities === VisibleEntities.Space) {
303+
if (visibleEntities === VISIBLE_ENTITIES.space) {
307304
columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
308305

309306
if (!data.length) {
@@ -317,7 +314,7 @@ function StorageGroups({
317314
}
318315
}
319316

320-
if (visibleEntities === VisibleEntities.Missing) {
317+
if (visibleEntities === VISIBLE_ENTITIES.missing) {
321318
columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
322319

323320
if (!data.length) {

0 commit comments

Comments
 (0)