F #3951: Add more info to ds, vnet and host cards (#957)

OpenNebula · Mar 12, 2021 · f5a9aaf · f5a9aaf
1 parent d22d34d
commit f5a9aaf
Show file tree

Hide file tree

Showing 14 changed files with 426 additions and 255 deletions.
diff --git a/src/fireedge/src/client/components/Cards/DatastoreCard.js b/src/fireedge/src/client/components/Cards/DatastoreCard.js
@@ -4,25 +4,43 @@ import PropTypes from 'prop-types'
 import { makeStyles, Typography } from '@material-ui/core'
 import DatastoreIcon from '@material-ui/icons/FolderOpen'
 
-import SelectCard from 'client/components/Cards/SelectCard'
-import { StatusBadge, StatusChip } from 'client/components/Status'
+import SelectCard, { Action } from 'client/components/Cards/SelectCard'
+import { StatusBadge, StatusChip, LinearProgressWithLabel } from 'client/components/Status'
+
+import { prettyBytes } from 'client/utils'
 import Datastore from 'client/constants/datastore'
 
-const useStyles = makeStyles(() => ({
-  title: { display: 'flex', gap: '0.5rem' }
+const useStyles = makeStyles(({
+  title: {
+    display: 'flex',
+    gap: '0.5rem'
+  },
+  content: {
+    padding: '2em',
+    display: 'flex',
+    flexFlow: 'column',
+    gap: '1em'
+  }
 }))
 
 const DatastoreCard = memo(
   ({ value, isSelected, handleClick, actions }) => {
     const classes = useStyles()
 
-    const { ID, NAME, TYPE, STATE } = value
+    const { ID, NAME, TYPE, STATE, TOTAL_MB, USED_MB } = value
     const type = Datastore.TYPES[TYPE]
     const state = Datastore.STATES[STATE]
 
+    const percentOfUsed = +USED_MB * 100 / +TOTAL_MB || 0
+    const usedBytes = prettyBytes(+USED_MB, 'MB')
+    const totalBytes = prettyBytes(+TOTAL_MB, 'MB')
+    const percentLabel = `${usedBytes} / ${totalBytes} (${Math.round(percentOfUsed)}%)`
+
     return (
       <SelectCard
-        stylesProps={{ minHeight: 160 }}
+        action={actions?.map(action =>
+          <Action key={action?.cy} {...action} />
+        )}
         icon={
           <StatusBadge stateColor={state.color}>
             <DatastoreIcon />
@@ -39,8 +57,11 @@ const DatastoreCard = memo(
         subheader={`#${ID}`}
         isSelected={isSelected}
         handleClick={handleClick}
-        actions={actions}
-      />
+      >
+        <div className={classes.content}>
+          <LinearProgressWithLabel value={percentOfUsed} label={percentLabel} />
+        </div>
+      </SelectCard>
     )
   },
   (prev, next) => (
@@ -54,7 +75,10 @@ DatastoreCard.propTypes = {
     ID: PropTypes.string.isRequired,
     NAME: PropTypes.string.isRequired,
     TYPE: PropTypes.string,
-    STATE: PropTypes.string
+    STATE: PropTypes.string,
+    TOTAL_MB: PropTypes.string,
+    FREE_MB: PropTypes.string,
+    USED_MB: PropTypes.string
   }),
   isSelected: PropTypes.bool,
   handleClick: PropTypes.func,

diff --git a/src/fireedge/src/client/components/Cards/HostCard.js b/src/fireedge/src/client/components/Cards/HostCard.js
@@ -4,31 +4,53 @@ import PropTypes from 'prop-types'
 import { makeStyles, Typography } from '@material-ui/core'
 import { Computer as HostIcon } from '@material-ui/icons'
 
-import SelectCard from 'client/components/Cards/SelectCard'
-import { StatusBadge, StatusChip } from 'client/components/Status'
+import SelectCard, { Action } from 'client/components/Cards/SelectCard'
+import { StatusBadge, StatusChip, LinearProgressWithLabel } from 'client/components/Status'
+
+import { prettyBytes } from 'client/utils'
 import Host from 'client/constants/host'
 
-const useStyles = makeStyles(() => ({
-  title: { display: 'flex', gap: '0.5rem' }
-}))
+const useStyles = makeStyles({
+  title: {
+    display: 'flex',
+    gap: '0.5rem'
+  },
+  content: {
+    padding: '2em',
+    display: 'flex',
+    flexFlow: 'column',
+    gap: '1em'
+  }
+})
 
 const HostCard = memo(
   ({ value, isSelected, handleClick, actions }) => {
     const classes = useStyles()
 
-    const { ID, NAME, STATE, IM_MAD: imMad, VM_MAD: vmMad } = value
+    const { ID, NAME, STATE, IM_MAD, VM_MAD, HOST_SHARE } = value
+    const { CPU_USAGE, TOTAL_CPU, MEM_USAGE, TOTAL_MEM } = HOST_SHARE
+
+    const percentCpuUsed = +CPU_USAGE * 100 / +TOTAL_CPU || 0
+    const percentCpuLabel = `${CPU_USAGE} / ${TOTAL_CPU} (${Math.round(percentCpuUsed)}%)`
+
+    const percentMemUsed = +MEM_USAGE * 100 / +TOTAL_MEM || 0
+    const usedMemBytes = prettyBytes(+MEM_USAGE)
+    const totalMemBytes = prettyBytes(+TOTAL_MEM)
+    const percentMemLabel = `${usedMemBytes} / ${totalMemBytes} (${Math.round(percentMemUsed)}%)`
+
     const state = Host.STATES[STATE]
-    const mad = imMad === vmMad ? imMad : `${imMad}/${vmMad}`
+    const mad = IM_MAD === VM_MAD ? IM_MAD : `${IM_MAD}/${VM_MAD}`
 
     return (
       <SelectCard
-        stylesProps={{ minHeight: 160 }}
+        action={actions?.map(action =>
+          <Action key={action?.cy} {...action} />
+        )}
         icon={
           <StatusBadge title={state?.name} stateColor={state.color}>
             <HostIcon />
           </StatusBadge>
         }
-
         title={
           <span className={classes.title}>
             <Typography title={NAME} noWrap component='span'>
@@ -40,8 +62,12 @@ const HostCard = memo(
         subheader={`#${ID}`}
         isSelected={isSelected}
         handleClick={handleClick}
-        actions={actions}
-      />
+      >
+        <div className={classes.content}>
+          <LinearProgressWithLabel value={percentCpuUsed} label={percentCpuLabel} />
+          <LinearProgressWithLabel value={percentMemUsed} label={percentMemLabel} />
+        </div>
+      </SelectCard>
     )
   },
   (prev, next) => (
@@ -57,7 +83,13 @@ HostCard.propTypes = {
     TYPE: PropTypes.string,
     STATE: PropTypes.string,
     IM_MAD: PropTypes.string,
-    VM_MAD: PropTypes.string
+    VM_MAD: PropTypes.string,
+    HOST_SHARE: PropTypes.shape({
+      CPU_USAGE: PropTypes.string,
+      TOTAL_CPU: PropTypes.string,
+      MEM_USAGE: PropTypes.string,
+      TOTAL_MEM: PropTypes.string
+    })
   }),
   isSelected: PropTypes.bool,
   handleClick: PropTypes.func,

diff --git a/src/fireedge/src/client/components/Cards/NetworkCard.js b/src/fireedge/src/client/components/Cards/NetworkCard.js
@@ -2,22 +2,35 @@ import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
 import NetworkIcon from '@material-ui/icons/AccountTree'
-import SelectCard from 'client/components/Cards/SelectCard'
+
+import SelectCard, { Action } from 'client/components/Cards/SelectCard'
+import { LinearProgressWithLabel } from 'client/components/Status'
 
 const NetworkCard = memo(
   ({ value, isSelected, handleClick, actions }) => {
-    const { ID, NAME } = value
+    const { ID, NAME, USED_LEASES = '', AR_POOL } = value
+
+    const addresses = [AR_POOL?.AR ?? []].flat()
+    const totalLeases = addresses.reduce((res, ar) => +ar.SIZE + res, 0)
+
+    const percentOfUsed = +USED_LEASES * 100 / +totalLeases || 0
+    const percentLabel = `${USED_LEASES} / ${totalLeases} (${Math.round(percentOfUsed)}%)`
 
     return (
       <SelectCard
-        stylesProps={{ minHeight: 120 }}
+        action={actions?.map(action =>
+          <Action key={action?.cy} {...action} />
+        )}
         icon={<NetworkIcon />}
         title={NAME}
         subheader={`#${ID}`}
         isSelected={isSelected}
         handleClick={handleClick}
-        actions={actions}
-      />
+      >
+        <div style={{ padding: '2em' }}>
+          <LinearProgressWithLabel value={percentOfUsed} label={percentLabel} />
+        </div>
+      </SelectCard>
     )
   },
   (prev, next) => prev.isSelected === next.isSelected
@@ -28,7 +41,11 @@ NetworkCard.propTypes = {
     ID: PropTypes.string.isRequired,
     NAME: PropTypes.string.isRequired,
     TYPE: PropTypes.string,
-    STATE: PropTypes.string
+    STATE: PropTypes.string,
+    USED_LEASES: PropTypes.string,
+    AR_POOL: PropTypes.shape({
+      AR: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    })
   }),
   isSelected: PropTypes.bool,
   handleClick: PropTypes.func,

diff --git a/src/fireedge/src/client/components/Cards/ProvisionCard.js b/src/fireedge/src/client/components/Cards/ProvisionCard.js
@@ -4,8 +4,7 @@ import PropTypes from 'prop-types'
 import ProviderIcon from '@material-ui/icons/Public'
 import ProvisionIcon from '@material-ui/icons/Cloud'
 
-import SelectCard from 'client/components/Cards/SelectCard'
-import Action from 'client/components/Cards/SelectCard/Action'
+import SelectCard, { Action } from 'client/components/Cards/SelectCard'
 import { StatusBadge } from 'client/components/Status'
 import Image from 'client/components/Image'
 import { isExternalURL } from 'client/utils'