web: consistent font sizes on console page and PF4 for task summary

PF4 has highlighted to me we have a range of different font sizes in
the "results" and "console" tab.  I think this stands out a lot more
now because you have the header section with consistent font sizes,
then we start shrinking various things below that.

This removes the Panel font-sizes from CSS so we just keep the
defaults, which to my eye look good.

However, Panel's aren't in PF4, so I've reword the results page to use
Cards.

The host/task summary card is the same generally, but has some bubble
labels and I think the colors make more sense now (green for OK, for
example).  Icons remain the same, but instead of hiding what the value
is in a tool-tip it is included in the label.  I also moved it to be
first always, as it is supposed to be an overview.

If there is are task failures, they are in cards too.  Again this is
basically the same; but I put the host it fails on in a bubble that
matches the "failed" bubble from the summary for consistency, and made
the title a bit clearer explaining what follows is the failed task
output.

I've also renamed the tab title "Task Summary", which to me conveys
more exact info than just "Results" which could be all sorts of
things.

Change-Id: I7b56efbfc9c25872e399853045e9d08f38a0a3bb

3 files changed, 64 insertions, 45 deletions

diff --git a/web/src/containers/build/BuildOutput.jsx b/web/src/containers/build/BuildOutput.jsx
index ae9d08af8..c36882434 100644
--- a/web/src/containers/build/BuildOutput.jsx
+++ b/web/src/containers/build/BuildOutput.jsx
@@ -15,12 +15,26 @@
 import * as React from 'react'
 import { Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Panel } from 'react-bootstrap'
 import {
-  Icon,
-  ListView,
-} from 'patternfly-react'
+    Card,
+    CardBody,
+    CardHeader,
+    DataList,
+    DataListItem,
+    DataListItemRow,
+    DataListItemCells,
+    DataListCell,
+    Label,
+    Flex,
+    FlexItem,
+} from '@patternfly/react-core'
 
+import {
+    CheckCircleIcon,
+    InfoCircleIcon,
+    TimesIcon,
+    TimesCircleIcon,
+} from '@patternfly/react-icons'
 
 class BuildOutput extends React.Component {
   static propTypes = {
@@ -28,38 +42,53 @@ class BuildOutput extends React.Component {
   }
 
   renderHosts (hosts) {
-    return (
-      <ListView>
-        {Object.entries(hosts).map(([host, values]) => (
-          <ListView.Item
-            key={host}
-            heading={host}
-            additionalInfo={[
-              <ListView.InfoItem key="ok" title="Task OK">
-                <Icon type='pf' name='info' />
-                <strong>{values.ok}</strong>
-              </ListView.InfoItem>,
-              <ListView.InfoItem key="changed" title="Task changed">
-                <Icon type='pf' name='ok' />
-                <strong>{values.changed}</strong>
-              </ListView.InfoItem>,
-              <ListView.InfoItem key="fail" title="Task failure">
-                <Icon type='pf' name='error-circle-o' />
-                <strong>{values.failures}</strong>
-              </ListView.InfoItem>
-            ]}
-          />
-        ))}
-      </ListView>
-    )
+      return (
+        <Card>
+          <CardHeader>
+            <strong>Task run summary</strong>
+          </CardHeader>
+          <CardBody>
+            <DataList aria-label="Build Results">
+              {Object.entries(hosts).map(([host, values]) => (
+                <DataListItem key={host} aria-label="Host">
+                  <DataListItemRow>
+                    <DataListItemCells
+                      dataListCells={[
+                        <DataListCell key={host + '.name'}>{host} </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>
+                        </DataListCell>
+                      ]}
+                    />
+                  </DataListItemRow>
+                </DataListItem>
+              ))}
+            </DataList>
+          </CardBody>
+        </Card>
+      )
   }
 
   renderFailedTask (host, task) {
     const max_lines = 42
     return (
-      <Panel key={host + task.zuul_log_id}>
-        <Panel.Heading>{host}: {task.name}</Panel.Heading>
-        <Panel.Body>
+      <Card key={host + task.zuul_log_id}>
+          <CardHeader>
+            <TimesIcon style={{ color: 'var(--pf-global--danger-color--100)' }}/>
+            &nbsp;Task&nbsp;<strong>{task.name}</strong>&nbsp;
+            failed running on host&nbsp;<strong>{host}</strong>
+          </CardHeader>
+        <CardBody>
           {task.invocation && task.invocation.module_args &&
            task.invocation.module_args._raw_params && (
              <pre key="cmd" title="cmd" className={`${'cmd'}`}>
@@ -99,8 +128,8 @@ class BuildOutput extends React.Component {
             </pre>
             </Fragment>
           )}
-        </Panel.Body>
-      </Panel>
+        </CardBody>
+      </Card>
     )
   }
 
@@ -108,16 +137,11 @@ class BuildOutput extends React.Component {
     const { output } = this.props
     return (
       <React.Fragment>
-        <br />
-        <div key="tasks">
+          {this.renderHosts(output)}
           {Object.entries(output)
            .filter(([, values]) => values.failed.length > 0)
            .map(([host, values]) => (values.failed.map(failed => (
              this.renderFailedTask(host, failed)))))}
-        </div>
-        <div key="hosts">
-          {this.renderHosts(output)}
-        </div>
       </React.Fragment>
     )
   }
diff --git a/web/src/index.css b/web/src/index.css
index 8f2ba8a5e..83c73b613 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -297,7 +297,6 @@ pre.version {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
-    font-size: 14px;
 }
 .zuul-console .list-view-pf-expand
 {
@@ -309,14 +308,10 @@ pre.version {
 }
 .zuul-console .list-group-item-heading
 {
-    line-height: 16px;
-    font-size: 14px;
     margin-bottom: 0;
 }
 .zuul-console .list-group-item-text
 {
-    line-height: 16px;
-    font-size: 14px;
     margin-bottom: 0;
 }
 .zuul-console .task-skipped
diff --git a/web/src/pages/Build.jsx b/web/src/pages/Build.jsx
index 6384eeb2d..3ac98a462 100644
--- a/web/src/pages/Build.jsx
+++ b/web/src/pages/Build.jsx
@@ -213,7 +213,7 @@ class BuildPage extends React.Component {
                   <TabTitleIcon>
                     <PollIcon />
                   </TabTitleIcon>
-                  <TabTitleText>Results</TabTitleText>
+                  <TabTitleText>Task Summary</TabTitleText>
                 </>
               }
             >