F OpenNebula/one#5422: Add hosts table

src/fireedge/src/client/components/Tables/Hosts/index.js

@@ -5,11 +5,11 @@ import { useFetch } from 'client/hooks'
 import { useHost, useHostApi } from 'client/features/One'
 
 import { EnhancedTable } from 'client/components/Tables'
-import { HostCard } from 'client/components/Cards'
-import Columns from 'client/components/Tables/Hosts/columns'
+import HostColumns from 'client/components/Tables/Hosts/columns'
+import HostRow from 'client/components/Tables/Hosts/row'
 
 const HostsTable = () => {
-  const columns = React.useMemo(() => Columns, [])
+  const columns = React.useMemo(() => HostColumns, [])
 
   const hosts = useHost()
   const { getHosts } = useHostApi()
@@ -24,7 +24,8 @@ const HostsTable = () => {
       columns={columns}
       data={hosts}
       isLoading={loading || reloading}
-      MobileComponentRow={HostCard}
+      getRowId={row => String(row.ID)}
+      RowComponent={HostRow}
     />
   )
 }

src/fireedge/src/client/components/Tables/Hosts/row.js

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { Server, ModernTv } from 'iconoir-react'
+import { Typography } from '@material-ui/core'
+
+import { StatusCircle, LinearProgressWithLabel, StatusChip } from 'client/components/Status'
+import { rowStyles } from 'client/components/Tables/styles'
+
+import * as HostModel from 'client/models/Host'
+
+const Row = ({ value, ...props }) => {
+  const classes = rowStyles()
+  const { ID, NAME, IM_MAD, VM_MAD, VMS, CLUSTER } = value
+
+  const {
+    percentCpuUsed,
+    percentCpuLabel,
+    percentMemUsed,
+    percentMemLabel
+  } = HostModel.getAllocatedInfo(value)
+
+  const state = HostModel.getState(value)
+  const runningVms = [VMS?.ID ?? []].flat().length || 0
+
+  const labels = [...new Set([IM_MAD, VM_MAD])]
+
+  return (
+    <div {...props}>
+      <div>
+        <StatusCircle color={state?.color} tooltip={state?.name} />
+      </div>
+      <div className={classes.main}>
+        <Typography className={classes.title} component='span'>
+          {NAME}
+          <span className={classes.labels}>
+            {labels.map(label => (
+              <StatusChip key={label} stateColor={'#c6c6c6'} text={label} />
+            ))}
+          </span>
+        </Typography>
+        <div className={classes.caption}>
+          <span>{`#${ID}`}</span>
+          <span>
+            <Server size={16} />
+            <span>{` ${CLUSTER}`}</span>
+          </span>
+          <span>
+            <ModernTv size={16} />
+            <span>{` ${runningVms}`}</span>
+          </span>
+        </div>
+      </div>
+      <div className={classes.secondary}>
+        <LinearProgressWithLabel value={percentCpuUsed} label={percentCpuLabel} />
+        <LinearProgressWithLabel value={percentMemUsed} label={percentMemLabel} />
+      </div>
+    </div>
+  )
+}
+
+Row.propTypes = {
+  value: PropTypes.object,
+  isSelected: PropTypes.bool,
+  handleClick: PropTypes.func
+}
+
+export default Row

src/fireedge/src/client/models/Host.js

@@ -3,7 +3,7 @@ import { HOST_STATES } from 'client/constants'
 
 export const getState = ({ STATE } = {}) => HOST_STATES[STATE]
 
-export const getAllocatedInfo = ({ HOST_SHARE } = {}) => {
+export const getAllocatedInfo = ({ HOST_SHARE = {} } = {}) => {
   const { CPU_USAGE, TOTAL_CPU, MEM_USAGE, TOTAL_MEM } = HOST_SHARE
 
   const percentCpuUsed = +CPU_USAGE * 100 / +TOTAL_CPU || 0