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

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>
                     ]}
                   />