feat(admin-ui): implement translation in dashboad page

harryandriyan · harryandriyan · commit 08cc4096bbbf · 2022-07-20T22:00:03.000+07:00
diff --git a/admin-ui/app/locales/en/translation.json b/admin-ui/app/locales/en/translation.json
@@ -23,6 +23,28 @@
     "yes": "Yes",
     "change_password": "Change Password"
   },
+  "dashboard": {
+    "summary_title": "Actives Users & Access Token Stats",
+    "oidc_clients_count": "OIDC Clients Count",
+    "active_users_count": "Active Users Count",
+    "token_issued_count": "Token Issued Count",
+    "user_info": "User Info",
+    "product_name": "Product name",
+    "license_type": "License Type",
+    "customer_email": "Customer Email",
+    "company_name": "Company Name",
+    "license_status": "License Status",
+    "oauth_server_status": "OAuth server status",
+    "database_status": "Database status",
+    "server_status": "Server status",
+    "access_tokens_graph": "Access Tokens Graph",
+    "select_date_range": "Select a date range",
+    "client_credentials_access_token": "Client credentials access token",
+    "authorization_code_access_token": "Authorization code access token",
+    "authorization_code_id_token": "Authorization code ID token",
+    "start_date": "Start Date",
+    "end_date": "End Date"
+  },
   "fields": {
     "access_token_signing_alg": "Access Token Signing Algorithm",
     "activate": "Activate",
diff --git a/admin-ui/app/locales/fr/translation.json b/admin-ui/app/locales/fr/translation.json
@@ -4,6 +4,28 @@
     "english": "English",
     "portuguese": "Português"
   },
+  "dashboard": {
+    "summary_title": "Statistiques des utilisateurs actifs et des jetons d'accès",
+    "oidc_clients_count": "Compte de clients OIDC",
+    "active_users_count": "Nombre d'utilisateurs actifs",
+    "token_issued_count": "Nombre de jetons émis",
+    "user_info": "Informations utilisateur",
+    "product_name": "Nom du produit",
+    "type_licence": "Type de licence",
+    "customer_email": "Courriel du client",
+    "company_name": "Nom de l'entreprise",
+    "license_status": "Statut de la licence",
+    "oauth_server_status": "État du serveur OAuth",
+    "database_status": "Statut de la base de données",
+    "server_status": "État du serveur",
+    "access_tokens_graph": "Graphique des jetons d'accès",
+    "select_date_range": "Sélectionnez une plage de dates",
+    "client_credentials_access_token": "Jeton d'accès aux informations d'identification du client",
+    "authorization_code_access_token": "Jeton d'accès au code d'autorisation",
+    "authorization_code_id_token": "Jeton d'identification du code d'autorisation",
+    "start_date": "Date de début",
+    "end_date": "Date de fin"
+  },
   "menus": {
     "adminui": "Administratrice",
     "cache": "Cacher",
diff --git a/admin-ui/app/locales/pt/translation.json b/admin-ui/app/locales/pt/translation.json
@@ -4,6 +4,28 @@
     "english": "English",
     "portuguese": "Português"
   },
+  "dashboard": {
+    "summary_title": "Estatísticas de usuários ativos e token de acesso",
+    "oidc_clients_count": "Contagem de Clientes OIDC",
+    "active_users_count": "Contagem de usuários ativos",
+    "token_issued_count": "Contagem de Tokens Emitidos",
+    "user_info": "Informações do usuário",
+    "product_name": "Nome do produto",
+    "license_type": "Tipo de licença",
+    "customer_email": "E-mail do cliente",
+    "company_name": "Nome da empresa",
+    "license_status": "Status da licença",
+    "oauth_server_status": "Status do servidor OAuth",
+    "database_status": "Status do banco de dados",
+    "server_status": "Status do servidor",
+    "access_tokens_graph": "Gráfico de Tokens de Acesso",
+    "select_date_range": "Selecione um intervalo de datas",
+    "client_credentials_access_token": "Token de acesso de credenciais do cliente",
+    "authorization_code_access_token": "Token de acesso ao código de autorização",
+    "authorization_code_id_token": "Token de ID do código de autorização",
+    "start_date": "Data de início",
+    "end_date": "Data final"
+  },
   "menus": {
     "adminui": "Admin",
     "cache": "Cache",
diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -142,38 +142,38 @@ function DashboardPage({
 
   const summaryData = [
     {
-      text: 'OIDC Clients Count',
+      text: t('dashboard.oidc_clients_count'),
       value: clients?.length,
     },
     {
-      text: 'Active Users Count',
+      text: t('dashboard.active_users_count'),
       value: 1,
     },
     {
-      text: 'Token Issued Count',
+      text: t('dashboard.token_issued_count'),
       value: 150,
     },
   ]
 
   const userInfo = [
     {
-      text: 'Product name',
+      text: t('dashboard.product_name'),
       value: license?.productName,
     },
     {
-      text: 'License Type',
+      text: t('dashboard.license_type'),
       value: license?.licenseType,
     },
     {
-      text: 'Customer Email',
+      text: t('dashboard.customer_email'),
       value: license?.customerEmail,
     },
     {
-      text: 'Company Name',
+      text: t('dashboard.company_name'),
       value: `${license?.customerFirstName} ${license?.customerLastName}`,
     },
     {
-      text: 'License Status',
+      text: t('dashboard.license_status'),
       value: license?.licenseActive ? 'active' : 'inactive',
     },
   ]
@@ -188,7 +188,7 @@ function DashboardPage({
           <div className={classes.userInfoText}>
             <div className={classes.statusText}>
               <Box display="flex" justifyContent="flex-start">
-                <span>OAuth server status</span>
+                <span>{t('dashboard.oauth_server_status')}</span>
                 <span>
                   <img
                     src={isUp(serverStatus) ? CheckIcon : CrossIcon}
@@ -213,7 +213,7 @@ function DashboardPage({
             </div>
             <div className={classes.statusText}>
               <Box display="flex" justifyContent="flex-start">
-                <span>Database status</span>
+                <span>{t('dashboard.database_status')}</span>
                 <span>
                   <img
                     src={isUp(dbStatus) ? CheckIcon : CrossIcon}
@@ -236,7 +236,7 @@ function DashboardPage({
             </div>
             <div className={classes.statusText}>
               <Box display="flex" justifyContent="flex-start">
-                <span>Server status</span>
+                <span>{t('dashboard.server_status')}</span>
                 <span>
                   <img
                     src={isUp(serverStatus) ? CheckIcon : CrossIcon}
@@ -314,7 +314,7 @@ function DashboardPage({
           <Grid container className="px-40">
             <Grid item lg={4} md={12}>
               <h3 className="txt-white">
-                Actives Users &amp; Access Token Stats
+                {t('dashboard.summary_title')}
               </h3>
               <div className="mt-20">
                 {summaryData.map((data, key) => (
@@ -342,7 +342,9 @@ function DashboardPage({
                       style={isTabletOrMobile ? { marginLeft: 0 } : {}}
                       elevation={3}
                     >
-                      <div className={classes.userInfoTitle}>User Info</div>
+                      <div className={classes.userInfoTitle}>
+                        {t('dashboard.user_info')}
+                      </div>
                       <div>
                         {userInfo.map((info, key) => (
                           <div className={classes.userInfoText} key={key}>
@@ -374,15 +376,15 @@ function DashboardPage({
           </Grid>
           <Grid container className={`px-40`}>
             <Grid lg={12} xs={12}>
-              <h3 className="text-white">Access Tokens Graph</h3>
+              <h3 className="text-white">{t('dashboard.access_tokens_graph')}</h3>
               {isTabletOrMobile ? (
                 <Grid container className={`${classes.whiteBg}`}>
                   <Grid
                     xs={12}
                     item
                     style={isTabletOrMobile ? { marginLeft: 40 } : { marginLeft: 40, marginBottom: 40 }}
                   >
-                    <div>Select a date range</div>
+                    <div>{t('dashboard.select_date_range')}</div>
                     <DateRange />
                   </Grid>
                   <Grid
@@ -410,7 +412,7 @@ function DashboardPage({
                     <DashboardChart />
                   </Grid>
                   <Grid md={3} xs={6} item>
-                    <div>Select a date range</div>
+                    <div>{t('dashboard.select_date_range')}</div>
                     <DateRange />
                   </Grid>
                 </Grid>
@@ -436,17 +438,17 @@ function DashboardPage({
                 {isMobile && <StatusCard />}
                 <ul className="mr-40">
                   <li className={classes.orange}>
-                    Client credentials access token
+                    {t('dashboard.client_credentials_access_token')}
                   </li>
                 </ul>
                 <ul className="mr-40">
                   <li className={classes.lightBlue}>
-                    Authorization code access token
+                    {t('dashboard.authorization_code_access_token')}
                   </li>
                 </ul>
                 <ul>
                   <li className={classes.lightGreen}>
-                    Authorization code ID token
+                    {t('dashboard.authorization_code_id_token')}
                   </li>
                 </ul>
               </Grid>
diff --git a/admin-ui/app/routes/Dashboards/DateRange/index.js b/admin-ui/app/routes/Dashboards/DateRange/index.js
@@ -10,9 +10,11 @@ import {
 import moment from 'moment'
 import { useDispatch } from 'react-redux'
 import { getMau } from 'Redux/actions/MauActions'
+import { useTranslation } from 'react-i18next'
 
 export default function MaterialUIPickers() {
   const dispatch = useDispatch()
+  const { t } = useTranslation()
   // The first commit of Material-UI
   const [startDate, setStartDate] = React.useState(
     moment().subtract(3, 'months'),
@@ -38,14 +40,14 @@ export default function MaterialUIPickers() {
 
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <Grid container justifyContent="space-around">
+      <Grid container>
         <KeyboardDatePicker
           disableToolbar
           variant="inline"
           format="MM/dd/yyyy"
           margin="normal"
           id="date-picker-inline"
-          label="Start Date"
+          label={t('dashboard.start_date')}
           value={startDate}
           onChange={(val) => setDate(val, 'start')}
           KeyboardButtonProps={{
@@ -59,7 +61,7 @@ export default function MaterialUIPickers() {
           format="MM/dd/yyyy"
           margin="normal"
           id="date-picker-inline"
-          label="Start Date"
+          label={t('dashboard.end_date')}
           value={endDate}
           onChange={(val) => setDate(val, 'end')}
           KeyboardButtonProps={{
diff --git a/admin-ui/plugins/admin/components/MAU/MauGraph.js b/admin-ui/plugins/admin/components/MAU/MauGraph.js
@@ -162,7 +162,7 @@ function MauGraph({ statData, permissions, clients, loading, dispatch }) {
                       format="MM/dd/yyyy"
                       margin="normal"
                       id="date-picker-inline"
-                      label="Start Date"
+                      label="End Date"
                       value={endDate}
                       onChange={(date) => setEndDate(date)}
                       KeyboardButtonProps={{
