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,