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

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

@@ -54,8 +54,11 @@ function buildEntry(el) {
   let entry = new Object()
   entry['month'] = el.month
   entry['mau'] = el.monthly_active_users
-  entry['cc_at'] = el.token_count_per_granttype.client_credentials.access_token
-  entry['ac_at'] = el.token_count_per_granttype.authorization_code.access_token
-  entry['ac_id'] = el.token_count_per_granttype.authorization_code.id_token
+  entry['client_credentials_access_token_count'] =
+    el.token_count_per_granttype.client_credentials.access_token
+  entry['authz_code_access_token_count'] =
+    el.token_count_per_granttype.authorization_code.access_token
+  entry['authz_code_idtoken_count'] =
+    el.token_count_per_granttype.authorization_code.id_token
   return entry
 }

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import {
+  XAxis,
+  YAxis,
+  Tooltip,
+  LineChart,
+  Line,
+  Legend,
+  CartesianGrid,
+  ResponsiveContainer,
+} from 'recharts'
+import { useTranslation } from 'react-i18next'
+
+function ActiveUsersGraph({ data }) {
+  const { t } = useTranslation()
+  return (
+    <ResponsiveContainer className="mau" width="80%" height={350}>
+      <LineChart height={400} data={data}>
+        <XAxis dataKey="month" />
+        <YAxis />
+        <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
+        <Line
+          name={t('fields.monthly_active_users')}
+          type="monotone"
+          dataKey="mau"
+          stroke="#8884d8"
+        />
+        <Tooltip />
+        <Legend />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export default ActiveUsersGraph

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import {
+  LineChart,
+  XAxis,
+  YAxis,
+  Line,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+function CustomLineChart({ data }) {
+  return (
+    <ResponsiveContainer className="bar" width="100%" height={400}>
+      <LineChart width={400} height={400} data={data}>
+        <XAxis dataKey="month" />
+        <YAxis />
+        <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
+        <Line
+          name="Client credentials access token"
+          type="monotone"
+          dataKey="client_credentials_access_token_count"
+          stroke="#8884d8"
+        />
+        <Line
+          name="Authorization code access token"
+          type="monotone"
+          dataKey="authz_code_access_token_count"
+          stroke="#82ca9d"
+        />
+        <Line
+          name="Authorization code id token"
+          type="monotone"
+          dataKey="authz_code_idtoken_count"
+          stroke="#00C9FF"
+        />
+        <Legend />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export default CustomLineChart

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

@@ -25,9 +25,9 @@ function CustomPieGraph({ data }) {
         <YAxis />
         <Tooltip />
         <Legend />
-        <Bar dataKey="cc_at" fill="#00C9FF" />
-        <Bar dataKey="ac_at" fill="#82ca9d" />
-        <Bar dataKey="ac_id" fill="#92FE9D" />
+        <Bar dataKey="client_credentials_access_token_count" fill="#00C9FF" />
+        <Bar dataKey="authz_code_access_token_count" fill="#82ca9d" />
+        <Bar dataKey="authz_code_idtoken_count" fill="#92FE9D" />
       </BarChart>
     </ResponsiveContainer>
   )

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

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import { addMonths, subMonths } from 'date-fns'
+import { subMonths } from 'date-fns'
 import moment from 'moment'
 import CustomPieGraph from './CustomPieGraph'
+import CustomLineChart from './CustomLineChart'
+import ActiveUsersGraph from './ActiveUsersGraph'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import GluuLoader from '../Apps/Gluu/GluuLoader'
@@ -25,24 +27,27 @@ import {
   STAT_READ,
   STAT_JANS_READ,
 } from '../../utils/PermChecker'
-import {
-  LineChart,
-  XAxis,
-  YAxis,
-  Line,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts'
 import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
 function DashboardPage({ statData, permissions, loading, dispatch }) {
-  statData.push({ month: 202201, mau: 5, cc_at: 68, ac_at: 785, ac_id: 567 })
+  statData.push({
+    month: 202111,
+    mau: 5,
+    client_credentials_access_token_count: 68,
+    authz_code_access_token_count: 785,
+    authz_code_idtoken_count: 567,
+  })
+  statData.push({
+    month: 202112,
+    mau: 5,
+    client_credentials_access_token_count: 28,
+    authz_code_access_token_count: 75,
+    authz_code_idtoken_count: 257,
+  })
   const { t } = useTranslation()
-  const [startDate, setStartDate] = useState(subMonths(new Date(), 2))
-  const [endDate, setEndDate] = useState(addMonths(new Date(), 2))
+  const [startDate, setStartDate] = useState(subMonths(new Date(), 3))
+  const [endDate, setEndDate] = useState(new Date())
   const userAction = {}
   const options = {}
   useEffect(() => {
@@ -66,9 +71,9 @@ function DashboardPage({ statData, permissions, loading, dispatch }) {
           let newEntry = new Object()
           newEntry['month'] = parseInt(getYearMonth(new Date(ele)), 10)
           newEntry['mau'] = 0
-          newEntry['cc_at'] = 0
-          newEntry['ac_at'] = 0
-          newEntry['ac_id'] = 0
+          newEntry['client_credentials_access_token_count'] = 0
+          newEntry['authz_code_access_token_count'] = 0
+          newEntry['authz_code_idtoken_count'] = 0
           stat.push(newEntry)
         }
       }
@@ -169,57 +174,14 @@ function DashboardPage({ statData, permissions, loading, dispatch }) {
             <FormGroup row />
             <FormGroup row />
             <FormGroup row>
-              <ResponsiveContainer className="mau" width="80%" height={350}>
-                <LineChart height={400} data={doDataAugmentation(statData)}>
-                  <XAxis dataKey="month" />
-                  <YAxis />
-                  <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
-                  <Line
-                    name={t('fields.monthly_active_users')}
-                    type="monotone"
-                    dataKey="mau"
-                    stroke="#8884d8"
-                  />
-                  <Tooltip />
-                  <Legend />
-                </LineChart>
-              </ResponsiveContainer>
+              <ActiveUsersGraph data={doDataAugmentation(statData)} />
             </FormGroup>
             <FormGroup row>
               <Col sm={6}>
                 <CustomPieGraph data={statData} />
               </Col>
               <Col sm={6}>
-                <ResponsiveContainer className="bar" width="100%" height={400}>
-                  <LineChart
-                    width={400}
-                    height={400}
-                    data={doDataAugmentation(statData)}
-                  >
-                    <XAxis dataKey="month" />
-                    <YAxis />
-                    <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
-                    <Line
-                      name="Client credentials access token"
-                      type="monotone"
-                      dataKey="cc_at"
-                      stroke="#8884d8"
-                    />
-                    <Line
-                      name="Authorization code access token"
-                      type="monotone"
-                      dataKey="ac_at"
-                      stroke="#82ca9d"
-                    />
-                    <Line
-                      name="Authorization code id token"
-                      type="monotone"
-                      dataKey="ac_id"
-                      stroke="#00C9FF"
-                    />
-                    <Legend />
-                  </LineChart>
-                </ResponsiveContainer>
+                <CustomLineChart data={doDataAugmentation(statData)} />
               </Col>
             </FormGroup>
             <FormGroup row>