Skip to content

Commit c963a02

Browse files
astandrikastandrik
committed
feat: add dimming to vdisk page (nodes) and pdisk page (vdisks)
1 parent f30a38f commit c963a02

File tree

18 files changed

+106
-48
lines changed

18 files changed

+106
-48
lines changed

‎src/containers/PDiskPage/PDiskPage.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {valueIsDefined} from '../../utils';
2525
import {cn} from '../../utils/cn';
2626
import {getPDiskId, getSeverityColor} from '../../utils/disks/helpers';
2727
import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
28-
import {Storage} from '../Storage/Storage';
28+
import {StorageWrapper} from '../Storage/StorageWrapper';
2929

3030
import {DecommissionButton} from './DecommissionButton/DecommissionButton';
3131
import {DecommissionLabel} from './DecommissionLabel/DecommissionLabel';
@@ -244,7 +244,9 @@ export function PDiskPage() {
244244
) : null;
245245
}
246246
case 'storage': {
247-
return pDiskParamsDefined ? <Storage nodeId={nodeId} pDiskId={pDiskId} /> : null;
247+
return pDiskParamsDefined ? (
248+
<StorageWrapper nodeId={nodeId} pDiskId={pDiskId} />
249+
) : null;
248250
}
249251
default:
250252
return null;

‎src/containers/Storage/Disks/Disks.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
66
import {getPDiskId} from '../../../utils/disks/helpers';
77
import type {PreparedVDisk} from '../../../utils/disks/types';
88
import {PDisk} from '../PDisk';
9+
import type {StorageViewContext} from '../types';
910
import {isVdiskActive} from '../utils';
10-
import type {VDiskViewContext} from '../utils';
1111

1212
import './Disks.scss';
1313

1414
const b = cn('ydb-storage-disks');
1515

1616
interface DisksProps {
1717
vDisks?: PreparedVDisk[];
18-
viewContext?: VDiskViewContext;
18+
viewContext?: StorageViewContext;
1919
}
2020

2121
export function Disks({vDisks = [], viewContext}: DisksProps) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import {cn} from '../../../utils/cn';
1111
import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
1212
import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
1313
import {STRUCTURE} from '../../Node/NodePages';
14+
import type {StorageViewContext} from '../types';
1415
import {isVdiskActive} from '../utils';
15-
import type {VDiskViewContext} from '../utils';
1616

1717
import './PDisk.scss';
1818

@@ -26,7 +26,7 @@ interface PDiskProps {
2626
onHidePopup?: VoidFunction;
2727
className?: string;
2828
progressBarClassName?: string;
29-
viewContext?: VDiskViewContext;
29+
viewContext?: StorageViewContext;
3030
}
3131

3232
export const PDisk = ({

‎src/containers/Storage/PaginatedStorage.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {PaginatedStorageGroups} from './PaginatedStorageGroups';
22
import {PaginatedStorageNodes} from './PaginatedStorageNodes';
3+
import type {StorageViewContext} from './types';
34
import {useStorageQueryParams} from './useStorageQueryParams';
45

56
export interface PaginatedStorageProps {
@@ -8,6 +9,8 @@ export interface PaginatedStorageProps {
89
groupId?: string | number;
910
pDiskId?: string | number;
1011

12+
viewContext: StorageViewContext;
13+
1114
parentContainer?: Element | null;
1215
}
1316

‎src/containers/Storage/PaginatedStorageGroups.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,14 @@ function StorageGroupsComponent({
5454
nodeId,
5555
groupId,
5656
pDiskId,
57+
viewContext,
5758
parentContainer,
5859
}: PaginatedStorageProps) {
5960
const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
6061

6162
const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
6263
visibleEntities,
63-
nodeId: nodeId?.toString(),
64+
viewContext,
6465
});
6566

6667
const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
@@ -99,14 +100,16 @@ function GroupedStorageGroupsComponent({
99100
nodeId,
100101
groupId,
101102
pDiskId,
103+
104+
viewContext,
102105
}: PaginatedStorageProps) {
103106
const [autoRefreshInterval] = useAutoRefreshInterval();
104107
const {searchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} =
105108
useStorageQueryParams();
106109

107110
const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
108111
visibleEntities,
109-
nodeId: nodeId?.toString(),
112+
viewContext,
110113
});
111114

112115
const {currentData, isFetching, error} = storageApi.useGetStorageGroupsInfoQuery(

‎src/containers/Storage/PaginatedStorageNodes.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {TableGroup} from './TableGroup/TableGroup';
2222
import {useExpandedGroups} from './TableGroup/useExpandedTableGroups';
2323
import i18n from './i18n';
2424
import {b, renderPaginatedTableErrorMessage} from './shared';
25+
import type {StorageViewContext} from './types';
2526
import {useStorageQueryParams} from './useStorageQueryParams';
2627

2728
import './Storage.scss';
@@ -60,14 +61,15 @@ function StorageNodesComponent({
6061
database,
6162
nodeId,
6263
groupId,
64+
viewContext,
6365
parentContainer,
6466
}: PaginatedStorageProps) {
6567
const {searchValue, visibleEntities, nodesUptimeFilter, handleShowAllNodes} =
6668
useStorageQueryParams();
6769

6870
const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
6971
database,
70-
groupId: groupId?.toString(),
72+
viewContext,
7173
});
7274

7375
const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
@@ -101,14 +103,19 @@ function StorageNodesComponent({
101103
);
102104
}
103105

104-
function GroupedStorageNodesComponent({database, groupId, nodeId}: PaginatedStorageProps) {
106+
function GroupedStorageNodesComponent({
107+
database,
108+
groupId,
109+
nodeId,
110+
viewContext,
111+
}: PaginatedStorageProps) {
105112
const [autoRefreshInterval] = useAutoRefreshInterval();
106113

107114
const {searchValue, storageNodesGroupByParam, handleShowAllNodes} = useStorageQueryParams();
108115

109116
const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
110117
database,
111-
groupId: groupId?.toString(),
118+
viewContext,
112119
});
113120

114121
const {currentData, isFetching, error} = storageApi.useGetStorageNodesInfoQuery(
@@ -193,10 +200,10 @@ function GroupedStorageNodesComponent({database, groupId, nodeId}: PaginatedStor
193200

194201
function useStorageNodesColumnsToSelect({
195202
database,
196-
groupId,
203+
viewContext,
197204
}: {
198205
database?: string;
199-
groupId?: string;
206+
viewContext: StorageViewContext;
200207
}) {
201208
const {balancer} = useClusterBaseInfo();
202209
const {additionalNodesProps} = useAdditionalNodeProps({balancer});
@@ -206,6 +213,6 @@ function useStorageNodesColumnsToSelect({
206213
additionalNodesProps,
207214
visibleEntities,
208215
database,
209-
groupId,
216+
viewContext,
210217
});
211218
}

‎src/containers/Storage/Storage.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {useStorageGroupsSelectedColumns} from './StorageGroups/columns/hooks';
2222
import {StorageNodesTable} from './StorageNodes/StorageNodesTable';
2323
import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
2424
import {b} from './shared';
25+
import type {StorageViewContext} from './types';
2526
import {useStorageQueryParams} from './useStorageQueryParams';
2627
import {defaultSortNode, getDefaultSortGroup} from './utils';
2728

@@ -32,9 +33,11 @@ interface StorageProps {
3233
nodeId?: string | number;
3334
groupId?: string | number;
3435
pDiskId?: string | number;
36+
37+
viewContext: StorageViewContext;
3538
}
3639

37-
export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
40+
export const Storage = ({database, viewContext, nodeId, groupId, pDiskId}: StorageProps) => {
3841
const {balancer} = useClusterBaseInfo();
3942
const {additionalNodesProps} = useAdditionalNodeProps({balancer});
4043

@@ -75,14 +78,14 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
7578
additionalNodesProps,
7679
visibleEntities,
7780
database,
78-
groupId: groupId?.toString(),
81+
viewContext,
7982
});
8083

8184
const {
8285
columnsToShow: storageGroupsColumnsToShow,
8386
columnsToSelect: storageGroupsColumnsToSelect,
8487
setColumns: setStorageGroupsSelectedColumns,
85-
} = useStorageGroupsSelectedColumns({visibleEntities, nodeId: nodeId?.toString()});
88+
} = useStorageGroupsSelectedColumns({visibleEntities, viewContext});
8689

8790
const nodesQuery = storageApi.useGetStorageNodesInfoQuery(
8891
{

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ const getVDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => (
193193
<VDiskWithDonorsStack
194194
key={stringifyVdiskId(vDisk.VDiskId)}
195195
data={vDisk}
196-
inactive={!isVdiskActive(vDisk, data)}
196+
inactive={!isVdiskActive(vDisk, data?.viewContext)}
197197
className={b('vdisks-item')}
198198
/>
199199
))}
@@ -210,7 +210,7 @@ const getDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => ({
210210
header: STORAGE_GROUPS_COLUMNS_TITLES.VDisksPDisks,
211211
className: b('disks-column'),
212212
render: ({row}) => {
213-
return <Disks vDisks={row.VDisks} viewContext={data} />;
213+
return <Disks vDisks={row.VDisks} viewContext={data?.viewContext} />;
214214
},
215215
align: DataTable.CENTER,
216216
width: 900,

‎src/containers/Storage/StorageGroups/columns/hooks.ts‎

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

33
import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants';
44
import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
5+
import type {StorageViewContext} from '../../types';
56

67
import {getStorageGroupsColumns} from './columns';
78
import {
@@ -13,17 +14,17 @@ import {
1314
} from './constants';
1415
import type {GetStorageGroupsColumnsParams} from './types';
1516

16-
export function useGetStorageGroupsColumns(nodeId?: string) {
17+
export function useGetStorageGroupsColumns(viewContext: StorageViewContext) {
1718
return React.useMemo(() => {
18-
return getStorageGroupsColumns({nodeId});
19-
}, [nodeId]);
19+
return getStorageGroupsColumns({viewContext});
20+
}, [viewContext]);
2021
}
2122

2223
export function useStorageGroupsSelectedColumns({
2324
visibleEntities,
24-
nodeId,
25+
viewContext,
2526
}: GetStorageGroupsColumnsParams) {
26-
const columns = useGetStorageGroupsColumns(nodeId);
27+
const columns = useGetStorageGroupsColumns(viewContext);
2728

2829
const requiredColumns = React.useMemo(() => {
2930
if (visibleEntities === VISIBLE_ENTITIES.missing) {

‎src/containers/Storage/StorageGroups/columns/types.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
22

33
import type {Column as PaginatedTableColumn} from '../../../../components/PaginatedTable';
44
import type {PreparedStorageGroup, VisibleEntities} from '../../../../store/reducers/storage/types';
5+
import type {StorageViewContext} from '../../types';
56

67
export type StorageGroupsColumn = PaginatedTableColumn<PreparedStorageGroup> &
78
DataTableColumn<PreparedStorageGroup>;
89

910
export interface GetStorageColumnsData {
10-
nodeId?: string;
11+
viewContext: StorageViewContext;
1112
}
1213

1314
export interface GetStorageGroupsColumnsParams {
1415
visibleEntities?: VisibleEntities;
15-
nodeId?: string;
16+
viewContext: StorageViewContext;
1617
}
1718

1819
export type StorageColumnsGetter = (data?: GetStorageColumnsData) => StorageGroupsColumn[];

0 commit comments

Comments
 (0)