Merge pull request #678 from jembi/feature/CI-86c082m9k_channels-fixes

feat: channel updates and fixes.

packages/channels-app/src/components/dialogs/alert.dialog.component.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Alert, {AlertColor} from '@mui/material/Alert'
 import Backdrop from '@mui/material/Backdrop'
 import AlertTitle from '@mui/material/AlertTitle'
+import Button from '@mui/material/Button'
 
 export type AlertDialogProps = {
   title?: string
@@ -19,7 +20,20 @@ export function AlertDialog(props: AlertDialogProps) {
       open={props.open}
     >
       <div style={{minWidth: '500px'}}>
-        <Alert variant="standard" severity={props.severity ?? 'info'}>
+        <Alert
+          variant="standard"
+          severity={props.severity ?? 'info'}
+          action={
+            <Button
+              variant="contained"
+              color={props.severity}
+              size="small"
+              onClick={props.onClose}
+            >
+              OK
+            </Button>
+          }
+        >
           {props.title && <AlertTitle>{props.title}</AlertTitle>}
           {props.message}
         </Alert>

packages/channels-app/src/screens/add.channel.screen.tsx

@@ -9,10 +9,8 @@ import {
   Stepper,
   Typography
 } from '@mui/material'
-import {makeStyles} from '@mui/styles'
 import {useMutation} from '@tanstack/react-query'
 import React from 'react'
-import {useNavigate} from 'react-router-dom'
 import Loader from '../components/helpers/loader.component'
 import {useAlert} from '../contexts/alert.context'
 import {useBasicBackdrop} from '../contexts/backdrop.context'
@@ -58,7 +56,6 @@ const defaultChannel: Channel = {
 }
 
 function AddChannelScreen() {
-  const navigate = useNavigate()
   const {showAlert, hideAlert} = useAlert()
   const {showBackdrop, hideBackdrop} = useBasicBackdrop()
   const [activeStep, setActiveStep] = React.useState(0)
@@ -71,20 +68,30 @@ function AddChannelScreen() {
     },
     onSuccess: () => {
       hideBackdrop()
-      navigate(Routes.MANAGE_CHANNELS)
+      window.location.href = `/#${Routes.MANAGE_CHANNELS}`
     },
     onError: (error: any) => {
+      const err = error?.response?.data ?? 'An unexpected error occurred'
       console.error(error)
       hideBackdrop()
+      showAlert('Error creating a new channel. ' + err, 'Error', 'error')
+    }
+  })
+
+  const handleAddChannel = () => {
+    const numOfPrimaryRoutes = channel.routes?.filter(
+      route => !!route.primary
+    ).length
+
+    if (numOfPrimaryRoutes !== 1) {
       showAlert(
-        'Error creating a new channel. ' + error?.response?.data,
+        'Channel must have exactly only 1 primary route.',
         'Error',
         'error'
       )
+      return
     }
-  })
 
-  const handleAddChannel = () => {
     mutation.mutate(channel)
   }
 
@@ -122,7 +129,7 @@ function AddChannelScreen() {
       >
         <Grid item xs={12}>
           <Paper
-            style={{width: '600px', borderRadius: '15px', padding: '20px'}}
+            style={{width: '680px', borderRadius: '15px', padding: '20px'}}
             elevation={4}
           >
             <div style={{marginBottom: '10px'}}>
@@ -170,7 +177,7 @@ function AddChannelScreen() {
                 <Button
                   variant="outlined"
                   color="primary"
-                  onClick={() => navigate(-1)}
+                  href={`/#${Routes.MANAGE_CHANNELS}`}
                 >
                   CANCEL
                 </Button>

packages/channels-app/src/screens/edit.channel.screen.tsx

@@ -44,6 +44,19 @@ function EditChannelScreen() {
   })
 
   const handleEditChannel = () => {
+    const numOfPrimaryRoutes = channel.routes?.filter(
+      route => !!route.primary
+    ).length
+
+    if (numOfPrimaryRoutes !== 1) {
+      showAlert(
+        'Channel must have exactly only 1 primary route.',
+        'Error',
+        'error'
+      )
+      return
+    }
+
     mutation.mutate(channel)
   }
 
@@ -72,7 +85,7 @@ function EditChannelScreen() {
         justifyContent="center"
       >
         <Grid item xs={12}>
-          <Paper style={{width: '600px', borderRadius: '15px'}} elevation={4}>
+          <Paper style={{width: '680px', borderRadius: '15px'}} elevation={4}>
             <TabContext value={activeTab}>
               <TabList
                 onChange={(e, newValue) => setActiveTab(newValue)}

packages/channels-app/src/screens/manage.channels.screen.tsx

@@ -89,7 +89,8 @@ const ManageChannelsScreen: React.FC = () => {
     setSelectedChannel(null)
   }
 
-  const onActionDisableChannel = (channel: Channel) => {
+  const onActionDisableChannel = () => {
+    const channel = selectedChannel
     let title = '',
       message = '',
       modifyChannel: Channel
@@ -179,9 +180,7 @@ const ManageChannelsScreen: React.FC = () => {
               <SearchIcon className={classes.actionsIcon} />
               View Logs
             </MenuItem>
-            <MenuItem
-              onClick={() => onActionDisableChannel(channels[params.row.id])}
-            >
+            <MenuItem onClick={onActionDisableChannel}>
               <CancelIcon className={classes.actionsIcon} />
               Toggle Status
             </MenuItem>

packages/channels-app/src/screens/steps/RequestMatching.tsx

@@ -62,10 +62,21 @@ export function RequestMatching(props: {
             fullWidth
             margin="normal"
             InputProps={{
-              startAdornment: <span style={{marginRight: '5px'}}>^</span>,
-              endAdornment: <span style={{marginLeft: '5px'}}>$</span>
+              startAdornment: channel.addAutoRewriteRules ? (
+                <span style={{marginRight: '5px'}}>^</span>
+              ) : undefined,
+              endAdornment: channel.addAutoRewriteRules ? (
+                <span style={{marginLeft: '5px'}}>$</span>
+              ) : undefined
             }}
-            value={channel.urlPattern}
+            value={
+              channel.addAutoRewriteRules
+                ? channel.urlPattern
+                    .trim()
+                    .replace(/^\^/, '')
+                    .replace(/\$$/, '')
+                : channel.urlPattern
+            }
             onChange={e => setChannel({...channel, urlPattern: e.target.value})}
             error={channel.urlPattern.trim() === ''}
             helperText={
@@ -92,30 +103,6 @@ export function RequestMatching(props: {
             label="Auto-add regex delimiters (Recommended)"
           />
         </Grid>
-
-        <Grid item xs={12}>
-          <TagInputAutocomplete
-            tags={channel.txViewAcl}
-            onChange={txViewAcl => setChannel({...channel, txViewAcl})}
-            label="Which user groups are allowed to view this channel's transactions?"
-          />
-        </Grid>
-
-        <Grid item xs={12}>
-          <TagInputAutocomplete
-            tags={channel.txViewAcl}
-            onChange={txViewFullAcl => setChannel({...channel, txViewFullAcl})}
-            label="Which user groups are allowed to view this channel's transactions full request/response body?"
-          />
-        </Grid>
-
-        <Grid item xs={12}>
-          <TagInputAutocomplete
-            tags={channel.txViewAcl}
-            onChange={txRerunAcl => setChannel({...channel, txRerunAcl})}
-            label="Which user groups are allowed to rerun this channel's transactions?"
-          />
-        </Grid>
       </Grid>
 
       <br />

packages/channels-app/src/screens/steps/routes/ChannelRoutes.tsx

@@ -12,6 +12,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  Tooltip,
   Typography
 } from '@mui/material'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
@@ -155,7 +156,18 @@ export function ChannelRoutes(props: {
             <TableBody>
               {props.channel.routes?.map((route, index) => (
                 <TableRow key={index}>
-                  <TableCell>{route.name}</TableCell>
+                  <TableCell>
+                    {route.name}
+                    {route.primary && (
+                      <Tooltip title="This route is a Primary Route">
+                        <Chip
+                          label="primary"
+                          color="primary"
+                          style={{marginLeft: '5px'}}
+                        />
+                      </Tooltip>
+                    )}
+                  </TableCell>
                   <TableCell>{route.type}</TableCell>
                   <TableCell>{`${route.host ?? '-'} : ${
                     route.port ?? '-'

packages/dashboard-app/src/components/charts.component.tsx

@@ -8,6 +8,7 @@ import BasicFilter, {BasicFilterData} from './filters/basic.filter.component'
 import Loader from './ux/loader.component'
 import {AlertDialog, AlertDialogProps} from './ux/alert.dialog.component'
 import './styles.css'
+import {ErrorMessage} from './ux/error.component'
 
 type Alert = {
   severity: AlertDialogProps['severity']
@@ -20,6 +21,7 @@ export default function Charts() {
   const now = new Date()
   const [timeSeries, setTimeSeries] = useState<TimeSeries[]>([])
   const [isFetchingTransactions, setIsFetchingTransactions] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
   const [filterData, setFilterData] = useState<BasicFilterData>({
     period: TimeSeriesScale.day,
     from: now,
@@ -34,11 +36,8 @@ export default function Charts() {
   })
 
   const getFilteredTransactions = () => {
-    if (!window.location.toString().includes('dashboard')) {
-      return
-    }
-
     setIsFetchingTransactions(true)
+    setError(null)
     getTimeSeries(filterData.period, {
       startDate: filterData.from,
       endDate: filterData.until
@@ -49,18 +48,12 @@ export default function Charts() {
       })
       .catch(err => {
         console.error(err)
+        setError(err)
         setIsFetchingTransactions(false)
-        setAlert({
-          isOpen: true,
-          title: 'Error ',
-          severity: 'error',
-          message: 'Error loading data'
-        })
       })
   }
 
   React.useEffect(() => {
-
     getFilteredTransactions()
 
     const int = window.setInterval(getFilteredTransactions, 30000)
@@ -72,6 +65,10 @@ export default function Charts() {
     setFilterData(structuredClone(filter))
   }
 
+  if (error) {
+    return <ErrorMessage onRetry={getFilteredTransactions} />
+  }
+
   if (isFetchingTransactions) {
     return <Loader />
   }

packages/dashboard-app/src/components/ux/error.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {Box, Button, Typography} from '@mui/material'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+
+export type ErrorMessageProps = {
+  onRetry?: () => unknown
+  title?: string
+  message?: string
+}
+
+export function ErrorMessage({onRetry, title, message}: ErrorMessageProps) {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      height="300px"
+      padding={2}
+    >
+      <ErrorOutlineIcon color="error" sx={{fontSize: 60}} />
+      <Typography variant="h6" color="error" align="center" gutterBottom>
+        Oops! Something went wrong.
+      </Typography>
+      <Typography variant="body1" align="center" gutterBottom>
+        An error occurred while loading the data. Please try again.
+      </Typography>
+      <Button variant="contained" color="primary" onClick={onRetry}>
+        Retry
+      </Button>
+    </Box>
+  )
+}

packages/rbac-app/src/components/dialogs/alert.dialog.component.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Alert, {AlertColor} from '@mui/material/Alert'
 import Backdrop from '@mui/material/Backdrop'
 import AlertTitle from '@mui/material/AlertTitle'
-import {BasicDialog} from './basic.dialog.component'
+import Button from '@mui/material/Button'
 
 export type AlertDialogProps = {
   title?: string
@@ -20,7 +20,20 @@ export function AlertDialog(props: AlertDialogProps) {
       open={props.open}
     >
       <div style={{minWidth: '500px'}}>
-        <Alert variant="standard" severity={props.severity ?? 'info'}>
+        <Alert
+          variant="standard"
+          severity={props.severity ?? 'info'}
+          action={
+            <Button
+              variant="contained"
+              color={props.severity}
+              size="small"
+              onClick={props.onClose}
+            >
+              OK
+            </Button>
+          }
+        >
           {props.title && <AlertTitle>{props.title}</AlertTitle>}
           {props.message}
         </Alert>

packages/root-config/src/microfrontend-layout.html

@@ -11,8 +11,6 @@
         </route>
         <route path="#!/audits">
         </route>
-        <route path="#!/channels">
-        </route>
         <route path="#!/audits">
         </route>
         <route path="#!/tasks">
@@ -79,7 +77,7 @@
           <application name="@jembi/users-app"></application>
         </div>
       </route>
-      <route path="#!/channels" exact="true">
+      <route path="#!/channels">
         <div style="flex-grow: 1">
           <application name="@jembi/channels-app"></application>
         </div>