diff --git a/src/fireedge/src/client/components/Cards/HostCard.js b/src/fireedge/src/client/components/Cards/HostCard.js
index a2d9b009b09..fc1a1c9b36d 100644
--- a/src/fireedge/src/client/components/Cards/HostCard.js
+++ b/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(
- {TEMPLATE?.NAME ?? NAME}
+ {NAME}
{labels.map((label) => (
diff --git a/src/fireedge/src/client/components/Status/LinearProgressWithLabel.js b/src/fireedge/src/client/components/Status/LinearProgressWithLabel.js
index c7bcc96ceac..70aa2fa0cf3 100644
--- a/src/fireedge/src/client/components/Status/LinearProgressWithLabel.js
+++ b/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,
diff --git a/src/fireedge/src/client/components/Tables/Hosts/row.js b/src/fireedge/src/client/components/Tables/Hosts/row.js
index 0f89a44f55d..36f6028f143 100644
--- a/src/fireedge/src/client/components/Tables/Hosts/row.js
+++ b/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
+ const memoHost = useMemo(() => state ?? original, [state, original])
+
+ return
},
(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,
}
diff --git a/src/fireedge/src/client/components/Tabs/Common/List.js b/src/fireedge/src/client/components/Tabs/Common/List.js
index d59d30cabfb..d84635719ef 100644
--- a/src/fireedge/src/client/components/Tabs/Common/List.js
+++ b/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,