Fix visual glitches

Change-Id: I4f2875202f1a45445157adb4a9a0e18bc2e0afa8

src/playbooks/PlaybookPage.js

@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import {
   Card,
   CardHeader,
-  CardBody,
   PageSection,
   PageSectionVariants
 } from "@patternfly/react-core";
@@ -38,15 +37,14 @@ export class PlaybookPage extends Component {
       return <Page404 />;
     }
     return (
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection variant={PageSectionVariants.default}>
         <PlaybookSummary
           key={playbook.id}
           playbook={playbook}
           history={history}
         />
-        <Card>
+        <Card className="pf-u-mb-xs">
           <CardHeader>Hosts</CardHeader>
-          <CardBody>
           <table className="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
             <thead>
               <tr>
@@ -71,7 +69,6 @@ export class PlaybookPage extends Component {
               ))}
             </tbody>
           </table>
-          </CardBody>
         </Card>
         <Card>
           <CardHeader>Plays</CardHeader>

src/playbooks/PlaybookSummary.js

@@ -4,7 +4,9 @@ import { Card, CardBody, Label } from "@patternfly/react-core";
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
-  PauseCircleIcon
+  PauseCircleIcon,
+  CalendarAltIcon,
+  ClockIcon
 } from "@patternfly/react-icons";
 import {
   global_danger_color_100,
@@ -155,9 +157,10 @@ export default class Playbook extends Component {
             <PlaybookContent>
               <StatusAndName>
                 <StatusIcon status={playbook.status} />
-                {new Date(playbook.started).toUTCString()}
                 <h1 className="pf-c-title pf-m-xl pf-u-ml-md">
-                  {(playbook.name ? playbook.name : playbook.path.split("/").slice(-1)[0])}
+                  {playbook.name
+                    ? playbook.name
+                    : playbook.path.split("/").slice(-1)[0]}
                 </h1>
               </StatusAndName>
               <PlaybookInfos>
@@ -182,11 +185,19 @@ export default class Playbook extends Component {
               </PlaybookInfos>
               <Labels>
                 {playbook.labels.map(label => (
-                  <Label className="pf-u-mr-md" isCompact>{label.name}</Label>
+                  <Label className="pf-u-mr-md" isCompact>
+                    {label.name}
+                  </Label>
                 ))}
               </Labels>
               <Duration>
-                <i className="fa fa-clock" />
+                <CalendarAltIcon />
+                <span className="pf-u-ml-sm">
+                  {new Date(playbook.started).toUTCString()}
+                </span>
+              </Duration>
+              <Duration>
+                <ClockIcon />
                 <span className="pf-u-ml-sm">
                   {Math.round(playbook.duration)} sec
                 </span>

src/tasks/TaskRow.js

@@ -78,9 +78,9 @@ export default class TaskRow extends Component {
           className={`pf-c-table__expandable-row ${isExpanded &&
             "pf-m-expanded"}`}
         >
-          <td colspan="5">
+          <td colspan="5" className="pf-u-p-0">
             <div
-              className={`pf-c-table__expandable-row-content pf-u-p-2xl ${isExpanded &&
+              className={`pf-c-table__expandable-row-content ${isExpanded &&
                 "pf-m-expanded"}`}
             >
               <table
@@ -90,16 +90,22 @@ export default class TaskRow extends Component {
                 <caption>Task results</caption>
                 <thead>
                   <tr>
+                    <th className="pf-u-text-align-center">Status</th>
                     <th className="pf-u-text-align-center">Host</th>
                     <th className="pf-u-text-align-center">Started</th>
                     <th className="pf-u-text-align-center">Ended</th>
                     <th className="pf-u-text-align-center">Duration</th>
-                    <th className="pf-u-text-align-center">Status</th>
                   </tr>
                 </thead>
                 <tbody>
                   {task.results.map(result => (
                     <tr>
+                      <td
+                        data-label="Status"
+                        className="pf-u-text-align-center"
+                      >
+                        <Status status={result.status}>{result.status}</Status>
+                      </td>
                       <td data-label="Host" className="pf-u-text-align-center">
                         {result.host.name}
                       </td>
@@ -118,19 +124,12 @@ export default class TaskRow extends Component {
                       >
                         {result.duration}
                       </td>
-                      <td
-                        data-label="Status"
-                        className="pf-u-text-align-center"
-                      >
-                        <Status status={result.status}>{result.status}</Status>
-                      </td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             </div>
           </td>
-          <td />
         </tr>
       </tbody>
     );

src/tasks/Tasks.js

@@ -6,7 +6,7 @@ export default class Tasks extends Component {
     const { tasks } = this.props;
     return (
       <table
-        className="pf-c-table pf-m-expandable"
+        className="pf-c-table pf-m-compact pf-m-expandable"
         role="grid"
         aria-label="Tasks table"
       >

src/tasks/task.js

@@ -4,7 +4,8 @@ function _getAveragesFromTask(task) {
     (acc, result) => {
       acc.statuses[result.status] += 1;
       acc.total_duration += parseFloat(result.duration);
-      acc.average_duration = acc.total_duration / results.length;
+      acc.average_duration =
+        Math.round((acc.total_duration * 100) / results.length) / 100;
       return acc;
     },
     {

src/tasks/task.test.js

@@ -100,7 +100,7 @@ test("extractTasksFromPlays", () => {
     {
       name: "Gathering Facts",
       action: "gather_facts",
-      average_duration: 1.702101,
+      average_duration: 1.7,
       statuses: {
         ok: 1,
         failed: 0,
@@ -125,7 +125,7 @@ test("extractTasksFromPlays", () => {
     {
       name: "Gathering Facts",
       action: "gather_facts",
-      average_duration: 1.296572,
+      average_duration: 1.3,
       statuses: {
         ok: 3,
         failed: 0,
@@ -161,7 +161,7 @@ test("extractTasksFromPlays", () => {
           ended: "2019-05-17T16:55:12.195753",
           status: "ok"
         }
-      ],
+      ]
     }
   ];
   expect(extractTasksFromPlays(plays)).toEqual(expectedTasks);