Skip to content

Commit 253e401

Browse files
artemmufazalovartemmufazalov
authored
refactor(Storage): add proper types (#458)
1 parent ae1965e commit 253e401

File tree

5 files changed

+61
-61
lines changed

5 files changed

+61
-61
lines changed

‎src/containers/Storage/Storage.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
3434
import {AdditionalNodesInfo, NodesUptimeFilterValues} from '../../utils/nodes';
3535
import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
3636

37-
import StorageGroups from './StorageGroups/StorageGroups';
38-
import StorageNodes from './StorageNodes/StorageNodes';
37+
import {StorageGroups} from './StorageGroups/StorageGroups';
38+
import {StorageNodes} from './StorageNodes/StorageNodes';
3939
import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
4040
import {StorageVisibleEntityFilter} from './StorageVisibleEntityFilter/StorageVisibleEntityFilter';
4141
import {UsageFilter} from './UsageFilter';
@@ -158,7 +158,6 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
158158
visibleEntities={visibleEntities}
159159
nodesUptimeFilter={nodesUptimeFilter}
160160
data={storageNodes}
161-
nodes={nodesMap}
162161
tableSettings={tableSettings}
163162
onShowAll={handleShowAllNodes}
164163
additionalNodesInfo={additionalNodesInfo}

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

Lines changed: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import _ from 'lodash';
21
import cn from 'bem-cn-lite';
32

43
import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
54
import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
65

76
import type {NodesMap} from '../../../types/store/nodesList';
8-
import type {TVDiskStateInfo} from '../../../types/api/vdisk';
9-
import type {VisibleEntities} from '../../../store/reducers/storage/types';
7+
import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
108

119
import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
1210
import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
@@ -43,7 +41,7 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
4341
type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
4442

4543
interface StorageGroupsProps {
46-
data: any;
44+
data: PreparedStorageGroup[];
4745
nodes?: NodesMap;
4846
tableSettings: Settings;
4947
visibleEntities: VisibleEntities;
@@ -93,25 +91,25 @@ function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
9391
}
9492
}
9593

96-
function StorageGroups({
94+
export function StorageGroups({
9795
data,
9896
tableSettings,
9997
visibleEntities,
10098
nodes,
10199
onShowAll,
102100
}: StorageGroupsProps) {
103-
const allColumns: Column<any>[] = [
101+
const allColumns: Column<PreparedStorageGroup>[] = [
104102
{
105103
name: TableColumnsIds.PoolName,
106104
header: tableColumnsNames[TableColumnsIds.PoolName],
107105
width: 250,
108-
render: ({value}) => {
109-
const splitted = (value as string)?.split('/');
106+
render: ({row}) => {
107+
const splitted = row.PoolName?.split('/');
110108
return (
111109
<div className={b('pool-name-wrapper')}>
112110
{splitted && (
113111
<Popover
114-
content={value as string}
112+
content={row.PoolName}
115113
placement={['right']}
116114
behavior={PopoverBehavior.Immediate}
117115
>
@@ -129,9 +127,9 @@ function StorageGroups({
129127
name: TableColumnsIds.Type,
130128
header: tableColumnsNames[TableColumnsIds.Type],
131129
// prettier-ignore
132-
render: ({value, row}) => (
130+
render: ({row}) => (
133131
<>
134-
<Label>{(value as string) || '—'}</Label>
132+
<Label>{row.Type || '—'}</Label>
135133
{' '}
136134
{row.Encryption && (
137135
<Popover
@@ -157,8 +155,12 @@ function StorageGroups({
157155
name: TableColumnsIds.Missing,
158156
header: tableColumnsNames[TableColumnsIds.Missing],
159157
width: 100,
160-
render: ({value, row}) =>
161-
value ? <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label> : '-',
158+
render: ({row}) =>
159+
row.Missing ? (
160+
<Label theme={getDegradedSeverity(row)}>Degraded: {row.Missing}</Label>
161+
) : (
162+
'-'
163+
),
162164
align: DataTable.LEFT,
163165
defaultOrder: DataTable.DESCENDING,
164166
},
@@ -189,42 +191,44 @@ function StorageGroups({
189191
name: TableColumnsIds.GroupID,
190192
header: tableColumnsNames[TableColumnsIds.GroupID],
191193
width: 130,
192-
render: ({value}) => {
193-
return <span className={b('group-id')}>{value as number}</span>;
194+
render: ({row}) => {
195+
return <span className={b('group-id')}>{row.GroupID}</span>;
194196
},
195197
align: DataTable.RIGHT,
196198
},
197199
{
198200
name: TableColumnsIds.Used,
199201
header: tableColumnsNames[TableColumnsIds.Used],
200202
width: 100,
201-
render: ({value}) => {
202-
return bytesToGB(value, true);
203+
render: ({row}) => {
204+
return bytesToGB(row.Used, true);
203205
},
204206
align: DataTable.RIGHT,
205207
},
206208
{
207209
name: TableColumnsIds.Limit,
208210
header: tableColumnsNames[TableColumnsIds.Limit],
209211
width: 100,
210-
render: ({value}) => {
211-
return bytesToGB(value);
212+
render: ({row}) => {
213+
return bytesToGB(row.Limit);
212214
},
213215
align: DataTable.RIGHT,
214216
},
215217
{
216218
name: TableColumnsIds.UsedSpaceFlag,
217219
header: tableColumnsNames[TableColumnsIds.UsedSpaceFlag],
218220
width: 110,
219-
render: ({value}) => {
220-
const val = value as number;
221+
render: ({row}) => {
222+
const value = row.UsedSpaceFlag;
223+
221224
let color = 'Red';
222-
if (val < 100) {
225+
226+
if (value < 100) {
223227
color = 'Green';
224-
} else if (val < 10000) {
228+
} else if (value < 10000) {
225229
color = 'Yellow';
226-
} else if (val < 1000000) {
227-
value = 'Orange';
230+
} else if (value < 1000000) {
231+
color = 'Orange';
228232
}
229233
return <EntityStatus status={color} />;
230234
},
@@ -235,32 +239,35 @@ function StorageGroups({
235239
name: TableColumnsIds.Read,
236240
header: tableColumnsNames[TableColumnsIds.Read],
237241
width: 100,
238-
render: ({value}) => {
239-
return value ? bytesToSpeed(value) : '-';
242+
render: ({row}) => {
243+
return row.Read ? bytesToSpeed(row.Read) : '-';
240244
},
241245
align: DataTable.RIGHT,
242246
},
243247
{
244248
name: TableColumnsIds.Write,
245249
header: tableColumnsNames[TableColumnsIds.Write],
246250
width: 100,
247-
render: ({value}) => {
248-
return value ? bytesToSpeed(value) : '-';
251+
render: ({row}) => {
252+
return row.Write ? bytesToSpeed(row.Write) : '-';
249253
},
250254
align: DataTable.RIGHT,
251255
},
252256
{
253257
name: TableColumnsIds.VDisks,
254258
className: b('vdisks-column'),
255259
header: tableColumnsNames[TableColumnsIds.VDisks],
256-
render: ({value}) => (
260+
render: ({row}) => (
257261
<div className={b('vdisks-wrapper')}>
258-
{_.map(value as TVDiskStateInfo[], (el) => {
259-
const donors = el.Donors;
262+
{row.VDisks?.map((vDisk) => {
263+
const donors = vDisk.Donors;
260264

261265
return donors && donors.length > 0 ? (
262-
<Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
263-
<VDisk data={el} nodes={nodes} />
266+
<Stack
267+
className={b('vdisks-item')}
268+
key={stringifyVdiskId(vDisk.VDiskId)}
269+
>
270+
<VDisk data={vDisk} nodes={nodes} />
264271
{donors.map((donor) => {
265272
const isFullData = isFullVDiskData(donor);
266273

@@ -277,8 +284,8 @@ function StorageGroups({
277284
})}
278285
</Stack>
279286
) : (
280-
<div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
281-
<VDisk data={el} nodes={nodes} />
287+
<div className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
288+
<VDisk data={vDisk} nodes={nodes} />
282289
</div>
283290
);
284291
})}
@@ -330,7 +337,7 @@ function StorageGroups({
330337

331338
return data ? (
332339
<DataTable
333-
key={visibleEntities as string}
340+
key={visibleEntities}
334341
theme="yandex-cloud"
335342
data={data}
336343
columns={columns}
@@ -340,5 +347,3 @@ function StorageGroups({
340347
/>
341348
) : null;
342349
}
343-
344-
export default StorageGroups;

‎src/containers/Storage/StorageNodes/StorageNodes.tsx‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import _ from 'lodash';
21
import cn from 'bem-cn-lite';
32

43
import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
54

6-
import type {VisibleEntities} from '../../../store/reducers/storage/types';
5+
import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
76

87
import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
98
import {
@@ -25,7 +24,7 @@ enum TableColumnsIds {
2524
FQDN = 'FQDN',
2625
DataCenter = 'DataCenter',
2726
Rack = 'Rack',
28-
uptime = 'uptime',
27+
Uptime = 'Uptime',
2928
PDisks = 'PDisks',
3029
Missing = 'Missing',
3130
}
@@ -34,8 +33,7 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
3433
type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
3534

3635
interface StorageNodesProps {
37-
data: any;
38-
nodes: any;
36+
data: PreparedStorageNode[];
3937
tableSettings: Settings;
4038
visibleEntities: VisibleEntities;
4139
nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
@@ -48,7 +46,7 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
4846
FQDN: 'FQDN',
4947
DataCenter: 'DC',
5048
Rack: 'Rack',
51-
uptime: 'Uptime',
49+
Uptime: 'Uptime',
5250
PDisks: 'PDisks',
5351
Missing: 'Missing',
5452
};
@@ -75,7 +73,7 @@ function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
7573
}
7674
}
7775

78-
function StorageNodes({
76+
export function StorageNodes({
7977
data,
8078
tableSettings,
8179
visibleEntities,
@@ -85,7 +83,7 @@ function StorageNodes({
8583
}: StorageNodesProps) {
8684
const getNodeRef = additionalNodesInfo?.getNodeRef;
8785

88-
const allColumns: Column<any>[] = [
86+
const allColumns: Column<PreparedStorageNode>[] = [
8987
{
9088
name: TableColumnsIds.NodeId,
9189
header: tableColumnsNames[TableColumnsIds.NodeId],
@@ -114,8 +112,8 @@ function StorageNodes({
114112
align: DataTable.LEFT,
115113
},
116114
{
117-
name: TableColumnsIds.uptime,
118-
header: tableColumnsNames[TableColumnsIds.uptime],
115+
name: TableColumnsIds.Uptime,
116+
header: tableColumnsNames[TableColumnsIds.Uptime],
119117
width: 130,
120118
sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
121119
align: DataTable.RIGHT,
@@ -131,11 +129,11 @@ function StorageNodes({
131129
name: TableColumnsIds.PDisks,
132130
className: b('pdisks-column'),
133131
header: tableColumnsNames[TableColumnsIds.PDisks],
134-
render: ({value, row}) => (
132+
render: ({row}) => (
135133
<div className={b('pdisks-wrapper')}>
136-
{_.map(value as any, (el) => (
137-
<div className={b('pdisks-item')} key={el.PDiskId}>
138-
<PDisk data={el} nodeId={row.NodeId} />
134+
{row.PDisks?.map((pDisk) => (
135+
<div className={b('pdisks-item')} key={pDisk.PDiskId}>
136+
<PDisk data={pDisk} nodeId={row.NodeId} />
139137
</div>
140138
))}
141139
</div>
@@ -195,5 +193,3 @@ function StorageNodes({
195193
/>
196194
) : null;
197195
}
198-
199-
export default StorageNodes;

‎src/store/reducers/storage/selectors.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const prepareStorageNodeData = (node: TNodeInfo): PreparedStorageNode => {
117117
Rack: systemState.Rack,
118118
Host: systemState.Host,
119119
Endpoints: systemState.Endpoints,
120-
uptime: calcUptime(systemState.StartTime),
120+
Uptime: calcUptime(systemState.StartTime),
121121
StartTime: systemState.StartTime,
122122
PDisks: node.PDisks,
123123
Missing: missing,

‎src/store/reducers/storage/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ export type VisibleEntities = ValueOf<typeof VISIBLE_ENTITIES>;
2626
export type StorageType = ValueOf<typeof STORAGE_TYPES>;
2727

2828
export interface PreparedStorageNode extends TSystemStateInfo {
29-
NodeId: number | undefined;
29+
NodeId: number;
3030
PDisks: TPDiskStateInfo[] | undefined;
3131

3232
Missing: number;
33-
uptime: string;
33+
Uptime: string;
3434
}
3535

3636
export type RawStorageGroup = TBSGroupStateInfo & THiveStorageGroupStats;

0 commit comments

Comments
 (0)