feat(admin-ui): show active users page on dashboard #43

admin-ui/app/redux/actions/types.js

@@ -1,3 +1,5 @@
+export const GET_MAU = 'GET_MAU'
+export const GET_MAU_RESPONSE = 'GET_MAU_RESPONSE'
 //Stat Actions
 export const GET_SCRIPTS_FOR_STAT = 'GET_SCRIPTS_FOR_STAT'
 export const GET_SCRIPTS_FOR_STAT_RESPONSE = 'GET_SCRIPTS_FOR_STAT_RESPONSE'

admin-ui/plugins/admin/redux/reducers/MauReducer.js → admin-ui/app/redux/reducers/MauReducer.js

@@ -1,5 +1,5 @@
 import { GET_MAU, GET_MAU_RESPONSE } from '../actions/types'
-import reducerRegistry from '../../../../app/redux/reducers/ReducerRegistry'
+import reducerRegistry from './ReducerRegistry'
 const INIT_STATE = {
   stat: [],
   loading: true,

admin-ui/app/redux/reducers/index.js

@@ -1,7 +1,7 @@
 /**
  * App Reducers
  */
-
+import mauReducer from './MauReducer'
 import authReducer from './AuthReducer'
 import fidoReducer from './FidoReducer'
 import initReducer from './InitReducer'
@@ -16,6 +16,7 @@ const appReducers = {
   logoutReducer,
   licenseReducer,
   oidcDiscoveryReducer,
+  mauReducer,
 }
 
 export default appReducers

admin-ui/plugins/admin/redux/sagas/MauSaga.js → admin-ui/app/redux/sagas/MauSaga.js

@@ -2,14 +2,14 @@ import { call, all, put, fork, takeLatest, select } from 'redux-saga/effects'
 import {
   isFourZeroOneError,
   addAdditionalData,
-} from '../../../../app/utils/TokenController'
+} from '../../utils/TokenController'
 import { getMauResponse } from '../actions/MauActions'
-import { getAPIAccessToken } from '../../../../app/redux/actions/AuthActions'
-import { postUserAction } from '../../../../app/redux/api/backend-api'
+import { getAPIAccessToken } from '../actions/AuthActions'
+import { postUserAction } from '../api/backend-api'
 import { GET_MAU } from '../actions/types'
 import MauApi from '../api/MauApi'
-import { getClient } from '../../../../app/redux/api/base'
-import { initAudit } from '../../../../app/redux/sagas/SagaUtils'
+import { getClient } from '../api/base'
+import { initAudit } from '../sagas/SagaUtils'
 const JansConfigApi = require('jans_config_api')
 
 function* newFunction() {

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

@@ -4,6 +4,7 @@
 import { all } from 'redux-saga/effects'
 
 // sagas
+import mauSaga from './MauSaga'
 import authSagas from './AuthSaga'
 import fidoSaga from './FidoSaga'
 import initSaga from './InitSaga'
@@ -15,7 +16,14 @@ export default function* rootSaga() {
   let pluginSagaArr = process()
   yield all(
     [].concat(
-      [authSagas(), fidoSaga(), initSaga(), licenseSaga(), oidcDiscoverySaga()],
+      [
+        authSagas(),
+        fidoSaga(),
+        initSaga(),
+        licenseSaga(),
+        oidcDiscoverySaga(),
+        mauSaga(),
+      ],
       pluginSagaArr,
     ),
   )

admin-ui/plugins/admin/components/ActiveUsers/ActiveUsers.js → admin-ui/app/routes/Dashboards/DashboardPage.js

@@ -4,12 +4,12 @@ import moment from 'moment'
 import CustomPieGraph from './CustomPieGraph'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
-import GluuLoader from '../../../../app/routes/Apps/Gluu/GluuLoader'
-import GluuViewWrapper from '../../../../app/routes/Apps/Gluu/GluuViewWrapper'
-import { getMau } from './../../redux/actions/MauActions'
-import applicationstyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
-import GluuLabel from '../../../../app/routes/Apps/Gluu/GluuLabel'
-import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
+import GluuLoader from '../Apps/Gluu/GluuLoader'
+import GluuViewWrapper from '../Apps/Gluu/GluuViewWrapper'
+import { getMau } from '../../redux/actions/MauActions'
+import applicationstyle from '../Apps/Gluu/styles/applicationstyle'
+import GluuLabel from '../Apps/Gluu/GluuLabel'
+import GluuRibbon from '../Apps/Gluu/GluuRibbon'
 import {
   Button,
   Card,
@@ -18,13 +18,13 @@ import {
   FormGroup,
   Col,
   Row,
-} from '../../../../app/components'
+} from '../../../app/components'
 import {
   hasBoth,
   buildPayload,
   STAT_READ,
   STAT_JANS_READ,
-} from '../../../../app/utils/PermChecker'
+} from '../../utils/PermChecker'
 import {
   LineChart,
   XAxis,
@@ -38,8 +38,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
-function ActiveUsers({ statData, permissions, loading, dispatch }) {
-  //console.log('=====================>' + JSON.stringify(statData))
+function DashboardPage({ statData, permissions, loading, dispatch }) {
   statData.push({ month: 202201, mau: 5, cc_at: 68, ac_at: 785, ac_id: 567 })
   const { t } = useTranslation()
   const [startDate, setStartDate] = useState(subMonths(new Date(), 2))
@@ -234,11 +233,13 @@ function ActiveUsers({ statData, permissions, loading, dispatch }) {
     </GluuLoader>
   )
 }
+
 const mapStateToProps = (state) => {
   return {
     statData: state.mauReducer.stat,
     loading: state.mauReducer.loading,
     permissions: state.authReducer.permissions,
   }
 }
-export default connect(mapStateToProps)(ActiveUsers)
+
+export default connect(mapStateToProps)(DashboardPage)

admin-ui/app/routes/index.js

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 
 // ----------- Pages Imports ---------------
 import Reports from './Dashboards/Reports'
+import DashboardPage from './Dashboards/DashboardPage'
 import NavbarOnly from './Layouts/NavbarOnly'
 import SidebarDefault from './Layouts/SidebarDefault'
 import SidebarA from './Layouts/SidebarA'
@@ -33,7 +34,7 @@ export const RoutedContent = () => {
   return (
     <Switch>
       <Redirect from="/" to="/home/dashboard" exact />
-      <Route path="/home/dashboard" exact component={Reports} />
+      <Route path="/home/dashboard" exact component={DashboardPage} />
       {/*    Layouts     */}
       <Route path="/layouts/navbar" component={NavbarOnly} />
       <Route path="/layouts/sidebar" component={SidebarDefault} />