fix(admin-ui): add openid connect clients count to the dashbaord #43

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

@@ -3,13 +3,15 @@ import { subMonths } from 'date-fns'
 import moment from 'moment'
 import CustomBarGraph from './Grapths/CustomBarGraph'
 import CustomLineChart from './Grapths/CustomLineChart'
+import CustomBadgeRow from './Grapths/CustomBadgeRow'
 import CustomPieGraph from './Grapths/CustomPieGraph'
 import ActiveUsersGraph from './Grapths/ActiveUsersGraph'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import GluuLoader from '../Apps/Gluu/GluuLoader'
 import GluuViewWrapper from '../Apps/Gluu/GluuViewWrapper'
 import { getMau } from '../../redux/actions/MauActions'
+import { getClients } from '../../redux/actions/InitActions'
 import applicationstyle from '../Apps/Gluu/styles/applicationstyle'
 import GluuLabel from '../Apps/Gluu/GluuLabel'
 import GluuRibbon from '../Apps/Gluu/GluuRibbon'
@@ -31,7 +33,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
-function DashboardPage({ statData, permissions, loading, dispatch }) {
+function DashboardPage({ statData, permissions, clients, loading, dispatch }) {
   const { t } = useTranslation()
   const [startDate, setStartDate] = useState(subMonths(new Date(), 3))
   const [endDate, setEndDate] = useState(new Date())
@@ -43,6 +45,10 @@ function DashboardPage({ statData, permissions, loading, dispatch }) {
       if (statData.length === 0 && count < 2) {
         search()
       }
+      if (clients.length === 0 && count < 2) {
+        buildPayload(userAction, 'Fetch openid connect clients', {})
+        dispatch(getClients(userAction))
+      }
       count++
     }, 1000)
     return () => clearInterval(interval)
@@ -124,6 +130,27 @@ function DashboardPage({ statData, permissions, loading, dispatch }) {
           <FormGroup row />
           <FormGroup row />
           <FormGroup row />
+          <FormGroup row />
+          <FormGroup row />
+          <FormGroup row />
+          <FormGroup row>
+            <Col sm={2}></Col>
+            <Col sm={3}>
+              <CustomBadgeRow
+                label="OIDC Clients Count"
+                value={clients.length}
+              />
+            </Col>
+            <Col sm={3}>
+              <CustomBadgeRow label="Active Users Count" value={1} />
+            </Col>
+            <Col sm={3}>
+              <CustomBadgeRow label="Token issued count" value={153} />
+            </Col>
+            <Col sm={1}></Col>
+          </FormGroup>
+          <FormGroup row />
+          <FormGroup row />
           <CardBody>
             <Row>
               <Col sm={2}></Col>
@@ -187,10 +214,6 @@ function DashboardPage({ statData, permissions, loading, dispatch }) {
                 <CustomLineChart data={doDataAugmentation(statData)} />
               </Col>
             </FormGroup>
-            <FormGroup row>
-              <Col sm={6}></Col>
-              <Col sm={6}></Col>
-            </FormGroup>
           </CardBody>
           <CardFooter className="p-4 bt-0"></CardFooter>
         </Card>
@@ -203,6 +226,7 @@ const mapStateToProps = (state) => {
   return {
     statData: state.mauReducer.stat,
     loading: state.mauReducer.loading,
+    clients: state.initReducer.clients,
     permissions: state.authReducer.permissions,
   }
 }

admin-ui/app/routes/Dashboards/Grapths/CustomBadgeRow.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Card, CardBody, CardTitle, Badge } from '../../../../app/components'
+import GluuRibbon from '../../Apps/Gluu/GluuRibbon'
+
+function CustomBadgeRow({ label, value }) {
+  return (
+    <Card className="mb-3" style={{ borderRadius: '20px', width:'200px'}}>
+      <CardBody>
+        <CardTitle tag="h6" className="mb-4">
+          <GluuRibbon title={label} />
+        </CardTitle>
+        <Badge color="primary" style={{ fontWeight: 'bold', fontSize:'2.5em'}}>
+          {value}
+        </Badge>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default CustomBadgeRow

admin-ui/app/routes/Dashboards/Reports/ReportCard.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, CardBody, CardTitle, Badge } from './../../../components'
+import { Card, CardBody, CardTitle, Badge } from '../../../../app/components'
 import ReportPiChartItem from './ReportPiChartItem'
 import GluuRibbon from '../../Apps/Gluu/GluuRibbon'