Disables actions according to RBAC privilege

* Removes the toolbox if user doesn't have permission to edit
* Fixes the extra click that was identified with the context menu
* Adds new readonly version of the move FSM
* Adds an enhancement to debug directive to align the text better
* Disables the toolbox FSM if user doesn't have permission to edit

awx/ui/client/src/network-ui/debug.directive.js

@@ -3,7 +3,18 @@
 const templateUrl = require('~network-ui/debug.partial.svg');
 
 function debug () {
-  return { restrict: 'A', templateUrl};
+  return {
+      restrict: 'A',
+      templateUrl,
+      link: function(){
+          $('.NetworkUI__debug-text').each(function(index, option){
+             let startingY = 15;
+             let offset = 20;
+             let y = startingY + (index * offset);
+             option.setAttribute('y', y);
+          });
+      }
+  };
 }
 
 exports.debug = debug;

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

@@ -3,47 +3,48 @@
 
 <g ng-attr-class="{{debug.hidden && 'NetworkUI--hidden' || ''}}">
     <g transform="translate(0, 100)">
-        <text ng-attr-x="{{graph.right_column}}" y="35" class="NetworkUI__debug-text">view_port.x: {{view_port.x}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="55" class="NetworkUI__debug-text">view_port.y: {{view_port.y}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="75" class="NetworkUI__debug-text">view_port.width: {{view_port.width}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="95" class="NetworkUI__debug-text">view_port.height: {{view_port.height}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="115" class="NetworkUI__debug-text">width: {{graph.width}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="135" class="NetworkUI__debug-text">height: {{graph.height}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="155" class="NetworkUI__debug-text">rc: {{graph.right_column}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="175" class="NetworkUI__debug-text">Mouse down: {{onMouseDownResult}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="195" class="NetworkUI__debug-text">Mouse up: {{onMouseUpResult}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="215" class="NetworkUI__debug-text">Mouse move: {{onMouseMoveResult}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="235" class="NetworkUI__debug-text">Mouse over: {{onMouseOverResult}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="255" class="NetworkUI__debug-text">Mouse enter: {{onMouseEnterResult}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="275" class="NetworkUI__debug-text">Mouse leave: {{onMouseLeaveResult}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="295" class="NetworkUI__debug-text">Current scale: {{current_scale.toFixed(4)}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="315" class="NetworkUI__debug-text">Pan X: {{panX.toFixed(2)}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="335" class="NetworkUI__debug-text">Pan Y: {{panY.toFixed(2)}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="355" class="NetworkUI__debug-text">View State: {{view_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="375" class="NetworkUI__debug-text">Mouse X: {{mouseX.toFixed(2)}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="395" class="NetworkUI__debug-text">Mouse Y: {{mouseY.toFixed(2)}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="415" class="NetworkUI__debug-text">Scaled X: {{scaledX.toFixed(2)}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="435" class="NetworkUI__debug-text">Scaled Y: {{scaledY.toFixed(2)}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="455" class="NetworkUI__debug-text">Key: {{last_key}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="475" class="NetworkUI__debug-text">Key Code: {{last_key_code}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="495" class="NetworkUI__debug-text">Move State: {{move_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="515" class="NetworkUI__debug-text">Selected devices: {{selected_devices.length}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="535" class="NetworkUI__debug-text">Selected links: {{selected_links.length}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="555" class="NetworkUI__debug-text">Link State: {{link_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="575" class="NetworkUI__debug-text">Buttons State: {{buttons_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="595" class="NetworkUI__debug-text">Time State: {{time_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="615" class="NetworkUI__debug-text">Time Pointer: {{time_pointer}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="675" class="NetworkUI__debug-text">Group State: {{group_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="715" class="NetworkUI__debug-text">Hotkeys State: {{hotkeys_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="735" class="NetworkUI__debug-text">Mode State: {{mode_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="755" class="NetworkUI__debug-text">Device Detail State: {{device_detail_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="775" class="NetworkUI__debug-text">Site State: {{site_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="795" class="NetworkUI__debug-text">Rack State: {{rack_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="815" class="NetworkUI__debug-text">Stream State: {{stream_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="835" class="NetworkUI__debug-text">App Toolbox State: {{app_toolbox_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="855" class="NetworkUI__debug-text">Inventory Toolbox State: {{inventory_toolbox_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="875" class="NetworkUI__debug-text">Rack Toolbox State: {{rack_toolbox_controller.state.name}}</text>
-        <text ng-attr-x="{{graph.right_column}}" y="895" class="NetworkUI__debug-text">Site Toolbox State: {{site_toolbox_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">view_port.x: {{view_port.x}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">view_port.y: {{view_port.y}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">view_port.width: {{view_port.width}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">view_port.height: {{view_port.height}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">width: {{graph.width}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">height: {{graph.height}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">rc: {{graph.right_column}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse down: {{onMouseDownResult}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse up: {{onMouseUpResult}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse move: {{onMouseMoveResult}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse over: {{onMouseOverResult}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse enter: {{onMouseEnterResult}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse leave: {{onMouseLeaveResult}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Current scale: {{current_scale.toFixed(4)}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Pan X: {{panX.toFixed(2)}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Pan Y: {{panY.toFixed(2)}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">View State: {{view_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse X: {{mouseX.toFixed(2)}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mouse Y: {{mouseY.toFixed(2)}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Scaled X: {{scaledX.toFixed(2)}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Scaled Y: {{scaledY.toFixed(2)}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Key: {{last_key}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Key Code: {{last_key_code}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Move State: {{move_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Move Readonly State: {{move_readonly_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Selected devices: {{selected_devices.length}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Selected links: {{selected_links.length}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Link State: {{link_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Buttons State: {{buttons_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Time State: {{time_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Time Pointer: {{time_pointer}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Group State: {{group_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Hotkeys State: {{hotkeys_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Mode State: {{mode_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Device Detail State: {{device_detail_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Site State: {{site_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Rack State: {{rack_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Stream State: {{stream_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">App Toolbox State: {{app_toolbox_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Inventory Toolbox State: {{inventory_toolbox_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Rack Toolbox State: {{rack_toolbox_controller.state.name}}</text>
+        <text ng-attr-x="{{graph.right_column}}" class="NetworkUI__debug-text">Site Toolbox State: {{site_toolbox_controller.state.name}}</text>
     </g>
     <rect x=10 y=10 ng-attr-width="{{graph.width - 20}}" ng-attr-height="{{graph.height - 20}}" class="NetworkUI--debug"></rect>
      <line x1="-10000"

awx/ui/client/src/network-ui/designs/move.readonly.yml

@@ -0,0 +1,65 @@
+diagram_id: 91
+name: diagram
+states:
+- id: 0
+  label: ContextMenu
+  x: 826
+  y: 1008
+- id: 1
+  label: Disable
+  x: 914
+  y: 115
+- id: 5
+  label: Ready
+  x: 702
+  y: 327
+- id: 6
+  label: Selected1
+  x: 397
+  y: 332
+- id: 7
+  label: Selected2
+  x: 268
+  y: 735
+- id: 8
+  label: Selected3
+  x: 225
+  y: 1021
+- id: 9
+  label: Start
+  x: 704
+  y: 128
+transitions:
+- from_state: ContextMenu
+  label: onDetailsPanel
+  to_state: Selected2
+- from_state: ContextMenu
+  label: onMouseDown
+  to_state: Selected2
+- from_state: Ready
+  label: onMouseDown
+  to_state: Selected1
+- from_state: Selected1
+  label: onMouseUp
+  to_state: Selected2
+- from_state: Selected2
+  label: onKeyDown
+  to_state: Ready
+- from_state: Selected2
+  label: onMouseDown
+  to_state: Selected3
+- from_state: Selected2
+  label: onMouseDown
+  to_state: Ready
+- from_state: Selected3
+  label: ''
+  to_state: Selected3
+- from_state: Selected3
+  label: onMouseMove
+  to_state: Selected2
+- from_state: Selected3
+  label: onMouseUp
+  to_state: ContextMenu
+- from_state: Start
+  label: start
+  to_state: Ready

awx/ui/client/src/network-ui/designs/move.yml

@@ -1,70 +1,63 @@
-diagram_id: 64
-finite_state_machine_id: 3
+diagram_id: 87
 name: move
 states:
-- id: 1
-  label: Disable
-  x: 743
-  y: 108
-- id: 2
-  label: Start
-  x: 533
-  y: 121
-- id: 3
-  label: Ready
-  x: 531
-  y: 320
-- id: 4
-  label: Selected1
-  x: 226
-  y: 325
-- id: 6
-  label: Move
-  x: -54
-  y: 587
 - id: 8
-  label: Placing
-  x: 92
-  y: 82
-- id: 9
-  label: EditLabel
-  x: 594
-  y: 677
-- id: 5
-  label: Selected2
-  x: 275
-  y: 682
-- id: 10
   label: ContextMenu
-  x: 901
-  y: 990
+  x: 826
+  y: 1008
+- id: 0
+  label: Disable
+  x: 914
+  y: 115
+- id: 6
+  label: EditLabel
+  x: 765
+  y: 684
+- id: 4
+  label: Move
+  x: 118
+  y: 594
+- id: 5
+  label: Placing
+  x: 263
+  y: 89
+- id: 2
+  label: Ready
+  x: 702
+  y: 327
+- id: 3
+  label: Selected1
+  x: 397
+  y: 332
 - id: 7
+  label: Selected2
+  x: 268
+  y: 735
+- id: 9
   label: Selected3
-  x: 190
-  y: 954
+  x: 361
+  y: 961
+- id: 1
+  label: Start
+  x: 704
+  y: 128
 transitions:
 - from_state: ContextMenu
   label: onDetailsPanel
   to_state: Selected2
+- from_state: ContextMenu
+  label: onLabelEdit
+  to_state: EditLabel
 - from_state: ContextMenu
   label: onMouseDown
-  to_state: Ready
-- from_state: Start
-  label: start
-  to_state: Ready
-- from_state: Selected2
-  label: onMouseDown
-  to_state: Ready
+  to_state: Selected2
+- from_state: EditLabel
+  label: onKeyDown
+  to_state: Selected2
 - from_state: EditLabel
   label: onMouseDown
   to_state: Ready
-- from_state: Selected2
-  label: onNewDevice
-  to_state: Ready
-- from_state: Selected2
-  label: onKeyDown
-  to_state: Ready
-- from_state: Ready
+- from_state: Move
   label: onMouseDown
   to_state: Selected1
 - from_state: Move
@@ -73,36 +66,42 @@ transitions:
 - from_state: Placing
   label: onMouseDown
   to_state: Selected1
-- from_state: Move
+- from_state: Placing
+  label: onMouseMove
+  to_state: Move
+- from_state: Ready
   label: onMouseDown
   to_state: Selected1
-- from_state: Selected1
-  label: onMouseUp
-  to_state: Selected2
-- from_state: EditLabel
-  label: onKeyDown
-  to_state: Selected2
+- from_state: Ready
+  label: onNewDevice
+  to_state: Placing
 - from_state: Ready
   label: onPasteDevice
   to_state: Selected2
 - from_state: Selected1
   label: onMouseMove
   to_state: Move
-- from_state: Selected3
-  label: onMouseMove
-  to_state: Move
-- from_state: Placing
-  label: onMouseMove
-  to_state: Move
+- from_state: Selected1
+  label: onMouseUp
+  to_state: Selected2
+- from_state: Selected2
+  label: onKeyDown
+  to_state: Ready
 - from_state: Selected2
   label: onMouseDown
   to_state: Selected3
-- from_state: Ready
+- from_state: Selected2
+  label: onMouseDown
+  to_state: Ready
+- from_state: Selected2
   label: onNewDevice
-  to_state: Placing
-- from_state: ContextMenu
-  label: onLabelEdit
-  to_state: EditLabel
+  to_state: Ready
+- from_state: Selected3
+  label: onMouseMove
+  to_state: Move
 - from_state: Selected3
   label: onMouseUp
   to_state: ContextMenu
+- from_state: Start
+  label: start
+  to_state: Ready

awx/ui/client/src/network-ui/move.fsm.js

@@ -383,10 +383,10 @@ _ContextMenu.prototype.end = function (controller) {
 
 _ContextMenu.prototype.onMouseDown = function (controller) {
 
-    controller.changeState(Ready);
+    controller.changeState(Selected2);
 
 };
-_ContextMenu.prototype.onMouseDown.transitions = ['Ready'];
+_ContextMenu.prototype.onMouseDown.transitions = ['Selected2'];
 
 _ContextMenu.prototype.onDetailsPanel = function (controller, msg_type, $event) {
 

awx/ui/client/src/network-ui/move.readonly.fsm.js

@@ -0,0 +1,177 @@
+/* Copyright (c) 2017 Red Hat, Inc. */
+var inherits = require('inherits');
+var fsm = require('./fsm.js');
+var util = require('./util.js');
+
+function _State () {
+}
+inherits(_State, fsm._State);
+
+function _Ready () {
+    this.name = 'Ready';
+}
+inherits(_Ready, _State);
+var Ready = new _Ready();
+exports.Ready = Ready;
+
+function _Disable () {
+    this.name = 'Disable';
+}
+inherits(_Disable, _State);
+var Disable = new _Disable();
+exports.Disable = Disable;
+
+function _Start () {
+    this.name = 'Start';
+}
+inherits(_Start, _State);
+var Start = new _Start();
+exports.Start = Start;
+
+function _Selected2 () {
+    this.name = 'Selected2';
+}
+inherits(_Selected2, _State);
+var Selected2 = new _Selected2();
+exports.Selected2 = Selected2;
+
+function _Selected3 () {
+    this.name = 'Selected3';
+}
+inherits(_Selected3, _State);
+var Selected3 = new _Selected3();
+exports.Selected3 = Selected3;
+
+function _Selected1 () {
+    this.name = 'Selected1';
+}
+inherits(_Selected1, _State);
+var Selected1 = new _Selected1();
+exports.Selected1 = Selected1;
+
+function _ContextMenu () {
+    this.name = 'ContextMenu';
+}
+inherits(_ContextMenu, _State);
+var ContextMenu = new _ContextMenu();
+exports.ContextMenu = ContextMenu;
+
+
+_State.prototype.onUnselectAll = function (controller, msg_type, $event) {
+
+    controller.changeState(Ready);
+    controller.delegate_channel.send(msg_type, $event);
+};
+
+
+_Ready.prototype.onMouseDown = function (controller, msg_type, $event) {
+
+    var last_selected = controller.scope.select_items($event.shiftKey);
+
+    if (last_selected.last_selected_device !== null) {
+        controller.changeState(Selected1);
+    } else if (last_selected.last_selected_link !== null) {
+        controller.changeState(Selected1);
+    } else if (last_selected.last_selected_interface !== null) {
+        controller.changeState(Selected1);
+    } else {
+        controller.delegate_channel.send(msg_type, $event);
+    }
+};
+_Ready.prototype.onMouseDown.transitions = ['Selected1'];
+
+_Start.prototype.start = function (controller) {
+
+    controller.changeState(Ready);
+
+};
+_Start.prototype.start.transitions = ['Ready'];
+
+
+_Selected2.prototype.onMouseDown = function (controller, msg_type, $event) {
+
+	var last_selected = null;
+
+    if (controller.scope.selected_devices.length === 1) {
+        var current_selected_device = controller.scope.selected_devices[0];
+        var last_selected_device = controller.scope.select_items($event.shiftKey).last_selected_device;
+        if (current_selected_device === last_selected_device) {
+            controller.changeState(Selected3);
+            return;
+        }
+    }
+
+    if (controller.scope.selected_links.length === 1) {
+        var current_selected_link = controller.scope.selected_links[0];
+        last_selected = controller.scope.select_items($event.shiftKey);
+        if (current_selected_link === last_selected.last_selected_link) {
+            controller.changeState(Selected3);
+            return;
+        }
+    }
+
+    if (controller.scope.selected_interfaces.length === 1) {
+        var current_selected_interface = controller.scope.selected_interfaces[0];
+        last_selected = controller.scope.select_items($event.shiftKey);
+        if (current_selected_interface === last_selected.last_selected_interface) {
+            controller.changeState(Selected3);
+            return;
+        }
+    }
+    controller.scope.first_channel.send('BindDocument', {});
+    controller.changeState(Ready);
+    controller.handle_message(msg_type, $event);
+};
+_Selected2.prototype.onMouseDown.transitions = ['Ready', 'Selected3'];
+
+
+_Selected1.prototype.onMouseUp = function (controller) {
+
+    if(controller.scope.$parent.vm.rightPanelIsExpanded){
+        controller.scope.onDetailsContextButton();
+    }
+    controller.changeState(Selected2);
+
+};
+_Selected1.prototype.onMouseUp.transitions = ['Selected2'];
+
+_Selected1.prototype.onMouseDown = util.noop;
+
+_Selected3.prototype.onMouseUp = function (controller, msg_type, $event) {
+    let context_menu = controller.scope.context_menus[0];
+    context_menu.enabled = true;
+    context_menu.x = $event.x;
+    context_menu.y = $event.y;
+    context_menu.buttons.forEach(function(button, index){
+        button.x = $event.x;
+        let menuPaddingTop = 5;
+        button.y = $event.y + menuPaddingTop + (button.height * index);
+    });
+
+    controller.changeState(ContextMenu);
+};
+_Selected3.prototype.onMouseUp.transitions = ['ContextMenu'];
+
+_Selected3.prototype.onMouseMove = function (controller) {
+    controller.changeState(Selected2);
+};
+_Selected3.prototype.onMouseMove.transitions = ['Selected2'];
+
+_ContextMenu.prototype.end = function (controller) {
+
+    controller.scope.removeContextMenu();
+};
+
+_ContextMenu.prototype.onMouseDown = function (controller) {
+
+    controller.changeState(Selected2);
+
+};
+_ContextMenu.prototype.onMouseDown.transitions = ['Selected2'];
+
+_ContextMenu.prototype.onDetailsPanel = function (controller, msg_type, $event) {
+
+    controller.changeState(Selected2);
+    controller.handle_message(msg_type, $event);
+};
+_ContextMenu.prototype.onDetailsPanel.transitions = ['Selected2'];

awx/ui/client/src/network-ui/network-nav/main.js

@@ -10,7 +10,8 @@ function NetworkingResolve ($stateParams, resourceData) {
         inventory: {
             id: $stateParams.inventory_id,
             name: $stateParams.inventory_name
-        }
+        },
+        canEdit: resourceData.data.summary_fields.user_capabilities.edit
     };
     if (!resolve.inventory.name) {
         resolve.inventory.name = resourceData.data.name;

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

@@ -9,7 +9,7 @@ function NetworkingController (models, $state, $scope, strings) {
     vm.strings = strings;
     vm.panelTitle = `${strings.get('state.BREADCRUMB_LABEL')} | ${inventory.name}`;
     vm.hostDetail = {};
-
+    vm.canEdit = models.canEdit;
     vm.rightPanelIsExpanded = false;
     vm.leftPanelIsExpanded = true;
     vm.keyPanelExpanded = false;

awx/ui/client/src/network-ui/network-nav/network.nav.view.html

@@ -22,7 +22,7 @@
                 </div>
             </div>
             <div class="Networking-toolbarRightSide">
-                <div class="">
+                <div ng-if="vm.canEdit">
                     <button ng-click="vm.hideToolbox()" type="button" class="Networking-toolbarIcon" ng-class="{'Networking-toolbarIcon--selected Networking-toolboxPanelToolbarIcon--selected' : vm.leftPanelIsExpanded}">
                         <i class="fa fa-wrench"></i>
                     </button>

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

@@ -6,6 +6,7 @@ var hotkeys = require('./hotkeys.fsm.js');
 var toolbox_fsm = require('./toolbox.fsm.js');
 var view = require('./view.fsm.js');
 var move = require('./move.fsm.js');
+var move_readonly = require('./move.readonly.fsm.js');
 var buttons = require('./buttons.fsm.js');
 var time = require('./time.fsm.js');
 var test_fsm = require('./test.fsm.js');
@@ -151,8 +152,8 @@ var NetworkUIController = function($scope,
                  from_y: 0,
                  to_x: 0,
                  to_y: 0};
-
-    $scope.send_trace_message = function (message) {
+  $scope.canEdit = $scope.$parent.$resolve.resolvedModels.canEdit;
+  $scope.send_trace_message = function (message) {
         if (!$scope.recording) {
             return;
         }
@@ -194,13 +195,14 @@ var NetworkUIController = function($scope,
   $scope.hotkeys_controller = new fsm.FSMController($scope, "hotkeys_fsm", hotkeys.Start, $scope);
   $scope.keybindings_controller = new fsm.FSMController($scope, "keybindings_fsm", keybindings.Start, $scope);
   $scope.view_controller = new fsm.FSMController($scope, "view_fsm", view.Start, $scope);
-  $scope.move_controller = new fsm.FSMController($scope, "move_fsm", move.Start, $scope);
+  $scope.move_controller = new fsm.FSMController($scope, "move_fsm", $scope.canEdit ? move.Start : move.Disable, $scope);
+  $scope.move_readonly_controller = new fsm.FSMController($scope, "move_readonly_fsm", !$scope.canEdit? move_readonly.Start : move_readonly.Disable, $scope);
   $scope.details_panel_controller = new fsm.FSMController($scope, "details_panel_fsm", details_panel_fsm.Start, $scope);
   $scope.buttons_controller = new fsm.FSMController($scope, "buttons_fsm", buttons.Start, $scope);
   $scope.time_controller = new fsm.FSMController($scope, "time_fsm", time.Start, $scope);
   $scope.test_controller = new fsm.FSMController($scope, "test_fsm", test_fsm.Start, $scope);
 
-  $scope.inventory_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
+  $scope.inventory_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", !$scope.canEdit ? toolbox_fsm.Disabled : toolbox_fsm.Start, $scope);
 
   var toolboxTopMargin = $('.Networking-top').height();
   var toolboxTitleMargin = toolboxTopMargin + 35;
@@ -321,9 +323,12 @@ var NetworkUIController = function($scope,
   $scope.move_controller.delegate_channel = new fsm.Channel($scope.move_controller,
                                                             $scope.view_controller,
                                                             $scope);
-  $scope.details_panel_controller.delegate_channel = new fsm.Channel($scope.details_panel_controller,
+  $scope.move_readonly_controller.delegate_channel = new fsm.Channel($scope.move_readonly_controller,
                                                             $scope.move_controller,
                                                             $scope);
+  $scope.details_panel_controller.delegate_channel = new fsm.Channel($scope.details_panel_controller,
+                                                            $scope.move_readonly_controller,
+                                                            $scope);
   $scope.inventory_toolbox_controller.delegate_channel = new fsm.Channel($scope.inventory_toolbox_controller,
                                                             $scope.details_panel_controller,
                                                             $scope);
@@ -880,14 +885,19 @@ var NetworkUIController = function($scope,
     };
 
     // Context Menu Buttons
+    const contextMenuButtonHeight = 26;
+    let contextMenuHeight = 64;
     $scope.context_menu_buttons = [
-        new models.ContextMenuButton("Details", 236, 231, 160, 26, $scope.onDetailsContextButton, $scope),
-        new models.ContextMenuButton("Remove", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope)
+        new models.ContextMenuButton("Details", 236, 231, 160, contextMenuButtonHeight, $scope.onDetailsContextButton, $scope),
+        new models.ContextMenuButton("Remove", 256, 231, 160, contextMenuButtonHeight, $scope.onDeleteContextMenu, $scope)
     ];
-
+    if(!$scope.canEdit){
+        $scope.context_menu_buttons.pop();
+        contextMenuHeight = $scope.context_menu_buttons.length * contextMenuButtonHeight + 12;
+    }
     // Context Menus
     $scope.context_menus = [
-        new models.ContextMenu('HOST', 210, 200, 160, 64, $scope.contextMenuCallback, false, $scope.context_menu_buttons, $scope)
+        new models.ContextMenu('HOST', 210, 200, 160, contextMenuHeight, $scope.contextMenuCallback, false, $scope.context_menu_buttons, $scope)
     ];
 
     $scope.onDownloadTraceButton = function () {
@@ -1397,6 +1407,8 @@ var NetworkUIController = function($scope,
         $scope.view_controller.state.start($scope.view_controller);
         $scope.move_controller.state = move.Start;
         $scope.move_controller.state.start($scope.move_controller);
+        $scope.move_readonly_controller.state = move_readonly.Start;
+        $scope.move_readonly_controller.state.start($scope.move_readonly_controller);
         $scope.details_panel_controller.state = details_panel_fsm.Start;
         $scope.details_panel_controller.state.start($scope.details_panel_controller);
         $scope.time_controller.state = time.Start;

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

@@ -67,7 +67,7 @@
             </g>
         </g> <!-- end frame_g -->
         <g ng-repeat="toolbox in [inventory_toolbox]">
-        <g awx-net-inventory-toolbox></g>
+        <g awx-net-inventory-toolbox ng-if="canEdit"></g>
         </g>
         <g awx-net-context-menu
                 context_menu="context_menus[0]"