feat(admin-ui): fix bugs #363 #361 #362

Author: syntrydy

app/routes/Apps/Gluu/styles/applicationstyle.js

@@ -15,4 +15,10 @@ export default {
   buttonStyle: {
     background: 'linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)',
   },
+  healthDown:{
+    background: 'linear-gradient(90deg, #fc575e 0%, #f7b42c 100%)'
+  },
+  healthUp:{
+    content: ''
+  }
 }

plugins/auth-server/components/Clients/ClientWizardForm.js

@@ -308,7 +308,7 @@ function ClientWizardForm({
               </CardBody>
               <CardBody className="p-5">
                 {(() => {
-                  // setClient(formik.values)
+                  setClient(formik.values)
                   switch (currentStep) {
                     case sequence[0]:
                       return (

plugins/auth-server/components/Configuration/ConfigPage.js

@@ -7,14 +7,18 @@ import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
 import useExitPrompt from '../../../../app/routes/Apps/Gluu/useExitPrompt'
 import PropertyBuilder from './JsonPropertyBuilder'
 import { connect } from 'react-redux'
-import { buildPayload } from '../../../../app/utils/PermChecker'
+import {
+  buildPayload,
+  hasPermission,
+  PROPERTIES_WRITE,
+} from '../../../../app/utils/PermChecker'
 import {
   getJsonConfig,
   patchJsonConfig,
 } from '../../redux/actions/JsonConfigActions'
 import { FETCHING_JSON_PROPERTIES } from '../../common/Constants'
 
-function ConfigPage({ configuration, loading, dispatch }) {
+function ConfigPage({ configuration, loading, dispatch, permissions }) {
   const lSize = 6
   const userAction = {}
   const [modal, setModal] = useState(false)
@@ -68,16 +72,20 @@ function ConfigPage({ configuration, loading, dispatch }) {
             />
           ))}
           <FormGroup row></FormGroup>
-          <GluuCommitFooter saveHandler={toggle} />
+          {hasPermission(permissions, PROPERTIES_WRITE) && (
+            <GluuCommitFooter saveHandler={toggle} />
+          )}
           <FormGroup row></FormGroup>
           <FormGroup row></FormGroup>
           <FormGroup row></FormGroup>
-          <GluuCommitDialog
-            handler={toggle}
-            modal={modal}
-            operations={patches}
-            onAccept={submitForm}
-          />
+          {hasPermission(permissions, PROPERTIES_WRITE) && (
+            <GluuCommitDialog
+              handler={toggle}
+              modal={modal}
+              operations={patches}
+              onAccept={submitForm}
+            />
+          )}
         </CardBody>
       </Card>
     </GluuLoader>

plugins/auth-server/components/Health/HealthPage.js

@@ -3,11 +3,12 @@ import {
   Container,
   CardBody,
   Card,
+  Badge,
   CardHeader,
   FormGroup,
 } from '../../../../app/components'
 import { useTranslation } from 'react-i18next'
-
+import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
 import { buildPayload } from '../../../../app/utils/PermChecker'
 import { connect } from 'react-redux'
 import { getHealthStatus } from '../../redux/actions/HealthAction'
@@ -19,9 +20,27 @@ function HealthPage({ serverStatus, dbStatus, dispatch }) {
   const options = {}
 
   useEffect(() => {
+    fetchHealthInfo(userAction, options, dispatch)
+  }, [])
+
+  function fetchHealthInfo() {
     buildPayload(userAction, 'GET Health Status', options)
     dispatch(getHealthStatus(userAction))
-  }, [])
+  }
+
+  function getColor(status) {
+    return isUp(status) ? 'primary' : 'danger'
+  }
+
+  function isUp(status) {
+    if (status) {
+      return (
+        status.toUpperCase() === 'ONLINE'.toUpperCase() ||
+        status.toUpperCase() === 'RUNNING'.toUpperCase()
+      )
+    }
+    return false
+  }
 
   return (
     <Container>
@@ -31,17 +50,35 @@ function HealthPage({ serverStatus, dbStatus, dispatch }) {
         <FormGroup row />
         <FormGroup row />
         <CardBody>
-          <Card className="mb-3">
-            <CardHeader tag="h6" className="bg-success text-white">
+          <Card className="mb-3" style={applicationStyle.buttonStyle}>
+            <CardHeader tag="h6" className="text-white">
               {t('titles.oauth_server_status_title')}
             </CardHeader>
-            <CardBody>{serverStatus}</CardBody>
+            <CardBody
+              style={
+                isUp(serverStatus)
+                  ? applicationStyle.healthUp
+                  : applicationStyle.healthDown
+              }
+            >
+              {serverStatus && (
+                <Badge color={getColor(serverStatus)}>{serverStatus}</Badge>
+              )}
+            </CardBody>
           </Card>
-          <Card className="mb-3">
-            <CardHeader tag="h6" className="bg-success text-white">
+          <Card className="mb-3" style={applicationStyle.buttonStyle}>
+            <CardHeader tag="h6" className="text-white">
               {t('titles.database_status_title')}
             </CardHeader>
-            <CardBody>{dbStatus}</CardBody>
+            <CardBody
+              style={
+                isUp(dbStatus)
+                  ? applicationStyle.healthUp
+                  : applicationStyle.healthDown
+              }
+            >
+              {dbStatus && <Badge color={getColor(dbStatus)}>{dbStatus}</Badge>}
+            </CardBody>
           </Card>
         </CardBody>
       </Card>

plugins/auth-server/redux/api/HealthApi.js

@@ -3,11 +3,11 @@ export default class HealthApi {
     this.api = api
   }
 
-  // Get Health Status
   getHealthStatus = () => {
     return new Promise((resolve, reject) => {
-      this.api.getConfigHealthReady( (error, data) => {
+      this.api.getAuthServerHealth((error, data) => {
         if (error) {
+          console.log(e);
           reject(error)
         } else {
           resolve(data)