F #5422: Fix bar styles on hover (#1996)

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

@@ -40,7 +40,7 @@ const HostCard = memo(
    */
   ({ host, rootProps, actions }) => {
     const classes = rowStyles()
-    const { ID, NAME, IM_MAD, VM_MAD, HOST_SHARE, CLUSTER, TEMPLATE } = host
+    const { ID, NAME, IM_MAD, VM_MAD, HOST_SHARE, CLUSTER } = host
 
     const { percentCpuUsed, percentCpuLabel, percentMemUsed, percentMemLabel } =
       getAllocatedInfo(host)
@@ -57,7 +57,7 @@ const HostCard = memo(
           <div className={classes.title}>
             <StatusCircle color={stateColor} tooltip={stateName} />
             <Typography noWrap component="span">
-              {TEMPLATE?.NAME ?? NAME}
+              {NAME}
             </Typography>
             <span className={classes.labels}>
               {labels.map((label) => (

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

@@ -23,6 +23,8 @@ import {
   linearProgressClasses,
 } from '@mui/material'
 
+import { SCHEMES } from 'client/constants'
+
 const getRangeColor = ({ value, high, low, palette }) => {
   if (low > value) return palette.success.main
   if (low < value && value < high) return palette.warning.main
@@ -34,7 +36,7 @@ const BorderLinearProgress = styled(LinearProgress)(
     height: 8,
     borderRadius: 5,
     [`&.${linearProgressClasses.colorPrimary}`]: {
-      backgroundColor: palette.grey[palette.mode === 'light' ? 200 : 800],
+      backgroundColor: palette.grey[palette.mode === SCHEMES.LIGHT ? 400 : 800],
     },
     [`& .${linearProgressClasses.bar}`]: {
       borderRadius: 5,

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

@@ -13,19 +13,21 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import hostApi from 'client/features/OneApi/host'
 import { HostCard } from 'client/components/Cards'
 
 const Row = memo(
   ({ original, value, ...props }) => {
-    const detail = hostApi.endpoints.getHosts.useQueryState(undefined, {
-      selectFromResult: ({ data }) =>
-        [data ?? []].flat().find((host) => +host?.ID === +original.ID),
+    const state = hostApi.endpoints.getHosts.useQueryState(undefined, {
+      selectFromResult: ({ data = [] }) =>
+        data.find((host) => +host?.ID === +original.ID),
     })
 
-    return <HostCard host={detail ?? original} rootProps={props} />
+    const memoHost = useMemo(() => state ?? original, [state, original])
+
+    return <HostCard host={memoHost} rootProps={props} />
   },
   (prev, next) => prev.className === next.className
 )
@@ -34,6 +36,7 @@ Row.propTypes = {
   original: PropTypes.object,
   value: PropTypes.object,
   isSelected: PropTypes.bool,
+  className: PropTypes.string,
   handleClick: PropTypes.func,
 }
 

src/fireedge/src/client/components/Tabs/Common/List.js

@@ -18,13 +18,7 @@ import { Fragment, isValidElement } from 'react'
 import PropTypes from 'prop-types'
 
 import clsx from 'clsx'
-import {
-  List as MList,
-  ListItem,
-  Typography,
-  Paper,
-  alpha,
-} from '@mui/material'
+import { List as MList, ListItem, Typography, Paper } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 
 import {
@@ -48,7 +42,7 @@ const useStyles = makeStyles((theme) => ({
       minHeight: '100%',
     },
     '&:hover': {
-      backgroundColor: alpha(theme.palette.text.primary, 0.05),
+      backgroundColor: theme.palette.action.hover,
     },
   },
   typo: theme.typography.body2,