recordsansible/ara-web
Code Issues Proposed changes

Fix visual glitches

Browse Source 
Change-Id: I4f2875202f1a45445157adb4a9a0e18bc2e0afa8
This commit is contained in:
Guillaume Vincent 2019-05-31 12:10:28 +02:00
parent ce1e66dc2e
commit 06e13e80fd
6 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/playbooks/PlaybookPage.js
View File

@ -2,7 +2,6 @@ import React, { Component } from "react";
import {
Card,
CardHeader,
CardBody,
PageSection,
PageSectionVariants
} from "@patternfly/react-core";
@ -38,40 +37,38 @@ 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>
<th>Name</th>
<th>OK</th>
<th>CHANGED</th>
<th>FAILED</th>
<th>SKIPPED</th>
<th>UNREACHABLE</th>
<table className="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
<thead>
<tr>
<th>Name</th>
<th>OK</th>
<th>CHANGED</th>
<th>FAILED</th>
<th>SKIPPED</th>
<th>UNREACHABLE</th>
</tr>
</thead>
<tbody>
{playbook.hosts.map(host => (
<tr key={host.id}>
<td data-label="Name">{host.name}</td>
<td data-label="OK">{host.ok}</td>
<td data-label="CHANGED">{host.changed}</td>
<td data-label="FAILED">{host.failed}</td>
<td data-label="SKIPPED">{host.skipped}</td>
<td data-label="UNREACHABLE">{host.unreachable}</td>
</tr>
</thead>
<tbody>
{playbook.hosts.map(host => (
<tr key={host.id}>
<td data-label="Name">{host.name}</td>
<td data-label="OK">{host.ok}</td>
<td data-label="CHANGED">{host.changed}</td>
<td data-label="FAILED">{host.failed}</td>
<td data-label="SKIPPED">{host.skipped}</td>
<td data-label="UNREACHABLE">{host.unreachable}</td>
</tr>
))}
</tbody>
</table>
</CardBody>
))}
</tbody>
</table>
</Card>
<Card>
<CardHeader>Plays</CardHeader>

21
src/playbooks/PlaybookSummary.js
View File

@ -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>

19
src/tasks/TaskRow.js
View File

@ -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>
);

2
src/tasks/Tasks.js
View File

@ -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"
>

3
src/tasks/task.js
View File

@ -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;
},
{

6
src/tasks/task.test.js
View File

@ -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);