fix(admin-ui): show message based on error code in Admin UI #1316

Signed-off-by: Jeet Viramgama <[email protected]>

Author: jv18creator

admin-ui/app/images/backend-down.png

@@ -84,6 +84,6 @@ export const fetchApiTokenWithDefaultScopes = async () => {
         'Problems getting API access token in order to process api calls.',
         error,
       )
-      return -1
+      return error
     })
 }

admin-ui/app/redux/api/backend-api.js

@@ -10,11 +10,15 @@ const initialState = {
   permissions: [],
   location: {},
   config: {},
-  backendIsUp: true,
   defaultToken: null,
   codeChallenge: null,
   codeChallengeMethod: 'S256',
   codeVerifier: null,
+  backendStatus: {
+    active: true,
+    errorMessage: null,
+    statusCode: null
+  },
 }
 
 const authSlice = createSlice({
@@ -24,13 +28,15 @@ const authSlice = createSlice({
     getOAuth2Config: (state, action) => {
       state.defaultToken = action.payload
     },
+    setBackendStatus: (state, action) => {
+      state.backendStatus.active = action.payload.active
+      state.backendStatus.errorMessage = action.payload.errorMessage
+      state.backendStatus.statusCode = action.payload.statusCode
+    },
     getOAuth2ConfigResponse: (state, action) => {
       if (action.payload?.config && action.payload?.config !== -1) {
         const newDataConfigObject = { ...state.config, ...action.payload.config }
         state.config = newDataConfigObject
-        state.backendIsUp = true
-      } else {
-        state.backendIsUp = false
       }
     },
     setOAuthState: (state, action) => {
@@ -93,6 +99,7 @@ export const {
   setApiDefaultToken,
   getRandomChallengePair,
   getRandomChallengePairResponse,
+  setBackendStatus
 } = authSlice.actions
 export default authSlice.reducer
 reducerRegistry.register('authReducer', authSlice.reducer)

admin-ui/app/redux/features/authSlice.js

@@ -8,6 +8,7 @@ import {
   getAPIAccessTokenResponse,
   getUserLocationResponse,
   getRandomChallengePairResponse,
+  setBackendStatus,
 } from '../features/authSlice'
 
 import {
@@ -21,8 +22,14 @@ import {
 import {RandomHashGenerator} from  'Utils/RandomHashGenerator'
 
 function* getApiTokenWithDefaultScopes() {
-  const response = yield call(fetchApiTokenWithDefaultScopes)
-  return response.access_token
+    const response = yield call(fetchApiTokenWithDefaultScopes)
+
+    if (response?.access_token) {
+      return response.access_token
+    } else if(response?.name === "AxiosError") {
+      yield(put(setBackendStatus({ active: false, errorMessage: response?.response?.data?.responseMessage, statusCode: response?.response?.status })))
+      return null
+    }
 }
 
 function* getOAuth2ConfigWorker({ payload }) {

admin-ui/app/redux/sagas/AuthSaga.js

@@ -0,0 +1,98 @@
+import { Box } from '@mui/material'
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+function GluuServiceDownModal({ message = '', statusCode }) {
+  const { authServerHost } = useSelector((state) => state.authReducer.config)
+
+  const handleRefresh = () => {
+    const host = authServerHost ? `${authServerHost}/admin` : null
+
+    if (host) {
+      window.location.href = host
+    } else {
+      window.location.reload()
+    }
+  }
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        backgroundColor: '#110000',
+        color: 'white',
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Box sx={{ position: 'absolute', top: 0, left: 0 }}>
+        <img
+          src={require('Images/logos/logo192.png')}
+          style={{
+            width: '120px',
+            height: 'auto',
+            margin: 50,
+          }}
+        />
+      </Box>
+
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          right: 0,
+          left: 0,
+          color: 'white',
+          justifyContent: 'center',
+          alignItems: 'center',
+          display: 'flex',
+          maxWidth: '60%',
+          maxHeight: '60%',
+          margin: 'auto',
+          gap: '40px',
+          flexWrap: 'wrap'
+        }}
+      > 
+        <img
+          src={require('Images/backend-down.png')}
+          style={{
+            width: 'auto',
+            height: 'auto',
+            fill: '#fff'
+          }}
+        />
+        <Box display='flex' alignItems='start' flexDirection='column' gap={2} maxWidth={{ sm: '100%', md: '70%' }}>
+          {statusCode ? <h2 style={{ color: 'white', fontWeight: 'bolder', }}>Error code: {statusCode}</h2> : null}
+          <h3
+            style={{
+              color: 'white',
+              fontWeight: 'bolder',
+            }}
+          >
+            {message}
+          </h3>
+          <button
+            style={{
+              border: 0,
+              backgroundColor: 'transparent',
+              color: 'white',
+              textDecoration: 'underline',
+            }}
+            onClick={handleRefresh}
+          >
+            Try Again
+          </button>
+        </Box>
+      </div>
+    </Box>
+  )
+}
+
+export default GluuServiceDownModal

admin-ui/app/routes/Apps/Gluu/GluuServiceDownModal.js

@@ -5,9 +5,9 @@ import ApiKey from './LicenseScreens/ApiKey'
 import GluuErrorModal from '../routes/Apps/Gluu/GluuErrorModal'
 import UploadSSA from './UploadSSA'
 import { useSelector } from 'react-redux'
+import GluuServiceDownModal from '../routes/Apps/Gluu/GluuServiceDownModal'
 
 function ApiKeyRedirect({
-  backendIsUp,
   isLicenseValid,
   islicenseCheckResultLoaded,
   isLicenseActivationResultLoaded,
@@ -17,6 +17,7 @@ function ApiKeyRedirect({
   const { t } = useTranslation()
   const { isTimeout } = useSelector((state) => state.initReducer)
   const { isValidatingFlow, isNoValidLicenseKeyFound, isUnderThresholdLimit } = useSelector((state) => state.licenseReducer)
+  const backendStatus = useSelector((state) => state.authReducer.backendStatus)
 
   return (
     <React.Fragment>
@@ -27,7 +28,7 @@ function ApiKeyRedirect({
           <>
             {!isLicenseValid && islicenseCheckResultLoaded && isConfigValid && !isValidatingFlow && isNoValidLicenseKeyFound ? (
               <ApiKey />
-            ) : (
+            ) : backendStatus.active && (
               <div
                 style={{
                   backgroundColor: 'transparent',
@@ -53,11 +54,11 @@ function ApiKeyRedirect({
           </>
         )}
 
-        {!backendIsUp && (
-          <GluuErrorModal
-            message={'The UI backend service is down'}
-            description={
-              'It may due to any of the following reason <br/>1. Admin UI Backend is down. <br/>2. Unable to get license credentials from Gluu server.<br/>Please contact the site administrator or check server logs.'
+        {!backendStatus.active && (
+          <GluuServiceDownModal
+            statusCode={backendStatus.statusCode}
+            message={
+              backendStatus.errorMessage || 'Gluu Flex Admin UI is not getting any response from the backend (Jans Config Api).'
             }
           />
         )}

admin-ui/app/utils/ApiKeyRedirect.js

@@ -21,7 +21,7 @@ export default function AppAuthProvider(props) {
   const location = useLocation()
   const [showContent, setShowContent] = useState(false)
   const [roleNotFound, setRoleNotFound] = useState(false)
-  const { config, userinfo, userinfo_jwt, token, backendIsUp, codeChallenge, codeVerifier, codeChallengeMethod } = useSelector(
+  const { config, userinfo, userinfo_jwt, token, codeChallenge, codeVerifier, codeChallengeMethod } = useSelector(
     (state) => state.authReducer
   )
   const {
@@ -149,7 +149,6 @@ export default function AppAuthProvider(props) {
       {showContent && props.children}
       {!showContent && (
         <ApiKeyRedirect
-          backendIsUp={backendIsUp}
           isLicenseValid={isLicenseValid}
           redirectUrl={config.redirectUrl}
           isConfigValid={isConfigValid}