diff options
author | Ian Wienand <iwienand@redhat.com> | 2022-09-19 12:04:22 +1000 |
---|---|---|
committer | Ian Wienand <iwienand@redhat.com> | 2022-09-19 12:04:22 +1000 |
commit | fb02578e77ee872cd147d87ba5711960925da1d3 (patch) | |
tree | 7496d08e3074cb919fc600ea393b1144a350021e /web | |
parent | f96c0e39c93cb89067d9355c2b43450d48982080 (diff) | |
download | zuul-fb02578e77ee872cd147d87ba5711960925da1d3.tar.gz |
web: Simply task status results
Currently this displays the task OK, Changed and Failure(s) results in
a traffic-light format. I've been looking at the way some other
similar tools present this sort of info, and I think that a few things
stand out
- the orange for the "changed" status is a bit of a red-herring,
because it suggests a warning but really a changed task is as
"good" as an OK task.
- Secondly, the failure case doesn't stand out enough; failures are
going to be the cause of problems, but you get the same
traffic-light for hosts that ran successfully and failed.
- When nothing has failed, we show "0 failures" -- but that is pretty
much implied by things working. It's a bit redundant and puts up a
red box when there isn't a failure.
This proposes moving into a single tasks results label that is either
green for success, or red if there are failures. If there are no
failures, you just see the count of OK/Changed tasks -- if there are,
you'll also see the failed count.
Change-Id: Iebadc4ddb77209f69242ebc5ac46f2ae6d67789f
Diffstat (limited to 'web')
-rw-r--r-- | web/src/containers/build/BuildOutput.jsx | 45 |
1 files changed, 33 insertions, 12 deletions
diff --git a/web/src/containers/build/BuildOutput.jsx b/web/src/containers/build/BuildOutput.jsx index 4220bdd1a..1098ed2c7 100644 --- a/web/src/containers/build/BuildOutput.jsx +++ b/web/src/containers/build/BuildOutput.jsx @@ -26,6 +26,7 @@ import { DataListItemRow, DataListItemCells, DataListCell, + Divider, Label, Flex, FlexItem, @@ -34,11 +35,41 @@ import { import { CheckCircleIcon, ContainerNodeIcon, - InfoCircleIcon, TimesIcon, TimesCircleIcon, } from '@patternfly/react-icons' +class BuildOutputLabel extends React.Component { + static propTypes = { + ok: PropTypes.number, + changed: PropTypes.number, + failures: PropTypes.number, + } + + render() { + let color = this.props.failures ? 'red' : 'green' + let icon = this.props.failures ? <TimesCircleIcon /> : <CheckCircleIcon /> + let failures = this.props.failures ? ( + <> + <Divider orientation={{default: 'vertical'}} /> + <FlexItem><strong>{this.props.failures}</strong> Failure{this.props.failures > 1 ? 's' : ''}</FlexItem> + </> + ) : null + + return ( + <Label color={color} icon={icon}> + <Flex> + <FlexItem><strong>{this.props.ok}</strong> OK</FlexItem> + <Divider orientation={{default: 'vertical'}} /> + <FlexItem><strong>{this.props.changed}</strong> Changed</FlexItem> + { failures } + </Flex> + </Label> + ) + } +} + + class BuildOutput extends React.Component { static propTypes = { output: PropTypes.object, @@ -63,17 +94,7 @@ class BuildOutput extends React.Component { </Chip> </DataListCell>, <DataListCell key={host + '.data'} > - <Flex> - <FlexItem> - <Label color="green" icon={<CheckCircleIcon />}>{values.ok} OK</Label> - </FlexItem> - <FlexItem> - <Label color="orange" icon={<InfoCircleIcon />}>{values.changed} changed</Label> - </FlexItem> - <FlexItem> - <Label color="red" icon={<TimesCircleIcon />}>{values.failures} failed</Label> - </FlexItem> - </Flex> + <BuildOutputLabel ok={values.ok} changed={values.changed} failures={values.failures} /> </DataListCell> ]} /> |