web: task summary: make more consistent with other tabs

After converting the console to PF4 with
Ie480deb046502879542e41844e919a362203e25d, flipping back through the
tabs I notied some inconsistency with the "Task Summary" tab.

Firstly this puts a <br> so it is vertically aligned the same as the
other tabs.  We remove the card around it because nothing else uses
this; now it is a DataList that is the same as the console page.  CSS
is added to remove the top line which is also inconsistent with the
other tabs.

We convert the node to a chip with a node icon as used elsewhere.

Future work would probably be to put the failed tasks as expandable
content in each node's summary line.

Change-Id: Ic134cf560cc78540f6af71964ac366f89ca594d9

2 files changed, 33 insertions, 10 deletions

diff --git a/web/src/containers/build/BuildOutput.jsx b/web/src/containers/build/BuildOutput.jsx
index 8c064f860..2066852da 100644
--- a/web/src/containers/build/BuildOutput.jsx
+++ b/web/src/containers/build/BuildOutput.jsx
@@ -20,6 +20,7 @@ import {
   Card,
   CardBody,
   CardHeader,
+  Chip,
   DataList,
   DataListItem,
   DataListItemRow,
@@ -32,6 +33,7 @@ import {
 
 import {
   CheckCircleIcon,
+  ContainerNodeIcon,
   InfoCircleIcon,
   TimesIcon,
   TimesCircleIcon,
@@ -44,19 +46,23 @@ class BuildOutput extends React.Component {
 
   renderHosts (hosts) {
     return (
-      <Card>
-        <CardHeader>
-          <strong>Task run summary</strong>
-        </CardHeader>
-        <CardBody>
-          <DataList aria-label="Build Results">
+      <>
+        <br />
+        <div className={'zuul-task-summary'}>
+          <DataList aria-label="Build Results" isCompact={true}>
             {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'}>
+                      <DataListCell key={host + '.name'}>
+                        <Chip isReadOnly={true} textMaxWidth='50ch'>
+                          <span style={{ fontSize: 'var(--pf-global--FontSize--md)' }}>
+                            <ContainerNodeIcon />&nbsp;{host}
+                          </span>
+                        </Chip>
+                      </DataListCell>,
+                      <DataListCell key={host + '.data'} >
                         <Flex>
                           <FlexItem>
                             <Label color="green" icon={<CheckCircleIcon />}>{values.ok} OK</Label>
@@ -75,8 +81,8 @@ class BuildOutput extends React.Component {
               </DataListItem>
             ))}
           </DataList>
-        </CardBody>
-      </Card>
+        </div>
+      </>
     )
   }
 
@@ -139,6 +145,7 @@ class BuildOutput extends React.Component {
     return (
       <React.Fragment>
         {this.renderHosts(output)}
+        <br />
         {Object.entries(output)
           .filter(([, values]) => values.failed.length > 0)
           .map(([host, values]) => (values.failed.map(failed => (
diff --git a/web/src/index.css b/web/src/index.css
index b701255b8..b1dfc73f0 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -402,3 +402,19 @@ details.foldable[open] summary::before {
 .zuul-job-graph text {
     font-size: 12px;
 }
+
+/* task summary */
+
+.zuul-task-summary .pf-c-data-list {
+    border: none
+}
+
+.zuul-task-summary .pf-c-data-list__item:hover
+{
+    background: var(--pf-global--BackgroundColor--light-200);
+}
+
+.zuul-task-summary .pf-c-data-list__item:hover::before
+{
+    background: var(--pf-global--active-color--400);
+}