F #5755: add red color in text when MAX > TOTAL (#2610)

(cherry picked from commit 8815eb543229dac7016bd36602c342afed772c25)

src/fireedge/src/client/components/Cards/HostCard.js

@@ -13,22 +13,22 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo, ReactElement } from 'react'
 import PropTypes from 'prop-types'
+import { memo, ReactElement } from 'react'
 
-import { Server, ModernTv } from 'iconoir-react'
 import { Typography } from '@mui/material'
+import { ModernTv, Server } from 'iconoir-react'
 
+import { Tr } from 'client/components/HOC'
 import {
-  StatusCircle,
-  StatusChip,
   LinearProgressWithLabel,
+  StatusChip,
+  StatusCircle,
 } from 'client/components/Status'
 import { rowStyles } from 'client/components/Tables/styles'
-import { Tr } from 'client/components/HOC'
 
+import { Host, HOST_THRESHOLD, T } from 'client/constants'
 import { getAllocatedInfo, getState } from 'client/models/Host'
-import { T, Host, HOST_THRESHOLD } from 'client/constants'
 
 const HostCard = memo(
   /**
@@ -42,8 +42,14 @@ const HostCard = memo(
     const classes = rowStyles()
     const { ID, NAME, IM_MAD, VM_MAD, HOST_SHARE, CLUSTER } = host
 
-    const { percentCpuUsed, percentCpuLabel, percentMemUsed, percentMemLabel } =
-      getAllocatedInfo(host)
+    const {
+      percentCpuUsed,
+      percentCpuLabel,
+      percentMemUsed,
+      percentMemLabel,
+      alertCpu,
+      alertMemory,
+    } = getAllocatedInfo(host)
 
     const runningVms = HOST_SHARE?.RUNNING_VMS || 0
     const totalVms = [host?.VMS?.ID ?? []].flat().length || 0
@@ -84,6 +90,7 @@ const HostCard = memo(
             low={HOST_THRESHOLD.CPU.low}
             label={percentCpuLabel}
             title={`${Tr(T.AllocatedCpu)}`}
+            alert={alertCpu}
           />
           <LinearProgressWithLabel
             value={percentMemUsed}
@@ -91,6 +98,7 @@ const HostCard = memo(
             low={HOST_THRESHOLD.MEMORY.low}
             label={percentMemLabel}
             title={`${Tr(T.AllocatedMemory)}`}
+            alert={alertMemory}
           />
         </div>
         {actions && <div className={classes.actions}>{actions}</div>}

src/fireedge/src/client/components/Status/LinearProgressWithLabel.js

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo } from 'react'
 import PropTypes from 'prop-types'
+import { memo } from 'react'
 
 import {
-  styled,
-  Typography,
   LinearProgress,
+  Typography,
   linearProgressClasses,
+  styled,
 } from '@mui/material'
 
 import { SCHEMES } from 'client/constants'
@@ -48,12 +48,16 @@ const BorderLinearProgress = styled(LinearProgress)(
   })
 )
 
+const StyledTypography = styled(Typography)(({ theme, alert }) => ({
+  ...(alert ? { color: theme.palette.error.main } : {}),
+}))
+
 const LinearProgressWithLabel = memo(
-  ({ value, high, low, label, title }) => (
+  ({ value, high, low, label, title, alert = false }) => (
     <div style={{ textAlign: 'end' }} title={title}>
-      <Typography component="span" variant="body2" noWrap>
+      <StyledTypography component="span" variant="body2" noWrap alert={alert}>
         {label}
-      </Typography>
+      </StyledTypography>
       <BorderLinearProgress
         variant="determinate"
         value={value}
@@ -71,6 +75,7 @@ LinearProgressWithLabel.propTypes = {
   high: PropTypes.number,
   label: PropTypes.string.isRequired,
   title: PropTypes.string,
+  alert: PropTypes.bool,
 }
 
 LinearProgressWithLabel.displayName = 'LinearProgressWithLabel'

src/fireedge/src/client/components/Tabs/Host/Info/information.js

@@ -61,6 +61,8 @@ const InformationPanel = ({ host = {}, actions }) => {
     maxMem,
     totalCpu,
     totalMem,
+    alertCpu,
+    alertMemory,
   } = getAllocatedInfo(host)
 
   const handleRename = async (_, newName) => {
@@ -125,6 +127,7 @@ const InformationPanel = ({ host = {}, actions }) => {
           label={percentCpuLabel}
           high={HOST_THRESHOLD.CPU.high}
           low={HOST_THRESHOLD.CPU.low}
+          alert={alertCpu}
         />
       ),
       min: '0',
@@ -142,6 +145,7 @@ const InformationPanel = ({ host = {}, actions }) => {
           label={percentMemLabel}
           high={HOST_THRESHOLD.MEMORY.high}
           low={HOST_THRESHOLD.MEMORY.low}
+          alert={alertMemory}
         />
       ),
       min: '0',

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

@@ -78,6 +78,8 @@ export const getAllocatedInfo = (host) => {
     totalMem: TOTAL_MEM,
     maxCpu: MAX_CPU,
     maxMem: MAX_MEM,
+    alertCpu: MAX_CPU > TOTAL_CPU,
+    alertMemory: MAX_MEM > TOTAL_MEM,
   }
 }