Adds host detail panel UI and improves toolbox UI

* Changes Layers' panel's default setting to not expanded
* Adds OffScreen2 state to handle the case where a toolbox is both offscreen and disabled
* Adds a collapsed view of the toolbox, as well as a model for ActionIcons
    which is a model whose purpose is to connect the button FSM with the
    chevron icons that are used on the toolbox.
* Adds action-icon directive
* Enables/disables the icons if they're not shown
* Fixes initial state of the toolboxes
* Creates context menu and context menu buttons in the network UI
* Adds extra vars to details panel on left hand side

awx/ui/client/features/networking/_index.less

@@ -58,7 +58,6 @@
 
 .Networking-rightPanel{
     border-left: 1px solid @at-color-panel-border;
-    display:flex;
     width:400px;
     height: calc(~"100vh - 40px");
     padding: 20px;
@@ -70,3 +69,34 @@
     right: 0px;
     background-color: @default-bg;
 }
+
+
+.Networking-panelHeader {
+    display: flex;
+    height: 30px;
+    width:100%;
+}
+
+.Networking-panelHeaderText {
+    color: @default-interface-txt;
+    flex: 1 0 auto;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 10px;
+    text-transform: uppercase;
+}
+
+.Networking-resultRow {
+    width: 100%;
+    display: flex;
+    padding-bottom: 10px;
+    flex-wrap: wrap;
+}
+
+.Networking-resultRow--variables {
+    flex-direction: column;
+
+    #cm-variables-container {
+        width: 100%;
+    }
+}

awx/ui/client/features/networking/networking.controller.js

@@ -7,8 +7,9 @@ function NetworkingController (models, $state, $scope, strings) {
 
     vm.strings = strings;
     vm.panelTitle = `${strings.get('state.BREADCRUMB_LABEL')} | ${inventory.name}`;
+    vm.hostDetail = {};
 
-    vm.panelIsExpanded = true;
+    vm.panelIsExpanded = false;
 
     vm.togglePanel = () => {
         vm.panelIsExpanded = !vm.panelIsExpanded;
@@ -17,6 +18,13 @@ function NetworkingController (models, $state, $scope, strings) {
     vm.close = () => {
         $state.go('inventories');
     };
+
+    $scope.$on('retrievedHostData', (e, hostData) => {
+        if (!vm.panelIsExpanded) {
+            vm.panelIsExpanded = true;
+        }
+        $scope.hostDetail = hostData;
+    });
 }
 
 NetworkingController.$inject = [

awx/ui/client/features/networking/networking.view.html

@@ -31,6 +31,68 @@
         <awx-network-ui></awx-network-ui>
     </div>
     <div class="Networking-rightPanel" ng-show="vm.panelIsExpanded">
-        VIEW LAYERS
-    </div>
+        <!-- VIEW LAYERS -->
+
+        <!--beginning of header-->
+        <div class="Networking-panelHeader">
+            <div class="JobResults-panelHeaderText" translate="">DETAILS</div>
+
+            <!-- LEFT PANE HEADER ACTIONS -->
+            <!-- <div> -->
+
+                <!-- RELAUNCH ACTION -->
+                <!-- <button class="List-actionButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Relaunch using the same parameters" data-original-title="" title="">
+                    <i class="icon-launch"></i>
+                </button> -->
+
+                <!-- CANCEL ACTION -->
+                <!-- <button class="List-actionButton                                 List-actionButton--delete ng-hide" data-placement="top" ng-click="cancelJob()" ng-show="job_status == 'running' ||
+                        job_status=='pending' " aw-tool-tip="Cancel" data-original-title="" title="">
+                    <i class="fa fa-minus-circle"></i>
+                </button> -->
+
+                <!-- DELETE ACTION -->
+                <!-- <button class="List-actionButton
+                        List-actionButton--delete" data-placement="top" ng-click="deleteJob()" ng-hide="job_status == 'running' ||
+                        job_status == 'pending' || !job.summary_fields.user_capabilities.delete" aw-tool-tip="Delete" data-original-title="" title="">
+                    <i class="fa fa-trash-o"></i>
+                </button>
+            </div> -->
+        </div>
+        <!--end of header-->
+        <!--beginning of name row -->
+        <div class="JobResults-resultRow">
+            <label class="JobResults-resultRowLabel" translate="">Name</label>
+             <div class="JobResults-resultRowText">
+                 {{hostDetail.name}}
+             </div>
+         </div>
+         <!--end of name row -->
+
+         <!-- beginning of extra variable row -->
+         <div class="JobResults-resultRow
+             JobResults-resultRow--variables"
+             ng-show="hostDetail.variables">
+             <label class="JobResults-resultRowLabel
+                 JobResults-resultRowLabel--fullWidth">
+                 <span translate> Extra Variables </span>
+                 <i class="JobResults-extraVarsHelp fa fa-question-circle"
+                     aw-tool-tip="{{'Read only view of extra variables added to the job template.' | translate}}"
+                     data-placement="top">
+                 </i>
+             </label>
+             <textarea
+                 rows="6"
+                 ng-model="hostDetail.variables"
+                 name="variables"
+                 class="form-control Form-textArea Form-textAreaLabel Form-formGroup--fullWidth"
+                 id="pre-formatted-variables"
+                 disabled="disabled">
+             </textarea>
+         </div>
+         <!-- end of extra variable row -->
+
+    </div><!--end of Networking-rightPanel -->
+
+
 </div>

awx/ui/client/src/app.js

@@ -10,7 +10,7 @@ if ($basePath) {
 }
 
 import start from './app.start';
-
+// import networkUI from './../network_ui/static/network_ui/src/main.js';
 import portalMode from './portal-mode/main';
 import systemTracking from './system-tracking/main';
 import inventoriesHosts from './inventories-hosts/main';