From bb4685eb09eb32fc5ec6ac8b0d9af2952fc7fdfe Mon Sep 17 00:00:00 2001 From: David Moreau Simard Date: Mon, 18 Mar 2019 17:32:12 -0400 Subject: [PATCH] Leverage refactored API for displaying playbook details Numbers for the summary are now provided, we no longer need to count them. We no longer need dedicated task actions (for now), remove them. In the playbook details, we now iterate through each play to print a table that reconciles tasks, results and hosts involved in that play. The design of the UI is not final and is mostly a proof of concept for the visualizing the refactored API. Depends-On: https://review.openstack.org/#/c/641136/ Change-Id: I27180fab04e1192516be6f12fee53c299f434fee --- package.json | 1 + src/playbooks/PlaybookContainer.js | 68 ++++++++++++++++++++++++++++-- src/playbooks/PlaybookSummary.js | 13 +++--- src/tasks/TasksContainer.js | 62 --------------------------- src/tasks/tasksActions.js | 9 ---- 5 files changed, 74 insertions(+), 79 deletions(-) delete mode 100644 src/tasks/TasksContainer.js delete mode 100644 src/tasks/tasksActions.js diff --git a/package.json b/package.json index d7937e7..5fb811f 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@patternfly/patternfly-next": "^1.0.175", "@patternfly/react-icons": "^3.5.0", "@patternfly/react-tokens": "^2.0.4", + "@patternfly/react-core": "^2.3.6", "axios": "^0.18.0", "braces": "^2.3.2", "react": "^16.8.4", diff --git a/src/playbooks/PlaybookContainer.js b/src/playbooks/PlaybookContainer.js index 565a8b0..273a396 100644 --- a/src/playbooks/PlaybookContainer.js +++ b/src/playbooks/PlaybookContainer.js @@ -1,9 +1,10 @@ import React, { Component } from "react"; +import { List, ListItem } from '@patternfly/react-core'; import { connect } from "react-redux"; import { isEmpty } from "lodash"; import { LoadingContainer, Container404 } from "../containers"; import { getPlaybook } from "./playbooksActions"; -import TasksContainer from "../tasks/TasksContainer"; + export class PlaybookContainer extends Component { state = { @@ -31,12 +32,73 @@ export class PlaybookContainer extends Component {
-

Tasks

+

Hosts

- + + + + + + + + + + + + + {playbook.hosts.map(host => ( + + + + + + + + + ))} + +
NameOKCHANGEDFAILEDSKIPPEDUNREACHABLE
{host.name}{host.ok}{host.changed}{host.failed}{host.skipped}{host.unreachable}
+
+
+

Plays

+
+ {playbook.plays.map(play => ( +
+

{play.name}

+ + Started: {play.started} + Ended: {play.ended} + Duration: {play.duration} + + + + + + + + + + + + + {play.tasks.map(task => + task.results.map(result => + + + + + + + + ))} + +
TaskHostActionDurationStatus
{task.name}{result.host.name}{task.action}{result.duration}{result.status}
+
+ ))} +
); } diff --git a/src/playbooks/PlaybookSummary.js b/src/playbooks/PlaybookSummary.js index 75a78a0..33a69a9 100644 --- a/src/playbooks/PlaybookSummary.js +++ b/src/playbooks/PlaybookSummary.js @@ -149,19 +149,22 @@ export default class Playbook extends Component { - {playbook.hosts.length} Hosts + {playbook.items.plays} Plays - {playbook.files.length} Files + {playbook.items.tasks} Tasks - {Object.keys(playbook.tasks).length} tasks + {playbook.items.results} Results - {Object.keys(playbook.plays).length} plays + {playbook.items.hosts} Hosts - {Object.keys(playbook.records).length} records + {playbook.items.files} Files + + + {playbook.items.records} Records diff --git a/src/tasks/TasksContainer.js b/src/tasks/TasksContainer.js deleted file mode 100644 index 969afb0..0000000 --- a/src/tasks/TasksContainer.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { Component } from "react"; -import { connect } from "react-redux"; -import { isEmpty } from "lodash"; -import { getTasks } from "./tasksActions"; - -export class TasksContainer extends Component { - state = { - isLoading: true, - tasks: [] - }; - - componentDidMount() { - const { playbook, getTasks } = this.props; - getTasks(playbook) - .then(response => this.setState({ tasks: response.data.results })) - .catch(error => console.log(error)) - .then(() => this.setState({ isLoading: false })); - } - - render() { - const { isLoading, tasks } = this.state; - if (isLoading) { - return null; - } - if (!isLoading && isEmpty(tasks)) { - return
no tasks for this playbook
; - } - return ( - - - - - - - - - - - {tasks.map(task => ( - - - - - - - ))} - -
NameActionDurationStatus
{task.name}{task.action}{task.duration}{task.status}
- ); - } -} - -function mapDispatchToProps(dispatch) { - return { - getTasks: playbook => dispatch(getTasks(playbook)) - }; -} - -export default connect( - null, - mapDispatchToProps -)(TasksContainer); diff --git a/src/tasks/tasksActions.js b/src/tasks/tasksActions.js deleted file mode 100644 index ad675bc..0000000 --- a/src/tasks/tasksActions.js +++ /dev/null @@ -1,9 +0,0 @@ -import axios from "axios"; - -export function getTasks(playbook) { - return (dispatch, getState) => { - const { apiURL } = getState().config; - return axios - .get(`${apiURL}/api/v1/tasks?playbook=${playbook.id}`); - }; -}