F #3951: Add get provider credentials request (#964)

OpenNebula · Mar 12, 2021 · f200922 · f200922
1 parent d2b8370
commit f200922
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 12 deletions.
diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js
@@ -34,6 +34,7 @@ module.exports = {
   Password: 'Password',
   Token2FA: '2FA Token',
   KeepLoggedIn: 'Keep me logged in',
+  Credentials: 'Credentials',
 
   /* errors */
   CannotConnectOneFlow: 'Cannot connect to OneFlow server',

diff --git a/src/fireedge/src/client/containers/Providers/Sections/info.js b/src/fireedge/src/client/containers/Providers/Sections/info.js
@@ -1,16 +1,23 @@
-import React, { memo } from 'react'
+import React, { memo, useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
-import { CheckBox, CheckBoxOutlineBlank } from '@material-ui/icons'
+import { CheckBox, CheckBoxOutlineBlank, Visibility } from '@material-ui/icons'
 import clsx from 'clsx'
 
-import useStyles from 'client/containers/Providers/Sections/styles'
+import { useProvision } from 'client/hooks'
+import { Action } from 'client/components/Cards/SelectCard'
 import { Tr } from 'client/components/HOC'
 import { T } from 'client/constants'
 
+import useStyles from 'client/containers/Providers/Sections/styles'
+
 const Info = memo(({ data }) => {
   const classes = useStyles()
+  const { getProviderConnection } = useProvision()
+
+  const [showConnection, setShowConnection] = useState(undefined)
+
   const { ID, NAME, GNAME, UNAME, PERMISSIONS, TEMPLATE } = data
   const {
     connection,
@@ -22,10 +29,19 @@ const Info = memo(({ data }) => {
   const isChecked = checked =>
     checked === '1' ? <CheckBox /> : <CheckBoxOutlineBlank />
 
+  const ConnectionButton = () => (
+    <Action
+      icon={<Visibility />}
+      cy='provider-connection'
+      handleClick={() => getProviderConnection({ id: ID })
+        .then(connection => setShowConnection(connection))}
+    />
+  )
+
   return (
     <Grid container spacing={1}>
       <Grid item xs={12} md={6}>
-        <Paper variant="outlined">
+        <Paper variant="outlined" className={classes.marginBottom}>
           <List className={clsx(classes.list, 'w-50')}>
             <ListItem className={classes.title}>
               <Typography>{Tr(T.Information)}</Typography>
@@ -53,18 +69,31 @@ const Info = memo(({ data }) => {
                 {new Date(time * 1000).toLocaleString()}
               </Typography>
             </ListItem>
+          </List>
+        </Paper>
+        <Paper variant="outlined">
+          <List className={clsx(classes.list, 'w-50')}>
+            <ListItem className={classes.title}>
+              <Typography>{Tr(T.Credentials)}</Typography>
+              <span className={classes.alignToRight}>
+                {!showConnection && <ConnectionButton />}
+              </span>
+            </ListItem>
+            <Divider />
             {Object.entries(connection)?.map(([key, value]) =>
               typeof value === 'string' && (
                 <ListItem key={key}>
                   <Typography>{key}</Typography>
-                  <Typography data-cy={`provider-${key}`}>{value}</Typography>
+                  <Typography data-cy={`provider-${key}`}>
+                    {showConnection?.[key] ?? value}
+                  </Typography>
                 </ListItem>
               ))}
           </List>
         </Paper>
       </Grid>
       <Grid item xs={12} md={6}>
-        <Paper variant="outlined" className={classes.permissions}>
+        <Paper variant="outlined" className={classes.marginBottom}>
           <List className={clsx(classes.list, 'w-25')}>
             <ListItem className={classes.title}>
               <Typography>{Tr(T.Permissions)}</Typography>

diff --git a/src/fireedge/src/client/containers/Providers/Sections/styles.js b/src/fireedge/src/client/containers/Providers/Sections/styles.js
@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core'
 
 export default makeStyles(theme => ({
-  permissions: {
+  marginBottom: {
     marginBottom: theme.spacing(2)
   },
   list: {
@@ -10,16 +10,23 @@ export default makeStyles(theme => ({
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     },
-    '&.w-50 p': {
-      width: '50%'
+    '&.w-50 > *': {
+      '& > p, & > span': {
+        width: '50%'
+      }
     },
-    '&.w-25 p': {
-      width: '25%'
+    '&.w-25 > *': {
+      '& > p, & > span': {
+        width: '25%'
+      }
     }
   },
   title: {
     '& p.bold': {
       fontWeight: theme.typography.fontWeightBold
     }
+  },
+  alignToRight: {
+    textAlign: 'right'
   }
 }))
diff --git a/src/fireedge/src/client/hooks/useProvision.js b/src/fireedge/src/client/hooks/useProvision.js
@@ -121,6 +121,17 @@ export default function useProvision () {
     [dispatch]
   )
 
+  const getProviderConnection = useCallback(
+    ({ id }) =>
+      serviceProvision
+        .getProviderConnection({ id })
+        .catch(err => {
+          dispatch(enqueueError(err ?? `Error GET (${id}) provider connection`))
+          throw err
+        })
+    , [dispatch]
+  )
+
   // --------------------------------------------
   // PROVISIONS REQUESTS
   // --------------------------------------------
@@ -256,6 +267,7 @@ export default function useProvision () {
     createProvider,
     updateProvider,
     deleteProvider,
+    getProviderConnection,
 
     provisions,
     getProvision,

diff --git a/src/fireedge/src/client/services/provision/provider.js b/src/fireedge/src/client/services/provision/provider.js
@@ -58,10 +58,20 @@ export const deleteProvider = ({ id }) =>
     return res?.data ?? {}
   })
 
+export const getProviderConnection = ({ id }) =>
+  requestData(`/api/${PROVIDER}/connection/${id}`, {
+    error: err => err?.message
+  }).then(res => {
+    if (!res?.id || res?.id !== httpCodes.ok.id) throw res
+
+    return res?.data ?? {}
+  })
+
 export default {
   getProvider,
   getProviders,
   createProvider,
   updateProvider,
-  deleteProvider
+  deleteProvider,
+  getProviderConnection
 }