Skip to content

Commit 9ee4003

Browse files
AlenaSYAlenaSY
authored
Merge branch 'main' into e2e/oss-cluster-7
2 parents 530e181 + 1e51006 commit 9ee4003

File tree

20 files changed

+363
-95
lines changed

20 files changed

+363
-95
lines changed

‎redisinsight/ui/src/components/multi-search/MultiSearch.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const MultiSearch = (props: Props) => {
7878
color="primary"
7979
aria-label="Search"
8080
className={styles.searchButton}
81-
onClick={onSubmit}
81+
onClick={() => onSubmit()}
8282
data-testid="search-btn"
8383
/>
8484
</div>

‎redisinsight/ui/src/components/virtual-grid/VirtualGrid.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Maybe, Nullable } from 'uiSrc/utils'
1010
import { SortOrder } from 'uiSrc/constants'
1111
import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
1212
import { IProps } from './interfaces'
13-
import { columnWidth, useInnerElementType } from './utils'
13+
import { getColumnWidth, useInnerElementType } from './utils'
1414

1515
import styles from './styles.module.scss'
1616

@@ -46,14 +46,23 @@ const VirtualGrid = (props: IProps) => {
4646
const [expandedRows, setExpandedRows] = useState<number[]>([])
4747

4848
const gridRef = useRef<Nullable<Grid>>()
49-
const sizeMap = useRef<{ [key: number]: number }>({})
50-
const setSize = useCallback((index, size) => {
51-
sizeMap.current = { ...sizeMap.current, [index]: size }
49+
const rowHeightsMap = useRef<{ [key: number]: { [key: number]: number } }>({})
50+
const setRowHeight = useCallback((rowIndex: number, columnIndex:number, size:number) => {
51+
rowHeightsMap.current = {
52+
...rowHeightsMap.current,
53+
[rowIndex]: {
54+
...(rowHeightsMap.current[rowIndex] || {}),
55+
[columnIndex]: size
56+
}
57+
}
5258

53-
gridRef.current?.resetAfterRowIndex?.(index)
59+
gridRef.current?.resetAfterRowIndex?.(rowIndex)
5460
}, [])
55-
const getSize = (index: number) =>
56-
(expandedRows.indexOf(index) !== -1 ? sizeMap.current[index] : rowHeight)
61+
62+
const getRowHeight = (index: number) =>
63+
(expandedRows.indexOf(index) !== -1
64+
? Math.max(...Object.values(rowHeightsMap.current[index]))
65+
: rowHeight)
5766

5867
useEffect(() =>
5968
() => {
@@ -63,7 +72,7 @@ const VirtualGrid = (props: IProps) => {
6372

6473
useEffect(() => {
6574
setExpandedRows([])
66-
sizeMap.current = {}
75+
rowHeightsMap.current = {}
6776
gridRef.current?.resetAfterRowIndex?.(0)
6877
}, [totalItemsCount])
6978

@@ -137,11 +146,11 @@ const VirtualGrid = (props: IProps) => {
137146
const paddingSize = 24
138147
const cellHeight = cellRef.current?.children?.[0]?.getBoundingClientRect?.().height + paddingSize
139148

140-
if (cellHeight > getSize(rowIndex) && rowIndex !== 0) {
141-
setSize(rowIndex, cellHeight)
149+
if (rowIndex !== 0) {
150+
setRowHeight(rowIndex, columnIndex, cellHeight)
142151
}
143152
}
144-
}, [setSize, rowIndex, expanded, width])
153+
}, [setRowHeight, rowIndex, expanded])
145154

146155
if (rowIndex === 0) {
147156
return (
@@ -176,7 +185,9 @@ const VirtualGrid = (props: IProps) => {
176185
}
177186
if (columnIndex === 0) {
178187
const lastColumn = columns[columns.length - 1]
179-
const allDynamicRowsHeight: number[] = Object.values(sizeMap.current)
188+
const allDynamicRowsHeight: number[] = Object.values(rowHeightsMap.current)
189+
.map((row) => Math.max(...Object.values(row)))
190+
180191
const allRowsHeight = allDynamicRowsHeight.reduce((a, b) => a + b, 0)
181192
+ (items.length - allDynamicRowsHeight.length) * rowHeight
182193

@@ -201,7 +212,7 @@ const VirtualGrid = (props: IProps) => {
201212
: styles.gridItemEven)}
202213
style={{
203214
width: lastColumn?.minWidth,
204-
height: getSize(rowIndex),
215+
height: getRowHeight(rowIndex),
205216
marginLeft: width - lastColumn?.minWidth - (hasHorizontalScrollOffset ? 29 : 13)
206217
}}
207218
>
@@ -228,10 +239,11 @@ const VirtualGrid = (props: IProps) => {
228239

229240
const innerElementType = useInnerElementType(
230241
Cell,
231-
(i) => columnWidth(i, width, columns),
232-
getSize,
242+
getColumnWidth,
243+
getRowHeight,
233244
columns.length - 1,
234-
width,
245+
Math.max(maxTableWidth, width),
246+
columns,
235247
)
236248

237249
return (
@@ -274,10 +286,10 @@ const VirtualGrid = (props: IProps) => {
274286
})}
275287
className={styles.grid}
276288
columnCount={columns.length}
277-
columnWidth={(i) => columnWidth(i, width, columns)}
289+
columnWidth={(i) => getColumnWidth(i, width, columns)}
278290
height={height}
279291
rowCount={items.length}
280-
rowHeight={getSize}
292+
rowHeight={getRowHeight}
281293
width={width}
282294
innerElementType={innerElementType}
283295
onScroll={onScroll}

‎redisinsight/ui/src/components/virtual-grid/utils.tsx‎

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,11 @@ export const getShownIndicies = (children: typeof React.Children) => {
3333

3434
export const useInnerElementType = (
3535
Cell: GridChildComponentProps<null>,
36-
columnWidth:(index: number) => number,
36+
columnWidth:(index: number, width: number, columns: ITableColumn[]) => number,
3737
rowHeight:(index: number) => number,
3838
columnCount: number,
39-
width: number,
39+
tableWidth: number,
40+
columns: ITableColumn[],
4041
) => React.useMemo(
4142
() =>
4243
React.forwardRef((props:ReactNode, ref) => {
@@ -55,7 +56,7 @@ export const useInnerElementType = (
5556
let sum = 0
5657

5758
while (index > 1) {
58-
sum += columnWidth(index - 1)
59+
sum += columnWidth(index - 1, tableWidth, columns)
5960
index -= 1
6061
}
6162

@@ -64,25 +65,58 @@ export const useInnerElementType = (
6465

6566
const shownIndecies = getShownIndicies(props.children)
6667

67-
const children = React.Children.map(props.children, (child) => {
68+
let children = React.Children.map(props.children, (child, index) => {
6869
const { column, row } = getCellIndicies(child)
6970

7071
// do not show non-sticky cell
7172
if (column === 0 || row === 0 || column === columnCount) {
7273
return null
7374
}
7475

75-
return child
76+
return {
77+
...child,
78+
props: {
79+
...child.props,
80+
style: {
81+
...child.props.style,
82+
width: columnWidth(column, tableWidth, columns),
83+
}
84+
}
85+
}
7686
})
7787

88+
children = React.Children.toArray(children)
89+
90+
for (let i = 1; i < children.length; i++) {
91+
const child = children[i]
92+
const prevChild = children[i - 1]
93+
const { row } = getCellIndicies(child)
94+
const { row: prevRow } = getCellIndicies(prevChild)
95+
96+
if (prevRow !== row) {
97+
children[i] = child
98+
} else {
99+
children[i] = {
100+
...child,
101+
props: {
102+
...child.props,
103+
style: {
104+
...child.props.style,
105+
left: prevChild.props.style.left + prevChild.props.style.width,
106+
}
107+
}
108+
}
109+
}
110+
}
111+
78112
children.push(
79113
React.createElement(Cell, {
80114
key: '0:0',
81115
rowIndex: 0,
82116
columnIndex: 0,
83117
style: {
84118
display: 'inline-flex',
85-
width: columnWidth(0),
119+
width: columnWidth(0, tableWidth, columns),
86120
height: rowHeight(0),
87121
position: 'sticky',
88122
top: 0,
@@ -98,7 +132,7 @@ export const useInnerElementType = (
98132
for (let i = 1; i <= shownColumnsCount; i += 1) {
99133
const columnIndex = i + shownIndecies.from.column
100134
const rowIndex = 0
101-
const width = columnWidth(columnIndex)
135+
const width = columnWidth(columnIndex, tableWidth, columns)
102136
const height = rowHeight(rowIndex)
103137

104138
const marginLeft = i === 1 ? sumColumnWidths(columnIndex) : undefined
@@ -126,7 +160,7 @@ export const useInnerElementType = (
126160
for (let i = 1; i <= shownRowsCount; i += 1) {
127161
const columnIndex = 0
128162
const rowIndex = i + shownIndecies.from.row
129-
const width = columnWidth(columnIndex)
163+
const width = columnWidth(columnIndex, tableWidth, columns)
130164
const height = rowHeight(rowIndex)
131165

132166
const marginTop = i === 1 ? sumRowsHeights(rowIndex) : undefined
@@ -150,16 +184,15 @@ export const useInnerElementType = (
150184
}
151185

152186
return (
153-
<div ref={ref} {...props}>
187+
<div ref={ref} {...props} style={{ ...props?.style, width: tableWidth }}>
154188
{children}
155189
</div>
156190
)
157191
}),
158-
[Cell, columnWidth, rowHeight, columnCount, width]
192+
[Cell, columnWidth, rowHeight, columnCount, tableWidth]
159193
)
160194

161-
export const columnWidth = (i: number, width: number, columns: ITableColumn[], minColumnWidth: number = 190) => {
162-
const scrollWidth = 16
195+
export const getColumnWidth = (i: number, width: number, columns: ITableColumn[], minColumnWidth: number = 190) => {
163196
const maxTableWidth = columns.reduce((a, { maxWidth = minColumnWidth }) => a + maxWidth, 0)
164197

165198
if (maxTableWidth < width) {

‎redisinsight/ui/src/constants/cliOutput.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,29 @@ export enum CliOutputFormatterType {
1010
Raw = 'RAW',
1111
}
1212

13-
export const InitOutputText = (host: string = '', port: number = 0, dbIndex: number = 0, onClick: () => void) => [
14-
<span className="color-green" key={Math.random()}>
15-
{'Try '}
16-
<EuiLink
17-
onClick={onClick}
18-
className="color-green"
19-
style={{ fontSize: 'inherit', fontFamily: 'inherit' }}
20-
data-test-subj="cli-workbench-page-btn"
21-
>
22-
Workbench
23-
</EuiLink>
24-
, our advanced CLI. Check out our Quick Guides to learn more about Redis capabilities.
25-
</span>,
13+
export const InitOutputText = (
14+
host: string = '',
15+
port: number = 0,
16+
dbIndex: number = 0,
17+
emptyOutput: boolean,
18+
onClick: () => void,
19+
) => [
20+
<>
21+
{ emptyOutput && (
22+
<span className="color-green" key={Math.random()}>
23+
{'Try '}
24+
<EuiLink
25+
onClick={onClick}
26+
className="color-green"
27+
style={{ fontSize: 'inherit', fontFamily: 'inherit' }}
28+
data-test-subj="cli-workbench-page-btn"
29+
>
30+
Workbench
31+
</EuiLink>
32+
, our advanced CLI. Check out our Quick Guides to learn more about Redis capabilities.
33+
</span>
34+
)}
35+
</>,
2636
'\n\n',
2737
'Connecting...',
2838
'\n\n',

‎redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const BulkActionsInfo = (props: Props) => {
5454
)}
5555
{status === BulkActionsStatus.Completed && (
5656
<EuiText className={cx(styles.progress, styles.progressCompleted)}>
57-
Action complete
57+
Action completed
5858
</EuiText>
5959
)}
6060
</div>

‎redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
2828
import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
2929
import HelpTexts from 'uiSrc/constants/help-texts'
3030
import { KeyTypes, TableCellAlignment } from 'uiSrc/constants'
31-
import { columnWidth } from 'uiSrc/components/virtual-grid'
31+
import { getColumnWidth } from 'uiSrc/components/virtual-grid'
3232
import { StopPropagation } from 'uiSrc/components/virtual-table'
3333
import {
3434
GetHashFieldsResponse,
@@ -369,7 +369,7 @@ const HashDetails = (props: Props) => {
369369
onChangeWidth={setWidth}
370370
columns={columns.map((column, i, arr) => ({
371371
...column,
372-
width: columnWidth(i, width, arr)
372+
width: getColumnWidth(i, width, arr)
373373
}))}
374374
footerHeight={0}
375375
loadMoreItems={loadMoreItems}

‎redisinsight/ui/src/pages/browser/components/key-details/KeyDetailsWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const KeyDetailsWrapper = (props: Props) => {
112112
break
113113
}
114114
case KeyTypes.ReJSON: {
115-
dispatch(fetchReJSON(key, '.', resetData))
115+
dispatch(fetchReJSON(key, '.', true))
116116
break
117117
}
118118
case KeyTypes.Stream: {

‎redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { NoResultsFoundText } from 'uiSrc/constants/texts'
2828
import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
2929
import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
3030
import { StopPropagation } from 'uiSrc/components/virtual-table'
31-
import { columnWidth } from 'uiSrc/components/virtual-grid'
31+
import { getColumnWidth } from 'uiSrc/components/virtual-grid'
3232
import {
3333
SetListElementDto,
3434
SetListElementResponse,
@@ -323,7 +323,7 @@ const ListDetails = (props: Props) => {
323323
onChangeWidth={setWidth}
324324
columns={columns.map((column, i, arr) => ({
325325
...column,
326-
width: columnWidth(i, width, arr)
326+
width: getColumnWidth(i, width, arr)
327327
}))}
328328
loadMoreItems={loadMoreItems}
329329
loading={loading}

‎redisinsight/ui/src/pages/browser/components/set-details/SetDetails.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import HelpTexts from 'uiSrc/constants/help-texts'
2525
import { NoResultsFoundText } from 'uiSrc/constants/texts'
2626
import VirtualTable from 'uiSrc/components/virtual-table'
2727
import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
28-
import { columnWidth } from 'uiSrc/components/virtual-grid'
28+
import { getColumnWidth } from 'uiSrc/components/virtual-grid'
2929
import { IColumnSearchState, ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
3030
import { GetSetMembersResponse } from 'apiSrc/modules/browser/dto/set.dto'
3131
import styles from './styles.module.scss'
@@ -256,7 +256,7 @@ const SetDetails = (props: Props) => {
256256
onSearch={handleSearch}
257257
columns={columns.map((column, i, arr) => ({
258258
...column,
259-
width: columnWidth(i, width, arr)
259+
width: getColumnWidth(i, width, arr)
260260
}))}
261261
onChangeWidth={setWidth}
262262
cellCache={cellCache}

‎redisinsight/ui/src/pages/browser/components/zset-details/ZSetDetails.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
2828
import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
2929
import { IColumnSearchState, ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
3030
import { StopPropagation } from 'uiSrc/components/virtual-table'
31-
import { columnWidth } from 'uiSrc/components/virtual-grid'
31+
import { getColumnWidth } from 'uiSrc/components/virtual-grid'
3232
import { AddMembersToZSetDto, SearchZSetMembersResponse, ZSetMemberDto } from 'apiSrc/modules/browser/dto'
3333
import PopoverDelete from '../popover-delete/PopoverDelete'
3434

@@ -389,7 +389,7 @@ const ZSetDetails = (props: Props) => {
389389
onChangeWidth={setWidth}
390390
columns={columns.map((column, i, arr) => ({
391391
...column,
392-
width: columnWidth(i, width, arr)
392+
width: getColumnWidth(i, width, arr)
393393
}))}
394394
footerHeight={0}
395395
loadMoreItems={loadMoreItems}

0 commit comments

Comments
 (0)