diff options
| author | Zuul <zuul@review.opendev.org> | 2022-10-08 11:03:14 +0000 |
|---|---|---|
| committer | Gerrit Code Review <review@openstack.org> | 2022-10-08 11:03:14 +0000 |
| commit | 16e526064e19db3787a5967fd85f7719f01bdd81 (patch) | |
| tree | 2aa4756f912e92c487e976479c59d1bdf4ed5f7a | |
| parent | 2593a396d9d880a3a16580de8af3e6a3845b21ce (diff) | |
| parent | b688ab883e9c112829c05ed1717e8f29ccd5479b (diff) | |
| download | zuul-16e526064e19db3787a5967fd85f7719f01bdd81.tar.gz | |
Merge "web: Put status icon into one label"
| -rw-r--r-- | web/src/containers/build/Console.jsx | 51 |
1 files changed, 29 insertions, 22 deletions
diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx index f24d9cbc8..9cd10df92 100644 --- a/web/src/containers/build/Console.jsx +++ b/web/src/containers/build/Console.jsx @@ -29,6 +29,7 @@ import { DataListItemCells, DataListToggle, DataListContent, + Divider, Flex, FlexItem, Label, @@ -231,35 +232,39 @@ class HostTask extends React.Component { <DataListCell key='name' width={4}>{name}</DataListCell> ) - let label = null + let labelColor = null + let labelString = null + if (this.state.failed) { - label = <Label color='red' onClick={this.open} - style={{cursor: 'pointer'}}>FAILED</Label> + labelColor = 'red' + labelString = 'Failed' } else if (this.state.changed) { - label = <Label color='orange' onClick={this.open} - style={{cursor: 'pointer'}}>CHANGED</Label> + labelColor = 'orange' + labelString = 'Changed' } else if (this.state.skipped) { - label = <Label color='grey' onClick={this.open} - style={{cursor: 'pointer'}}>SKIPPED</Label> + labelColor = 'grey' + labelString = 'Skipped' } else if (this.state.ok) { - label = <Label color='green' onClick={this.open} - style={{cursor: 'pointer'}}>OK</Label> + labelColor = 'green' + labelString = 'OK' } dataListCells.push( <DataListCell key='state'> - <Flex> - <FlexItem> - <Tooltip content={<div>Click for details</div>}> - <SearchPlusIcon style={{cursor: 'pointer'}} onClick={this.open} /> - </Tooltip> - </FlexItem> - <FlexItem> - <Tooltip content={<div>Click for details</div>}> - {label} - </Tooltip> - </FlexItem> - </Flex> + <Tooltip content={<div>Click for details</div>}> + <Label color={labelColor} onClick={this.open} + style={{cursor: 'pointer'}}> + <Flex flexWrap={{default: 'nowrap' }}> + <FlexItem style={{minWidth: '7ch'}}> + {labelString} + </FlexItem> + <Divider align={{default: 'alignRight'}} orientation={{default: 'vertical'}} /> + <FlexItem> + <SearchPlusIcon color='var(--pf-global--Color--200)' style={{cursor: 'pointer'}} /> + </FlexItem> + </Flex> + </Label> + </Tooltip> </DataListCell>) dataListCells.push( @@ -325,7 +330,9 @@ class HostTask extends React.Component { } const modalDescription = <Flex> - <FlexItem>{label}</FlexItem> + <FlexItem> + <Label color={labelColor}>{labelString}</Label> + </FlexItem> <FlexItem> <Chip isReadOnly={true} textMaxWidth='50ch'> <span style={{ fontSize: 'var(--pf-global--FontSize--md)' }}> |