Skip to content

Commit af31a19

Browse files
astandrikastandrik
committed
fix: use real column width
1 parent c423cbe commit af31a19

File tree

15 files changed

+117
-89
lines changed

15 files changed

+117
-89
lines changed

‎src/components/PaginatedTable/PaginatedTable.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export interface PaginatedTableProps<T, F> {
3737
renderEmptyDataMessage?: RenderEmptyDataMessage;
3838
renderErrorMessage?: RenderErrorMessage;
3939
containerClassName?: string;
40-
tableStyle?: React.CSSProperties;
4140
onDataFetched?: (data: PaginatedTableData<T>) => void;
4241
}
4342

@@ -59,7 +58,6 @@ export const PaginatedTable = <T, F>({
5958
renderErrorMessage,
6059
renderEmptyDataMessage,
6160
containerClassName,
62-
tableStyle,
6361
onDataFetched,
6462
}: PaginatedTableProps<T, F>) => {
6563
const initialTotal = initialEntitiesCount || 0;
@@ -156,7 +154,7 @@ export const PaginatedTable = <T, F>({
156154
};
157155

158156
return (
159-
<div ref={tableRef} className={b(null, containerClassName)} style={tableStyle}>
157+
<div ref={tableRef} className={b(null, containerClassName)}>
160158
{renderContent()}
161159
</div>
162160
);

‎src/components/PaginatedTable/ResizeablePaginatedTable.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWi
1616
interface ResizeablePaginatedTableProps<T, F>
1717
extends Omit<PaginatedTableProps<T, F>, 'onColumnsResize'> {
1818
columnsWidthLSKey: string;
19-
tableStyle?: React.CSSProperties;
2019
}
2120

2221
export function ResizeablePaginatedTable<T, F>({

‎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: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ import type {PaginatedStorageProps} from './PaginatedStorage';
1818
import {StorageNodesControls} from './StorageControls/StorageControls';
1919
import {PaginatedStorageNodesTable} from './StorageNodes/PaginatedStorageNodesTable';
2020
import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
21-
import type {StorageNodesColumn} from './StorageNodes/columns/types';
21+
import type {StorageNodesColumnsSettings} from './StorageNodes/columns/types';
2222
import {TableGroup} from './TableGroup/TableGroup';
2323
import {useExpandedGroups} from './TableGroup/useExpandedTableGroups';
2424
import i18n from './i18n';
2525
import {b, renderPaginatedTableErrorMessage} from './shared';
2626
import type {StorageViewContext} from './types';
2727
import {useStorageQueryParams} from './useStorageQueryParams';
28-
import {useTableCSSVariables} from './utils';
28+
import {useStorageColumnsSettings} from './utils';
2929

3030
import './Storage.scss';
3131

@@ -71,13 +71,14 @@ function StorageNodesComponent({
7171

7272
const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
7373

74+
const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
75+
7476
const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
7577
database,
7678
viewContext,
79+
columnsSettings,
7780
});
7881

79-
const {tableStyle, handleDataFetched} = useTableCSSVariables();
80-
8182
const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
8283
return (
8384
<StorageNodesControls
@@ -106,8 +107,7 @@ function StorageNodesComponent({
106107
renderErrorMessage={renderPaginatedTableErrorMessage}
107108
columns={columnsToShow}
108109
initialEntitiesCount={initialEntitiesCount}
109-
tableStyle={tableStyle}
110-
onDataFetched={tableStyle ? undefined : handleDataFetched}
110+
onDataFetched={handleDataFetched}
111111
/>
112112
);
113113
}
@@ -123,7 +123,7 @@ function GroupedStorageNodesComponent({
123123

124124
const {searchValue, storageNodesGroupByParam, handleShowAllNodes} = useStorageQueryParams();
125125

126-
const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
126+
const {columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
127127
database,
128128
viewContext,
129129
});
@@ -184,7 +184,6 @@ function GroupedStorageNodesComponent({
184184
handleShowAllNodes={handleShowAllNodes}
185185
filterGroup={name}
186186
filterGroupBy={storageNodesGroupByParam}
187-
columns={columnsToShow}
188187
initialEntitiesCount={count}
189188
/>
190189
</TableGroup>
@@ -219,7 +218,7 @@ interface StorageNodesTableGroupContentProps {
219218
handleShowAllNodes: VoidFunction;
220219
filterGroup: string;
221220
filterGroupBy?: NodesGroupByField;
222-
columns: StorageNodesColumn[];
221+
viewContext?: StorageViewContext;
223222
initialEntitiesCount: number;
224223
}
225224

@@ -232,10 +231,15 @@ function StorageNodesTableGroupContent({
232231
handleShowAllNodes,
233232
filterGroup,
234233
filterGroupBy,
235-
columns,
234+
viewContext,
236235
initialEntitiesCount,
237236
}: StorageNodesTableGroupContentProps) {
238-
const {tableStyle, handleDataFetched} = useTableCSSVariables();
237+
const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
238+
const {columnsToShow} = useStorageNodesColumnsToSelect({
239+
database,
240+
viewContext,
241+
columnsSettings,
242+
});
239243

240244
return (
241245
<PaginatedStorageNodesTable
@@ -250,20 +254,21 @@ function StorageNodesTableGroupContent({
250254
filterGroup={filterGroup}
251255
filterGroupBy={filterGroupBy}
252256
renderErrorMessage={renderPaginatedTableErrorMessage}
253-
columns={columns}
257+
columns={columnsToShow}
254258
initialEntitiesCount={initialEntitiesCount}
255-
tableStyle={tableStyle}
256-
onDataFetched={tableStyle ? undefined : handleDataFetched}
259+
onDataFetched={handleDataFetched}
257260
/>
258261
);
259262
}
260263

261264
function useStorageNodesColumnsToSelect({
262265
database,
263266
viewContext,
267+
columnsSettings,
264268
}: {
265269
database?: string;
266270
viewContext?: StorageViewContext;
271+
columnsSettings?: StorageNodesColumnsSettings;
267272
}) {
268273
const additionalNodesProps = useAdditionalNodesProps();
269274
const {visibleEntities} = useStorageQueryParams();
@@ -273,5 +278,6 @@ function useStorageNodesColumnsToSelect({
273278
visibleEntities,
274279
database,
275280
viewContext,
281+
columnsSettings,
276282
});
277283
}

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ interface PaginatedStorageNodesTableProps {
4444
renderControls?: RenderControls;
4545
renderErrorMessage: RenderErrorMessage;
4646
initialEntitiesCount?: number;
47-
tableStyle?: React.CSSProperties;
4847
onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
4948
}
5049

@@ -63,7 +62,6 @@ export const PaginatedStorageNodesTable = ({
6362
renderControls,
6463
renderErrorMessage,
6564
initialEntitiesCount,
66-
tableStyle,
6765
onDataFetched,
6866
}: PaginatedStorageNodesTableProps) => {
6967
const tableFilters = React.useMemo(() => {
@@ -119,7 +117,6 @@ export const PaginatedStorageNodesTable = ({
119117
getRowClassName={getRowUnavailableClassName}
120118
filters={tableFilters}
121119
tableName="storage-nodes"
122-
tableStyle={tableStyle}
123120
onDataFetched={onDataFetched}
124121
/>
125122
);

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,12 @@
33
.ydb-storage-nodes-columns {
44
&__pdisks-column {
55
overflow: visible; // to enable stacked disks overflow the row
6-
7-
@include calculate-storage-nodes-pdisk-variables();
8-
9-
& .ydb-paginated-table__row-skeleton {
10-
width: var(--pdisks-container-width) !important;
11-
}
126
}
137

148
&__pdisks-wrapper {
159
display: flex;
16-
gap: var(--pdisk-margin);
10+
gap: 10px;
1711

18-
width: var(--pdisks-container-width);
1912
height: 40px;
2013
}
2114

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,27 @@ import type {PreparedStorageNode} from '../../../../store/reducers/storage/types
2424
import {cn} from '../../../../utils/cn';
2525
import {PDisk} from '../../PDisk/PDisk';
2626

27-
import type {GetStorageNodesColumnsParams, StorageNodesColumn} from './types';
27+
import type {
28+
GetStorageNodesColumnsParams,
29+
StorageNodesColumn,
30+
StorageNodesColumnsSettings,
31+
} from './types';
2832

2933
import './StorageNodesColumns.scss';
3034

3135
const b = cn('ydb-storage-nodes-columns');
3236

33-
const getPDisksColumn = ({viewContext}: GetStorageNodesColumnsParams): StorageNodesColumn => {
37+
const getPDisksColumn = ({
38+
viewContext,
39+
columnsSettings,
40+
}: GetStorageNodesColumnsParams & {
41+
columnsSettings?: StorageNodesColumnsSettings;
42+
}): StorageNodesColumn => {
3443
return {
3544
name: NODES_COLUMNS_IDS.PDisks,
3645
header: NODES_COLUMNS_TITLES.PDisks,
3746
className: b('pdisks-column'),
47+
width: columnsSettings?.pDiskContainerWidth,
3848
render: ({row}) => {
3949
return (
4050
<div className={b('pdisks-wrapper')}>
@@ -45,7 +55,12 @@ const getPDisksColumn = ({viewContext}: GetStorageNodesColumnsParams): StorageNo
4555

4656
return (
4757
<div className={b('pdisks-item')} key={pDisk.PDiskId}>
48-
<PDisk data={pDisk} vDisks={vDisks} viewContext={viewContext} />
58+
<PDisk
59+
data={pDisk}
60+
vDisks={vDisks}
61+
viewContext={viewContext}
62+
width={columnsSettings?.pDiskWidth}
63+
/>
4964
</div>
5065
);
5166
})}
@@ -62,6 +77,7 @@ export const getStorageNodesColumns = ({
6277
database,
6378
additionalNodesProps,
6479
viewContext,
80+
columnsSettings,
6581
}: GetStorageNodesColumnsParams): StorageNodesColumn[] => {
6682
const getNodeRef = additionalNodesProps?.getNodeRef;
6783

@@ -79,7 +95,7 @@ export const getStorageNodesColumns = ({
7995
getDiskSpaceUsageColumn<PreparedStorageNode>(),
8096
getVersionColumn<PreparedStorageNode>(),
8197
getMissingDisksColumn<PreparedStorageNode>(),
82-
getPDisksColumn({viewContext}),
98+
getPDisksColumn({viewContext, columnsSettings}),
8399
];
84100

85101
const sortableColumns = columns.map((column) => ({

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,16 @@ export function useStorageNodesSelectedColumns({
2020
database,
2121
additionalNodesProps,
2222
viewContext,
23+
columnsSettings,
2324
}: GetStorageNodesColumnsParams) {
2425
const columns = React.useMemo(() => {
25-
return getStorageNodesColumns({database, additionalNodesProps, viewContext});
26-
}, [database, additionalNodesProps, viewContext]);
26+
return getStorageNodesColumns({
27+
database,
28+
additionalNodesProps,
29+
viewContext,
30+
columnsSettings,
31+
});
32+
}, [database, additionalNodesProps, viewContext, columnsSettings]);
2733

2834
const requiredColumns = React.useMemo(() => {
2935
if (visibleEntities === VISIBLE_ENTITIES.missing) {

0 commit comments

Comments
 (0)