1616 * under the License.
1717 */
1818
19- import React from 'react' ;
19+ import React , { useState } from 'react' ;
2020import API from 'AppData/api' ;
2121import { FormattedMessage , useIntl } from 'react-intl' ;
2222import { Link as RouterLink } from 'react-router-dom' ;
@@ -27,7 +27,25 @@ import AddEdit from 'AppComponents/GatewayEnvironments/AddEditGWEnvironment';
2727import { useAppContext } from 'AppComponents/Shared/AppContext' ;
2828import Button from '@mui/material/Button' ;
2929import EditIcon from '@mui/icons-material/Edit' ;
30+ import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted' ;
31+ import IconButton from '@mui/material/IconButton' ;
32+ import Tooltip from '@mui/material/Tooltip' ;
33+ import { styled } from '@mui/material/styles' ;
3034import Permission from './Permission' ;
35+ import ListGatewayInstances from './ListGatewayInstances' ;
36+
37+ const StyledTooltip = styled ( ( { className, ...props } ) => (
38+ < Tooltip { ...props } classes = { { popper : className } } />
39+ ) ) ( ( { theme } ) => ( {
40+ '& .MuiTooltip-tooltip' : {
41+ backgroundColor : theme . palette . common . white ,
42+ color : theme . palette . text . primary ,
43+ fontSize : theme . typography . pxToRem ( 14 ) ,
44+ boxShadow : theme . shadows [ 4 ] ,
45+ borderRadius : theme . shape . borderRadius ,
46+ border : `1px solid ${ theme . palette . divider } ,
47+ } ,
48+ } ) ) ;
3149
3250/**
3351 * API call to get Gateway labels
@@ -53,6 +71,23 @@ export default function ListGWEnviornments() {
5371 const intl = useIntl ( ) ;
5472 let columProps ;
5573 const { settings } = useAppContext ( ) ;
74+ // Dialog state for Live Gateways
75+ const [ liveGatewaysOpen , setLiveGatewaysOpen ] = useState ( false ) ;
76+ const [ selectedEnvId , setSelectedEnvId ] = useState ( null ) ;
77+ const [ selectedEnvName , setSelectedEnvName ] = useState ( '' ) ;
78+
79+ const handleOpenLiveGateways = ( envId , envName ) => {
80+ setSelectedEnvId ( envId ) ;
81+ setSelectedEnvName ( envName ) ;
82+ setLiveGatewaysOpen ( true ) ;
83+ } ;
84+
85+ const handleCloseLiveGateways = ( ) => {
86+ setLiveGatewaysOpen ( false ) ;
87+ setSelectedEnvId ( null ) ;
88+ setSelectedEnvName ( '' ) ;
89+ } ;
90+
5691 const isGatewayTypeAvailable = settings . gatewayTypes . length >= 2 ;
5792 if ( isGatewayTypeAvailable ) {
5893 columProps = [
@@ -139,6 +174,48 @@ export default function ListGWEnviornments() {
139174 } ,
140175 } ,
141176 } ,
177+ ...( settings . isGatewayNotificationEnabled ? [
178+ {
179+ name : 'gatewayInstances' ,
180+ label : intl . formatMessage ( {
181+ id : 'AdminPages.Gateways.table.header.gatewayInstances' ,
182+ defaultMessage : 'Gateway Instances' ,
183+ } ) ,
184+ options : {
185+ sort : false ,
186+ customBodyRender : ( value , tableMeta ) => {
187+ if ( typeof tableMeta . rowData === 'object' ) {
188+ const envId = tableMeta . rowData [ 8 ] ; // 'id' is the last column
189+ const envName = tableMeta . rowData [ 1 ] ; // 'displayName'
190+ const gatewayType = tableMeta . rowData [ 2 ] ; // 'gatewayType'
191+ const isDisabled = gatewayType !== 'Regular' ;
192+
193+ const button = (
194+ < IconButton
195+ onClick = { ( ) => handleOpenLiveGateways ( envId , envName ) }
196+ disabled = { isDisabled }
197+ >
198+ < FormatListBulletedIcon aria-label = 'gateway-instances-list-icon' />
199+ </ IconButton >
200+ ) ;
201+
202+ return isDisabled ? (
203+ < StyledTooltip
204+ title = { intl . formatMessage ( {
205+ id : 'AdminPages.Gateways.table.gatewayInstances.tooltip.notSupported' ,
206+ defaultMessage : 'Not supported for this gateway type' ,
207+ } ) }
208+ >
209+ < span > { button } </ span >
210+ </ StyledTooltip >
211+ ) : button ;
212+ } else {
213+ return < div /> ;
214+ }
215+ } ,
216+ } ,
217+ } ,
218+ ] : [ ] ) ,
142219 { name : 'id' , options : { display : false } } ,
143220 ] ;
144221 } else {
@@ -216,6 +293,48 @@ export default function ListGWEnviornments() {
216293 } ,
217294 } ,
218295 } ,
296+ ...( settings . isGatewayNotificationEnabled ? [
297+ {
298+ name : 'gatewayInstances' ,
299+ label : intl . formatMessage ( {
300+ id : 'AdminPages.Gateways.table.header.gatewayInstances' ,
301+ defaultMessage : 'Gateway Instances' ,
302+ } ) ,
303+ options : {
304+ sort : false ,
305+ customBodyRender : ( value , tableMeta ) => {
306+ if ( typeof tableMeta . rowData === 'object' ) {
307+ const envId = tableMeta . rowData [ 8 ] ; // 'id' is the last column
308+ const envName = tableMeta . rowData [ 1 ] ; // 'displayName'
309+ const gatewayType = tableMeta . rowData [ 2 ] ; // 'gatewayType'
310+ const isDisabled = gatewayType !== 'Regular' ;
311+
312+ const button = (
313+ < IconButton
314+ onClick = { ( ) => handleOpenLiveGateways ( envId , envName ) }
315+ disabled = { isDisabled }
316+ >
317+ < FormatListBulletedIcon aria-label = 'gateway-instances-list-icon' />
318+ </ IconButton >
319+ ) ;
320+
321+ return isDisabled ? (
322+ < StyledTooltip
323+ title = { intl . formatMessage ( {
324+ id : 'AdminPages.Gateways.table.gatewayInstances.tooltip.notSupported' ,
325+ defaultMessage : 'Not supported for this gateway type' ,
326+ } ) }
327+ >
328+ < span > { button } </ span >
329+ </ StyledTooltip >
330+ ) : button ;
331+ } else {
332+ return < div /> ;
333+ }
334+ } ,
335+ } ,
336+ } ,
337+ ] : [ ] ) ,
219338 { name : 'id' , options : { display : false } } ,
220339 ] ;
221340 }
@@ -284,21 +403,29 @@ export default function ListGWEnviornments() {
284403 } ;
285404
286405 return (
287- < ListBase
288- columProps = { columProps }
289- pageProps = { pageProps }
290- addButtonProps = { addButtonProps }
291- searchProps = { searchProps }
292- emptyBoxProps = { emptyBoxProps }
293- apiCall = { apiCall }
294- EditComponent = { AddEdit }
295- addButtonOverride = { addCreateButton ( ) }
296- editComponentProps = { {
297- icon : < EditIcon /> ,
298- title : 'Edit Gateway Label' ,
299- routeTo : '/settings/environments/' ,
300- } }
301- DeleteComponent = { Delete }
302- />
406+ < >
407+ < ListBase
408+ columProps = { columProps }
409+ pageProps = { pageProps }
410+ addButtonProps = { addButtonProps }
411+ searchProps = { searchProps }
412+ emptyBoxProps = { emptyBoxProps }
413+ apiCall = { apiCall }
414+ EditComponent = { AddEdit }
415+ addButtonOverride = { addCreateButton ( ) }
416+ editComponentProps = { {
417+ icon : < EditIcon /> ,
418+ title : 'Edit Gateway Label' ,
419+ routeTo : '/settings/environments/' ,
420+ } }
421+ DeleteComponent = { Delete }
422+ />
423+ < ListGatewayInstances
424+ open = { liveGatewaysOpen }
425+ onClose = { handleCloseLiveGateways }
426+ environmentId = { selectedEnvId }
427+ environmentName = { selectedEnvName }
428+ />
429+ </ >
303430 ) ;
304431}
0 commit comments