Skip to content

Commit f1035a9

Browse files
kchepikavakchepikava
committed
RI-5998 added improvements in vector formatters, change tooltip display for values
1 parent 8c3d681 commit f1035a9

File tree

13 files changed

+267
-114
lines changed

13 files changed

+267
-114
lines changed

‎redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
TableCellAlignment,
2020
TEXT_DISABLED_COMPRESSED_VALUE,
2121
TEXT_DISABLED_FORMATTER_EDITING,
22-
TEXT_FAILED_CONVENT_FORMATTER,
2322
TEXT_INVALID_VALUE,
2423
TEXT_UNPRINTABLE_CHARACTERS
2524
} from 'uiSrc/constants'
@@ -63,7 +62,7 @@ import {
6362
import { stringToBuffer } from 'uiSrc/utils/formatters/bufferFormatters'
6463
import { decompressingBuffer } from 'uiSrc/utils/decompressors'
6564
import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
66-
import { EditableInput, EditableTextArea } from 'uiSrc/pages/browser/modules/key-details/shared'
65+
import { EditableInput, EditableTextArea, FormattedValue } from 'uiSrc/pages/browser/modules/key-details/shared'
6766
import {
6867
AddFieldsToHashDto,
6968
GetHashFieldsResponse,
@@ -310,23 +309,18 @@ const HashDetailsTable = (props: Props) => {
310309
const field = bufferToString(fieldItem) || ''
311310
// Better to cut the long string, because it could affect virtual scroll performance
312311
const tooltipContent = formatLongName(field)
313-
const { value, isValid } = formattingBuffer(decompressedItem, viewFormatProp, { expanded })
312+
const { value, isValid } = formattingBuffer(decompressedItem, viewFormatProp, { expanded, isField: true })
314313

315314
return (
316315
<EuiText color="subdued" size="s" style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}>
317316
<div style={{ display: 'flex' }} data-testid={`hash-field-${field}`}>
318-
{!expanded && (
319-
<EuiToolTip
320-
title={isValid ? 'Field' : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)}
321-
className={styles.tooltip}
322-
anchorClassName="truncateText"
323-
position="bottom"
324-
content={tooltipContent}
325-
>
326-
<>{value?.substring?.(0, 200) ?? value}</>
327-
</EuiToolTip>
328-
)}
329-
{expanded && value}
317+
<FormattedValue
318+
value={value}
319+
expanded={expanded}
320+
tooltipContent={tooltipContent}
321+
isValid={isValid}
322+
viewFormatProp={viewFormatProp}
323+
/>
330324
</div>
331325
</EuiText>
332326
)
@@ -382,18 +376,14 @@ const HashDetailsTable = (props: Props) => {
382376
testIdPrefix="hash"
383377
>
384378
<div className="innerCellAsCell">
385-
{!expanded && (
386-
<EuiToolTip
387-
title={isValid ? 'Value' : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)}
388-
className={styles.tooltip}
389-
position="bottom"
390-
content={tooltipContent}
391-
anchorClassName="truncateText"
392-
>
393-
<>{(formattedValue as any)?.substring?.(0, 200) ?? formattedValue}</>
394-
</EuiToolTip>
395-
)}
396-
{expanded && formattedValue}
379+
<FormattedValue
380+
value={formattedValue}
381+
expanded={expanded}
382+
title="Value"
383+
tooltipContent={tooltipContent}
384+
isValid={isValid}
385+
viewFormatProp={viewFormatProp}
386+
/>
397387
</div>
398388
</EditableTextArea>
399389
)

‎redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/list-details-table/ListDetailsTable.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EuiButtonIcon, EuiProgress, EuiText, EuiToolTip } from '@elastic/eui'
1+
import { EuiProgress, EuiText, EuiToolTip } from '@elastic/eui'
22
import React, { Ref, useCallback, useEffect, useRef, useState } from 'react'
33
import { useDispatch, useSelector } from 'react-redux'
44
import cx from 'classnames'
@@ -31,7 +31,6 @@ import {
3131
TEXT_DISABLED_FORMATTER_EDITING,
3232
TEXT_UNPRINTABLE_CHARACTERS,
3333
TEXT_DISABLED_COMPRESSED_VALUE,
34-
TEXT_FAILED_CONVENT_FORMATTER,
3534
} from 'uiSrc/constants'
3635
import {
3736
bufferToString,
@@ -53,11 +52,10 @@ import {
5352
} from 'uiSrc/slices/browser/keys'
5453
import { NoResultsFoundText } from 'uiSrc/constants/texts'
5554
import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
56-
import { StopPropagation } from 'uiSrc/components/virtual-table'
5755
import { getColumnWidth } from 'uiSrc/components/virtual-grid'
5856
import { decompressingBuffer } from 'uiSrc/utils/decompressors'
5957

60-
import { EditableTextArea } from 'uiSrc/pages/browser/modules/key-details/shared'
58+
import { EditableTextArea, FormattedValue } from 'uiSrc/pages/browser/modules/key-details/shared'
6159
import {
6260
SetListElementDto,
6361
SetListElementResponse,
@@ -307,18 +305,14 @@ const ListDetailsTable = (props: Props) => {
307305
testIdPrefix="list"
308306
>
309307
<div className="innerCellAsCell">
310-
{!expanded && (
311-
<EuiToolTip
312-
title={isValid ? 'Element' : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)}
313-
className={styles.tooltip}
314-
position="bottom"
315-
content={tooltipContent}
316-
anchorClassName="truncateText"
317-
>
318-
<>{(value as any)?.substring?.(0, 200) ?? value}</>
319-
</EuiToolTip>
320-
)}
321-
{expanded && value}
308+
<FormattedValue
309+
value={value}
310+
expanded={expanded}
311+
title="Element"
312+
tooltipContent={tooltipContent}
313+
isValid={isValid}
314+
viewFormatProp={viewFormatProp}
315+
/>
322316
</div>
323317
</EditableTextArea>
324318
)

‎redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/set-details-table/SetDetailsTable.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import cx from 'classnames'
44
import {
55
EuiProgress,
66
EuiText,
7-
EuiToolTip,
87
} from '@elastic/eui'
98
import { CellMeasurerCache } from 'react-virtualized'
109
import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces'
@@ -16,7 +15,7 @@ import {
1615
formatLongName,
1716
formattingBuffer,
1817
} from 'uiSrc/utils'
19-
import { KeyTypes, OVER_RENDER_BUFFER_COUNT, TEXT_FAILED_CONVENT_FORMATTER } from 'uiSrc/constants'
18+
import { KeyTypes, OVER_RENDER_BUFFER_COUNT } from 'uiSrc/constants'
2019
import { sendEventTelemetry, TelemetryEvent, getBasedOnViewTypeEvent, getMatchType } from 'uiSrc/telemetry'
2120
import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
2221
import { selectedKeyDataSelector, keysSelector, selectedKeySelector } from 'uiSrc/slices/browser/keys'
@@ -36,6 +35,7 @@ import { getColumnWidth } from 'uiSrc/components/virtual-grid'
3635
import { IColumnSearchState, ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
3736
import { decompressingBuffer } from 'uiSrc/utils/decompressors'
3837
import { GetSetMembersResponse } from 'apiSrc/modules/browser/set/dto'
38+
import { FormattedValue } from '../../../shared'
3939
import styles from './styles.module.scss'
4040

4141
const suffix = '_set'
@@ -203,18 +203,15 @@ const SetDetailsTable = (props: Props) => {
203203
style={{ display: 'flex' }}
204204
data-testid={`set-member-value-${cellContent}`}
205205
>
206-
{!expanded && (
207-
<EuiToolTip
208-
title={isValid ? 'Member' : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)}
209-
className={styles.tooltip}
210-
anchorClassName="truncateText"
211-
position="left"
212-
content={tooltipContent}
213-
>
214-
<>{cellContent}</>
215-
</EuiToolTip>
216-
)}
217-
{expanded && value}
206+
<FormattedValue
207+
value={value}
208+
expanded={expanded}
209+
title="Member"
210+
tooltipContent={tooltipContent}
211+
isValid={isValid}
212+
viewFormatProp={viewFormatProp}
213+
position="left"
214+
/>
218215
</div>
219216
</EuiText>
220217
)

‎redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { StreamEntryDto } from 'apiSrc/modules/browser/stream/dto'
2626
import StreamDataView from './StreamDataView'
2727
import styles from './StreamDataView/styles.module.scss'
2828
import { MAX_FORMAT_LENGTH_STREAM_TIMESTAMP, MAX_VISIBLE_LENGTH_STREAM_TIMESTAMP } from '../constants'
29+
import { FormattedValue } from '../../../shared'
2930

3031
const suffix = '_stream'
3132
const actionsWidth = 50
@@ -99,7 +100,7 @@ const StreamDataViewWrapper = (props: Props) => {
99100
render: () => {
100101
const { value: decompressedName } = decompressingBuffer(name, compressor)
101102
const value = name ? bufferToString(name) : ''
102-
const { value: formattedValue, isValid } = formattingBuffer(decompressedName || stringToBuffer(''), viewFormatProp)
103+
const { value: formattedValue, isValid } = formattingBuffer(decompressedName || stringToBuffer(''), viewFormatProp, { isField: true })
103104
const tooltipContent = formatLongName(value)
104105
return (
105106
<>
@@ -108,14 +109,12 @@ const StreamDataViewWrapper = (props: Props) => {
108109
style={{ display: 'flex', whiteSpace: 'break-spaces', wordBreak: 'break-all', width: 'max-content' }}
109110
data-testid={`stream-field-name-${field}`}
110111
>
111-
<EuiToolTip
112-
title={isValid ? 'Field' : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)}
113-
anchorClassName="truncateText"
114-
position="bottom"
115-
content={tooltipContent}
116-
>
117-
<>{formattedValue}</>
118-
</EuiToolTip>
112+
<FormattedValue
113+
value={formattedValue}
114+
tooltipContent={tooltipContent}
115+
isValid={isValid}
116+
viewFormatProp={viewFormatProp}
117+
/>
119118
</div>
120119
) : (
121120
<div>&nbsp;</div>
@@ -214,7 +213,6 @@ const StreamDataViewWrapper = (props: Props) => {
214213
const { value: decompressedBufferValue } = decompressingBuffer(values[index]?.value || stringToBuffer(''), compressor)
215214
// const bufferValue = values[index]?.value || stringToBuffer('')
216215
const { value: formattedValue, isValid } = formattingBuffer(decompressedBufferValue, viewFormatProp, { expanded })
217-
const cellContent = formattedValue?.substring?.(0, 650) ?? formattedValue
218216
const tooltipContent = formatLongName(value)
219217

220218
return (
@@ -224,18 +222,15 @@ const StreamDataViewWrapper = (props: Props) => {
224222
className="streamItem"
225223
data-testid={`stream-entry-field-${id}`}
226224
>
227-
{!expanded && (
228-
<EuiToolTip
229-
title={isValid ? 'Value' : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)}
230-
className={styles.tooltip}
231-
anchorClassName="streamItem line-clamp-2"
232-
position="bottom"
233-
content={tooltipContent}
234-
>
235-
<>{cellContent}</>
236-
</EuiToolTip>
237-
)}
238-
{expanded && formattedValue}
225+
<FormattedValue
226+
value={formattedValue}
227+
tooltipContent={tooltipContent}
228+
isValid={isValid}
229+
viewFormatProp={viewFormatProp}
230+
expanded={expanded}
231+
truncateLength={650}
232+
anchorClassName="streamItem line-clamp-2"
233+
/>
239234
</div>
240235
</EuiText>
241236
)

‎redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,37 @@ const StringDetailsValue = (props: Props) => {
179179
})
180180
}
181181

182+
const renderValue = (value: string) => {
183+
const textEl = (
184+
<EuiText
185+
className={styles.stringValue}
186+
onClick={() => isEditable && setIsEdit(true)}
187+
style={{ whiteSpace: 'break-spaces' }}
188+
data-testid="string-value"
189+
>
190+
{areaValue !== ''
191+
? value
192+
: (!isLoading && (<span style={{ fontStyle: 'italic' }}>Empty</span>))}
193+
</EuiText>
194+
)
195+
196+
if (length && length > 500) {
197+
return textEl
198+
}
199+
200+
return (
201+
<EuiToolTip
202+
title={!isValid ? noEditableText : undefined}
203+
anchorClassName={styles.tooltipAnchor}
204+
className={styles.tooltip}
205+
position="left"
206+
data-testid="string-value-tooltip"
207+
>
208+
{textEl}
209+
</EuiToolTip>
210+
)
211+
}
212+
182213
return (
183214
<>
184215
<div className={styles.container} ref={containerRef} data-testid="string-details">
@@ -191,24 +222,7 @@ const StringDetailsValue = (props: Props) => {
191222
/>
192223
)}
193224
{!isEditItem && (
194-
<EuiToolTip
195-
title={!isValid ? noEditableText : undefined}
196-
anchorClassName={styles.tooltipAnchor}
197-
className={styles.tooltip}
198-
position="left"
199-
data-testid="string-value-tooltip"
200-
>
201-
<EuiText
202-
className={styles.stringValue}
203-
onClick={() => isEditable && setIsEdit(true)}
204-
style={{ whiteSpace: 'break-spaces' }}
205-
data-testid="string-value"
206-
>
207-
{areaValue !== ''
208-
? value
209-
: (!isLoading && (<span style={{ fontStyle: 'italic' }}>Empty</span>))}
210-
</EuiText>
211-
</EuiToolTip>
225+
renderValue(value as string)
212226
)}
213227
{isEditItem && (
214228
<InlineItemEditor

‎redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/zset-details-table/ZSetDetailsTable.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
fetchSearchZSetMembers,
1818
fetchSearchMoreZSetMembers,
1919
} from 'uiSrc/slices/browser/zset'
20-
import { KeyTypes, OVER_RENDER_BUFFER_COUNT, SortOrder, TableCellAlignment, TEXT_FAILED_CONVENT_FORMATTER } from 'uiSrc/constants'
20+
import { KeyTypes, OVER_RENDER_BUFFER_COUNT, SortOrder, TableCellAlignment } from 'uiSrc/constants'
2121
import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
2222
import HelpTexts from 'uiSrc/constants/help-texts'
2323
import { NoResultsFoundText } from 'uiSrc/constants/texts'
@@ -45,7 +45,7 @@ import { IColumnSearchState, ITableColumn, RelativeWidthSizes } from 'uiSrc/comp
4545
import { StopPropagation } from 'uiSrc/components/virtual-table'
4646
import { getColumnWidth } from 'uiSrc/components/virtual-grid'
4747
import { decompressingBuffer } from 'uiSrc/utils/decompressors'
48-
import { EditableInput } from 'uiSrc/pages/browser/modules/key-details/shared'
48+
import { EditableInput, FormattedValue } from 'uiSrc/pages/browser/modules/key-details/shared'
4949
import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
5050
import { AddMembersToZSetDto, SearchZSetMembersResponse } from 'apiSrc/modules/browser/z-set/dto'
5151

@@ -276,26 +276,21 @@ const ZSetDetailsTable = (props: Props) => {
276276
const name = bufferToString(nameItem)
277277
const tooltipContent = formatLongName(name)
278278
const { value, isValid } = formattingBuffer(decompressedNameItem, viewFormat, { expanded })
279-
const cellContent = value?.substring?.(0, 200) ?? value
280279

281280
return (
282281
<EuiText color="subdued" size="s" style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}>
283282
<div
284283
style={{ display: 'flex' }}
285284
data-testid={`zset-member-value-${name}`}
286285
>
287-
{!expanded && (
288-
<EuiToolTip
289-
title={isValid ? 'Member' : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)}
290-
className={styles.tooltip}
291-
anchorClassName="truncateText"
292-
position="bottom"
293-
content={tooltipContent}
294-
>
295-
<>{cellContent}</>
296-
</EuiToolTip>
297-
)}
298-
{expanded && value}
286+
<FormattedValue
287+
value={value}
288+
expanded={expanded}
289+
title="Member"
290+
tooltipContent={tooltipContent}
291+
isValid={isValid}
292+
viewFormatProp={viewFormatProp}
293+
/>
299294
</div>
300295
</EuiText>
301296
)

0 commit comments

Comments
 (0)