Skip to content

Commit 5727c21

Browse files
astandrikastandrik
authored
fix: count pdisk-vdisk column width for skeletons (#2214)
1 parent 714e7c7 commit 5727c21

File tree

20 files changed

+239
-87
lines changed

20 files changed

+239
-87
lines changed

‎src/components/PaginatedTable/PaginatedTable.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type {
1111
FetchData,
1212
GetRowClassName,
1313
HandleTableColumnsResize,
14+
PaginatedTableData,
1415
RenderControls,
1516
RenderEmptyDataMessage,
1617
RenderErrorMessage,
@@ -36,6 +37,7 @@ export interface PaginatedTableProps<T, F> {
3637
renderEmptyDataMessage?: RenderEmptyDataMessage;
3738
renderErrorMessage?: RenderErrorMessage;
3839
containerClassName?: string;
40+
onDataFetched?: (data: PaginatedTableData<T>) => void;
3941
}
4042

4143
const DEFAULT_PAGINATION_LIMIT = 20;
@@ -56,6 +58,7 @@ export const PaginatedTable = <T, F>({
5658
renderErrorMessage,
5759
renderEmptyDataMessage,
5860
containerClassName,
61+
onDataFetched,
5962
}: PaginatedTableProps<T, F>) => {
6063
const initialTotal = initialEntitiesCount || 0;
6164
const initialFound = initialEntitiesCount || 1;
@@ -84,11 +87,17 @@ export const PaginatedTable = <T, F>({
8487
return foundEntities % chunkSize || chunkSize;
8588
}, [foundEntities, chunkSize]);
8689

87-
const handleDataFetched = React.useCallback((total: number, found: number) => {
88-
setTotalEntities(total);
89-
setFoundEntities(found);
90-
setIsInitialLoad(false);
91-
}, []);
90+
const handleDataFetched = React.useCallback(
91+
(data?: PaginatedTableData<T>) => {
92+
if (data) {
93+
setTotalEntities(data.total);
94+
setFoundEntities(data.found);
95+
setIsInitialLoad(false);
96+
onDataFetched?.(data);
97+
}
98+
},
99+
[onDataFetched],
100+
);
92101

93102
// reset table on filters change
94103
React.useLayoutEffect(() => {

‎src/components/PaginatedTable/TableChunk.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type {
1212
Column,
1313
FetchData,
1414
GetRowClassName,
15+
PaginatedTableData,
1516
RenderEmptyDataMessage,
1617
RenderErrorMessage,
1718
SortParams,
@@ -35,7 +36,7 @@ interface TableChunkProps<T, F> {
3536
getRowClassName?: GetRowClassName<T>;
3637
renderErrorMessage?: RenderErrorMessage;
3738
renderEmptyDataMessage?: RenderEmptyDataMessage;
38-
onDataFetched: (total: number, found: number) => void;
39+
onDataFetched: (data?: PaginatedTableData<T>) => void;
3940
}
4041

4142
// Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
@@ -93,8 +94,12 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
9394

9495
React.useEffect(() => {
9596
if (currentData && isActive) {
96-
const {total = 0, found = 0} = currentData;
97-
onDataFetched(total, found);
97+
onDataFetched({
98+
...currentData,
99+
data: currentData.data as T[],
100+
found: currentData.found || 0,
101+
total: currentData.total || 0,
102+
});
98103
}
99104
}, [currentData, isActive, onDataFetched]);
100105

‎src/components/nodesColumns/columns.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,7 @@ export function getMissingDisksColumn<T extends {Missing?: number}>(): Column<T>
370370
render: ({row}) => row.Missing,
371371
align: DataTable.CENTER,
372372
defaultOrder: DataTable.DESCENDING,
373+
width: 100,
373374
};
374375
}
375376

‎src/containers/Storage/PDisk/PDisk.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
@import '../../../styles/mixins.scss';
2+
13
.pdisk-storage {
4+
--pdisk-vdisk-width: 3px;
5+
--pdisk-gap-width: 2px;
6+
27
position: relative;
38

49
display: flex;
510
flex-direction: column;
611
justify-content: flex-end;
712

8-
width: var(--pdisk-width);
913
min-width: var(--pdisk-min-width);
1014

1115
&__content {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface PDiskProps {
2525
className?: string;
2626
progressBarClassName?: string;
2727
viewContext?: StorageViewContext;
28+
width?: number;
2829
}
2930

3031
export const PDisk = ({
@@ -36,6 +37,7 @@ export const PDisk = ({
3637
className,
3738
progressBarClassName,
3839
viewContext,
40+
width,
3941
}: PDiskProps) => {
4042
const {NodeId, PDiskId} = data;
4143
const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
@@ -79,7 +81,7 @@ export const PDisk = ({
7981
}
8082

8183
return (
82-
<div className={b(null, className)} ref={anchorRef}>
84+
<div className={b(null, className)} ref={anchorRef} style={{width}}>
8385
{renderVDisks()}
8486
<HoverPopup
8587
showPopup={showPopup}

‎src/containers/Storage/PaginatedStorageNodes.tsx

Lines changed: 65 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
useViewerNodesHandlerHasGrouping,
1010
} from '../../store/reducers/capabilities/hooks';
1111
import {storageApi} from '../../store/reducers/storage/storage';
12+
import type {NodesGroupByField} from '../../types/api/nodes';
1213
import {useAutoRefreshInterval} from '../../utils/hooks';
1314
import {useAdditionalNodesProps} from '../../utils/hooks/useAdditionalNodesProps';
1415
import {NodesUptimeFilterValues} from '../../utils/nodes';
@@ -17,12 +18,14 @@ import type {PaginatedStorageProps} from './PaginatedStorage';
1718
import {StorageNodesControls} from './StorageControls/StorageControls';
1819
import {PaginatedStorageNodesTable} from './StorageNodes/PaginatedStorageNodesTable';
1920
import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
21+
import type {StorageNodesColumnsSettings} from './StorageNodes/columns/types';
2022
import {TableGroup} from './TableGroup/TableGroup';
2123
import {useExpandedGroups} from './TableGroup/useExpandedTableGroups';
2224
import i18n from './i18n';
2325
import {b, renderPaginatedTableErrorMessage} from './shared';
2426
import type {StorageViewContext} from './types';
2527
import {useStorageQueryParams} from './useStorageQueryParams';
28+
import {useStorageColumnsSettings} from './utils';
2629

2730
import './Storage.scss';
2831

@@ -68,9 +71,12 @@ function StorageNodesComponent({
6871

6972
const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
7073

74+
const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
75+
7176
const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
7277
database,
7378
viewContext,
79+
columnsSettings,
7480
});
7581

7682
const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
@@ -101,6 +107,7 @@ function StorageNodesComponent({
101107
renderErrorMessage={renderPaginatedTableErrorMessage}
102108
columns={columnsToShow}
103109
initialEntitiesCount={initialEntitiesCount}
110+
onDataFetched={handleDataFetched}
104111
/>
105112
);
106113
}
@@ -116,7 +123,7 @@ function GroupedStorageNodesComponent({
116123

117124
const {searchValue, storageNodesGroupByParam, handleShowAllNodes} = useStorageQueryParams();
118125

119-
const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
126+
const {columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
120127
database,
121128
viewContext,
122129
});
@@ -168,19 +175,15 @@ function GroupedStorageNodesComponent({
168175
expanded={isExpanded}
169176
onIsExpandedChange={setIsGroupExpanded}
170177
>
171-
<PaginatedStorageNodesTable
178+
<StorageNodesTableGroupContent
172179
database={database}
173180
parentRef={parentRef}
174181
nodeId={nodeId}
175182
groupId={groupId}
176183
searchValue={searchValue}
177-
visibleEntities={'all'}
178-
nodesUptimeFilter={NodesUptimeFilterValues.All}
179-
onShowAll={handleShowAllNodes}
184+
handleShowAllNodes={handleShowAllNodes}
180185
filterGroup={name}
181186
filterGroupBy={storageNodesGroupByParam}
182-
renderErrorMessage={renderPaginatedTableErrorMessage}
183-
columns={columnsToShow}
184187
initialEntitiesCount={count}
185188
/>
186189
</TableGroup>
@@ -206,12 +209,66 @@ function GroupedStorageNodesComponent({
206209
);
207210
}
208211

212+
interface StorageNodesTableGroupContentProps {
213+
database?: string;
214+
parentRef: React.RefObject<HTMLElement>;
215+
nodeId?: string | number;
216+
groupId?: string | number;
217+
searchValue: string;
218+
handleShowAllNodes: VoidFunction;
219+
filterGroup: string;
220+
filterGroupBy?: NodesGroupByField;
221+
viewContext?: StorageViewContext;
222+
initialEntitiesCount: number;
223+
}
224+
225+
function StorageNodesTableGroupContent({
226+
database,
227+
parentRef,
228+
nodeId,
229+
groupId,
230+
searchValue,
231+
handleShowAllNodes,
232+
filterGroup,
233+
filterGroupBy,
234+
viewContext,
235+
initialEntitiesCount,
236+
}: StorageNodesTableGroupContentProps) {
237+
const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
238+
const {columnsToShow} = useStorageNodesColumnsToSelect({
239+
database,
240+
viewContext,
241+
columnsSettings,
242+
});
243+
244+
return (
245+
<PaginatedStorageNodesTable
246+
database={database}
247+
parentRef={parentRef}
248+
nodeId={nodeId}
249+
groupId={groupId}
250+
searchValue={searchValue}
251+
visibleEntities={'all'}
252+
nodesUptimeFilter={NodesUptimeFilterValues.All}
253+
onShowAll={handleShowAllNodes}
254+
filterGroup={filterGroup}
255+
filterGroupBy={filterGroupBy}
256+
renderErrorMessage={renderPaginatedTableErrorMessage}
257+
columns={columnsToShow}
258+
initialEntitiesCount={initialEntitiesCount}
259+
onDataFetched={handleDataFetched}
260+
/>
261+
);
262+
}
263+
209264
function useStorageNodesColumnsToSelect({
210265
database,
211266
viewContext,
267+
columnsSettings,
212268
}: {
213269
database?: string;
214270
viewContext?: StorageViewContext;
271+
columnsSettings?: StorageNodesColumnsSettings;
215272
}) {
216273
const additionalNodesProps = useAdditionalNodesProps();
217274
const {visibleEntities} = useStorageQueryParams();
@@ -221,5 +278,6 @@ function useStorageNodesColumnsToSelect({
221278
visibleEntities,
222279
database,
223280
viewContext,
281+
columnsSettings,
224282
});
225283
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
22

3-
import type {RenderControls, RenderErrorMessage} from '../../../components/PaginatedTable';
3+
import type {
4+
PaginatedTableData,
5+
RenderControls,
6+
RenderErrorMessage,
7+
} from '../../../components/PaginatedTable';
48
import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
59
import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
610
import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
@@ -40,6 +44,7 @@ interface PaginatedStorageNodesTableProps {
4044
renderControls?: RenderControls;
4145
renderErrorMessage: RenderErrorMessage;
4246
initialEntitiesCount?: number;
47+
onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
4348
}
4449

4550
export const PaginatedStorageNodesTable = ({
@@ -57,6 +62,7 @@ export const PaginatedStorageNodesTable = ({
5762
renderControls,
5863
renderErrorMessage,
5964
initialEntitiesCount,
65+
onDataFetched,
6066
}: PaginatedStorageNodesTableProps) => {
6167
const tableFilters = React.useMemo(() => {
6268
return {
@@ -111,6 +117,7 @@ export const PaginatedStorageNodesTable = ({
111117
getRowClassName={getRowUnavailableClassName}
112118
filters={tableFilters}
113119
tableName="storage-nodes"
120+
onDataFetched={onDataFetched}
114121
/>
115122
);
116123
};

‎src/containers/Storage/StorageNodes/columns/StorageNodesColumns.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,9 @@
77

88
&__pdisks-wrapper {
99
display: flex;
10-
gap: var(--pdisk-margin);
10+
gap: 10px;
1111

12-
width: var(--pdisks-container-width);
1312
height: 40px;
14-
15-
@include calculate-storage-nodes-pdisk-variables();
1613
}
1714

1815
&__pdisks-item {

0 commit comments

Comments
 (0)