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
This commit is contained in:
parent
f96c0e39c9
commit
fb02578e77
@ -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>
|
||||
]}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user