mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-19 06:50:07 +03:00
M #~: Refactor status chips component
This commit is contained in:
parent
a4e6e50a7b
commit
ebdc1dc422
src/fireedge/src/client
components
containers
@ -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}`}
|
||||
|
@ -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}`}
|
||||
|
@ -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'
|
||||
|
@ -16,6 +16,7 @@ const VirtualMachineCard = memo(
|
||||
action={actions?.map(action =>
|
||||
<Action key={action?.cy} {...action} />
|
||||
)}
|
||||
skeletonHeight={75}
|
||||
dataCy={`vm-${ID}`}
|
||||
handleClick={handleClick}
|
||||
icon={(
|
||||
|
@ -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'
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}`}
|
||||
|
Loading…
x
Reference in New Issue
Block a user