M #~: Minor fix on Test API component (#2034)

src/fireedge/src/client/containers/TestApi/ResponseForm.js

@@ -51,10 +51,9 @@ const ResponseForm = ({
       const config = requestConfig(dataForm, { name, httpMethod, params })
 
       const res = (await RestClient.request(config)) ?? {}
-      handleChangeResponse(JSON.stringify(res, null, '\t'))
+      handleChangeResponse(res)
     } catch (err) {
-      handleChangeResponse(JSON.stringify(err.data, null, '\t'))
-      console.log('ERROR', err)
+      handleChangeResponse(err?.data ?? err?.message ?? err)
     }
   }
 

src/fireedge/src/client/containers/TestApi/index.js

@@ -13,34 +13,39 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { useState, useMemo, JSXElementConstructor } from 'react'
+import { useState, useMemo, ReactElement } from 'react'
 import { TextField, Autocomplete, Grid, Box } from '@mui/material'
 
+import Commands from 'server/utils/constants/commands'
 import ResponseForm from 'client/containers/TestApi/ResponseForm'
-import { InputCode } from 'client/components/FormControl'
-
 import { Tr } from 'client/components/HOC'
 import { T } from 'client/constants'
-import Commands from 'server/utils/constants/commands'
-
-import testApiStyles from 'client/containers/TestApi/styles'
 
 const COMMANDS = Object.keys(Commands)?.sort()
 
 /**
- * @returns {JSXElementConstructor} - Component that allows you
+ * @returns {ReactElement} - Component that allows you
  * to fetch, resolve, and interact with OpenNebula API.
  */
 function TestApi() {
-  const classes = testApiStyles()
   const [name, setName] = useState(() => COMMANDS[0])
-  const [response, setResponse] = useState('')
+  const [response, setResponse] = useState({})
 
   const handleChangeCommand = (_, value) => setName(value)
   const handleChangeResponse = (res) => setResponse(res)
 
+  const totalResults = useMemo(() => {
+    const data = response?.data || {}
+    const [firstKey, firstValue] = Object.entries(data)[0] ?? []
+    const isPool = firstKey?.endsWith('_POOL')
+
+    if (!isPool) return
+
+    return Object.values(firstValue)?.[0]?.length
+  }, [response])
+
   return (
-    <Grid container direction="row" spacing={2} className={classes.root}>
+    <Grid container direction="row" spacing={2} width={1} height={1}>
       <Grid item xs={12} md={6}>
         <Autocomplete
           disablePortal
@@ -59,9 +64,16 @@ function TestApi() {
           />
         )}
       </Grid>
-      <Grid item xs={12} md={6}>
-        <Box height="100%" minHeight={200}>
-          <InputCode code={response} readOnly />
+      <Grid item xs={12} md={6} sx={{ height: { xs: '50%', md: 1 } }}>
+        <Box height="100%" overflow="auto" bgcolor="background.paper" p={1}>
+          {totalResults && <p>{`Total results: ${totalResults}`}</p>}
+          <pre>
+            <code
+              style={{ whiteSpace: 'break-spaces', wordBreak: 'break-all' }}
+            >
+              {JSON.stringify(response, null, 2)}
+            </code>
+          </pre>
         </Box>
       </Grid>
     </Grid>

src/fireedge/src/client/containers/TestApi/styles.js

@@ -1,23 +0,0 @@
-/* ------------------------------------------------------------------------- *
- * Copyright 2002-2022, OpenNebula Project, OpenNebula Systems               *
- *                                                                           *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
- * not use this file except in compliance with the License. You may obtain   *
- * a copy of the License at                                                  *
- *                                                                           *
- * http://www.apache.org/licenses/LICENSE-2.0                                *
- *                                                                           *
- * Unless required by applicable law or agreed to in writing, software       *
- * distributed under the License is distributed on an "AS IS" BASIS,         *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
- * See the License for the specific language governing permissions and       *
- * limitations under the License.                                            *
- * ------------------------------------------------------------------------- */
-import makeStyles from '@mui/styles/makeStyles'
-
-export default makeStyles({
-  root: {
-    minHeight: '100%',
-    width: '100%',
-  },
-})

src/fireedge/src/client/utils/request.js

@@ -22,10 +22,7 @@ const getQueries = (params) =>
   Object.entries(params)
     ?.filter(([, { from }]) => from === fromTypes.query)
     ?.filter(([, { value }]) => value !== undefined)
-    ?.reduce(
-      (acc, [name, { value }]) => ({ ...acc, [name]: encodeURI(value) }),
-      {}
-    )
+    ?.reduce((acc, [name, { value }]) => ({ ...acc, [name]: value }), {})
 
 const replacePathWithResources = (path = '', params) =>
   Object.entries(params)