Skip to content

Commit e7e1412

Browse files
ArtemHoruzhenkoArtemHoruzhenko
authored
Fe/feature/ri 7687 adjust rdi config layout (#5150)
* RI-7687: rework menu and modals (#5136) * RI-7687: adjust general RDI layout and for config page and test connections * RI-7687: fix tests * RI-7687: fix small style issues * RI-7687: add missed tests after merge
1 parent 3e61487 commit e7e1412

File tree

15 files changed

+201
-495
lines changed

15 files changed

+201
-495
lines changed

‎redisinsight/ui/src/components/base/layout/flex/flex.styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ export const flexItemStyles = {
187187
`,
188188
grow: css`
189189
flex-basis: 0;
190+
min-width: 0;
190191
`,
191192
growSizes: {
192193
'1': css`

‎redisinsight/ui/src/components/monaco-editor/MonacoEditor.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import React, { useContext, useEffect, useRef, useState } from 'react'
1+
import React, {
2+
useContext,
3+
useEffect,
4+
useRef,
5+
useState,
6+
} from 'react'
27
import ReactMonacoEditor, { monaco as monacoEditor } from 'react-monaco-editor'
38
import cx from 'classnames'
49
import { merge } from 'lodash'
@@ -38,6 +43,7 @@ export interface CommonProps {
3843
onSubmitDedicatedEditor?: (langId: DSL) => void
3944
onCloseDedicatedEditor?: (langId: DSL) => void
4045
'data-testid'?: string
46+
fullHeight?: boolean
4147
}
4248

4349
export interface Props extends CommonProps {
@@ -75,6 +81,7 @@ const MonacoEditor = (props: Props) => {
7581
onSubmitDedicatedEditor,
7682
onCloseDedicatedEditor,
7783
'data-testid': dataTestId = 'monaco-editor',
84+
fullHeight,
7885
} = props
7986

8087
let contribution: Nullable<ISnippetController> = null
@@ -256,6 +263,7 @@ const MonacoEditor = (props: Props) => {
256263
disabled,
257264
[styles.isEditing]: isEditing && readOnly,
258265
})}
266+
style={fullHeight ? { flex: '1 1 auto' } : undefined}
259267
>
260268
<InlineItemEditor
261269
onApply={handleApply}
@@ -268,6 +276,7 @@ const MonacoEditor = (props: Props) => {
268276
className={cx('inlineMonacoEditor', editorWrapperClassName)}
269277
data-testid={`wrapper-${dataTestId}`}
270278
ref={input}
279+
style={fullHeight ? { height: '100%' } : undefined}
271280
>
272281
<ReactMonacoEditor
273282
language={language}

‎redisinsight/ui/src/constants/links.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const EXTERNAL_LINKS = {
1717
rdiQuickStart:
1818
'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/quick-start-guide/',
1919
rdiPipeline:
20-
'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/data-pipelines/',
20+
'https://redis.io/docs/latest/integrate/redis-data-integration/data-pipelines/',
2121
rdiPipelineTransforms:
2222
'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/transform-examples/',
2323
pubSub: 'https://redis.io/docs/latest/commands/psubscribe/',

‎redisinsight/ui/src/pages/rdi/pipeline-management/PipelineManagementPage.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import Navigation from 'uiSrc/pages/rdi/pipeline-management/components/navigatio
2121
import { removeInfiniteNotification } from 'uiSrc/slices/app/notifications'
2222
import { InfiniteMessagesIds } from 'uiSrc/components/notifications/components'
2323
import PipelinePageRouter from './PipelineManagementPageRouter'
24-
import styles from './styles.module.scss'
24+
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
2525

2626
export interface Props {
2727
routes: IRoute[]
@@ -81,11 +81,15 @@ const PipelineManagementPage = ({ routes = [] }: Props) => {
8181
}, [pathname, lastViewedPage])
8282

8383
return (
84-
<div className={styles.wrapper}>
85-
<Navigation />
84+
<Row>
85+
<FlexItem>
86+
<Navigation />
87+
</FlexItem>
8688
<SourcePipelineDialog />
87-
<PipelinePageRouter routes={routes} />
88-
</div>
89+
<FlexItem grow>
90+
<PipelinePageRouter routes={routes} />
91+
</FlexItem>
92+
</Row>
8993
)
9094
}
9195

‎redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-log/TestConnectionsLog.spec.tsx‎

Lines changed: 8 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { render, screen, fireEvent, within } from 'uiSrc/utils/test-utils'
2+
import { render, screen } from 'uiSrc/utils/test-utils'
33
import { TransformGroupResult } from 'uiSrc/slices/interfaces'
44

55
import TestConnectionsLog from './TestConnectionsLog'
@@ -17,99 +17,23 @@ describe('TestConnectionsLog', () => {
1717
}
1818
render(<TestConnectionsLog data={mockedData} />)
1919

20-
expect(screen.getByTestId('failed-connections-closed')).toBeInTheDocument()
21-
expect(
22-
screen.queryByTestId('success-connections-closed'),
23-
).not.toBeInTheDocument()
24-
expect(
25-
screen.queryByTestId('mixed-connections-closed'),
26-
).not.toBeInTheDocument()
20+
expect(screen.queryByText('Successful')).not.toBeInTheDocument()
21+
expect(screen.queryByText('some error')).toBeInTheDocument()
2722
})
2823

29-
it('should render the correct status when only successful connections exist', () => {
30-
const mockedData: TransformGroupResult = {
31-
fail: [],
32-
success: [{ target: 'localhost:1233' }],
33-
}
34-
render(<TestConnectionsLog data={mockedData} />)
35-
36-
expect(screen.getByTestId('success-connections-closed')).toBeInTheDocument()
37-
expect(
38-
screen.queryByTestId('failed-connections-closed'),
39-
).not.toBeInTheDocument()
40-
expect(
41-
screen.queryByTestId('mixed-connections-closed'),
42-
).not.toBeInTheDocument()
43-
})
44-
45-
it('should expand and collapse successful connections', () => {
46-
const mockedData: TransformGroupResult = {
47-
fail: [],
48-
success: [{ target: 'localhost:1233' }],
49-
}
50-
render(<TestConnectionsLog data={mockedData} />)
51-
52-
fireEvent.click(
53-
within(screen.getByTestId('success-connections-closed')).getByRole(
54-
'button',
55-
),
56-
)
57-
expect(screen.getByTestId('success-connections-open')).toBeInTheDocument()
58-
})
59-
60-
it('should display the correct number of successful connections', () => {
61-
const mockedData: TransformGroupResult = {
62-
fail: [],
63-
success: [{ target: 'localhost:1233' }, { target: 'localhost:1234' }],
64-
}
65-
render(<TestConnectionsLog data={mockedData} />)
66-
67-
expect(
68-
within(screen.getByTestId('success-connections-closed')).getByTestId(
69-
'number-of-connections',
70-
),
71-
).toHaveTextContent('2')
72-
})
73-
74-
it('should display "Partially connected" when there are both successful and failed connections', () => {
75-
const mockedData: TransformGroupResult = {
76-
fail: [{ target: 'localhost:1233', error: 'some error' }],
77-
success: [{ target: 'localhost:1234' }],
78-
}
79-
render(<TestConnectionsLog data={mockedData} />)
80-
81-
expect(screen.getByText('Partially connected:')).toBeInTheDocument()
82-
})
83-
84-
it('should expand and collapse the "Mixed" state correctly', () => {
85-
const mockedData: TransformGroupResult = {
86-
fail: [{ target: 'localhost:1233', error: 'some error' }],
87-
success: [{ target: 'localhost:1234' }],
88-
}
89-
render(<TestConnectionsLog data={mockedData} />)
90-
91-
fireEvent.click(
92-
within(screen.getByTestId('mixed-connections-closed')).getByRole(
93-
'button',
94-
),
95-
)
96-
expect(screen.getByTestId('mixed-connections-open')).toBeInTheDocument()
97-
})
98-
99-
it('should display the correct number of connections for the "Mixed" state', () => {
24+
it('should render all results', () => {
10025
const mockedData: TransformGroupResult = {
10126
fail: [
10227
{ target: 'localhost:1233', error: 'some error' },
10328
{ target: 'localhost:1234', error: 'timeout' },
10429
],
10530
success: [{ target: 'localhost:1235' }],
10631
}
32+
10733
render(<TestConnectionsLog data={mockedData} />)
10834

109-
expect(
110-
within(screen.getByTestId('mixed-connections-closed')).getByTestId(
111-
'number-of-connections',
112-
),
113-
).toHaveTextContent('3') // 2 failed + 1 success
35+
expect(screen.queryAllByText('Successful').length).toEqual(1)
36+
expect(screen.queryAllByText('some error').length).toEqual(1)
37+
expect(screen.queryAllByText('timeout').length).toEqual(1)
11438
})
11539
})

‎redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-log/TestConnectionsLog.tsx‎

Lines changed: 38 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,51 @@
1-
import cx from 'classnames'
2-
import React, { useState } from 'react'
3-
4-
import { RICollapsibleNavGroup } from 'uiSrc/components/base/display'
5-
import { TransformGroupResult } from 'uiSrc/slices/interfaces'
6-
import TestConnectionsTable from 'uiSrc/pages/rdi/pipeline-management/components/test-connections-table'
7-
8-
import styles from './styles.module.scss'
9-
10-
enum ResultsStatus {
11-
Success = 'success',
12-
Failed = 'failed',
13-
Mixed = 'mixed',
14-
}
1+
import React from 'react'
2+
import {
3+
IRdiConnectionResult,
4+
TransformGroupResult,
5+
} from 'uiSrc/slices/interfaces'
6+
import { StyledRdiAnalyticsTable } from 'uiSrc/pages/rdi/statistics/styles'
7+
import { ColumnDefinition, Table } from 'uiSrc/components/base/layout/table'
8+
import { RiTooltip } from 'uiSrc/components'
9+
10+
const columns: ColumnDefinition<IRdiConnectionResult>[] = [
11+
{
12+
header: 'Endpoint',
13+
id: 'endpoint',
14+
accessorKey: 'target',
15+
},
16+
{
17+
header: 'Results',
18+
id: 'results',
19+
accessorKey: 'error',
20+
cell: ({
21+
row: {
22+
original: { error: error },
23+
},
24+
}) => {
25+
if (error) {
26+
return <RiTooltip content={error}>{error}</RiTooltip>
27+
}
28+
return 'Successful'
29+
},
30+
},
31+
]
1532

1633
export interface Props {
1734
data: TransformGroupResult
1835
}
1936

20-
const getStatus = (data: TransformGroupResult) => {
21-
if (data.fail.length && data.success.length) {
22-
return ResultsStatus.Mixed
23-
}
24-
25-
if (data.fail.length) {
26-
return ResultsStatus.Failed
27-
}
28-
29-
return ResultsStatus.Success
30-
}
31-
32-
const statusToLabel = {
33-
[ResultsStatus.Success]: 'Connected successfully',
34-
[ResultsStatus.Failed]: 'Failed to connect',
35-
[ResultsStatus.Mixed]: 'Partially connected',
36-
}
37-
3837
const TestConnectionsLog = (props: Props) => {
3938
const { data } = props
4039
const statusData = [...data.success, ...data.fail]
41-
const status = getStatus(data)
42-
const [openedNav, setOpenedNav] = useState<string>('')
43-
44-
const onToggle = (length: number = 0, isOpen: boolean, name: string) => {
45-
if (length === 0) return
46-
setOpenedNav(isOpen ? name : '')
47-
}
48-
49-
const CollapsibleNavTitle = ({
50-
title,
51-
length = 0,
52-
}: {
53-
title: string
54-
length: number
55-
}) => (
56-
<div className={styles.collapsibleNavTitle} style={{ margin: 0 }}>
57-
<span data-testid="nav-group-title">{title}:</span>
58-
<span data-testid="number-of-connections">{length}</span>
59-
</div>
60-
)
61-
62-
const navTitle = statusToLabel[status]
63-
64-
const getNavGroupState = (name: ResultsStatus) =>
65-
openedNav === name ? 'open' : 'closed'
66-
67-
const id = `${status}-connections-${getNavGroupState(status)}`
6840

6941
return (
70-
<RICollapsibleNavGroup
71-
title={
72-
<CollapsibleNavTitle
73-
title={navTitle}
74-
length={statusData?.length ?? 0}
75-
/>
76-
}
77-
className={cx(styles.collapsibleNav, status, {
78-
[styles.disabled]: !statusData?.length,
79-
})}
80-
isCollapsible
81-
initialIsOpen={false}
82-
onToggle={(isOpen) => onToggle(statusData?.length, isOpen, status)}
83-
forceState={getNavGroupState(status)}
84-
data-testid={id}
85-
id={id}
86-
>
87-
<TestConnectionsTable data={statusData ?? []} />
88-
</RICollapsibleNavGroup>
42+
<>
43+
<StyledRdiAnalyticsTable columns={columns} data={statusData} stripedRows>
44+
<Table.Root></Table.Root>
45+
<Table.Header />
46+
<Table.Body />
47+
</StyledRdiAnalyticsTable>
48+
</>
8949
)
9050
}
9151

0 commit comments

Comments
 (0)