Skip to content

Commit 429d176

Browse files
egor-zalenskiegor-zalenski
authored
Merge pull request #365 from RedisInsight/feature/bugfix
#RI-2513, #RI-2514, #RI-2515, #RI-2516, #RI-2517, #RI-2521
2 parents c3b7263 + ca97873 commit 429d176

File tree

9 files changed

+163
-67
lines changed

9 files changed

+163
-67
lines changed

‎redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx‎

Lines changed: 61 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ export const modulesDefaultInit = {
7878
},
7979
}
8080

81-
const DatabaseListModules = React.memo(({ modules, inCircle, highlight, tooltipTitle, maxViewModules }: Props) => {
81+
const DatabaseListModules = React.memo((props: Props) => {
82+
const { modules, inCircle, highlight, tooltipTitle, maxViewModules } = props
8283
const { theme } = useContext(ThemeContext)
8384

8485
const mainContent = []
@@ -112,7 +113,7 @@ const DatabaseListModules = React.memo(({ modules, inCircle, highlight, tooltipT
112113
})
113114

114115
// set count of hidden modules
115-
if (maxViewModules && newModules.length > maxViewModules) {
116+
if (maxViewModules && newModules.length > maxViewModules + 1) {
116117
newModules.length = maxViewModules
117118
newModules.push({
118119
icon: null,
@@ -138,42 +139,70 @@ const DatabaseListModules = React.memo(({ modules, inCircle, highlight, tooltipT
138139
</div>
139140
))
140141

142+
const Module = (moduleName: string = '', abbreviation: string = '', icon: string, content: string = '') => (
143+
<span key={moduleName || abbreviation || content}>
144+
{icon ? (
145+
<EuiButtonIcon
146+
iconType={icon}
147+
className={cx(styles.icon, { [styles.circle]: inCircle })}
148+
onClick={() => handleCopy(content)}
149+
data-testid={`${content}_module`}
150+
aria-labelledby={`${content}_module`}
151+
/>
152+
) : (
153+
<EuiTextColor
154+
className={cx(styles.icon, styles.abbr, { [styles.circle]: inCircle })}
155+
onClick={() => handleCopy(content)}
156+
data-testid={`${content}_module`}
157+
aria-labelledby={`${content}_module`}
158+
>
159+
{abbreviation}
160+
</EuiTextColor>
161+
)}
162+
</span>
163+
)
164+
165+
const Modules = () => (
166+
newModules.map(({ icon, content, abbreviation, moduleName }, i) => (
167+
!inCircle
168+
? Module(moduleName, abbreviation, icon, content)
169+
: (
170+
<EuiToolTip
171+
position="bottom"
172+
display="inlineBlock"
173+
content={Content[i]}
174+
anchorClassName={styles.anchorModuleTooltip}
175+
key={moduleName}
176+
>
177+
<>
178+
{Module(moduleName, abbreviation, icon, content)}
179+
</>
180+
</EuiToolTip>
181+
)
182+
))
183+
)
184+
141185
return (
142186
<div className={cx(styles.container, {
143187
[styles.highlight]: highlight,
144188
[styles.containerCircle]: inCircle,
145189
})}
146190
>
147-
<EuiToolTip
148-
position="bottom"
149-
title={tooltipTitle ?? undefined}
150-
display="inlineBlock"
151-
content={Content}
152-
>
153-
<>
154-
{newModules.map(({ icon, content, abbreviation, moduleName }) => (
155-
icon ? (
156-
<EuiButtonIcon
157-
iconType={icon}
158-
className={cx(styles.icon, { [styles.circle]: inCircle })}
159-
onClick={() => handleCopy(content)}
160-
data-testid={`${content}_module`}
161-
aria-labelledby={`${content}_module`}
162-
key={moduleName}
163-
/>
164-
) : (
165-
<EuiTextColor
166-
className={cx(styles.icon, styles.abbr, { [styles.circle]: inCircle })}
167-
onClick={() => handleCopy(content)}
168-
data-testid={`${content}_module`}
169-
aria-labelledby={`${content}_module`}
170-
key={moduleName}
171-
>
172-
{abbreviation}
173-
</EuiTextColor>
174-
)))}
175-
</>
176-
</EuiToolTip>
191+
{ inCircle ? (
192+
Modules()
193+
) : (
194+
<EuiToolTip
195+
position="bottom"
196+
title={tooltipTitle ?? undefined}
197+
display="inlineBlock"
198+
content={Content}
199+
>
200+
<>
201+
{Modules()}
202+
</>
203+
</EuiToolTip>
204+
)}
205+
177206
</div>
178207
)
179208
})

‎redisinsight/ui/src/components/database-list-modules/styles.module.scss‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
.container {
22
height: 24px;
33
line-height: 20px;
4+
display: inline-block;
5+
width: auto;
6+
padding-left: 6px;
7+
padding-right: 6px;
48

59
&.highlight {
610
background-color: var(--hoverInListColorLight);
711
border-radius: 12px;
8-
padding-left: 6px;
9-
padding-right: 6px;
1012
}
1113

1214
&.containerCircle {
@@ -20,8 +22,8 @@
2022
max-width: 28px !important;
2123
height: 27px !important;
2224
border-radius: 50% !important;
23-
margin-right: 14px;
2425
padding: 4px;
26+
margin-right: 0;
2527

2628
&:hover,
2729
&:focus,
@@ -36,8 +38,8 @@
3638
}
3739

3840
.icon img {
39-
width: 18px !important;
40-
max-width: 18px !important;
41+
width: 16px !important;
42+
max-width: 16px !important;
4143
height: 16px !important;
4244
}
4345

@@ -52,3 +54,7 @@
5254
.abbr {
5355
vertical-align: text-top;
5456
}
57+
58+
.anchorModuleTooltip {
59+
margin-right: 18px;
60+
}

‎redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
5757
import { resetKeys } from 'uiSrc/slices/keys'
5858
import { appContextSelector, setAppContextInitialState } from 'uiSrc/slices/app/context'
5959
import DatabaseAlias from 'uiSrc/pages/home/components/DatabaseAlias'
60+
import { DatabaseListModules } from 'uiSrc/components'
6061
import {
6162
LoadingInstanceText,
6263
SubmitBtnText,
@@ -160,6 +161,7 @@ const AddStandaloneForm = (props: Props) => {
160161
selectedCaCertName,
161162
username,
162163
password,
164+
modules,
163165
sentinelMasterPassword,
164166
sentinelMasterUsername,
165167
},
@@ -185,6 +187,7 @@ const AddStandaloneForm = (props: Props) => {
185187
password,
186188
tls,
187189
db,
190+
modules,
188191
showDb: !!db,
189192
newCaCert: '',
190193
newCaCertName: '',
@@ -456,6 +459,22 @@ const AddStandaloneForm = (props: Props) => {
456459
)}
457460
/>
458461
)}
462+
463+
{!!modules?.length && (
464+
<>
465+
<EuiListGroupItem
466+
className={styles.dbInfoModulesLabel}
467+
label={(
468+
<EuiText color="subdued" size="s">
469+
Modules:
470+
</EuiText>
471+
)}
472+
/>
473+
<EuiTextColor color="default" className={cx(styles.dbInfoListValue, styles.dbInfoModules)}>
474+
<DatabaseListModules modules={modules} />
475+
</EuiTextColor>
476+
</>
477+
)}
459478
</EuiListGroup>
460479
)
461480

‎redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/styles.module.scss‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@
1414
}
1515

1616
.dbInfoGroup {
17-
padding-bottom: 12px !important;
1817
max-width: 100% !important;
18+
background-color: var(--euiColorLightestShade) !important;
19+
border: 1px solid var(--separatorColor) !important;
20+
padding: 10px 18px !important;
21+
border-radius: 4px;
1922

2023
:global {
2124
.euiListGroupItem__label {
@@ -25,13 +28,8 @@
2528
}
2629

2730
.euiListGroupItem {
28-
padding: 3px 13px;
31+
padding: 4px 0;
2932
margin-top: 0 !important;
30-
31-
&:nth-of-type(odd) {
32-
border: 1px solid var(--tableDarkestBorderColor);
33-
background-color: var(--browserTableRowEven) !important;
34-
}
3533
}
3634
}
3735
}
@@ -40,6 +38,29 @@
4038
margin-left: 10px;
4139
}
4240

41+
.dbInfoModules {
42+
padding-right: 0;
43+
margin-left: 0;
44+
height: 27px;
45+
& > div {
46+
display: inline-block;
47+
line-height: 20px;
48+
margin-top: 5px;
49+
vertical-align: top;
50+
}
51+
}
52+
53+
.dbInfoModulesLabel {
54+
position: relative;
55+
display: inline-block !important;
56+
padding-right: 0 !important;
57+
width: auto;
58+
59+
:global(.euiListGroupItem__text) {
60+
padding-right: 0 !important;
61+
}
62+
}
63+
4364
.anchorEndpoints {
4465
position: absolute;
4566
right: 12px;

‎redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import React, { useContext, useEffect, useState } from 'react'
1414
import { useDispatch, useSelector } from 'react-redux'
1515
import { useHistory, useLocation } from 'react-router-dom'
1616
import cx from 'classnames'
17+
import AutoSizer from 'react-virtualized-auto-sizer'
1718

1819
import {
1920
checkConnectToInstanceAction,
@@ -33,9 +34,8 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext'
3334
import { formatLongName, getDbIndex, Nullable, replaceSpaces } from 'uiSrc/utils'
3435
import { appContextSelector, setAppContextInitialState } from 'uiSrc/slices/app/context'
3536
import { resetCliHelperSettings, resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
36-
import DatabaseListModules, { ModulesListType } from 'uiSrc/components/database-list-modules/DatabaseListModules'
37+
import DatabaseListModules from 'uiSrc/components/database-list-modules/DatabaseListModules'
3738
import RediStackSVG from 'uiSrc/assets/img/modules/RediStack.svg'
38-
import { RedisModuleDto } from 'apiSrc/modules/instances/dto/database-instance.dto'
3939
import DatabasesList from './DatabasesList/DatabasesList'
4040

4141
import styles from './styles.module.scss'
@@ -287,25 +287,31 @@ const DatabasesListWrapper = ({
287287
},
288288
{
289289
field: 'modules',
290-
className: 'column_modules',
290+
className: styles.columnModules,
291291
name: 'Modules',
292-
width: '150px',
292+
width: '30%',
293293
dataType: 'string',
294-
render: (cellData, { modules = [], port, isRediStack }: Instance) => {
295-
return (
296-
<DatabaseListModules
297-
highlight={isRediStack}
298-
modules={modules}
299-
maxViewModules={3}
300-
tooltipTitle={isRediStack ? (
301-
<>
302-
<EuiIcon type={RediStackSVG} className={styles.redistackIcon} />
303-
<span style={{ verticalAlign: 'middle' }}>Redis Stack</span>
304-
</>
305-
) : ''}
306-
/>
307-
)
308-
},
294+
render: (_cellData, { modules = [], isRediStack }: Instance) => (
295+
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
296+
<AutoSizer>
297+
{({ width: columnWidth }) => (
298+
<div style={{ width: columnWidth, height: 40 }}>
299+
<DatabaseListModules
300+
highlight={isRediStack}
301+
modules={modules}
302+
maxViewModules={Math.floor((columnWidth - 12) / 28) - 1}
303+
tooltipTitle={isRediStack ? (
304+
<>
305+
<EuiIcon type={RediStackSVG} className={styles.redistackIcon} />
306+
<span style={{ verticalAlign: 'middle' }}>Redis Stack</span>
307+
</>
308+
) : ''}
309+
/>
310+
</div>
311+
)}
312+
</AutoSizer>
313+
</div>
314+
),
309315
},
310316
{
311317
field: 'lastConnection',

‎redisinsight/ui/src/pages/home/components/DatabasesListComponent/styles.module.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,3 +106,8 @@ $breakpoint-l: 1400px;
106106
margin-right: 6px;
107107
vertical-align: bottom;
108108
}
109+
110+
.columnModules {
111+
height: 40px;
112+
padding-right: 0 !important;
113+
}

‎redisinsight/ui/src/pages/home/styles.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@
290290
padding: 40px 30px 25px;
291291
border: 1px solid var(--euiColorPrimary);
292292
margin-right: 5px;
293+
border-radius: 4px;
293294

294295
@media only screen and (max-width: 767px) {
295296
height: calc(100vh - 340px);
@@ -315,6 +316,7 @@
315316
padding: 3px 18px 18px;
316317
background-color: var(--euiColorLightestShade) !important;
317318
border: 1px solid var(--euiColorLightShade);
319+
border-radius: 4px;
318320

319321
.euiSelect,
320322
.euiSuperSelectControl,

‎redisinsight/ui/src/utils/redistack.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,25 @@ import { Instance } from 'uiSrc/slices/interfaces'
44
export const REDISTACK_PORT = 6379
55
export const REDISTACK_MODULES = ['ReJSON', 'graph', 'timeseries', 'search', 'bf'].sort()
66

7+
const checkRediStackModules = (modules: any[]) => isEqual(map(modules, 'name').sort(), REDISTACK_MODULES)
8+
79
const checkRediStack = (instances: Instance[]): Instance[] => {
8-
let isRediStack = false
10+
let isRediStackCheck = false
911

1012
let newInstances = instances.map((instance) => {
11-
isRediStack = instance.port === REDISTACK_PORT && isEqual(map(instance.modules, 'name').sort(), REDISTACK_MODULES)
13+
const isRediStack = +instance.port === REDISTACK_PORT && checkRediStackModules(instance.modules)
14+
15+
isRediStackCheck = isRediStackCheck || isRediStack
1216
return {
1317
...instance,
1418
isRediStack
1519
}
1620
})
1721

18-
if (!isRediStack) {
22+
if (!isRediStackCheck) {
1923
newInstances = newInstances.map((instance) => ({
2024
...instance,
21-
isRediStack: isEqual(map(instance.modules, 'name').sort(), REDISTACK_MODULES)
25+
isRediStack: checkRediStackModules(instance.modules)
2226
}))
2327
}
2428

0 commit comments

Comments
 (0)