Skip to content

Commit 5c22404

Browse files
astandrikastandrik
authored
fix: find out performance issue with big tables of nodes (#2206)
1 parent 61dc9c5 commit 5c22404

File tree

13 files changed

+41
-47
lines changed

13 files changed

+41
-47
lines changed

‎src/components/HoverPopup/HoverPopup.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const DEBOUNCE_TIMEOUT = 100;
1414

1515
type HoverPopupProps = {
1616
children: React.ReactNode;
17-
popupContent: React.ReactNode;
17+
renderPopupContent: () => React.ReactNode;
1818
showPopup?: boolean;
1919
offset?: [number, number];
2020
anchorRef?: React.RefObject<HTMLElement>;
@@ -26,7 +26,7 @@ type HoverPopupProps = {
2626

2727
export const HoverPopup = ({
2828
children,
29-
popupContent,
29+
renderPopupContent,
3030
showPopup,
3131
offset,
3232
anchorRef,
@@ -98,22 +98,24 @@ export const HoverPopup = ({
9898
<span ref={anchor} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
9999
{children}
100100
</span>
101-
<Popup
102-
contentClassName={b(null, contentClassName)}
103-
anchorRef={anchorRef || anchor}
104-
open={open}
105-
onMouseEnter={onPopupMouseEnter}
106-
onMouseLeave={onPopupMouseLeave}
107-
onEscapeKeyDown={onPopupEscapeKeyDown}
108-
onBlur={onPopupBlur}
109-
placement={placement}
110-
hasArrow
111-
// bigger offset for easier switching to neighbour nodes
112-
// matches the default offset for popup with arrow out of a sense of beauty
113-
offset={offset || [0, 12]}
114-
>
115-
<div onContextMenu={onPopupContextMenu}>{popupContent}</div>
116-
</Popup>
101+
{open ? (
102+
<Popup
103+
contentClassName={b(null, contentClassName)}
104+
anchorRef={anchorRef || anchor}
105+
onMouseEnter={onPopupMouseEnter}
106+
onMouseLeave={onPopupMouseLeave}
107+
onEscapeKeyDown={onPopupEscapeKeyDown}
108+
onBlur={onPopupBlur}
109+
placement={placement}
110+
hasArrow
111+
open
112+
// bigger offset for easier switching to neighbour nodes
113+
// matches the default offset for popup with arrow out of a sense of beauty
114+
offset={offset || [0, 12]}
115+
>
116+
<div onContextMenu={onPopupContextMenu}>{renderPopupContent()}</div>
117+
</Popup>
118+
) : null}
117119
</React.Fragment>
118120
);
119121
};

‎src/components/MemoryViewer/MemoryViewer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export function MemoryViewer({
100100

101101
return (
102102
<HoverPopup
103-
popupContent={
103+
renderPopupContent={() => (
104104
<DefinitionList responsive>
105105
{memorySegments.map(
106106
({label, value: segmentSize, capacity: segmentCapacity, key}) => (
@@ -132,7 +132,7 @@ export function MemoryViewer({
132132
),
133133
)}
134134
</DefinitionList>
135-
}
135+
)}
136136
>
137137
<div className={b({theme, status}, className)}>
138138
<div className={b('progress-container')}>

‎src/components/PaginatedTable/PaginatedTable.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,6 @@
181181
}
182182

183183
&__row-skeleton::after {
184-
animation: none !important;
184+
display: none !important;
185185
}
186186
}

‎src/components/PaginatedTable/PaginatedTable.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {useScrollBasedChunks} from './useScrollBasedChunks';
2121
import './PaginatedTable.scss';
2222

2323
export interface PaginatedTableProps<T, F> {
24-
limit: number;
24+
limit?: number;
2525
initialEntitiesCount?: number;
2626
fetchData: FetchData<T, F>;
2727
filters?: F;
@@ -38,8 +38,10 @@ export interface PaginatedTableProps<T, F> {
3838
containerClassName?: string;
3939
}
4040

41+
const DEFAULT_PAGINATION_LIMIT = 20;
42+
4143
export const PaginatedTable = <T, F>({
42-
limit: chunkSize,
44+
limit: chunkSize = DEFAULT_PAGINATION_LIMIT,
4345
initialEntitiesCount,
4446
fetchData,
4547
filters,

‎src/components/PaginatedTable/TableChunk.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
119119
);
120120
} else {
121121
return getArray(dataLength).map((value) => (
122-
<LoadingTableRow
123-
key={value}
124-
columns={columns}
125-
height={rowHeight}
126-
index={value}
127-
/>
122+
<LoadingTableRow key={value} columns={columns} height={rowHeight} />
128123
));
129124
}
130125
}
@@ -141,7 +136,6 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
141136
return currentData.data.map((rowData, index) => (
142137
<TableRow
143138
key={index}
144-
index={index}
145139
row={rowData as T}
146140
columns={columns}
147141
height={rowHeight}

‎src/components/PaginatedTable/TableRow.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {Skeleton} from '@gravity-ui/uikit';
33
import {DEFAULT_ALIGN, DEFAULT_RESIZEABLE} from './constants';
44
import {b} from './shared';
55
import type {AlignType, Column, GetRowClassName} from './types';
6+
import {typedMemo} from './utils';
67

78
interface TableCellProps {
89
height: number;
@@ -38,19 +39,18 @@ const TableRowCell = ({
3839

3940
interface LoadingTableRowProps<T> {
4041
columns: Column<T>[];
41-
index: number;
4242
height: number;
4343
}
4444

45-
export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowProps<T>) => {
45+
export const LoadingTableRow = typedMemo(function <T>({columns, height}: LoadingTableRowProps<T>) {
4646
return (
4747
<tr className={b('row', {loading: true})}>
4848
{columns.map((column) => {
4949
const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
5050

5151
return (
5252
<TableRowCell
53-
key={`${column.name}${index}`}
53+
key={column.name}
5454
height={height}
5555
width={column.width}
5656
align={column.align}
@@ -66,17 +66,16 @@ export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowPro
6666
})}
6767
</tr>
6868
);
69-
};
69+
});
7070

7171
interface TableRowProps<T> {
7272
columns: Column<T>[];
73-
index: number;
7473
row: T;
7574
height: number;
7675
getRowClassName?: GetRowClassName<T>;
7776
}
7877

79-
export const TableRow = <T,>({row, index, columns, getRowClassName, height}: TableRowProps<T>) => {
78+
export const TableRow = <T,>({row, columns, getRowClassName, height}: TableRowProps<T>) => {
8079
const additionalClassName = getRowClassName?.(row);
8180

8281
return (
@@ -86,14 +85,14 @@ export const TableRow = <T,>({row, index, columns, getRowClassName, height}: Tab
8685

8786
return (
8887
<TableRowCell
89-
key={`${column.name}${index}`}
88+
key={column.name}
9089
height={height}
9190
width={column.width}
9291
align={column.align}
9392
className={column.className}
9493
resizeable={resizeable}
9594
>
96-
{column.render({row, index})}
95+
{column.render({row})}
9796
</TableRowCell>
9897
);
9998
})}

‎src/components/PaginatedTable/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export interface Column<T> {
2929
className?: string;
3030
sortable?: boolean;
3131
resizeable?: boolean;
32-
render: (props: {row: T; index: number}) => React.ReactNode;
32+
render: (props: {row: T}) => React.ReactNode;
3333
width?: number;
3434
resizeMaxWidth?: number;
3535
resizeMinWidth?: number;

‎src/components/VDisk/VDisk.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const VDisk = ({
4141
showPopup={showPopup}
4242
onShowPopup={onShowPopup}
4343
onHidePopup={onHidePopup}
44-
popupContent={<VDiskPopup data={data} />}
44+
renderPopupContent={() => <VDiskPopup data={data} />}
4545
offset={[0, 5]}
4646
delayClose={delayClose}
4747
delayOpen={delayOpen}

‎src/containers/Nodes/NodesTable.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@ export function NodesTable({
8383
parentRef={parentRef}
8484
columns={columns}
8585
fetchData={getNodes}
86-
limit={50}
8786
initialEntitiesCount={initialEntitiesCount}
8887
renderControls={renderControls}
8988
renderErrorMessage={renderPaginatedTableErrorMessage}

‎src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
8686

8787
return (
8888
<HoverPopup
89-
popupContent={<VDiskInfo data={item.SlotData} withTitle />}
89+
renderPopupContent={() => <VDiskInfo data={item.SlotData} withTitle />}
9090
contentClassName={b('vdisk-popup')}
9191
placement={['right', 'top']}
9292
>
@@ -111,7 +111,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
111111
if (isLogSlot(item)) {
112112
return (
113113
<HoverPopup
114-
popupContent={<LogInfo data={item.SlotData} />}
114+
renderPopupContent={() => <LogInfo data={item.SlotData} />}
115115
contentClassName={b('vdisk-popup')}
116116
placement={['right', 'top']}
117117
>
@@ -134,7 +134,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
134134
if (isEmptySlot(item)) {
135135
return (
136136
<HoverPopup
137-
popupContent={<EmptySlotInfo data={item.SlotData} />}
137+
renderPopupContent={() => <EmptySlotInfo data={item.SlotData} />}
138138
contentClassName={b('vdisk-popup')}
139139
placement={['right', 'top']}
140140
>

0 commit comments

Comments
 (0)