Add files and hosts components for a playbook

Change-Id: I3c7d1ce1be1bcc3564ad9073d3c6c2095ec085a0

src/playbooks/Playbook.js

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import { Row, Col, ListView, Icon } from "patternfly-react";
 import { Link } from "react-router-dom";
 import PlaybookArgs from "./PlaybookArgs";
+import PlaybookHosts from "./PlaybookHosts";
+import PlaybookFiles from "./PlaybookFiles";
 
 export default class Playbook extends Component {
   constructor(props) {
@@ -123,11 +125,9 @@ export default class Playbook extends Component {
       >
         <Row>
           <Col xs={12} sm={8} smOffset={2} md={6} mdOffset={3}>
-            {selection === "args" ? (
-              <PlaybookArgs playbook={playbook} />
-            ) : (
-              selection
-            )}
+            {selection === "args" && <PlaybookArgs playbook={playbook} />}
+            {selection === "hosts" && <PlaybookHosts playbook={playbook} />}
+            {selection === "files" && <PlaybookFiles playbook={playbook} />}
           </Col>
         </Row>
       </ListView.Item>

src/playbooks/PlaybookArgs.js

@@ -54,7 +54,6 @@ export default class PlaybookArgs extends Component {
     const filteredArgs = args.filter(
       arg => arg.toLowerCase().indexOf(search.toLowerCase()) !== -1
     );
-    console.log(search);
     return (
       <div className="table-response">
         <div className="dataTables_header">

src/playbooks/PlaybookFiles.js

@@ -0,0 +1,79 @@
+import React, { Component } from "react";
+import { Button, Icon, Modal } from "patternfly-react";
+
+export default class PlaybookFiles extends Component {
+  state = {
+    showModal: false,
+    filePath: null,
+    fileContent: null
+  };
+
+  close = () => {
+    this.setState({ showModal: false });
+  };
+
+  render() {
+    const { playbook } = this.props;
+    const { showModal, filePath, fileContent } = this.state;
+    return (
+      <div className="table-response">
+        <Modal show={showModal} onHide={this.close} bsSize="large">
+          <Modal.Header>
+            <button
+              className="close"
+              onClick={this.close}
+              aria-hidden="true"
+              aria-label="Close"
+            >
+              <Icon type="pf" name="close" />
+            </button>
+            <Modal.Title>{filePath}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <pre>
+              <code>{fileContent}</code>
+            </pre>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button
+              bsStyle="default"
+              className="btn-cancel"
+              onClick={this.close}
+            >
+              close
+            </Button>
+          </Modal.Footer>
+        </Modal>
+        <table className="table table-striped table-bordered table-hover">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {playbook.files.map(file => (
+              <tr key={file.id}>
+                <td>{file.path}</td>
+                <td className="text-center">
+                  <Button
+                    bsStyle="primary"
+                    onClick={() =>
+                      this.setState({
+                        showModal: true,
+                        filePath: file.path,
+                        fileContent: file.content
+                      })
+                    }
+                  >
+                    <Icon name="eye" />
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}

src/playbooks/PlaybookHosts.js

@@ -0,0 +1,80 @@
+import React, { Component } from "react";
+import { OverlayTrigger, Tooltip, Icon } from "patternfly-react";
+
+export class HostsHelpIcon extends Component {
+  render() {
+    return (
+      <span style={{ float: "right" }}>
+        <OverlayTrigger
+          overlay={
+            <Tooltip id="tooltip">
+              <div>
+                <h3>Tips: Hosts</h3>
+                <hr />
+                <p>
+                  This panel contains all the hosts involved in the playbook.
+                </p>
+              </div>
+            </Tooltip>
+          }
+          placement="bottom"
+        >
+          <Icon name="question-circle" />
+        </OverlayTrigger>
+      </span>
+    );
+  }
+}
+
+export default class PlaybookHosts extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      search: ""
+    };
+  }
+
+  render() {
+    const { playbook } = this.props;
+    const { search } = this.state;
+    const filteredHosts = playbook.hosts.filter(
+      host => host.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
+    );
+    return (
+      <div className="table-response">
+        <div className="dataTables_header">
+          <div className="dataTables_filter">
+            <input
+              className="form-control"
+              placeholder="Search a host"
+              type="search"
+              value={search}
+              onChange={e => this.setState({ search: e.target.value })}
+            />
+          </div>
+          <div className="dataTables_info">
+            Showing <b>{filteredHosts.length}</b> of{" "}
+            <b>{playbook.hosts.length}</b> hosts
+            <HostsHelpIcon />
+          </div>
+        </div>
+        <table className="table table-striped table-bordered table-hover">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Alias</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredHosts.map(host => (
+              <tr key={host.id}>
+                <td>{host.name}</td>
+                <td>{host.alias}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}