Merge pull request #1198 from GluuFederation/admin-ui-issue-1190

fix(admin-ui): remove unnecessary HTTP requests from UI #1190

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

@@ -10,14 +10,17 @@ const initialState = {
   permissions: [],
   location: {},
   config: {},
-  backendIsUp: true
+  backendIsUp: true,
+  defaultToken: null,
 }
 
 const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
-    getOAuth2Config: (state, action) => {},
+    getOAuth2Config: (state, action) => {
+      state.defaultToken = action.payload
+    },
     getOAuth2ConfigResponse: (state, action) => {
       if (action.payload?.config && action.payload?.config !== -1) {
         const newDataConfigObject = { ...state.config, ...action.payload.config }
@@ -58,6 +61,9 @@ const authSlice = createSlice({
       if (action.payload?.location) {
         state.location = action.payload.location
       }
+    },
+    setApiDefaultToken: (state, action) => {
+      state.defaultToken = action.payload
     }
   }
 })
@@ -72,7 +78,8 @@ export const {
   getAPIAccessToken,
   getAPIAccessTokenResponse,
   getUserLocation,
-  getUserLocationResponse
+  getUserLocationResponse,
+  setApiDefaultToken
 } = authSlice.actions
 export default authSlice.reducer
 reducerRegistry.register('authReducer', authSlice.reducer)

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

@@ -22,9 +22,9 @@ function* getApiTokenWithDefaultScopes() {
   return response.access_token
 }
 
-function* getOAuth2ConfigWorker() {
+function* getOAuth2ConfigWorker({ payload }) {
   try {
-    const token = yield* getApiTokenWithDefaultScopes()
+    const token = !payload?.access_token ? yield* getApiTokenWithDefaultScopes() : payload.access_token
     const response = yield call(fetchServerConfiguration, token)
     if (response) {
       yield put(getOAuth2ConfigResponse({ config: response }))

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

@@ -2,20 +2,38 @@
  * License Sagas
  */
 import { all, call, fork, put, takeEvery } from 'redux-saga/effects'
-import { checkLicenseConfigValidResponse, checkLicensePresentResponse, checkLicensePresent, getOAuth2Config, uploadNewSsaTokenResponse, generateTrialLicenseResponse, checkUserLicenseKeyResponse } from '../actions'
+import {
+  checkLicenseConfigValidResponse,
+  checkLicensePresentResponse,
+  checkLicensePresent,
+  getOAuth2Config,
+  uploadNewSsaTokenResponse,
+  generateTrialLicenseResponse,
+  checkUserLicenseKeyResponse,
+  setApiDefaultToken,
+} from '../actions'
 
 import LicenseApi from '../api/LicenseApi'
 import { getClientWithToken } from '../api/base'
-import {
-  fetchApiTokenWithDefaultScopes,
-} from '../api/backend-api'
+import { fetchApiTokenWithDefaultScopes } from '../api/backend-api'
 
 const JansConfigApi = require('jans_config_api')
 
+let defaultToken 
+
+export function* getAccessToken() {
+  if (!defaultToken) {
+    defaultToken = yield call(fetchApiTokenWithDefaultScopes)
+    yield put(setApiDefaultToken(defaultToken))
+  }
+  return defaultToken
+}
+
 function* getApiTokenWithDefaultScopes() {
-  const response = yield call(fetchApiTokenWithDefaultScopes)
+  const { access_token } = yield call(getAccessToken)
+
   const api = new JansConfigApi.AdminUILicenseApi(
-    getClientWithToken(JansConfigApi, response.access_token),
+    getClientWithToken(JansConfigApi, access_token)
   )
   return new LicenseApi(api)
 }
@@ -73,11 +91,15 @@ function* uploadNewSsaToken({ payload }) {
   try {
     const licenseApi = yield* getApiTokenWithDefaultScopes()
     const response = yield call(licenseApi.uploadSSAtoken, payload)
-    if(!response?.apiResult){
-      yield put(uploadNewSsaTokenResponse("Invalid SSA. Please contact Gluu's team to verify if SSA is correct."))
+    if (!response?.apiResult) {
+      yield put(
+        uploadNewSsaTokenResponse(
+          "Invalid SSA. Please contact Gluu's team to verify if SSA is correct."
+        )
+      )
     }
     yield put(checkLicenseConfigValidResponse(response?.apiResult))
-    yield put(getOAuth2Config())
+    yield put(getOAuth2Config(defaultToken))
     yield put(checkLicensePresent())
     // window.location.reload()
   } catch (error) {
@@ -88,6 +110,7 @@ function* uploadNewSsaToken({ payload }) {
 function* checkAdminuiLicenseConfig() {
   try {
     const licenseApi = yield* getApiTokenWithDefaultScopes()
+    yield put(getOAuth2Config(defaultToken))
     const response = yield call(licenseApi.checkAdminuiLicenseConfig)
     yield put(checkLicenseConfigValidResponse(response?.apiResult))
   } catch (error) {
@@ -108,7 +131,5 @@ export function* checkLicensePresentWatcher() {
  * License Root Saga
  */
 export default function* rootSaga() {
-  yield all([
-    fork(checkLicensePresentWatcher),
-  ])
+  yield all([fork(checkLicensePresentWatcher)])
 }

admin-ui/app/redux/store/index.ts

@@ -43,14 +43,15 @@ declare const module: {
 
 let rootReducers
 
+sagaMiddleware.run(RootSaga)
+
 export function configStore() {
   const persistor = persistStore(store)
   window.dsfaStore = store
   reducerRegistry.setChangeListener((reds) => {
     rootReducers = combine(reds)
     store.replaceReducer(combine(reds))
   })
-  sagaMiddleware.run(RootSaga)
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
     module.hot.accept('../reducers/index', () => {

admin-ui/app/routes/Dashboards/DashboardPage.js

@@ -1,12 +1,10 @@
-import React, { useState, useEffect, useContext, useMemo } from 'react'
-import { subMonths } from 'date-fns'
+import React, { useState, useEffect, useMemo } from 'react'
 import Grid from '@mui/material/Grid'
 import Paper from '@mui/material/Paper'
 import Box from '@mui/material/Box'
 import { useMediaQuery } from 'react-responsive'
 import GluuLoader from '../Apps/Gluu/GluuLoader'
 import GluuViewWrapper from '../Apps/Gluu/GluuViewWrapper'
-import { getMau } from 'Plugins/admin/redux/features/mauSlice'
 import { getClients } from 'Redux/features/initSlice'
 import {
   hasBoth,
@@ -22,8 +20,6 @@ import DashboardChart from './Chart/DashboardChart'
 import DateRange from './DateRange'
 import CheckIcon from '../../images/svg/check.svg'
 import CrossIcon from '../../images/svg/cross.svg'
-import { ThemeContext } from 'Context/theme/themeContext'
-import getThemeColor from 'Context/theme/config'
 import SetTitle from 'Utils/SetTitle'
 import styles from './styles'
 
@@ -40,16 +36,11 @@ function DashboardPage({
   dispatch,
 }) {
   const { t } = useTranslation()
-  const [startDate] = useState(subMonths(new Date(), 3))
-  const [endDate] = useState(new Date())
   const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
   const breakDashboardCard = useMediaQuery({ query: '(max-width: 1424px)' })
   const isMobile = useMediaQuery({ maxWidth: 767 })
   const userAction = {}
   const options = {}
-  const theme = useContext(ThemeContext)
-  const selectedTheme = theme.state.theme
-  const themeColors = getThemeColor(selectedTheme)
   const { classes } = styles()
   const FETCHING_LICENSE_DETAILS = 'Fetch license details'
   const [mauCount, setMauCount] = useState(null)
@@ -83,17 +74,14 @@ function DashboardPage({
     let count = 0
     const interval = () => {
       setTimeout(() => {
-        if (statData.length === 0 && count < 2) {
-          search()
-        }
-        if (clients.length === 0 && count < 2) {
+        if (clients.length === 0 && count < 1) {
           buildPayload(userAction, 'Fetch openid connect clients', {})
           dispatch(getClients({ action: userAction }))
         }
-        if (Object.keys(license).length === 0 && count < 2) {
+        if (Object.keys(license).length === 0 && count < 1) {
           getLicense()
         }
-        if (count < 2) {
+        if (count < 1) {
           getServerStatus()
           interval()
         }
@@ -102,14 +90,7 @@ function DashboardPage({
     }
     interval()
     return () => {}
-  }, [1000])
-
-  function search() {
-    options['startMonth'] = getYearMonth(startDate)
-    options['endMonth'] = getYearMonth(endDate)
-    buildPayload(userAction, 'GET MAU', options)
-    dispatch(getMau({ action: userAction }))
-  }
+  }, [])
 
   function getLicense() {
     buildPayload(userAction, FETCHING_LICENSE_DETAILS, options)
@@ -131,18 +112,6 @@ function DashboardPage({
     dispatch(getHealthStatus({ action: userAction }))
   }
 
-  function getYearMonth(date) {
-    return date.getFullYear() + getMonth(date)
-  }
-
-  function getMonth(aDate) {
-    const value = String(aDate.getMonth() + 1)
-    if (value.length > 1) {
-      return value
-    } else {
-      return '0' + value
-    }
-  }
 
   const summaryData = [
     {

admin-ui/app/utils/AppAuthProvider.js

@@ -6,7 +6,6 @@ import queryString from 'query-string'
 import { uuidv4 } from './Util'
 import { useSelector, useDispatch } from 'react-redux'
 import {
-  getOAuth2Config,
   getUserInfo,
   getAPIAccessToken,
   checkLicensePresent,
@@ -20,7 +19,6 @@ export default function AppAuthProvider(props) {
   const location = useLocation()
   const [showContent, setShowContent] = useState(false)
   const [roleNotFound, setRoleNotFound] = useState(false)
-  const { isTimeout } = useSelector((state) => state.initReducer)
   const { config, userinfo, userinfo_jwt, token, backendIsUp } = useSelector(
     (state) => state.authReducer
   )
@@ -33,7 +31,6 @@ export default function AppAuthProvider(props) {
 
   useEffect(() => {
     dispatch(checkLicenseConfigValid())
-    dispatch(getOAuth2Config())
   }, [])
 
   useEffect(() => {

admin-ui/plugins/user-management/components/UserManagement/UserList.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, useCallback } from 'react'
+import React, { useEffect, useState, useContext, useCallback, useRef } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@mui/icons-material'
 import { Paper, TablePagination } from '@mui/material'
@@ -33,11 +33,11 @@ import { LIMIT_ID, PATTERN_ID } from '../../common/Constants'
 
 function UserList(props) {
   const dispatch = useDispatch()
+  const renders = useRef(0);
   const opt = {}
   useEffect(() => {
     opt['limit'] = 10
     dispatch(getUsers({ action: opt }))
-    dispatch(getAttributesRoot({ options: opt }))
     dispatch(getRoles({}))
   }, [])
   const { totalItems } = useSelector((state) => state.userReducer)
@@ -176,20 +176,23 @@ function UserList(props) {
 
   useEffect(() => {
     let usedAttributes = []
-    for (let i in usersList) {
-      for (let j in usersList[i].customAttributes) {
-        let val = usersList[i].customAttributes[j].name
-        if (!usedAttributes.includes(val)) {
-          usedAttributes.push(val)
+    if(usersList?.length && renders.current < 1) {
+      renders.current = 1
+      for (let i in usersList) {
+        for (let j in usersList[i].customAttributes) {
+          let val = usersList[i].customAttributes[j].name
+          if (!usedAttributes.includes(val)) {
+            usedAttributes.push(val)
+          }
         }
       }
-    }
-    if (usedAttributes.length) {
-      dispatch(
-        getAttributesRoot({
-          options: { pattern: usedAttributes.toString(), limit: 100 },
-        })
-      )
+      if (usedAttributes.length) {
+        dispatch(
+          getAttributesRoot({
+            options: { pattern: usedAttributes.toString(), limit: 100 },
+          })
+        )
+      }
     }
   }, [usersList])