fix: mau reporting page i18n and refactoring

GluuFederation · Oct 25, 2021 · 3ee22a8 · 3ee22a8
1 parent caa73a1
commit 3ee22a8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 37 deletions.
diff --git a/app/locales/en/translation.json b/app/locales/en/translation.json
@@ -31,6 +31,8 @@
     "attribute_edit_type": "Attribute Edit Type",
     "attribute_view_type": "Attribute View Type",
     "authentication_method": "Authentication method for the Token Endpoint",
+    "authorization_code_access_token": "Authorization Code Access Token",
+    "average_of_mau": "Average of MAU",
     "base_dns": "Base DNs",
     "bind_dn": "Bind DN",
     "bind_password": "Bind Password",
@@ -39,6 +41,7 @@
     "cache_configuration": "Cache Configuration",
     "cache_provider_type": "Cache Provider Type",
     "claims": "Claims",
+    "client_credentials_access_token": "Client Credentials Access Token",
     "client_expiration_date": "Client Expiration Date",
     "client_id": "Client Id",
     "client_name": "Client Name",
@@ -104,6 +107,8 @@
     "memcached_configuration": "memcachedConfiguration",
     "maximum_length": "Maximum length",
     "minimum_length": "Minimum length",
+    "month": "Month",
+    "monthly_active_users": "Monthly Active Users",
     "multivalued": "Multivalued?",
     "name": "Name",
     "native_persistence_configuration": "nativePersistenceConfiguration",

diff --git a/app/locales/fr/translation.json b/app/locales/fr/translation.json
@@ -64,6 +64,8 @@
     "attribute_edit_type": "Type de modification d'attribut",
     "attribute_view_type": "Type de vue d'attribut",
     "authentication_method": "Méthode d'authentification pour le point de terminaison du jeton",
+    "authorization_code_access_token": "Jeton d'accès au code d'autorisation",
+    "average_of_mau": "Moyenne de MAU",
     "base_dns": "DN de base",
     "bind_dn": "Lier le DN",
     "bind_password": "Lier le mot de passe",
@@ -72,6 +74,7 @@
     "cache_configuration": "Configuration du cache",
     "cache_provider_type": "Type de fournisseur de cache",
     "claims": "Réclamations",
+    "client_credentials_access_token": "Jeton d'accès aux informations d'identification du client",
     "client_expiration_date": "Date d'expiration du client",
     "client_id": "Identité du client",
     "client_name": "Nom du client",
@@ -137,6 +140,8 @@
     "memcached_configuration": "memcachedConfiguration",
     "maximum_length": "Longueur maximale",
     "minimum_length": "Longueur minimale",
+    "month": "Mois",
+    "monthly_active_users": "Utilisateurs actifs mensuels",
     "multivalued": "Multivalué ?",
     "name": "Nom",
     "native_persistence_configuration": "nativePersistanceConfiguration",

diff --git a/app/locales/pt/translation.json b/app/locales/pt/translation.json
@@ -63,6 +63,8 @@
     "attribute_edit_type": "Tipo de edição de atributo",
     "attribute_view_type": "Tipo de visualização de atributo",
     "authentication_method": "Método de autenticação para o terminal de token",
+    "authorization_code_access_token": "Token de acesso ao código de autorização",
+    "average_of_mau": "Média de MAU",
     "base_dns": "DNs de base",
     "bind_dn": "Vincular DN",
     "bind_password": "Senha de vinculação",
@@ -71,6 +73,7 @@
     "cache_configuration": "Configuração de Cache",
     "cache_provider_type": "Tipo de provedor de cache",
     "claims": "Reivindicações",
+    "client_credentials_access_token": "Token de acesso de credenciais de cliente",
     "client_expiration_date": "Data de Vencimento do Cliente",
     "client_id": "ID do Cliente",
     "client_name": "Nome do cliente",
@@ -136,6 +139,8 @@
     "memcached_configuration": "memcachedConfiguration",
     "maximum_length": "Comprimento máximo",
     "minimum_length": "Comprimento mínimo",
+    "month": "Mês",
+    "monthly_active_users": "Usuários ativos mensais",
     "multivalued": "Multivalorado?",
     "name": "Nome",
     "native_persistence_configuration": "nativePersistenceConfiguration",

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -6,6 +6,7 @@
 }
 .token-graph {
   margin-top: 100px;
+  margin-bottom: 30px;
 }
 .pretty {
   margin: 5px;

diff --git a/plugins/admin/components/MonthlyActiveUsersPage.js b/plugins/admin/components/MonthlyActiveUsersPage.js
@@ -1,5 +1,5 @@
 import React, { Component, useState, useEffect } from 'react'
-import { Button, Card, CardFooter, CardBody, Label } from '../../../app/components'
+import { Button, Card, CardFooter, CardBody, Label, Input } from '../../../app/components'
 import GluuLoader from '../../../app/routes/Apps/Gluu/GluuLoader'
 import GluuViewWrapper from '../../../app/routes/Apps/Gluu/GluuViewWrapper'
 import {
@@ -65,8 +65,8 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
     key: 'selection',
   }
   const [average, setAverage] = useState(0)
-  const [authCodeAT, setAuthCodeAT] = useState(true)
-  const [clientCredentialAT, setClientCredentialAT] = useState(true)
+  const [showAuthCodeATGraph, setShowAuthCodeATGraph] = useState(true)
+  const [showClientCredentialATGraph, setShowClientCredentialATGraph] = useState(true)
 
   const pickRange2 = React.createRef()
   const [rangeValue2, setRangeValue2] = useState({
@@ -139,10 +139,10 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
             color: 'black',
           }}
         >
-          <p className="label">{`Month : ${label % 100}/${Math.floor(
+          <p className="label">{`${t('fields.month')} : ${label % 100}/${Math.floor(
             label / 100,
           )}`}</p>
-          <p className="label">{`Monthly Active Users : ${payload[0].value}`}</p>
+          <p className="label">{`${t('fields.monthly_active_users')} : ${payload[0].value}`}</p>
         </div>
       )
     }
@@ -162,11 +162,11 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
             color: 'black',
           }}
         >
-          <p className="label">{`Month : ${label % 100}/${Math.floor(
+          <p className="label">{`${t('fields.month')} : ${label % 100}/${Math.floor(
             label / 100,
           )}`}</p>
-          <p className="label">{`Authorization Code Access Token : ${payload[0].value}`}</p>
-          <p className="label">{`Client Credentials Access Token : ${payload[1].value}`}</p>
+          <p className="label">{`${t('fields.authorization_code_access_token')} : ${payload[0].value}`}</p>
+          <p className="label">{`${t('fields.client_credentials_access_token')} : ${payload[1].value}`}</p>
         </div>
       )
     }
@@ -209,7 +209,7 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
               style={{ minHeight: '400px' }}
             >
 
-              <div className="d-flex justify-content-center mb-3">
+              <div className="d-flex justify-content-center align-items-center mb-3">
                 <Picker
                   ref={pickRange2}
                   years={{
@@ -237,26 +237,14 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
                 <Button className="ml-4 mr-4" color="primary" onClick={search}>
                   {t('actions.view')}
                 </Button>
-                <Label
-                  style={{
-                    border: '2px solid gray',
-                    borderRadius: '5px',
-                    marginBottom: '0px',
-                    fontSize: 'larger',
-                    padding: '10px',
-                    marginLeft: '50px',
-                    minWidth: '230px',
-                    textAlign: 'center',
-                    color: 'black',
-                  }}
-                >
-                  Average of MAU : {arrAvg(Object.values(stat))}
+                <Label className="h4">
+                  {t('fields.average_of_mau')}{arrAvg(Object.values(stat))}
                 </Label>
               </div>
               <ResponsiveContainer className="mau-graph" width="80%" height={500}>
                 <LineChart height={300} data={Object.values(stat)}>
                   <Line
-                    name="Monthly Active Users"
+                    name={t('fields.monthly_active_users')}
                     type="monotone"
                     dataKey="monthly_active_users"
                     stroke="#8884d8"
@@ -275,17 +263,17 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
               </ResponsiveContainer>
               <ResponsiveContainer className="token-graph" width="80%" height={500} >
                 <LineChart height={300} data={Object.values(stat)}>
-                  {authCodeAT && (
+                  {showAuthCodeATGraph && (
                     <Line
-                      name="Authorization Code Access Token"
+                      name={t('fields.authorization_code_access_token')}
                       type="monotone"
                       dataKey="token_count_per_granttype.authorization_code.access_token"
                       stroke="#ff1e86"
                     />
                   )}
-                  {clientCredentialAT && (
+                  {showClientCredentialATGraph && (
                     <Line
-                      name="Client Credentials Access Token"
+                      name={t('fields.client_credentials_access_token')}
                       type="monotone"
                       dataKey="token_count_per_granttype.client_credentials.access_token"
                       stroke="#4f1e86"
@@ -303,7 +291,6 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
                   <Legend />
                 </LineChart>
               </ResponsiveContainer>
-              <hr />
               <div
                 style={{
                   display: 'flex',
@@ -313,27 +300,27 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
                 }}
               >
                 <div className="pretty p-default p-curve p-smooth">
-                  <input
+                  <Input
                     type="checkbox"
-                    checked={authCodeAT}
+                    checked={showAuthCodeATGraph}
                     onClick={(e) => {
-                      setAuthCodeAT(!authCodeAT)
+                      setShowAuthCodeATGraph(!showAuthCodeATGraph)
                     }}
                   />
                   <div className="state p-primary">
-                    <label>Authorization Code Access Token</label>
+                    <Label>{t('fields.authorization_code_access_token')}</Label>
                   </div>
                 </div>
                 <div className="pretty p-default p-curve p-smooth">
-                  <input
+                  <Input
                     type="checkbox"
-                    checked={clientCredentialAT}
+                    checked={showClientCredentialATGraph}
                     onClick={(e) => {
-                      setClientCredentialAT(!clientCredentialAT)
+                      setShowClientCredentialATGraph(!showClientCredentialATGraph)
                     }}
                   />
                   <div className="state p-primary">
-                    <label>Client Credentials Access Token</label>
+                    <Label>{t('fields.client_credentials_access_token')}</Label>
                   </div>
                 </div>
               </div>