shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2024-12-23 17:33:56 +03:00
Code Releases Wiki Activity

F #5422: Add low and high colors to bars (#1955)

Browse Source
This commit is contained in:
Sergio Betanzos 2022-04-19 13:00:16 +02:00 committed by Ruben S. Montero
parent c9317ff8d0
commit 3d5f29821e
No known key found for this signature in database
GPG Key ID: A0CEA6FA880A1D87
14 changed files with 72 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/fireedge/src/client/components/Cards/DatastoreCard.js
View File

@ -49,11 +49,9 @@ const DatastoreCard = memo(
return (
<div {...rootProps} data-cy={`datastore-${ID}`}>
<div>
<StatusCircle color={stateColor} tooltip={stateName} />
</div>
<div className={classes.main}>
<div className={classes.title}>
<StatusCircle color={stateColor} tooltip={stateName} />
<Typography component="span">{NAME}</Typography>
<span className={classes.labels}>
{LOCK && <Lock />}

8
src/fireedge/src/client/components/Cards/HostCard.js
View File

@ -53,11 +53,9 @@ const HostCard = memo(
return (
<div {...rootProps} data-cy={`host-${ID}`}>
<div>
<StatusCircle color={stateColor} tooltip={stateName} />
</div>
<div className={classes.main}>
<div className={classes.title}>
<StatusCircle color={stateColor} tooltip={stateName} />
<Typography noWrap component="span">
{TEMPLATE?.NAME ?? NAME}
</Typography>
@ -82,11 +80,15 @@ const HostCard = memo(
<div className={classes.secondary}>
<LinearProgressWithLabel
value={percentCpuUsed}
high={66}
low={33}
label={percentCpuLabel}
title={`${Tr(T.AllocatedCpu)}`}
/>
<LinearProgressWithLabel
value={percentMemUsed}
high={66}
low={33}
label={percentMemLabel}
title={`${Tr(T.AllocatedMemory)}`}
/>

6
src/fireedge/src/client/components/Cards/ProvisionCard.js
View File

@ -47,8 +47,6 @@ const ProvisionCard = memo(
TEMPLATE: { BODY = {} },
} = value
const IMAGES_URL = isProvider ? PROVIDER_IMAGES_URL : PROVISION_IMAGES_URL
const stateInfo = PROVISIONS_STATES[BODY.state]
const image = propImage ?? BODY?.image
@ -57,8 +55,10 @@ const ProvisionCard = memo(
const imageUrl = useMemo(() => {
if (!image) return DEFAULT_IMAGE
const IMAGES_URL = isProvider ? PROVIDER_IMAGES_URL : PROVISION_IMAGES_URL
return isExternalImage ? image : `${IMAGES_URL}/${image}`
}, [isExternalImage])
}, [isExternalImage, isProvider, image])
return (
<SelectCard

19
src/fireedge/src/client/components/Cards/ProvisionTemplateCard.js
View File

@ -24,20 +24,25 @@ import {
import { SelectCard } from 'client/components/Cards'
import Image from 'client/components/Image'
import { isExternalURL } from 'client/utils'
import { PROVIDER_IMAGES_URL, PROVISION_IMAGES_URL } from 'client/constants'
import {
PROVIDER_IMAGES_URL,
PROVISION_IMAGES_URL,
DEFAULT_IMAGE,
} from 'client/constants'
const ProvisionTemplateCard = memo(
({ value, image, isProvider, isSelected, isValid, handleClick }) => {
const { description, name } = value
const IMAGES_URL = isProvider ? PROVIDER_IMAGES_URL : PROVISION_IMAGES_URL
const isExternalImage = useMemo(() => isExternalURL(image), [image])
const imageUrl = useMemo(
() => (isExternalImage ? image : `${IMAGES_URL}/${image}`),
[isExternalImage]
)
const imageUrl = useMemo(() => {
if (!image) return DEFAULT_IMAGE
const IMAGES_URL = isProvider ? PROVIDER_IMAGES_URL : PROVISION_IMAGES_URL
return isExternalImage ? image : `${IMAGES_URL}/${image}`
}, [isExternalImage, isProvider, image])
return (
<SelectCard

4
src/fireedge/src/client/components/Cards/VirtualMachineCard.js
View File

@ -59,11 +59,9 @@ const VirtualMachineCard = memo(
return (
<div {...rootProps} data-cy={`vm-${ID}`}>
<div>
<StatusCircle color={stateColor} tooltip={stateName} />
</div>
<div className={classes.main}>
<div className={classes.title}>
<StatusCircle color={stateColor} tooltip={stateName} />
<Typography noWrap component="span">
{NAME}
</Typography>

2
src/fireedge/src/client/components/Forms/FormWithSchema.js
View File

@ -145,7 +145,7 @@ FormWithSchema.propTypes = {
PropTypes.func,
PropTypes.arrayOf(PropTypes.object),
]),
legend: PropTypes.string,
legend: PropTypes.any,
legendTooltip: PropTypes.string,
rootProps: PropTypes.object,
className: PropTypes.string,

2
src/fireedge/src/client/components/Forms/Legend.js
View File

@ -43,7 +43,7 @@ const Legend = memo(
)
Legend.propTypes = {
title: PropTypes.string,
title: PropTypes.any,
tooltip: PropTypes.string,
}

52
src/fireedge/src/client/components/Status/LinearProgressWithLabel.js
View File

@ -16,30 +16,48 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { Typography, LinearProgress } from '@mui/material'
import withStyles from '@mui/styles/withStyles'
import {
styled,
Typography,
LinearProgress,
linearProgressClasses,
} from '@mui/material'
const BorderLinearProgress = withStyles(({ palette }) => ({
root: {
height: 15,
const getRangeColor = ({ value, high, low, palette }) => {
if (low > value) return palette.success.main
if (low < value && value < high) return palette.warning.main
if (value > high) return palette.error.main
}
const BorderLinearProgress = styled(LinearProgress)(
({ theme: { palette }, value, high, low }) => ({
height: 8,
borderRadius: 5,
},
colorPrimary: {
backgroundColor: palette.grey[palette.mode === 'light' ? 400 : 700],
},
bar: {
borderRadius: 5,
backgroundColor: palette.primary.main,
},
}))(LinearProgress)
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: palette.grey[palette.mode === 'light' ? 200 : 800],
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 5,
backgroundColor:
high || low
? getRangeColor({ value, high, low, palette })
: palette.secondary.main,
},
})
)
const LinearProgressWithLabel = memo(
({ value, label, title }) => (
({ value, high, low, label, title }) => (
<div style={{ textAlign: 'end' }} title={title}>
<Typography component="span" variant="body2" noWrap>
{label}
</Typography>
<BorderLinearProgress variant="determinate" value={value} />
<BorderLinearProgress
variant="determinate"
value={value}
high={high}
low={low}
/>
</div>
),
(prev, next) => prev.value === next.value && prev.label === next.label
@ -47,6 +65,8 @@ const LinearProgressWithLabel = memo(
LinearProgressWithLabel.propTypes = {
value: PropTypes.number.isRequired,
low: PropTypes.number,
high: PropTypes.number,
label: PropTypes.string.isRequired,
title: PropTypes.string,
}

4
src/fireedge/src/client/components/Tables/Images/row.js
View File

@ -53,11 +53,9 @@ const Row = ({ original, value, ...props }) => {
return (
<div {...props} data-cy={`image-${ID}`}>
<div>
<StatusCircle color={stateColor} tooltip={stateName} />
</div>
<div className={classes.main}>
<div className={classes.title}>
<StatusCircle color={stateColor} tooltip={stateName} />
<Typography component="span" data-cy="name">
{NAME}
</Typography>

4
src/fireedge/src/client/components/Tables/MarketplaceApps/row.js
View File

@ -49,11 +49,9 @@ const Row = ({ original, value, ...props }) => {
return (
<div {...props} data-cy={`app-${ID}`}>
<div>
<StatusCircle color={stateColor} tooltip={stateName} />
</div>
<div className={classes.main}>
<div className={classes.title}>
<StatusCircle color={stateColor} tooltip={stateName} />
<Typography component="span">{NAME}</Typography>
{LOCK && <Lock />}
<span className={classes.labels}>

4
src/fireedge/src/client/components/Tables/Marketplaces/row.js
View File

@ -40,11 +40,9 @@ const Row = ({ original, value, ...props }) => {
return (
<div {...props}>
<div>
<StatusCircle color={stateColor} tooltip={stateName} />
</div>
<div className={classes.main}>
<div className={classes.title}>
<StatusCircle color={stateColor} tooltip={stateName} />
<Typography component="span">{NAME}</Typography>
<span className={classes.labels}>
<StatusChip text={MARKET_MAD} />

4
src/fireedge/src/client/components/Tables/Zones/row.js
View File

@ -32,11 +32,9 @@ const Row = ({ original, value, ...props }) => {
return (
<div {...props}>
<div>
<StatusCircle color={stateColor} tooltip={stateName} />
</div>
<div className={classes.main}>
<div className={classes.title}>
<StatusCircle color={stateColor} tooltip={stateName} />
<Typography component="span">{NAME}</Typography>
</div>
<div className={classes.caption}>

5
src/fireedge/src/client/components/Tables/styles.js
View File

@ -76,6 +76,11 @@ export const rowStyles = makeStyles(
flexBasis: '100%',
},
},
captionItem: {
display: 'flex',
gap: '0.5em',
alignItems: 'center',
},
secondary: {
width: '25%',
flexShrink: 0,

6
src/fireedge/src/client/containers/Settings/ConfigurationUI/schema.js
View File

@ -25,7 +25,7 @@ import {
} from 'client/constants'
const SCHEME_FIELD = {
name: 'FIREEDGE.SCHEME',
name: 'SCHEME',
label: T.Schema,
type: INPUT_TYPES.SELECT,
values: [
@ -41,7 +41,7 @@ const SCHEME_FIELD = {
}
const LANG_FIELD = {
name: 'FIREEDGE.LANG',
name: 'LANG',
label: T.Language,
type: INPUT_TYPES.SELECT,
values: () =>
@ -58,7 +58,7 @@ const LANG_FIELD = {
}
const DISABLE_ANIMATIONS_FIELD = {
name: 'FIREEDGE.DISABLE_ANIMATIONS',
name: 'DISABLE_ANIMATIONS',
label: T.DisableDashboardAnimations,
type: INPUT_TYPES.CHECKBOX,
validation: boolean()