Cleans up the Network UI after PR feedback and UX feedback

-removes stale commented-out lines
-makes "unknown" type devices smaller on canvas
-moves "unknown" type device title underneath icon
-removes collapsed inventory toolbox
-changes "Delete" to "Remove"
-removes the "Close" button for "Cancel" on details panel
-changing Remove color to red

awx/ui/client/src/inventories-hosts/inventories/inventory.list.js

@@ -98,7 +98,7 @@ export default ['i18n', function(i18n) {
                 ngClick: 'goToGraph(inventory)',
                 awToolTip: i18n._('Network Visualization'),
                 dataPlacement: 'top',
-                ngShow: '!inventory.pending_deletion && inventory.summary_fields.user_capabilities.edit'
+                ngShow: '!inventory.pending_deletion'
             },
             edit: {
                 label: i18n._('Edit'),

awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js

@@ -84,11 +84,9 @@ function InventoriesList($scope,
             })
             .finally(() => Wait('stop'));
     };
-    
+
     $scope.goToGraph = function(inventory){
          $state.go('inventories.edit.networking', {inventory_id: inventory.id, inventory_name: inventory.name});
-        // let url = $state.href('inventories.edit.networking', {inventory_id: inventory.id, inventory_name: inventory.name});
-        // window.open(url, '_blank');
     };
 
     $scope.editInventory = function (inventory) {

awx/ui/client/src/network-ui/context_menu_button.partial.svg

@@ -5,7 +5,13 @@
     ng-attr-width={{contextMenuButton.width-2}}
     ng-attr-height={{contextMenuButton.height}}>
 </rect>
-<text ng-attr-class="{{contextMenuButton.is_pressed ? 'NetworkUI__contextMenuButtonText-pressed' : contextMenuButton.mouse_over ? 'NetworkUI__contextMenuButtonText-hover' : 'NetworkUI__contextMenuButtonText'}}"
+<text ng-show="contextMenuButton.name !=='Remove'" ng-attr-class="{{contextMenuButton.is_pressed ? 'NetworkUI__contextMenuButtonText-pressed' : contextMenuButton.mouse_over ? 'NetworkUI__contextMenuButtonText-hover' : 'NetworkUI__contextMenuButtonText'}}"
+    x=15
+    ng-attr-y="{{(contextMenuButton.height * $parent.$index) + 18}}"
+    dy=".3em"
+    text-anchor="left">{{contextMenuButton.name}}
+</text>
+<text ng-show="contextMenuButton.name ==='Remove'" ng-attr-class="{{contextMenuButton.is_pressed ? 'NetworkUI__contextMenuRemoveButtonText-pressed' : contextMenuButton.mouse_over ? 'NetworkUI__contextMenuRemoveButtonText-hover' : 'NetworkUI__contextMenuRemoveButtonText'}}"
     x=15
     ng-attr-y="{{(contextMenuButton.height * $parent.$index) + 18}}"
     dy=".3em"

awx/ui/client/src/network-ui/default.partial.svg

@@ -1,54 +1,56 @@
 <!-- Copyright (c) 2017 Red Hat, Inc. -->
 
+<g transform="scale(0.75)">
+    <g ng-if="item.moving">
+    <line ng-attr-x1="{{-50 - 100}}"
+           ng-attr-y1="0"
+           ng-attr-x2="{{50 + 100}}"
+           ng-attr-y2="0"
+           class="NetworkUI--construction"></line>
+     <line ng-attr-x1="0"
+           ng-attr-y1="{{-50 - 100}}"
+           ng-attr-x2="0"
+           ng-attr-y2="{{50 + 100}}"
+           class="NetworkUI--construction"></line>
+    </g>
 
-                    <g ng-if="item.moving">
+    <g ng-if="!debug.hidden">
-                    <line ng-attr-x1="{{-50 - 100}}"
+     <line ng-attr-x1="{{-50 - 10}}"
-                           ng-attr-y1="0"
+           ng-attr-y1="0"
-                           ng-attr-x2="{{50 + 100}}"
+           ng-attr-x2="{{50 + 10}}"
-                           ng-attr-y2="0"
+           ng-attr-y2="0"
-                           class="NetworkUI--construction"></line>
+           class="NetworkUI--debug"></rect>
-                     <line ng-attr-x1="0"
+     <line ng-attr-x1="0"
-                           ng-attr-y1="{{-50 - 100}}"
+           ng-attr-y1="{{-50 - 10}}"
-                           ng-attr-x2="0"
+           ng-attr-x2="0"
-                           ng-attr-y2="{{50 + 100}}"
+           ng-attr-y2="{{50 + 10}}"
-                           class="NetworkUI--construction"></line>
+           class="NetworkUI--debug"></rect>
-                    </g>
+     <rect ng-attr-x="{{-50}}"
-
+           ng-attr-y="{{-50}}"
-                    <g ng-if="!debug.hidden">
+           ng-attr-width="{{50 * 2}}"
-                     <line ng-attr-x1="{{-50 - 10}}"
+           ng-attr-height="{{50 * 2}}"
-                           ng-attr-y1="0"
+           class="NetworkUI--debug"></rect>
-                           ng-attr-x2="{{50 + 10}}"
+    </g>
-                           ng-attr-y2="0"
+    <g class="NetworkUI__device">
-                           class="NetworkUI--debug"></rect>
+    <circle
-                     <line ng-attr-x1="0"
+        cx="0"
-                           ng-attr-y1="{{-50 - 10}}"
+        cy="0"
-                           ng-attr-x2="0"
+        ng-attr-r="{{50 + 2}}"
-                           ng-attr-y2="{{50 + 10}}"
+        ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__device--selected-conflict' : item.selected ? 'NetworkUI__device--selected' : 'NetworkUI__device--remote-selected' : 'NetworkUI--hidden'}}">
-                           class="NetworkUI--debug"></rect>
+    </circle>
-                     <rect ng-attr-x="{{-50}}"
+    <circle
-                           ng-attr-y="{{-50}}"
+        cx="0"
-                           ng-attr-width="{{50 * 2}}"
+        cy="0"
-                           ng-attr-height="{{50 * 2}}"
+        ng-attr-r="{{50}}">
-                           class="NetworkUI--debug"></rect>
+    </circle>
-                    </g>
+    </g>
-                    <g class="NetworkUI__device">
+    <g ng-show="item.icon || current_scale > 0.5">
-                    <circle
+    <text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__device-text--selected' : 'NetworkUI--hidden'}}"
-                        cx="0"
+          filter="url(#background)"
-                        cy="0"
+          text-anchor="middle"
-                        ng-attr-r="{{50 + 2}}"
+          x="0"
-                        ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__device--selected-conflict' : item.selected ? 'NetworkUI__device--selected' : 'NetworkUI__device--remote-selected' : 'NetworkUI--hidden'}}">
+          y="73"> {{item.name}}
-                    </circle>
+    </text>
-                    <circle
+    <text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">{{item.name}}{{item.edit_label?'_':''}}</text>
-                        cx="0"
+    </g>
-                        cy="0"
+</g>
-                        ng-attr-r="{{50}}">
-                    </circle>
-                    </g>
-                    <g ng-show="item.icon || current_scale > 0.5">
-                    <text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__device-text--selected' : 'NetworkUI--hidden'}}"
-						  filter="url(#selected)"
-                          text-anchor="middle"
-						  x="0"
-						  y="0"> {{item.name}} </text>
-                    <text class="NetworkUI__device-text" text-anchor="middle" x="0" y="0">{{item.name}}{{item.edit_label?'_':''}}</text>
-                    </g>

awx/ui/client/src/network-ui/inventory_toolbox.partial.svg

@@ -1,21 +1,4 @@
 <!-- Copyright (c) 2017 Red Hat, Inc. -->
-
-<g ng-if="!hide_menus">
-<!-- begin collapsed toolbox -->
-<g ng-if="overall_toolbox_collapsed">
-<rect class="NetworkUI__toolbox-collapsed"
-      x=0
-      ng-attr-y={{toolbox.y}}
-      width=45
-      ng-attr-height={{toolbox.height}}>
-</rect>
-<g awx-net-chevron-right-icon
-    action-icon="action_icons[1]"
-    ng-if="overall_toolbox_collapsed"
-    ng-attr-transform="translate({{action_icons[1].x}}, {{action_icons[1].y}})"></g>
-</g>
-<!-- end collapsed toolbox -->
-
 <g ng-if="toolbox.enabled">
 <rect class="NetworkUI__toolbox"
       ng-attr-x="{{toolbox.x}}"

awx/ui/client/src/network-ui/network-details/details.partial.html

@@ -34,8 +34,8 @@
             <awx-net-extra-vars item="item"></awx-net-extra-vars>
         </div>
     </form>
-    <div class="buttons Form-buttons" id="host_controls" ng-show="item.host_id">
+    <div class="buttons Form-buttons" id="host_controls">
-        <button type="button" class="btn btn-sm Form-cancelButton" id="host_cancel_btn" ng-show="(item.summary_fields.user_capabilities.edit || canAdd)" ng-click="formCancel()"> Cancel</button>
+        <button type="button" class="btn btn-sm Form-cancelButton" id="host_cancel_btn" ng-click="formCancel()"> Cancel</button>
     </div>
     <div class="Networking-saveConfirmation" ng-show="saveConfirmed">
         Save Complete <i class="fa fa-check-circle"></i>

awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.block.less

@@ -13,6 +13,7 @@
     font-weight: normal;
     color: @default-link;
     cursor: pointer;
+    font-size: 12px;
 }
 
 .noselect {

awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.partial.html

@@ -20,7 +20,7 @@
                 </div>
             </div>
         </div>
-        <div class="NetworkingExtraVars-expandTextContainer" ng-click="openExtraVarsModal()">Expand</div>
+        <div class="NetworkingExtraVars-expandTextContainer" ng-click="openExtraVarsModal()">EXPAND</div>
     </label>
 <textarea readonly rows="6" disabled="disabled" ng-model="variables" name="variables" class="form-control Form-textArea Form-formGroup--fullWidth" id="network_host_variables"></textarea>
 

awx/ui/client/src/network-ui/network.ui.controller.js

@@ -873,7 +873,7 @@ var NetworkUIController = function($scope,
     // Context Menu Buttons
     $scope.context_menu_buttons = [
         new models.ContextMenuButton("Details", 236, 231, 160, 26, $scope.onDetailsContextButton, $scope),
-        new models.ContextMenuButton("Delete", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope)
+        new models.ContextMenuButton("Remove", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope)
     ];
 
     // Context Menus

awx/ui/client/src/network-ui/style.less

@@ -128,18 +128,18 @@
 
 .NetworkUI__router--selected {
     stroke: @selected-blue;
-    stroke-width: 4;
+    stroke-width: 10;
     fill:@light-background;
 }
 
 .NetworkUI__router--remote-selected {
     stroke: @selected-mango;
-    stroke-width: 4;
+    stroke-width: 10;
 }
 
 .NetworkUI__router--selected-conflict {
     stroke: @selected-red;
-    stroke-width: 4;
+    stroke-width: 10;
 }
 
 .NetworkUI__router-text {
@@ -672,6 +672,18 @@
     fill:@button-body-hover;
 }
 
+.NetworkUI__contextMenuRemoveButtonText{
+    fill: @red;
+    font-family: 'Open Sans';
+    font-size: 14px;
+}
+
+.NetworkUI__contextMenuRemoveButtonText-hover{
+    fill: @red;
+    font-family: 'Open Sans';
+    font-size: 14px;
+}
+
 .NetworkUI__test_results {
     fill: @light-background;
     stroke: @dark-widget-detail;