Add job output menu controls component

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

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;

awx/ui_next/src/screens/Job/JobOutput/shared/index.js

@@ -0,0 +1 @@
+export { default as MenuControls } from './MenuControls';