From 408b38174a8cedc7f383923de32f9a6d9d27a725 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Wed, 3 Jul 2019 13:07:05 -0400
Subject: [PATCH] Add job output menu controls component

---
 .../src/screens/Job/JobOutput/JobOutput.jsx   | 14 ++++-
 .../Job/JobOutput/shared/MenuControls.jsx     | 59 +++++++++++++++++++
 .../src/screens/Job/JobOutput/shared/index.js |  1 +
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 awx/ui_next/src/screens/Job/JobOutput/shared/MenuControls.jsx
 create mode 100644 awx/ui_next/src/screens/Job/JobOutput/shared/index.js

diff --git a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
index 1dbdb581d6..dcae5a48dc 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
@@ -1,5 +1,12 @@
 import React, { Component } from 'react';
 import { CardBody } from '@patternfly/react-core';
+import MenuControls from './shared/MenuControls';
+import styled from 'styled-components';
+
+const OutputToolbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
 
 class JobOutput extends Component {
   render() {
@@ -7,7 +14,12 @@ class JobOutput extends Component {
 
     return (
       <CardBody>
-        <b>{job.name}</b>
+        <b>{job.name} - Heading and Job Stats placeholder</b> <br /> {/*Heading and Job Stats */}
+        <b>Host Status Bar placeholder</b> <br /> {/*Host Status Bar */}
+        <OutputToolbar> {/* Filter and Pagination */}
+          <b>Filter placeholder</b>
+          <MenuControls />
+        </OutputToolbar>
       </CardBody>
     );
   }
diff --git a/awx/ui_next/src/screens/Job/JobOutput/shared/MenuControls.jsx b/awx/ui_next/src/screens/Job/JobOutput/shared/MenuControls.jsx
new file mode 100644
index 0000000000..a36373bfd9
--- /dev/null
+++ b/awx/ui_next/src/screens/Job/JobOutput/shared/MenuControls.jsx
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { Button as PFButton } from '@patternfly/react-core';
+import {
+  PlusIcon,
+  AngleDoubleUpIcon,
+  AngleDoubleDownIcon,
+  AngleUpIcon,
+  AngleDownIcon,
+} from '@patternfly/react-icons';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(5, 1fr);
+`;
+
+const Button = styled(PFButton)`
+  &:hover {
+    background-color: #0066cc;
+    color: white;
+  }
+`;
+
+class MenuControls extends Component {
+  render() {
+    return (
+      <Wrapper>
+        <Button
+          variant="plain"
+        >
+          <PlusIcon />
+        </Button>
+        <Button
+          variant="plain"
+        >
+          <AngleUpIcon />
+        </Button>
+        <Button
+          variant="plain"
+        >
+          <AngleDownIcon />
+        </Button>
+        <Button
+          variant="plain"
+        >
+          <AngleDoubleUpIcon />
+        </Button>
+        <Button
+          variant="plain"
+        >
+          <AngleDoubleDownIcon />
+        </Button>
+      </Wrapper>
+    );
+  }
+}
+
+export default MenuControls;
diff --git a/awx/ui_next/src/screens/Job/JobOutput/shared/index.js b/awx/ui_next/src/screens/Job/JobOutput/shared/index.js
new file mode 100644
index 0000000000..307985d03c
--- /dev/null
+++ b/awx/ui_next/src/screens/Job/JobOutput/shared/index.js
@@ -0,0 +1 @@
+export { default as MenuControls } from './MenuControls';