feat(admin-ui): date range showing undefined and ? #359

GluuFederation · Jan 22, 2022 · 9dfda59 · 9dfda59
1 parent aedc9ab
commit 9dfda59
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 69 deletions.
diff --git a/plugins/admin/components/MonthlyActiveUsersPage.js b/plugins/admin/components/MonthlyActiveUsersPage.js
@@ -11,6 +11,7 @@ import {
 } from '../../../app/components'
 import GluuLoader from '../../../app/routes/Apps/Gluu/GluuLoader'
 import GluuRibbon from '../../../app/routes/Apps/Gluu/GluuRibbon'
+import {addMonths, differenceInMonths } from 'date-fns'
 import applicationStyle from '../../../app/routes/Apps/Gluu/styles/applicationstyle'
 import GluuViewWrapper from '../../../app/routes/Apps/Gluu/GluuViewWrapper'
 import {
@@ -62,9 +63,6 @@ class MonthBox extends Component {
     this.props.onClick && this.props.onClick(e)
   }
 }
-function prepending(n) {
-  return n > 9 ? '' + n : '0' + n
-}
 function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
   const { t } = useTranslation()
   const userAction = {}
@@ -104,43 +102,24 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
   }
 
   useEffect(() => {
-    let initialMonths =
-      currentDate.getFullYear().toString() +
-      prepending(currentDate.getMonth() + 1)
-    for (let i = 0; i < 4; i++) {
-      initialMonths =
-        initialMonths +
-        '%20' +
-        currentDate.getFullYear().toString() +
-        prepending(currentDate.getMonth() - i)
-    }
-    options['month'] = initialMonths
+    options['month'] = generateMonths()
     buildPayload(userAction, 'GET MAU', options)
     dispatch(getMau(userAction))
   }, [])
   function search() {
-    options['month'] = makeOptions()
+    options['month'] = generateMonths()
     buildPayload(userAction, 'GET MAU', options)
     dispatch(getMau(userAction))
   }
-  function makeOptions() {
-    const date = new Date()
-    date.setFullYear(rangeValue2.from.year)
-    date.setMonth(rangeValue2.from.month - 1)
-    var monthRange = date.toISOString().substr(0, 7).replace('-', '')
-    for (let i = rangeValue2.from.year; i <= rangeValue2.to.year; i++) {
-      date.setFullYear(i)
-      for (
-        let j = i == rangeValue2.from.year ? rangeValue2.from.month : 0;
-        j < (i < rangeValue2.to.year ? 12 : rangeValue2.to.month);
-        j++
-      ) {
-        date.setMonth(j)
-        const temp = date.toISOString().substr(0, 7).replace('-', '')
-        monthRange = monthRange + '%20' + temp
-      }
-    }
-    return monthRange
+  function generateMonths() {
+    return dateRange(new Date(), new Date().setMonth(new Date().getMonth() + 5))
+  }
+
+  function dateRange(startDate, endDate) {
+    const months = differenceInMonths(endDate, startDate)
+    return [...Array(months + 1).keys()]
+      .map((i) => addMonths(startDate, i))
+      .map((i) => String(i.getFullYear() + '' + i.getMonth() + 1))
   }
 
   const CustomTooltipForMAU = ({ active, payload, label }) => {

diff --git a/plugins/admin/redux/api/MauApi.js b/plugins/admin/redux/api/MauApi.js
@@ -2,8 +2,6 @@ export default class MauApi {
   constructor(api) {
     this.api = api
   }
-
-  // Get maximum actives users
   getMau = (opts) => {
     opts['format'] = 'json'
     return new Promise((resolve, reject) => {

diff --git a/plugins/admin/redux/sagas/MauSaga.js b/plugins/admin/redux/sagas/MauSaga.js
@@ -27,41 +27,9 @@ export function* getMau({ payload }) {
     payload = payload ? payload : { action: {} }
     addAdditionalData(audit, 'FETCH', 'MAU', payload)
     const mauApi = yield* newFunction()
+    console.log("Payload=======>"+JSON.stringify(payload.action.action_data))
     const data = yield call(mauApi.getMau, payload.action.action_data)
-    let months = payload.action.action_data.month.split('%')
-    for (let i = 0; i < months.length; i++) {
-      if (months[i].length != 6) {
-        months[i] = months[i].substr(2, 6)
-      }
-    }
-    const dataType = {
-      month: 202106,
-      monthly_active_users: 0,
-      token_count_per_granttype: {
-        authorization_code: {
-          access_token: 0,
-          id_token: 0,
-        },
-        client_credentials: {
-          access_token: 0,
-        },
-      },
-    }
-    var statData = []
-    for (let i = 0; i < months.length; i++) {
-      let temp = data.filter((e) => e.month.toString() === months[i])
-      if (temp.length > 0) {
-        statData.push(temp[0])
-      } else {
-        temp = { ...dataType }
-        temp.month = parseInt(months[i])
-        statData.push(temp)
-      }
-    }
-    statData.sort((a, b) => {
-      return a.month - b.month
-    })
-    yield put(getMauResponse(statData))
+    yield put(getMauResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
     yield put(getMauResponse(null))