1
1
import React , { ChangeEvent , useEffect , useState } from 'react'
2
- import { EuiDescriptionListDescription , EuiFieldText , EuiIcon , EuiListGroup , EuiListGroupItem , EuiLoadingSpinner , EuiPopover , EuiSpacer , EuiTab , EuiTabs , EuiText } from '@elastic/eui'
2
+ import { EuiFieldText , EuiIcon , EuiPopover , EuiSpacer , EuiTab , EuiTabs , EuiText } from '@elastic/eui'
3
3
import cx from 'classnames'
4
- import { useDispatch , useSelector } from 'react-redux'
4
+ import { useSelector } from 'react-redux'
5
5
import { useHistory , useParams } from 'react-router-dom'
6
- import { checkConnectToRdiInstanceAction , instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances'
7
- import { checkConnectToInstanceAction , instancesSelector as dbInstancesSelector , setConnectedInstanceId } from 'uiSrc/slices/instances/instances'
6
+ import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances'
7
+ import { instancesSelector as dbInstancesSelector } from 'uiSrc/slices/instances/instances'
8
8
import Divider from 'uiSrc/components/divider/Divider'
9
9
import { Pages } from 'uiSrc/constants'
10
- import { resetRdiContext , setAppContextInitialState , setAppContextConnectedRdiInstanceId } from 'uiSrc/slices/app/context'
11
- import { resetKeys } from 'uiSrc/slices/browser/keys'
12
- import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
13
- import { resetCliHelperSettings , resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
14
10
import Down from 'uiSrc/assets/img/Down.svg?react'
15
11
import Search from 'uiSrc/assets/img/Search.svg'
16
12
import { Instance , RdiInstance } from 'uiSrc/slices/interfaces'
17
- import { TelemetryEvent , getRedisModulesSummary , sendEventTelemetry } from 'uiSrc/telemetry'
13
+ import { TelemetryEvent , sendEventTelemetry } from 'uiSrc/telemetry'
18
14
import { getDbIndex } from 'uiSrc/utils'
15
+ import InstancesList from './components/instances-list'
19
16
import styles from './styles.module.scss'
20
17
21
18
export interface Props {
@@ -32,16 +29,13 @@ const InstancesNavigationPopover = ({ name }: Props) => {
32
29
const [ searchFilter , setSearchFilter ] = useState ( '' )
33
30
const [ filteredDbInstances , setFilteredDbInstances ] = useState < Instance [ ] > ( [ ] )
34
31
const [ filteredRdiInstances , setFilteredRdiInstances ] = useState < RdiInstance [ ] > ( [ ] )
35
- const [ loading , setLoading ] = useState < boolean > ( false )
36
- const [ selected , setSelected ] = useState < string > ( '' )
37
32
38
33
const { instanceId, rdiInstanceId } = useParams < { instanceId : string , rdiInstanceId : string } > ( )
39
34
const [ selectedTab , setSelectedTab ] = useState ( rdiInstanceId ? InstancesTabs . RDI : InstancesTabs . Databases )
40
35
41
- const { data : rdiInstances , connectedInstance : connectedRdiInstance } = useSelector ( rdiInstancesSelector )
42
- const { data : dbInstances , connectedInstance : connectedDbInstance } = useSelector ( dbInstancesSelector )
36
+ const { data : rdiInstances } = useSelector ( rdiInstancesSelector )
37
+ const { data : dbInstances } = useSelector ( dbInstancesSelector )
43
38
const history = useHistory ( )
44
- const dispatch = useDispatch ( )
45
39
46
40
useEffect ( ( ) => {
47
41
const dbFiltered = dbInstances ?. filter ( ( db ) => {
@@ -72,106 +66,11 @@ const InstancesNavigationPopover = ({ name }: Props) => {
72
66
setIsPopoverOpen ( ( isPopoverOpen ) => ! isPopoverOpen )
73
67
}
74
68
75
- const connectToInstance = ( id = '' ) => {
76
- // reset rdi context
77
- dispatch ( resetRdiContext ( ) )
78
-
79
- dispatch ( resetKeys ( ) )
80
- dispatch ( resetRedisearchKeysData ( ) )
81
- dispatch ( resetCliSettingsAction ( ) )
82
- dispatch ( resetCliHelperSettings ( ) )
83
- dispatch ( setAppContextInitialState ( ) )
84
-
85
- dispatch ( setConnectedInstanceId ( id ) )
86
- setLoading ( false )
87
- history . push ( Pages . browser ( id ) )
88
- }
89
-
90
69
const btnLabel = selectedTab === InstancesTabs . Databases ? 'Redis Databases page' : 'Redis Data Integration page'
91
70
92
71
const goHome = ( ) => {
93
72
history . push ( selectedTab === InstancesTabs . Databases ? Pages . home : Pages . rdi )
94
73
}
95
- const renderInstances = ( ) => {
96
- const instances = selectedTab === InstancesTabs . Databases ? filteredDbInstances : filteredRdiInstances
97
-
98
- const goToInstance = ( instance : Instance ) => {
99
- if ( connectedDbInstance ?. id === instance . id ) {
100
- // already connected so do nothing
101
- return
102
- }
103
- setLoading ( true )
104
- const modulesSummary = getRedisModulesSummary ( instance . modules )
105
- sendEventTelemetry ( {
106
- event : TelemetryEvent . CONFIG_DATABASES_OPEN_DATABASE ,
107
- eventData : {
108
- databaseId : instance . id ,
109
- source : 'navigation_panel' ,
110
- provider : instance . provider ,
111
- ...modulesSummary ,
112
- }
113
- } )
114
- dispatch ( checkConnectToInstanceAction ( instance . id , connectToInstance , ( ) => setLoading ( false ) , false ) )
115
- }
116
-
117
- const goToRdiInstance = ( instance : RdiInstance ) => {
118
- if ( connectedRdiInstance ?. id === instance . id ) {
119
- // already connected so do nothing
120
- return
121
- }
122
- setLoading ( true )
123
- dispatch ( checkConnectToRdiInstanceAction (
124
- instance . id ,
125
- ( id : string ) => {
126
- setLoading ( false )
127
- history . push ( Pages . rdiPipeline ( id ) )
128
- } ,
129
- ( ) => setLoading ( false )
130
- ) )
131
- }
132
-
133
- const goToPage = ( instance : Instance | RdiInstance ) => {
134
- if ( selectedTab === InstancesTabs . Databases ) {
135
- goToInstance ( instance as Instance )
136
- } else {
137
- goToRdiInstance ( instance as RdiInstance )
138
- }
139
- }
140
-
141
- const isInstanceActive = ( id : string ) => {
142
- if ( selectedTab === InstancesTabs . Databases ) {
143
- return id === instanceId
144
- }
145
- return id === rdiInstanceId
146
- }
147
-
148
- return (
149
- < div className = { styles . listContainer } >
150
- < EuiListGroup flush maxWidth = "none" gutterSize = "none" >
151
- { instances ?. map ( ( instance ) => (
152
- < EuiListGroupItem
153
- className = { styles . item }
154
- isActive = { isInstanceActive ( instance . id ) }
155
- disabled = { loading }
156
- key = { instance . id }
157
- label = { (
158
- < EuiText style = { { display : 'flex' , alignItems : 'center' } } >
159
- { loading && instance ?. id === selected && < EuiLoadingSpinner size = "s" style = { { marginRight : '8px' } } /> }
160
- { instance . name }
161
- { ' ' }
162
- { getDbIndex ( instance . db ) }
163
- </ EuiText >
164
- ) }
165
- onClick = { ( ) => {
166
- setSelected ( instance . id )
167
- goToPage ( instance )
168
- } }
169
- />
170
- ) ) }
171
- </ EuiListGroup >
172
- </ div >
173
- )
174
- }
175
74
176
75
return (
177
76
< EuiPopover
@@ -231,7 +130,11 @@ const InstancesNavigationPopover = ({ name }: Props) => {
231
130
</ EuiTabs >
232
131
</ div >
233
132
< EuiSpacer size = "m" />
234
- { renderInstances ( ) }
133
+ < InstancesList
134
+ selectedTab = { selectedTab }
135
+ filteredDbInstances = { filteredDbInstances }
136
+ filteredRdiInstances = { filteredRdiInstances }
137
+ />
235
138
< div >
236
139
< EuiSpacer size = "m" />
237
140
< Divider />
0 commit comments