feat(admin-ui): update date selection in MAU graph

GluuFederation · Jul 20, 2022 · 1d1f078 · 1d1f078
1 parent 9a08147
commit 1d1f078
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 37 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuLabel.js b/admin-ui/app/routes/Apps/Gluu/GluuLabel.js
@@ -3,7 +3,7 @@ import { Label } from 'Components'
 import ReactTooltip from 'react-tooltip'
 import { useTranslation } from 'react-i18next'
 
-function GluuLabel({ label, required, size, doc_category, doc_entry }) {
+function GluuLabel({ label, required, size, doc_category, doc_entry, style }) {
   const { t } = useTranslation()
   function getSize() {
     if (size != null) {
@@ -12,7 +12,7 @@ function GluuLabel({ label, required, size, doc_category, doc_entry }) {
     return 3
   }
   return (
-    <Label for={label} sm={getSize()} data-tip data-for={label}>
+    <Label for={label} sm={getSize()} data-tip data-for={label} style={style}>
       <h5>
         {t(label)}
         {required && <span style={{ color: 'red', fontSize: '22px' }}> *</span>}

diff --git a/admin-ui/app/routes/Dashboards/Chart/DashboardChart.js b/admin-ui/app/routes/Dashboards/Chart/DashboardChart.js
@@ -21,14 +21,14 @@ const DashboardChart = () => {
 
   function doDataAugmentation(stat) {
     if (startMonth && endMonth) {
-      var dateStart = moment(startMonth, 'YYYYMM')
-      var dateEnd = moment(endMonth, 'YYYYMM')
-      var prepareStat = []
+      const dateStart = moment(startMonth, 'YYYYMM')
+      const dateEnd = moment(endMonth, 'YYYYMM')
+      const prepareStat = []
       while (
         dateEnd > dateStart ||
         dateStart.format('M') === dateEnd.format('M')
       ) {
-        let available = stat.filter((obj) => {
+        const available = stat.filter((obj) => {
           return obj.month == dateStart.format('YYYYMM')
         })
         if (available.length) {

diff --git a/admin-ui/plugins/admin/components/MAU/MauGraph.js b/admin-ui/plugins/admin/components/MAU/MauGraph.js
@@ -2,8 +2,13 @@ import React, { useState, useEffect, useContext } from 'react'
 import { subMonths } from 'date-fns'
 import moment from 'moment'
 import ActiveUsersGraph from 'Routes/Dashboards/Grapths/ActiveUsersGraph'
-import DatePicker from 'react-datepicker'
+import Grid from '@material-ui/core/Grid'
 import 'react-datepicker/dist/react-datepicker.css'
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from '@material-ui/pickers'
+import DateFnsUtils from '@date-io/date-fns'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
 import { getMau } from 'Redux/actions/MauActions'
@@ -133,37 +138,44 @@ function MauGraph({ statData, permissions, clients, loading, dispatch }) {
         <Card style={applicationStyle.mainCard}>
           <CardBody>
             <Row>
-              <Col sm={2}></Col>
-              <Col sm={10}>
-                <GluuLabel label="Select a date range" size="4" />
-                <DatePicker
-                  selected={startDate}
-                  onChange={(date) => setStartDate(date)}
-                  selectsStart
-                  isClearable
-                  startDate={startDate}
-                  dateFormat="MM/yyyy"
-                  showMonthYearPicker
-                  endDate={endDate}
-                  customInput={<CustomButton />}
-                />
-                &nbsp;&nbsp;
-                <DatePicker
-                  selected={endDate}
-                  onChange={(date) => setEndDate(date)}
-                  selectsEnd
-                  isClearable
-                  startDate={startDate}
-                  endDate={endDate}
-                  dateFormat="MM/yyyy"
-                  showMonthYearPicker
-                  minDate={startDate}
-                  maxDate={new Date()}
-                  customInput={<CustomButton />}
-                />
-                &nbsp;&nbsp;
+              <Col sm={5}>
+                <GluuLabel label="Select a date range" size="4" style={{ minWidth: '200px' }} />
+                <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                  <Grid container justifyContent="space-around">
+                    <KeyboardDatePicker
+                      disableToolbar
+                      variant="inline"
+                      format="MM/dd/yyyy"
+                      margin="normal"
+                      id="date-picker-inline"
+                      label="Start Date"
+                      value={startDate}
+                      onChange={(date) => setStartDate(date)}
+                      KeyboardButtonProps={{
+                        'aria-label': 'change date',
+                      }}
+                      autoOk={true}
+                    />
+                    <KeyboardDatePicker
+                      disableToolbar
+                      variant="inline"
+                      format="MM/dd/yyyy"
+                      margin="normal"
+                      id="date-picker-inline"
+                      label="Start Date"
+                      value={endDate}
+                      onChange={(date) => setEndDate(date)}
+                      KeyboardButtonProps={{
+                        'aria-label': 'change date',
+                      }}
+                      autoOk={true}
+                    />
+                  </Grid>
+                </MuiPickersUtilsProvider>
+              </Col>
+              <Col sm={2}>
                 <Button
-                  style={applicationstyle.customButtonStyle}
+                  style={{ position: 'relative', top: '55px', ...applicationstyle.customButtonStyle }}
                   color={`primary-${selectedTheme}`}
                   onClick={search}
                 >