Add playbook parameters in playbook item

Change-Id: Ia258a4b8ed5be4376975c775828289d5f0cbc716

src/playbooks/Playbook.js

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
 import { Row, Col, ListView, Icon } from "patternfly-react";
+import { Link } from "react-router-dom";
+import PlaybookParameters from "./PlaybookParameters";
 
 export default class Playbook extends Component {
   constructor(props) {
@@ -41,9 +43,9 @@ export default class Playbook extends Component {
     return (
       <ListView.Item
         checkboxInput={
-          <a href="#">
+          <Link to={`/playbooks/${playbook.id}`} className="navbar-brand">
             <Icon name="link" />
-          </a>
+          </Link>
         }
         leftContent={LeftIcon}
         additionalInfo={[
@@ -80,14 +82,24 @@ export default class Playbook extends Component {
             <ListView.Icon name="clock-o" /> {Math.round(playbook.duration)} sec
           </span>
         }
-        heading={playbook.name ? playbook.name : playbook.file.path.split("/").slice(-1)[0]}
+        heading={
+          playbook.name
+            ? playbook.name
+            : playbook.file.path.split("/").slice(-1)[0]
+        }
         stacked={false}
         compoundExpand
         compoundExpanded={expanded}
         onCloseCompoundExpand={() => this.setState({ expanded: false })}
       >
         <Row>
-          <Col sm={11}>{selection}</Col>
+          <Col xs={12} sm={8} smOffset={2} md={6} mdOffset={3}>
+            {selection === "parameters" ? (
+              <PlaybookParameters playbook={playbook} />
+            ) : (
+              selection
+            )}
+          </Col>
         </Row>
       </ListView.Item>
     );

src/playbooks/PlaybookParameters.js

@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import { OverlayTrigger, Tooltip, Icon } from "patternfly-react";
+
+export class ParamatersHelpIcon extends Component {
+  render() {
+    return (
+      <span style={{ float: "right" }}>
+        <OverlayTrigger
+          overlay={
+            <Tooltip id="tooltip">
+              <div>
+                <h3>Tips: Parameters</h3>
+                <hr />
+                <p>
+                  This panel contains all the parameters and options passed to
+                  the ansible-playbook command.
+                </p>
+                <p>
+                  You can control which parameters ARA should ignore with the{" "}
+                  <code>ARA_IGNORE_PARAMETERS</code> configuration.
+                </p>
+              </div>
+            </Tooltip>
+          }
+          placement="bottom"
+        >
+          <Icon name="question-circle" />
+        </OverlayTrigger>
+      </span>
+    );
+  }
+}
+
+export default class PlaybookParameters extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      search: ""
+    };
+  }
+
+  _renderParameter = parameter => {
+    if (parameter instanceof Array) {
+      return parameter.join(", ");
+    } else {
+      return parameter;
+    }
+  };
+
+  render() {
+    const { playbook } = this.props;
+    const { search } = this.state;
+    const parameters = Object.keys(playbook.parameters);
+    const filteredParameters = parameters.filter(
+      parameter => parameter.toLowerCase().indexOf(search.toLowerCase()) !== -1
+    );
+    console.log(search);
+    return (
+      <div className="table-response">
+        <div className="dataTables_header">
+          <div className="dataTables_filter">
+            <input
+              className="form-control"
+              placeholder="Search a parameter"
+              type="search"
+              value={search}
+              onChange={e => this.setState({ search: e.target.value })}
+            />
+          </div>
+          <div className="dataTables_info">
+            Showing <b>{filteredParameters.length}</b> of{" "}
+            <b>{parameters.length}</b> parameters
+            <ParamatersHelpIcon />
+          </div>
+        </div>
+        <table className="table table-striped table-bordered table-hover">
+          <thead>
+            <tr>
+              <th>Parameter</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredParameters.map((parameter, i) => (
+              <tr key={i}>
+                <td>{parameter}</td>
+                <td>{this._renderParameter(playbook.parameters[parameter])}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}