Skip to content

Commit 6735f6a

Browse files
AmirAllayarovSofteqAmirAllayarovSofteq
authored
Merge pull request #1261 from RedisInsight/fe/bugfix/RI-3519_styles
#RI-3519-remove unused code, add encrypt message, fix truncated text
2 parents 1545827 + 740e9a5 commit 6735f6a

File tree

12 files changed

+87
-65
lines changed

12 files changed

+87
-65
lines changed

‎redisinsight/api/src/modules/core/encryption/strategies/keytar-encryption.strategy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class KeytarEncryptionStrategy implements IEncryptionStrategy {
3333
// eslint-disable-next-line global-require
3434
this.keytar = require('keytar');
3535
} catch (e) {
36-
this.logger.error('Failed to initialize keytar module');
36+
this.logger.error('Failed to initialize keytar module', e);
3737
}
3838
}
3939

‎redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/AnalysisDataView.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import cx from 'classnames'
3+
import { isNull } from 'lodash'
34
import { Nullable } from 'uiSrc/utils'
45
import { EmptyMessage } from 'uiSrc/pages/databaseAnalysis/constants'
56
import {
@@ -30,16 +31,16 @@ const AnalysisDataView = (props: Props) => {
3031
{!loading && !!reports.length && data?.totalKeys?.total === 0 && (
3132
<EmptyAnalysisMessage name={EmptyMessage.Keys} />
3233
)}
34+
{!loading && !!reports.length && isNull(data?.totalKeys) && (
35+
<EmptyAnalysisMessage name={EmptyMessage.Encrypt} />
36+
)}
3337
<div className={cx(styles.grid, styles.content)}>
38+
<SummaryPerData data={data} loading={loading} />
39+
<ExpirationGroupsView data={data} loading={loading} />
3440
<div>
35-
<SummaryPerData data={data} loading={loading} />
3641
<TopNamespace data={data} loading={loading} />
3742
<TopKeys data={data} loading={loading} />
3843
</div>
39-
<div>
40-
<ExpirationGroupsView data={data} loading={loading} />
41-
</div>
42-
<div />
4344
</div>
4445
</>
4546
)

‎redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/styles.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import "@elastic/eui/src/components/table/mixins";
33
@import "@elastic/eui/src/global_styling/index";
44

5-
$breakpoint-table: 1232px;
5+
$breakpoint-table: 1680px;
66

77
.content {
88
@include euiScrollBar;

‎redisinsight/ui/src/pages/databaseAnalysis/components/empty-analysis-message/EmptyAnalysisMessage.spec.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
2-
import { instance, mock } from 'ts-mockito'
32
import { render } from 'uiSrc/utils/test-utils'
3+
import { EmptyMessage } from 'uiSrc/pages/databaseAnalysis/constants'
44

5-
import EmptyAnalysisMessage, { Props } from './EmptyAnalysisMessage'
6-
7-
const mockedProps = mock<Props>()
5+
import EmptyAnalysisMessage from './EmptyAnalysisMessage'
86

97
describe('EmptyAnalysisMessage', () => {
108
it('should render', () => {
11-
expect(render(<EmptyAnalysisMessage {...instance(mockedProps)} />)).toBeTruthy()
9+
expect(render(<EmptyAnalysisMessage name={EmptyMessage.Keys} />)).toBeTruthy()
1210
})
1311
})

‎redisinsight/ui/src/pages/databaseAnalysis/components/empty-analysis-message/EmptyAnalysisMessage.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { getRouterLinkProps } from 'uiSrc/services'
88

99
import styles from './styles.module.scss'
1010

11-
export interface Props {
11+
interface Props {
1212
name: EmptyMessage
1313
}
1414

@@ -31,6 +31,10 @@ const emptyMessageContent: { [key in EmptyMessage]: Content } = {
3131
{' to quickly load the data.'}
3232
</>
3333
)
34+
},
35+
[EmptyMessage.Encrypt]: {
36+
title: 'Encrypted data',
37+
text: () => 'Unable to decrypt. Check the system keychain or re-run the report generation.'
3438
}
3539
}
3640

‎redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ const SummaryPerData = ({ data, loading }: Props) => {
3131
})
3232

3333
useEffect(() => {
34-
if (data) {
35-
setMemoryData(totalMemory?.types?.map(getChartData) as ChartData[])
36-
setKeysData(totalKeys?.types?.map(getChartData) as ChartData[])
34+
if (data && totalMemory && totalKeys) {
35+
setMemoryData(totalMemory.types?.map(getChartData) as ChartData[])
36+
setKeysData(totalKeys.types?.map(getChartData) as ChartData[])
3737
}
3838
}, [data])
3939

@@ -45,7 +45,6 @@ const SummaryPerData = ({ data, loading }: Props) => {
4545
</div>
4646
)
4747
}
48-
4948
if ((!totalMemory || memoryData.length === 0) && (!totalKeys || keysData.length === 0)) {
5049
return null
5150
}

‎redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/Table.tsx‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,14 @@ import { useParams, useHistory } from 'react-router-dom'
1212
import { useDispatch, useSelector } from 'react-redux'
1313
import cx from 'classnames'
1414

15-
import { formatBytes, truncateNumberToDuration, truncateNumberToFirstUnit, truncateTTLToSeconds, stringToBuffer } from 'uiSrc/utils'
15+
import {
16+
formatBytes,
17+
formatLongName,
18+
truncateNumberToDuration,
19+
truncateNumberToFirstUnit,
20+
truncateTTLToSeconds,
21+
stringToBuffer
22+
} from 'uiSrc/utils'
1623
import { numberWithSpaces } from 'uiSrc/utils/numbers'
1724
import { GroupBadge } from 'uiSrc/components'
1825
import { setFilter, setSearchMatch, resetKeysData, fetchKeys, keysSelector } from 'uiSrc/slices/browser/keys'
@@ -86,23 +93,27 @@ const Table = (props: Props) => {
8693
height: '42px',
8794
sortable: true,
8895
truncateText: true,
89-
render: (name: string) => (
90-
<div data-testid="top-keys-table-name" className={cx(styles.delimiter, 'truncateText')}>
91-
<EuiToolTip
92-
anchorClassName={styles.tooltip}
93-
position="bottom"
94-
content={name}
95-
>
96-
<EuiButtonEmpty
97-
className={styles.link}
98-
style={{ height: 'auto' }}
99-
onClick={() => handleRedirect(name)}
96+
render: (name: string) => {
97+
const tooltipContent = formatLongName(name)
98+
const cellContent = name.substring(0, 200)
99+
return (
100+
<div data-testid="top-keys-table-name" className={cx(styles.delimiter, 'truncateText')}>
101+
<EuiToolTip
102+
anchorClassName={styles.tooltip}
103+
position="bottom"
104+
content={tooltipContent}
100105
>
101-
{name}
102-
</EuiButtonEmpty>
103-
</EuiToolTip>
104-
</div>
105-
)
106+
<EuiButtonEmpty
107+
className={styles.link}
108+
style={{ height: 'auto' }}
109+
onClick={() => handleRedirect(name)}
110+
>
111+
{cellContent}
112+
</EuiButtonEmpty>
113+
</EuiToolTip>
114+
</div>
115+
)
116+
}
106117
},
107118
{
108119
name: 'TTL',

‎redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/styles.module.scss‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
@import "@elastic/eui/src/components/table/mixins";
33
@import "@elastic/eui/src/global_styling/index";
44

5-
$breakpoint-table: 1680px;
6-
75
.wrapper .textBtn {
86
border: none;
97
min-width: auto !important;
@@ -55,16 +53,22 @@ $breakpoint-table: 1680px;
5553
}
5654

5755
:global {
58-
.euiTableRowCell:first-child,
59-
.euiTableHeaderCell:first-child {
56+
.euiTableRowCell:first-child {
6057
padding-left: 12px;
6158
}
6259

63-
.euiTableRowCell:last-child,
64-
.euiTableHeaderCell:last-child {
60+
.euiTableRowCell:last-child {
6561
padding-right: 12px;
6662
}
6763

64+
.euiTableHeaderCell:first-child .euiTableCellContent {
65+
padding-left: 24px;
66+
}
67+
68+
.euiTableHeaderCell:last-child .euiTableCellContent {
69+
padding-right: 24px;
70+
}
71+
6872
.euiTableHeaderCell {
6973
min-width: 42px;
7074
background-color: var(--euiColorEmptyShade);
@@ -105,12 +109,12 @@ $breakpoint-table: 1680px;
105109
}
106110
}
107111

108-
.euiTableCellContent {
109-
padding: 12px 12px 12px 12px;
112+
.euiTableRowCell .euiTableCellContent {
113+
padding: 10px;
110114
font: normal normal normal 14px/24px Graphik;
111115

112116
&:global(.dataType) {
113-
padding: 12px 6px 4px;
117+
padding: 10px 6px 2px;
114118
}
115119
}
116120

‎redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/Table.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import { useParams, useHistory } from 'react-router-dom'
1111
import { useDispatch, useSelector } from 'react-redux'
1212
import cx from 'classnames'
1313

14-
import { NspTypeSummary } from 'apiSrc/modules/database-analysis/models/nsp-type-summary'
15-
import { formatBytes, Nullable } from 'uiSrc/utils'
14+
import { formatBytes, formatLongName, Nullable } from 'uiSrc/utils'
1615
import { numberWithSpaces } from 'uiSrc/utils/numbers'
1716
import { GroupBadge } from 'uiSrc/components'
1817
import { Pages } from 'uiSrc/constants'
@@ -21,6 +20,7 @@ import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api
2120
import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
2221
import { setBrowserTreeDelimiter, setBrowserKeyListDataLoaded, resetBrowserTree } from 'uiSrc/slices/app/context'
2322
import { NspSummary } from 'apiSrc/modules/database-analysis/models/nsp-summary'
23+
import { NspTypeSummary } from 'apiSrc/modules/database-analysis/models/nsp-type-summary'
2424

2525
import styles from './styles.module.scss'
2626

@@ -117,18 +117,21 @@ const NameSpacesTable = (props: Props) => {
117117
className: 'nsp-cell',
118118
render: (nsp: string, { types }: { types: any[] }) => {
119119
const filterType = types.length > 1 ? null : types[0].type
120+
const textWithDelimiter = `${nsp}${delimiter}*`
121+
const cellContent = textWithDelimiter?.substring(0, 200)
122+
const tooltipContent = formatLongName(textWithDelimiter)
120123
return (
121124
<div className={cx(styles.delimiter, 'truncateText')}>
122125
<EuiToolTip
123126
anchorClassName={styles.tooltip}
124127
position="bottom"
125-
content={`${nsp}${delimiter}*`}
128+
content={tooltipContent}
126129
>
127130
<EuiButtonEmpty
128131
className={styles.link}
129132
onClick={() => handleRedirect(nsp, filterType)}
130133
>
131-
{`${nsp}${delimiter}*`}
134+
{cellContent}
132135
</EuiButtonEmpty>
133136
</EuiToolTip>
134137
</div>
@@ -138,7 +141,7 @@ const NameSpacesTable = (props: Props) => {
138141
{
139142
name: 'Data Type',
140143
field: 'types',
141-
width: '34%',
144+
width: '32%',
142145
align: 'left',
143146
className: 'dataType',
144147
render: (value: NspTypeSummary[]) => (
@@ -150,7 +153,7 @@ const NameSpacesTable = (props: Props) => {
150153
{
151154
name: 'Total Memory',
152155
field: 'memory',
153-
width: '12%',
156+
width: '13%',
154157
sortable: true,
155158
align: 'right',
156159
render: (value: number) => {
@@ -174,7 +177,7 @@ const NameSpacesTable = (props: Props) => {
174177
{
175178
name: 'Total Keys',
176179
field: 'keys',
177-
width: '10%',
180+
width: '11%',
178181
sortable: true,
179182
align: 'right',
180183
render: (value: number) => (

‎redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/styles.module.scss‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
@import "@elastic/eui/src/components/table/mixins";
33
@import "@elastic/eui/src/global_styling/index";
44

5-
$breakpoint-table: 1680px;
6-
75
.wrapper {
86
margin-bottom: 37px;
97

@@ -86,6 +84,7 @@ $breakpoint-table: 1680px;
8684
overflow: auto;
8785
position: relative;
8886
max-height: 100%;
87+
overflow-y: hidden;
8988

9089
:global(.euiTableRow-isExpandedRow .euiTableCellContent) {
9190
padding: 0 12px !important;
@@ -102,16 +101,22 @@ $breakpoint-table: 1680px;
102101
height: 42px;
103102
}
104103

105-
.euiTableRowCell:first-child,
106-
.euiTableHeaderCell:first-child {
104+
.euiTableRowCell:first-child {
107105
padding-left: 12px;
108106
}
109107

110-
.euiTableRowCell:last-child,
111-
.euiTableHeaderCell:last-child {
108+
.euiTableRowCell:last-child {
112109
padding-right: 12px;
113110
}
114111

112+
.euiTableHeaderCell:first-child .euiTableCellContent {
113+
padding-left: 24px;
114+
}
115+
116+
.euiTableHeaderCell:last-child .euiTableCellContent {
117+
padding-right: 24px;
118+
}
119+
115120
.euiTableHeaderCell {
116121
min-width: 42px;
117122
background-color: var(--euiColorEmptyShade);
@@ -157,11 +162,11 @@ $breakpoint-table: 1680px;
157162
}
158163

159164
.euiTableCellContent {
160-
padding: 12px;
165+
padding: 10px;
161166
font: normal normal normal 14px/24px Graphik;
162167

163168
&:global(.dataType) {
164-
padding: 12px 6px 4px;
169+
padding: 10px 6px 2px;
165170
}
166171
}
167172

@@ -192,7 +197,7 @@ $breakpoint-table: 1680px;
192197

193198
.expanded {
194199
display: grid;
195-
grid-template-columns: auto calc(34%) calc(12% + 6px) calc(10% + 28px);
200+
grid-template-columns: auto calc(32%) calc(13% + 6px) calc(11% + 22px);
196201
grid-column-gap: 0;
197202
height: 42px;
198203
width: 100%;
@@ -210,7 +215,7 @@ $breakpoint-table: 1680px;
210215
padding: 0 12px;
211216

212217
&:last-child {
213-
padding: 0 34px 0 12px;
218+
padding: 0 26px 0 12px;
214219
}
215220
}
216221
}

0 commit comments

Comments
 (0)