F #5755: add tooltip description (#2613)

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

@@ -47,8 +47,8 @@ const HostCard = memo(
       percentCpuLabel,
       percentMemUsed,
       percentMemLabel,
-      alertCpu,
-      alertMemory,
+      colorCpu,
+      colorMem,
     } = getAllocatedInfo(host)
 
     const runningVms = HOST_SHARE?.RUNNING_VMS || 0
@@ -90,7 +90,7 @@ const HostCard = memo(
             low={HOST_THRESHOLD.CPU.low}
             label={percentCpuLabel}
             title={`${Tr(T.AllocatedCpu)}`}
-            alert={alertCpu}
+            color={colorCpu}
           />
           <LinearProgressWithLabel
             value={percentMemUsed}
@@ -98,7 +98,7 @@ const HostCard = memo(
             low={HOST_THRESHOLD.MEMORY.low}
             label={percentMemLabel}
             title={`${Tr(T.AllocatedMemory)}`}
-            alert={alertMemory}
+            color={colorMem}
           />
         </div>
         {actions && <div className={classes.actions}>{actions}</div>}

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

@@ -17,12 +17,18 @@ import PropTypes from 'prop-types'
 import { memo } from 'react'
 
 import {
+  Chip,
+  Grid,
   LinearProgress,
+  Tooltip,
   Typography,
   linearProgressClasses,
   styled,
+  tooltipClasses,
 } from '@mui/material'
 
+import { StatusCircle } from 'client/components/Status'
+
 import { SCHEMES } from 'client/constants'
 
 const getRangeColor = ({ value, high, low, palette }) => {
@@ -48,22 +54,75 @@ const BorderLinearProgress = styled(LinearProgress)(
   })
 )
 
-const StyledTypography = styled(Typography)(({ theme, alert }) => ({
-  ...(alert ? { color: theme.palette.error.main } : {}),
+const StyledTypography = styled(Typography)(({ theme, color }) => ({
+  ...(color && theme.palette[color]?.main
+    ? { color: theme.palette[color].main }
+    : {}),
+}))
+
+const StyledTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    maxWidth: theme.typography.pxToRem(170),
+  },
+}))
+
+const StyledChip = styled(Chip)(({ theme, colorSvg }) => ({
+  '&': {
+    color: theme.palette.common.white,
+    marginBottom: theme.typography.pxToRem(1),
+  },
+  '& svg': {
+    marginLeft: theme.typography.pxToRem(12),
+    ...(colorSvg ? { color: theme.palette[colorSvg].main } : {}),
+  },
 }))
 
 const LinearProgressWithLabel = memo(
-  ({ value, high, low, label, title, alert = false }) => (
-    <div style={{ textAlign: 'end' }} title={title}>
-      <StyledTypography component="span" variant="body2" noWrap alert={alert}>
+  ({ value, high, low, label, title, color = '' }) => (
+    <div style={{ textAlign: 'end' }}>
+      <StyledTypography component="span" variant="body2" noWrap color={color}>
         {label}
       </StyledTypography>
-      <BorderLinearProgress
-        variant="determinate"
-        value={value}
-        high={high}
-        low={low}
-      />
+      <StyledTooltip
+        arrow
+        title={
+          <Grid container>
+            <Grid item xs={12}>
+              <Typography>{title}</Typography>
+            </Grid>
+            <Grid item xs={12}>
+              <StyledChip
+                colorSvg="success"
+                icon={<StatusCircle />}
+                label={`< ${low}%`}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <StyledChip
+                colorSvg="warning"
+                icon={<StatusCircle />}
+                label={`> ${low}% and < ${high}%`}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <StyledChip
+                colorSvg="error"
+                icon={<StatusCircle />}
+                label={`> ${high}%`}
+              />
+            </Grid>
+          </Grid>
+        }
+      >
+        <BorderLinearProgress
+          variant="determinate"
+          value={value}
+          high={high}
+          low={low}
+        />
+      </StyledTooltip>
     </div>
   ),
   (prev, next) => prev.value === next.value && prev.label === next.label
@@ -75,7 +134,7 @@ LinearProgressWithLabel.propTypes = {
   high: PropTypes.number,
   label: PropTypes.string.isRequired,
   title: PropTypes.string,
-  alert: PropTypes.bool,
+  color: PropTypes.string,
 }
 
 LinearProgressWithLabel.displayName = 'LinearProgressWithLabel'

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

@@ -61,8 +61,12 @@ const InformationPanel = ({ host = {}, actions }) => {
     maxMem,
     totalCpu,
     totalMem,
-    alertCpu,
-    alertMemory,
+    colorCpu,
+    colorMem,
+    usageCpu,
+    usageMem,
+    reservedCpu,
+    reservedMem,
   } = getAllocatedInfo(host)
 
   const handleRename = async (_, newName) => {
@@ -70,17 +74,23 @@ const InformationPanel = ({ host = {}, actions }) => {
   }
 
   const handleOvercommitment = async (name, value) => {
+    let valueNumber = +value
     let newTemplate
-    if (/memory/i.test(name)) {
-      newTemplate = {
-        RESERVED_MEM: value !== totalMem ? totalMem - value : '',
-      }
-    }
     if (/cpu/i.test(name)) {
+      valueNumber === 0 && (valueNumber = usageCpu)
       newTemplate = {
-        RESERVED_CPU: value !== totalCpu ? totalCpu - value : '',
+        RESERVED_CPU:
+          value !== totalCpu ? totalCpu - valueNumber : reservedCpu ? 0 : '',
       }
     }
+    if (/memory/i.test(name)) {
+      valueNumber === 0 && (valueNumber = usageMem)
+      newTemplate = {
+        RESERVED_MEM:
+          value !== totalMem ? totalMem - valueNumber : reservedMem ? 0 : '',
+      }
+    }
+
     newTemplate &&
       (await updateHost({
         id: ID,
@@ -127,7 +137,7 @@ const InformationPanel = ({ host = {}, actions }) => {
           label={percentCpuLabel}
           high={HOST_THRESHOLD.CPU.high}
           low={HOST_THRESHOLD.CPU.low}
-          alert={alertCpu}
+          color={colorCpu}
         />
       ),
       min: '0',
@@ -145,7 +155,7 @@ const InformationPanel = ({ host = {}, actions }) => {
           label={percentMemLabel}
           high={HOST_THRESHOLD.MEMORY.high}
           low={HOST_THRESHOLD.MEMORY.low}
-          alert={alertMemory}
+          color={colorMem}
         />
       ),
       min: '0',

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

@@ -55,6 +55,7 @@ export const getDatastores = (host) =>
 export const getAllocatedInfo = (host) => {
   const { CPU_USAGE, TOTAL_CPU, MEM_USAGE, TOTAL_MEM, MAX_MEM, MAX_CPU } =
     host?.HOST_SHARE ?? {}
+  const { RESERVED_CPU, RESERVED_MEM } = host?.TEMPLATE ?? {}
 
   const percentCpuUsed = (+CPU_USAGE * 100) / +MAX_CPU || 0
   const percentCpuLabel = `${CPU_USAGE} / ${MAX_CPU} 
@@ -78,8 +79,14 @@ export const getAllocatedInfo = (host) => {
     totalMem: TOTAL_MEM,
     maxCpu: MAX_CPU,
     maxMem: MAX_MEM,
-    alertCpu: MAX_CPU > TOTAL_CPU,
-    alertMemory: MAX_MEM > TOTAL_MEM,
+    usageCpu: CPU_USAGE,
+    usageMem: MEM_USAGE,
+    reservedCpu: RESERVED_CPU,
+    reservedMem: RESERVED_MEM,
+    colorCpu:
+      MAX_CPU > TOTAL_CPU ? 'error' : MAX_CPU < TOTAL_CPU ? 'success' : '',
+    colorMem:
+      MAX_MEM > TOTAL_MEM ? 'error' : MAX_MEM > TOTAL_MEM ? 'success' : '',
   }
 }