1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-18 02:50:09 +03:00

M #~: Refactor status chips component

This commit is contained in:
Sergio Betanzos 2021-06-09 11:46:39 +02:00
parent a4e6e50a7b
commit ebdc1dc422
No known key found for this signature in database
GPG Key ID: E3E704F097737136
8 changed files with 19 additions and 20 deletions

View File

@ -51,7 +51,7 @@ const DatastoreCard = memo(
<Typography title={NAME} noWrap component='span'>
{NAME}
</Typography>
<StatusChip stateColor={'#c6c6c6'}>{type.name}</StatusChip>
<StatusChip stateColor={'#c6c6c6'} text={type.name} />
</span>
}
subheader={`#${ID}`}

View File

@ -56,7 +56,7 @@ const HostCard = memo(
<Typography title={NAME} noWrap component='span'>
{NAME}
</Typography>
<StatusChip stateColor={'#c6c6c6'}>{mad}</StatusChip>
<StatusChip stateColor={'#c6c6c6'} text={mad} />
</span>
}
subheader={`#${ID}`}

View File

@ -28,6 +28,7 @@ const SelectCard = memo(({
isSelected,
mediaProps,
observerOff,
skeletonHeight,
stylesProps,
subheader,
title
@ -129,7 +130,7 @@ const SelectCard = memo(({
<Skeleton
variant="rect"
width="100%"
height={140}
height={skeletonHeight}
/>
)}
</ConditionalWrap>
@ -182,7 +183,8 @@ SelectCard.propTypes = {
PropTypes.string
]),
dataCy: PropTypes.string,
disableFilterImage: PropTypes.bool
disableFilterImage: PropTypes.bool,
skeletonHeight: PropTypes.number
}
SelectCard.defaultProps = {
@ -202,7 +204,8 @@ SelectCard.defaultProps = {
observerOff: false,
stylesProps: undefined,
subheader: undefined,
title: undefined
title: undefined,
skeletonHeight: 140
}
SelectCard.displayName = 'SelectCard'

View File

@ -16,6 +16,7 @@ const VirtualMachineCard = memo(
action={actions?.map(action =>
<Action key={action?.cy} {...action} />
)}
skeletonHeight={75}
dataCy={`vm-${ID}`}
handleClick={handleClick}
icon={(

View File

@ -21,29 +21,28 @@ const useStyles = makeStyles(theme => {
}
})
const StatusChip = memo(({ stateColor, children }) => {
const StatusChip = memo(({ stateColor, text }) => {
const classes = useStyles({ stateColor })
return (
<Typography component="span" className={classes.root}>
{children}
{text}
</Typography>
)
},
(prev, next) => prev.stateColor === next.stateColor
(prev, next) =>
prev.stateColor === next.stateColor &&
prev.text === next.text
)
StatusChip.propTypes = {
stateColor: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node
])
text: PropTypes.string
}
StatusChip.defaultProps = {
stateColor: undefined,
children: ''
text: ''
}
StatusChip.displayName = 'StatusChip'

View File

@ -54,9 +54,7 @@ const InfoTab = memo(({ info }) => {
</ListItem>
<ListItem>
<Typography>{Tr(T.State)}</Typography>
<StatusChip stateColor={stateInfo?.color}>
{stateInfo?.name}
</StatusChip>
<StatusChip stateColor={stateInfo?.color} text={stateInfo?.name} />
</ListItem>
<ListItem>
<Typography>{Tr(T.ReadyStatusGate)}</Typography>

View File

@ -65,9 +65,7 @@ const Info = memo(({ data = {} }) => {
</ListItem>
<ListItem>
<Typography>{Tr(T.State)}</Typography>
<StatusChip stateColor={stateInfo?.color}>
{stateInfo?.name}
</StatusChip>
<StatusChip stateColor={stateInfo?.color} text={stateInfo?.name} />
</ListItem>
</List>
</Paper>

View File

@ -50,7 +50,7 @@ const TestApi = () => {
>
<MenuItem value="">{Tr(T.None)}</MenuItem>
{useMemo(() =>
Object.keys(Commands)?.map(
Object.keys(Commands)?.sort().map(
commandName => (
<MenuItem
key={`selector-request-${commandName}`}