diff --git a/awx/ui/client/features/networking/_index.less b/awx/ui/client/features/networking/_index.less index 2e9b1fbc91..a7a1dabf3c 100644 --- a/awx/ui/client/features/networking/_index.less +++ b/awx/ui/client/features/networking/_index.less @@ -1,8 +1,20 @@ +.Networking-shell{ + display:flex; + flex-direction: column; + width:100%; + align-items: flex-end; + position:absolute; +} + +.Networking-top{ + width:100%; +} + .Networking-header{ - border: 1px solid @at-color-panel-border; + border-top: 1px solid @at-color-panel-border; + border-bottom: 1px solid @at-color-panel-border; display:flex; height: 40px; - position: absolute; width:100%; background-color: @default-bg; } @@ -12,7 +24,7 @@ flex: 1 0 auto; font-size: 14px; font-weight: bold; - padding-left: 10px; + padding-left: 20px; align-items: center; display: flex; } @@ -29,45 +41,50 @@ .Networking-headerActionItem{ justify-content: flex-end; display: flex; - padding-right: 10px; + padding-right: 20px; font-size: 20px; } -.Networking-actionButton{ +.Networking-toolbarIcon{ font-size: 16px; height: 30px; min-width: 30px; color: @default-icon; background-color: inherit; border: none; - border-radius: 50%; + border-radius: 5px; + margin-left: 20px; } -.Networking-actionButton:hover{ +.Networking-toolbarIcon:hover{ background-color:@default-link; color: @default-bg; } -.Networking-panels{ - display:flex; +.Networking-toolbarIcon--selected{ + background-color:@default-link; + color: @default-bg; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; } -.Networking-leftPanel{ +.Networking-canvasPanel{ width:100% } -.Networking-rightPanel{ +.Networking-detailPanel{ border-left: 1px solid @at-color-panel-border; + border-bottom: 1px solid @at-color-panel-border; width:400px; - height: calc(~"100vh - 40px"); + height: calc(~"100vh - 115px"); padding: 20px; color: @default-interface-txt; font-size: 14px; font-weight: bold; - position: absolute; - top: 40px; - right: 0px; background-color: @default-bg; + position: absolute; + top:115px; + right:0px; } @@ -86,11 +103,8 @@ text-transform: uppercase; } -.Networking-resultRow { - width: 100%; - display: flex; - padding-bottom: 10px; - flex-wrap: wrap; +.Networking-resultRowLabel{ + width: initial; } .Networking-resultRow--variables { @@ -100,3 +114,166 @@ width: 100%; } } + +.Networking-noItems{ + margin-top: 0px; +} + +.Networking-toolbar{ + min-height: 40px; + width:100%; + background-color: #ebebeb; + display:flex; + flex: 1 0 auto; + align-items: center; +} + +.Networking-breadCrumbBar{ + background-color: white; + min-height: 35px; + border-bottom: 1px solid @at-color-panel-border; + border-top: 1px solid @at-color-panel-border; + align-items: center; + padding-left:20px; +} + +.Networking-breadCrumbText{ + color:@default-link; +} + +.Networking-toolbarLeftSide--expanded{ + width: calc(~"100% - 201px"); + // margin-left:201px; + left:201px; +} + +.Networking-toolbarBothPanels--expanded{ + width: calc(~"100% - 601px"); + // margin-right:400px; + left:201px; +} + +.Networking-toolbarRightSide--expanded{ + width: calc(~"100% - 445px"); +} + +.Networking-toolbarButton{ + margin: 4px 20px 5px 0px; + text-transform: uppercase; + background-color: #FFFFFF; + border-radius: 5px; + color: #707070; + border: 1px solid #B7B7B7; + cursor: pointer; + min-width: 70px; + min-height: 30px; + font-size: 12px; +} + +.Networking-toolbarButton:hover { + background-color: #f2f2f2; +} + +.Networking-toolbarLeftSide{ + display: flex; + flex-wrap: wrap; + width: 100%; + padding-left: 20px; +} + +.Networking-toolbarRightSide{ + align-items: center; + flex-wrap: wrap; + display: flex; + min-width: 400px; + padding-right: 20px; +} + +.Networking-searchBarContainer{ + height: 30px +} + +.Networking-searchButton{ + padding: 4px 10px; +} + +.Networking-searchButton i{ + color:#848992 +} + +.Networking-jumpToDropDownPanel{ + width: 150px; + padding: 10px 0px 10px 0px; + border: 1px solid #b7b7b7; + position: absolute; + right: 0px; + background-color: white; + z-index: 100; +} + +.Networking-dropdownPanelTitle{ + color: #707070; + padding-left:15px; + min-height: 30px; + font-size: 14px; + font-weight: bold; + display: flex; + align-items: center; +} + +.Networking-jumpToPanelOption{ + color: #707070; + padding-left:15px; + min-height: 30px; + font-size: 12px; + cursor: pointer; + display:flex; + align-items: center; +} + +.Networking-jumpToPanelOption:hover{ + background-color: #f2f2f2; +} + +.Networking-jumpToContainer, +.Networking-keyContainer{ + display: inline-block; + position: relative; +} + +.Networking-keyDropDownPanel{ + width: 180px; + padding: 10px 0px 10px 0px; + border: 1px solid #b7b7b7; + background-color: white; + position: absolute; + right:0px; + z-index: 100; +} + +.Networking-keyPanelOption{ + color: #707070; + padding-left:15px; + min-height: 30px; + font-size: 12px; + display:flex; + align-items: center; +} + +.Networking-keySymbol{ + background-color: #848992; + color: white; + border-radius: 50%; + width: 20px; + height: 20px; + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; +} + +.Networking-keySymbolLabel{ + font-size: 12px; + padding-left: 15px; + color: #707070 +} diff --git a/awx/ui/client/features/networking/networking.controller.js b/awx/ui/client/features/networking/networking.controller.js index 10bb7f40e3..f330d30ac1 100644 --- a/awx/ui/client/features/networking/networking.controller.js +++ b/awx/ui/client/features/networking/networking.controller.js @@ -7,30 +7,51 @@ function NetworkingController (models, $state, $scope, strings) { vm.strings = strings; vm.panelTitle = `${strings.get('state.BREADCRUMB_LABEL')} | ${inventory.name}`; - vm.hostDetail = false; - - vm.panelIsExpanded = false; - - vm.togglePanel = () => { - vm.panelIsExpanded = !vm.panelIsExpanded; - }; + vm.hostDetail = {}; + vm.rightPanelIsExpanded = false; + vm.leftPanelIsExpanded = true; + vm.jumpToPanelExpanded = false; + vm.keyPanelExpanded = false; vm.close = () => { $state.go('inventories'); }; - $scope.$on('closeDetailsPanel', () => { - vm.panelIsExpanded = false; + vm.redirectButtonHandler = (string) => { + $scope.$broadcast('toolbarButtonEvent', string); + }; + + vm.jumpTo = (string) => { + vm.jumpToPanelExpanded = !vm.jumpToPanelExpanded; + vm.keyPanelExpanded = false; + if (string) { + $scope.$broadcast('jumpTo', string); + } + }; + + vm.key = () => { + vm.keyPanelExpanded = !vm.keyPanelExpanded; + vm.jumpToPanelExpanded = false; + }; + + $scope.$on('overall_toolbox_collapsed', () => { + vm.leftPanelIsExpanded = !vm.leftPanelIsExpanded; }); - $scope.$on('retrievedHostData', (e, hostData, expand) => { + $scope.$on('closeDetailsPanel', () => { + vm.rightPanelIsExpanded = false; + vm.jumpToPanelExpanded = false; + vm.keyPanelExpanded = false; + }); + + $scope.$on('showDetails', (e, data, expand) => { if (expand) { - vm.panelIsExpanded = true; + vm.rightPanelIsExpanded = true; } - if (_.isEmpty(hostData)) { - $scope.hostDetail = false; + if (!_.has(data, 'host_id')) { + $scope.item = data; } else { - $scope.hostDetail = hostData; + $scope.item = data; } }); } diff --git a/awx/ui/client/features/networking/networking.view.html b/awx/ui/client/features/networking/networking.view.html index 9153809aad..6d225101c4 100644 --- a/awx/ui/client/features/networking/networking.view.html +++ b/awx/ui/client/features/networking/networking.view.html @@ -1,91 +1,180 @@ -
-
{{vm.panelTitle}}
-
-
- - -
-
- -
-
-
- - -
-
- -
- - -
- -
- NO HOST DETAIL -
- - -
- -
-
- DETAILS +
+
+
+
{{vm.panelTitle}}
+
+
+
- +
+
+
+ + + + + + + + +
+
+
+ +
+ +
+
+ +
+
+
+ +
+
+ KEY +
+
+
e
+
NEW SITE
+
+
+
a
+
NEW RACK
+
+
+
g
+
NEW GROUP
+
+
+
r
+
NEW ROUTER
+
+
+
s
+
NEW SWITCH
+
+
+
h
+
NEW HOST
+
+
+
l
+
NEW LINK
+
+
+
m
+
NEW STREAM
+
+
+
d
+
DEBUG MODE
+
+
+
p
+
HIDE CURSOR
+
+
+
b
+
HIDE BUTTONS
+
+
+
i
+
HIDE INTERFACES
+
+
+
0
+
RESET ZOOM
+
+
+
+
+ +
+
+ JUMP TO +
+
+ SITE +
+
+ RACK +
+
+ INVENTORY +
+
+ PROCESS +
+
+
+
+
+
+
foo-bar
+
+ +
+
- -
- -
- {{hostDetail.name}} -
-
- +
+ +
+
+ DETAILS | {{item.name}} +
+
+ - -
- - -
- + +
+ +
+ {{item.name}}
+ + +
+ {{item.type}} DETAILS NOT AVAILABLE +
+ + +
+ + +
+ +
+ + +
+
- diff --git a/awx/ui/client/src/network-ui/chevron_left.partial.svg b/awx/ui/client/src/network-ui/chevron_left.partial.svg index bc61bf9aa0..0ba380eaaa 100644 --- a/awx/ui/client/src/network-ui/chevron_left.partial.svg +++ b/awx/ui/client/src/network-ui/chevron_left.partial.svg @@ -1,8 +1,13 @@ - + diff --git a/awx/ui/client/src/network-ui/chevron_right.partial.svg b/awx/ui/client/src/network-ui/chevron_right.partial.svg index 47c151c6be..dcc1478520 100644 --- a/awx/ui/client/src/network-ui/chevron_right.partial.svg +++ b/awx/ui/client/src/network-ui/chevron_right.partial.svg @@ -1,7 +1,12 @@ - + diff --git a/awx/ui/client/src/network-ui/group.js b/awx/ui/client/src/network-ui/group.js index 3f2e9037cd..485aebbed4 100644 --- a/awx/ui/client/src/network-ui/group.js +++ b/awx/ui/client/src/network-ui/group.js @@ -88,6 +88,13 @@ inherits(_Placing, _State); var Placing = new _Placing(); exports.Placing = Placing; +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); @@ -244,12 +251,21 @@ _Selected3.prototype.onMouseMove = function (controller) { }; _Selected3.prototype.onMouseMove.transitions = ['Move']; -_Selected3.prototype.onMouseUp = function (controller) { +_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(EditLabel); + controller.changeState(ContextMenu); }; -_Selected3.prototype.onMouseUp.transitions = ['EditLabel']; +_Selected3.prototype.onMouseUp.transitions = ['ContextMenu']; _Move.prototype.onMouseMove = function (controller) { @@ -505,27 +521,7 @@ _Selected2.prototype.onKeyDown = function (controller, msg_type, $event) { if ($event.keyCode === 8) { //Delete - controller.changeState(Ready); - - var i = 0; - var index = -1; - var groups = controller.scope.selected_groups; - controller.scope.selected_groups = []; - for (i = 0; i < groups.length; i++) { - index = controller.scope.groups.indexOf(groups[i]); - if (index !== -1) { - groups[i].selected = false; - groups[i].remote_selected = false; - controller.scope.groups.splice(index, 1); - } - controller.scope.send_control_message(new messages.GroupDestroy(controller.scope.client_id, - groups[i].id, - groups[i].x1, - groups[i].y1, - groups[i].x2, - groups[i].y2, - groups[i].name)); - } + controller.scope.deleteGroup(); } else { controller.delegate_channel.send(msg_type, $event); } @@ -575,3 +571,22 @@ _Placing.prototype.onMouseDown = function (controller) { }; _Placing.prototype.onMouseDown.transitions = ['Resize']; + +_ContextMenu.prototype.end = function (controller) { + + controller.scope.removeContextMenu(); +}; + +_ContextMenu.prototype.onLabelEdit = function (controller) { + + controller.changeState(EditLabel); + +}; +_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel']; + +_ContextMenu.prototype.onMouseDown = function (controller) { + + controller.changeState(Ready); + +}; +_ContextMenu.prototype.onMouseDown.transitions = ['Ready']; diff --git a/awx/ui/client/src/network-ui/group.partial.svg b/awx/ui/client/src/network-ui/group.partial.svg index aa05db5e56..9565ad39bc 100644 --- a/awx/ui/client/src/network-ui/group.partial.svg +++ b/awx/ui/client/src/network-ui/group.partial.svg @@ -114,19 +114,18 @@ ng-attr-x="{{item.left_extent(scaledX)}}" ng-attr-y="{{item.top_extent(scaledY)}}" class="NetworkUI__group"/> - - - {{item.name}} -{{item.name}}{{item.edit_label?'_':''}} - + + {{item.name}} + {{item.name}}{{item.edit_label?'_':''}} + - - + + diff --git a/awx/ui/client/src/network-ui/host.partial.svg b/awx/ui/client/src/network-ui/host.partial.svg index 192be94dee..6faefc2504 100644 --- a/awx/ui/client/src/network-ui/host.partial.svg +++ b/awx/ui/client/src/network-ui/host.partial.svg @@ -1,87 +1,89 @@ + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + {{item.name}} + + {{item.name}}{{item.edit_label?'_':''}} - - {{item.name}} - - {{item.name}}{{item.edit_label?'_':''}} - diff --git a/awx/ui/client/src/network-ui/hotkeys.fsm.js b/awx/ui/client/src/network-ui/hotkeys.fsm.js index 51b4c1440b..17556054c8 100644 --- a/awx/ui/client/src/network-ui/hotkeys.fsm.js +++ b/awx/ui/client/src/network-ui/hotkeys.fsm.js @@ -48,6 +48,10 @@ _Enabled.prototype.onKeyDown = function(controller, msg_type, $event) { scope.first_channel.send("CopySelected", $event); } + if ($event.key === 'r' && ($event.ctrlKey || $event.metaKey)) { + location.reload(); + } + if ($event.key === 'l') { scope.first_channel.send("NewLink", $event); return; diff --git a/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg b/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg index 6c558dea12..a723dd7db8 100644 --- a/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg +++ b/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg @@ -4,7 +4,7 @@ diff --git a/awx/ui/client/src/network-ui/link.partial.svg b/awx/ui/client/src/network-ui/link.partial.svg index 201a0a5ba5..bd9f9f3641 100644 --- a/awx/ui/client/src/network-ui/link.partial.svg +++ b/awx/ui/client/src/network-ui/link.partial.svg @@ -68,13 +68,13 @@ rotate({{-link.slope()}}) translate(0, -5) "> - {{link.name}} -{{link.name}}{{link.edit_label?'_':''}} +{{link.name}}{{link.edit_label?'_':''}} {{link.from_interface.name}} -{{link.from_interface.name}}{{link.from_interface.edit_label ?'_':''}} +{{link.from_interface.name}}{{link.from_interface.edit_label ?'_':''}} {{link.to_interface.name}} -{{link.to_interface.name}}{{link.to_interface.edit_label?'_':''}} +{{link.to_interface.name}}{{link.to_interface.edit_label?'_':''}} { ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to get host data: ' + status }); }); } } + + // show details for interfaces + else if($scope.selected_interfaces.length === 1){ + let selected_interface = $scope.selected_interfaces[0]; + $scope.update_toolbox_heights(); + $scope.$emit('showDetails', selected_interface, panelBoolean !== null ? panelBoolean: true); + } + + // show details for links + else if($scope.selected_links.length === 1){ + let link = $scope.selected_links[0]; + $scope.update_toolbox_heights(); + $scope.$emit('showDetails', link, panelBoolean !== null ? panelBoolean: true); + } + + //show details for groups, racks, and sites + else if ($scope.selected_groups.length === 1){ + let group = $scope.selected_groups[0]; + $scope.update_toolbox_heights(); + $scope.$emit('showDetails', group, panelBoolean !== null ? panelBoolean: true); + } } }; $scope.onRenameContextButton = function (button) { - $scope.context_menus[0].enabled = false; + $scope.removeContextMenu(); $scope.first_channel.send("LabelEdit", {}); }; + $scope.deleteDevice = function(){ + var i = 0; + var j = 0; + var index = -1; + var devices = $scope.selected_devices; + var links = $scope.selected_links; + var all_links = $scope.links.slice(); + $scope.selected_devices = []; + $scope.selected_links = []; + $scope.move_controller.changeState(move.Ready); + for (i = 0; i < links.length; i++) { + index = $scope.links.indexOf(links[i]); + if (index !== -1) { + links[i].selected = false; + links[i].remote_selected = false; + $scope.links.splice(index, 1); + $scope.send_control_message(new messages.LinkDestroy($scope.client_id, + links[i].id, + links[i].from_device.id, + links[i].to_device.id, + links[i].from_interface.id, + links[i].to_interface.id, + links[i].name)); + } + } + for (i = 0; i < devices.length; i++) { + index = $scope.devices.indexOf(devices[i]); + if (index !== -1) { + $scope.devices.splice(index, 1); + $scope.send_control_message(new messages.DeviceDestroy($scope.client_id, + devices[i].id, + devices[i].x, + devices[i].y, + devices[i].name, + devices[i].type, + devices[i].host_id)); + } + for (j = 0; j < all_links.length; j++) { + if (all_links[j].to_device === devices[i] || + all_links[j].from_device === devices[i]) { + index = $scope.links.indexOf(all_links[j]); + if (index !== -1) { + $scope.links.splice(index, 1); + } + } + } + } + }; + + $scope.deleteGroup = function(){ + var i = 0; + var index = -1; + var selected_groups = $scope.selected_groups; + $scope.selected_groups = []; + $scope.group_controller.changeState(group.Ready); + + function removeSingleGroup(group){ + index = $scope.groups.indexOf(group); + if (index !== -1) { + group.selected = false; + group.remote_selected = false; + $scope.groups.splice(index, 1); + } + $scope.send_control_message(new messages.GroupDestroy($scope.client_id, + group.id, + group.x1, + group.y1, + group.x2, + group.y2, + group.name)); + } + + if($scope.current_scale <= 0.5){ + // current scale is in racks mode or sites mode + for (i = 0; i < selected_groups.length; i++) { + let group = selected_groups[i]; + if(group.groups.length > 0){ + for(var k = 0; k < group.groups.length; k++){ + let nested_group = group.groups[k]; + removeSingleGroup(nested_group); + } + } + // remove all the nested devices and links + $scope.selected_devices = group.devices; + $scope.selected_links = group.links; + $scope.deleteDevice(); + + removeSingleGroup(group); + } + } + if($scope.current_scale > 0.5){ + // current scale is in devices mode + for (i = 0; i < selected_groups.length; i++) { + let group = selected_groups[i]; + removeSingleGroup(group); + } + } + }; + + $scope.onDeleteContextMenu = function($event){ + $scope.removeContextMenu(); + if($scope.selected_devices.length === 1){ + $scope.deleteDevice(); + } + else if($scope.selected_groups.length === 1){ + $scope.deleteGroup(); + } + }; + // Button Event Handlers $scope.onToggleToolboxButtonLeft = function (button) { $scope.first_channel.send("ToggleToolbox", {}); $scope.action_icons[0].fsm.handle_message("Disable", {}); $scope.action_icons[1].fsm.handle_message("Enable", {}); $scope.overall_toolbox_collapsed = !$scope.overall_toolbox_collapsed; + $scope.$emit('overall_toolbox_collapsed'); }; $scope.onToggleToolboxButtonRight = function (button) { @@ -617,8 +783,37 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, $scope.action_icons[0].fsm.handle_message("Enable", {}); $scope.action_icons[1].fsm.handle_message("Disable", {}); $scope.overall_toolbox_collapsed = !$scope.overall_toolbox_collapsed; + $scope.$emit('overall_toolbox_collapsed'); }; + $scope.$on('toolbarButtonEvent', function(e, functionName){ + $scope[`on${functionName}Button`](); + }); + + $scope.$on('jumpTo', function(e, zoomLevel){ + switch (zoomLevel){ + case 'site': + $scope.current_scale = 0.051; + break; + case 'rack': + $scope.current_scale = 0.11; + break; + case 'inventory': + $scope.current_scale = 0.51; + break; + case 'process': + $scope.current_scale = 1.1; + break; + } + // var new_panX = controller.scope.{{somethinghere}} - new_scale * ((controller.scope.mouseX - controller.scope.panX) / controller.scope.current_scale); + // var new_panY = controller.scope.mouseY - new_scale * ((controller.scope.mouseY - controller.scope.panY) / controller.scope.current_scale); + // // controller.scope.updateScaledXY(); + // // controller.scope.current_scale = new_scale; + // controller.scope.panX = new_panX; + // controller.scope.panY = new_panY; + $scope.updateScaledXY(); + $scope.updatePanAndScale(); + }); $scope.onDeployButton = function (button) { $scope.send_control_message(new messages.Deploy($scope.client_id)); @@ -724,18 +919,20 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, // Context Menu Buttons $scope.context_menu_buttons = [ new models.ContextMenuButton("Rename", 210, 200, 160, 26, $scope.onRenameContextButton, $scope), - new models.ContextMenuButton("Details", 236, 231, 160, 26, $scope.onDetailsContextButton, $scope) + new models.ContextMenuButton("Details", 236, 231, 160, 26, $scope.onDetailsContextButton, $scope), + new models.ContextMenuButton("Delete", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope) ]; // 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, 90, $scope.contextMenuCallback, false, $scope.context_menu_buttons, $scope) ]; // Icons + var actionIconVerticalOffset = toolboxTopMargin + (toolboxHeight/2); $scope.action_icons = [ - new models.ActionIcon("chevron-left", 170, $scope.graph.height/2, 16, $scope.onToggleToolboxButtonLeft, true, $scope), - new models.ActionIcon("chevron-right", 15, $scope.graph.height/2, 16, $scope.onToggleToolboxButtonRight, false, $scope) + new models.ActionIcon("chevron-left", 170, actionIconVerticalOffset, 16, $scope.onToggleToolboxButtonLeft, true, $scope), + new models.ActionIcon("chevron-right", 15, actionIconVerticalOffset, 16, $scope.onToggleToolboxButtonRight, false, $scope) ]; $scope.onDownloadTraceButton = function (button) { @@ -761,18 +958,18 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, var button_offset = 200; $scope.buttons = [ - new models.Button("DEPLOY", button_offset + 10, 48, 70, 30, $scope.onDeployButton, $scope), - new models.Button("DESTROY", button_offset + 90, 48, 80, 30, $scope.onDestroyButton, $scope), - new models.Button("RECORD", button_offset + 180, 48, 80, 30, $scope.onRecordButton, $scope), - new models.Button("EXPORT", button_offset + 270, 48, 70, 30, $scope.onExportButton, $scope), - new models.Button("DISCOVER", button_offset + 350, 48, 80, 30, $scope.onDiscoverButton, $scope), - new models.Button("LAYOUT", button_offset + 440, 48, 70, 30, $scope.onLayoutButton, $scope), - new models.Button("CONFIGURE", button_offset + 520, 48, 90, 30, $scope.onConfigureButton, $scope), - new models.Button("EXPORT YAML", button_offset + 620, 48, 120, 30, $scope.onExportYamlButton, $scope), - new models.Button("DOWNLOAD TRACE", button_offset + 750, 48, 150, 30, $scope.onDownloadTraceButton, $scope), - new models.Button("DOWNLOAD RECORDING", button_offset + 910, 48, 170, 30, $scope.onDownloadRecordingButton, $scope), - new models.Button("UPLOAD TEST", button_offset + 10, 88, 100, 30, $scope.onUploadTestButton, $scope), - new models.Button("RUN TESTS", button_offset + 120, 88, 100, 30, $scope.onRunTestsButton, $scope), + // new models.Button("DEPLOY", button_offset + 10, 48, 70, 30, $scope.onDeployButton, $scope), + // new models.Button("DESTROY", button_offset + 90, 48, 80, 30, $scope.onDestroyButton, $scope), + // new models.Button("RECORD", button_offset + 180, 48, 80, 30, $scope.onRecordButton, $scope), + // new models.Button("EXPORT", button_offset + 270, 48, 70, 30, $scope.onExportButton, $scope), + // new models.Button("DISCOVER", button_offset + 350, 48, 80, 30, $scope.onDiscoverButton, $scope), + // new models.Button("LAYOUT", button_offset + 440, 48, 70, 30, $scope.onLayoutButton, $scope), + // new models.Button("CONFIGURE", button_offset + 520, 48, 90, 30, $scope.onConfigureButton, $scope), + // new models.Button("EXPORT YAML", button_offset + 620, 48, 120, 30, $scope.onExportYamlButton, $scope), + // new models.Button("DOWNLOAD TRACE", button_offset + 750, 48, 150, 30, $scope.onDownloadTraceButton, $scope), + // new models.Button("DOWNLOAD RECORDING", button_offset + 910, 48, 170, 30, $scope.onDownloadRecordingButton, $scope), + // new models.Button("UPLOAD TEST", button_offset + 10, 88, 100, 30, $scope.onUploadTestButton, $scope), + // new models.Button("RUN TESTS", button_offset + 120, 88, 100, 30, $scope.onRunTestsButton, $scope), ]; $scope.all_buttons = []; @@ -1580,7 +1777,29 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, $document.unbind('keydown', $scope.onKeyDown); }); + $scope.update_toolbox_heights = function(){ + toolboxTopMargin = $('.Networking-top').height(); + toolboxTitleMargin = toolboxTopMargin + 35; + toolboxHeight = $scope.graph.height - toolboxTopMargin; + + let toolboxes = ['site_toolbox', 'rack_toolbox', 'inventory_toolbox', 'app_toolbox']; + toolboxes.forEach((toolbox) => { + $scope[toolbox].y = toolboxTopMargin; + $scope[toolbox].height = toolboxHeight; + $scope[toolbox].title_coordinates.y = toolboxTitleMargin; + }); + + $scope.action_icons.forEach((icon) => { + actionIconVerticalOffset = toolboxTopMargin + (toolboxHeight/2); + icon.y = actionIconVerticalOffset; + }); + + $('.Networking-detailPanel').height(toolboxHeight); + $('.Networking-detailPanel').css('top', toolboxTopMargin); + }; + $scope.update_size = function () { + $scope.update_toolbox_heights(); }; $scope.update_offsets = function () { diff --git a/awx/ui/client/src/network-ui/network_ui.partial.svg b/awx/ui/client/src/network-ui/network_ui.partial.svg index 382af59e43..5c1e03981e 100644 --- a/awx/ui/client/src/network-ui/network_ui.partial.svg +++ b/awx/ui/client/src/network-ui/network_ui.partial.svg @@ -17,7 +17,7 @@ - + - + - + - + @@ -77,7 +77,7 @@ - + diff --git a/awx/ui/client/src/network-ui/rack.fsm.js b/awx/ui/client/src/network-ui/rack.fsm.js index af9d4cf448..8cfb22b18f 100644 --- a/awx/ui/client/src/network-ui/rack.fsm.js +++ b/awx/ui/client/src/network-ui/rack.fsm.js @@ -67,7 +67,12 @@ inherits(_Move, _State); var Move = new _Move(); exports.Move = Move; - +function _ContextMenu () { + this.name = 'ContextMenu'; +} +inherits(_ContextMenu, _State); +var ContextMenu = new _ContextMenu(); +exports.ContextMenu = ContextMenu; _Start.prototype.start = function (controller) { @@ -323,14 +328,20 @@ _Selected2.prototype.onMouseDown = function (controller, msg_type, $event) { }; _Selected2.prototype.onMouseDown.transitions = ['Selected3', 'Ready']; +_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); + }); - -_Selected3.prototype.onMouseUp = function (controller) { - - controller.changeState(EditLabel); - + controller.changeState(ContextMenu); }; -_Selected3.prototype.onMouseUp.transitions = ['EditLabel']; +_Selected3.prototype.onMouseUp.transitions = ['ContextMenu']; _Selected3.prototype.onMouseMove = function (controller) { @@ -407,6 +418,7 @@ _Ready.prototype.onMouseDown = function (controller, msg_type, $event) { if (selected) { controller.changeState(Selected1); + controller.scope.onDetailsContextButton(); } else { controller.delegate_channel.send(msg_type, $event); } @@ -510,3 +522,24 @@ _Move.prototype.onMouseMove = function (controller) { controller.scope.pressedScaledY = controller.scope.scaledY; }; + +_Move.prototype.onTouchMove = _Move.prototype.onMouseMove; + +_ContextMenu.prototype.end = function (controller) { + + controller.scope.removeContextMenu(); +}; + +_ContextMenu.prototype.onLabelEdit = function (controller) { + + controller.changeState(EditLabel); + +}; +_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel']; + +_ContextMenu.prototype.onMouseDown = function (controller) { + + controller.changeState(Ready); + +}; +_ContextMenu.prototype.onMouseDown.transitions = ['Ready']; diff --git a/awx/ui/client/src/network-ui/rack.partial.svg b/awx/ui/client/src/network-ui/rack.partial.svg index e86debee66..b4eb56e7f4 100644 --- a/awx/ui/client/src/network-ui/rack.partial.svg +++ b/awx/ui/client/src/network-ui/rack.partial.svg @@ -1,118 +1,242 @@ - - - - - - - + + + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + {{item.name}} + + {{item.name}}{{item.edit_label?'_':''}} + - - {{item.name}} - - {{item.name}}{{item.edit_label?'_':''}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{item.name}} + + {{item.name}}{{item.edit_label?'_':''}} + diff --git a/awx/ui/client/src/network-ui/rack_icon.partial.svg b/awx/ui/client/src/network-ui/rack_icon.partial.svg index f3666ee240..4628a89598 100644 --- a/awx/ui/client/src/network-ui/rack_icon.partial.svg +++ b/awx/ui/client/src/network-ui/rack_icon.partial.svg @@ -1,116 +1,117 @@ + + + + + + + + + + + - - - - - + + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + {{item.name}} + + {{item.name}}{{item.edit_label?'_':''}} - - {{item.name}} - - {{item.name}}{{item.edit_label?'_':''}} - diff --git a/awx/ui/client/src/network-ui/router.partial.svg b/awx/ui/client/src/network-ui/router.partial.svg index fd6835ba97..03a14595c1 100644 --- a/awx/ui/client/src/network-ui/router.partial.svg +++ b/awx/ui/client/src/network-ui/router.partial.svg @@ -1,79 +1,81 @@ + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + {{item.name}} + {{item.name}}{{item.edit_label?'_':''}} - - {{item.name}} - {{item.name}}{{item.edit_label?'_':''}} - diff --git a/awx/ui/client/src/network-ui/site.fsm.js b/awx/ui/client/src/network-ui/site.fsm.js index e37fae6536..d886bbb9b7 100644 --- a/awx/ui/client/src/network-ui/site.fsm.js +++ b/awx/ui/client/src/network-ui/site.fsm.js @@ -68,6 +68,13 @@ var Move = new _Move(); exports.Move = Move; +function _ContextMenu () { + this.name = 'ContextMenu'; +} +inherits(_ContextMenu, _State); +var ContextMenu = new _ContextMenu(); +exports.ContextMenu = ContextMenu; + _Start.prototype.start = function (controller) { @@ -408,12 +415,21 @@ _Selected2.prototype.onMouseDown.transitions = ['Selected3', 'Ready']; -_Selected3.prototype.onMouseUp = function (controller) { +_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(EditLabel); + controller.changeState(ContextMenu); }; -_Selected3.prototype.onMouseUp.transitions = ['EditLabel']; +_Selected3.prototype.onMouseUp.transitions = ['ContextMenu']; _Selected3.prototype.onMouseMove = function (controller) { @@ -490,6 +506,7 @@ _Ready.prototype.onMouseDown = function (controller, msg_type, $event) { if (selected) { controller.changeState(Selected1); + controller.scope.onDetailsContextButton(); } else { controller.delegate_channel.send(msg_type, $event); } @@ -614,3 +631,24 @@ _Move.prototype.onMouseMove = function (controller) { controller.scope.pressedScaledY = controller.scope.scaledY; }; + +_Move.prototype.onTouchMove = _Move.prototype.onMouseMove; + +_ContextMenu.prototype.end = function (controller) { + + controller.scope.removeContextMenu(); +}; + +_ContextMenu.prototype.onLabelEdit = function (controller) { + + controller.changeState(EditLabel); + +}; +_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel']; + +_ContextMenu.prototype.onMouseDown = function (controller) { + + controller.changeState(Ready); + +}; +_ContextMenu.prototype.onMouseDown.transitions = ['Ready']; diff --git a/awx/ui/client/src/network-ui/site.partial.svg b/awx/ui/client/src/network-ui/site.partial.svg index b6a11ffb7d..a58ee52f93 100644 --- a/awx/ui/client/src/network-ui/site.partial.svg +++ b/awx/ui/client/src/network-ui/site.partial.svg @@ -1,4 +1,5 @@ + @@ -94,10 +95,115 @@ {{item.name}} - {{item.name}}{{item.edit_label?'_':''}} + {{item.name}}{{item.edit_label?'_':''}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{item.name}} + {{item.name}}{{item.edit_label?'_':''}} + diff --git a/awx/ui/client/src/network-ui/site_icon.partial.svg b/awx/ui/client/src/network-ui/site_icon.partial.svg index 4b49b20fd2..9fcd6c85c3 100644 --- a/awx/ui/client/src/network-ui/site_icon.partial.svg +++ b/awx/ui/client/src/network-ui/site_icon.partial.svg @@ -1,100 +1,102 @@ + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + - - - - - - - - - - - - - - - - + + + + + + - - + + + - - - - + d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2 + C50,4.2,45.8,0,40.8,0z"/> + + + + + + + + + + + + {{item.name}} + + {{item.name}}{{item.edit_label?'_':''}} - - {{item.name}} - - {{item.name}}{{item.edit_label?'_':''}} - diff --git a/awx/ui/client/src/network-ui/stream.partial.svg b/awx/ui/client/src/network-ui/stream.partial.svg index 7bb8bf1860..7a5c759ee0 100644 --- a/awx/ui/client/src/network-ui/stream.partial.svg +++ b/awx/ui/client/src/network-ui/stream.partial.svg @@ -124,11 +124,11 @@ translate(0, {{stream.flip_text_offset()}}) "> {{stream.label}} -{{stream.label}}{{stream.edit_label?'_':''}} +{{stream.label}}{{stream.edit_label?'_':''}} diff --git a/awx/ui/client/src/network-ui/style.less b/awx/ui/client/src/network-ui/style.less index f45a56f353..9db36896ef 100644 --- a/awx/ui/client/src/network-ui/style.less +++ b/awx/ui/client/src/network-ui/style.less @@ -31,12 +31,9 @@ @button-body-pressed: #848992; @button-text-pressed: #ffffff; @green: #5CB85C; -@host-green: #449D44; @red: #D9534F; @blue: #337AB7; @light-toolbox-background: #f6f6f6; -@rack-orange: #F0AD4E; -@site-orange: #EC971F; @icon-background-hover:@blue; .NetworkUI { @@ -118,7 +115,7 @@ } .NetworkUI__router { - fill: @green; + fill: @blue; } .NetworkUI__router--background{ @@ -197,7 +194,7 @@ } .NetworkUI__rack { - fill: @rack-orange; + fill: @blue; } .NetworkUI__rack--background { @@ -243,13 +240,13 @@ } .NetworkUI__site { - fill: @widget-body; + fill: @blue; stroke: @dark-widget-detail; stroke-width: 2; } .NetworkUI__site--fill0{ - fill:@site-orange; + fill:@blue; } .NetworkUI__site--fill1{ @@ -348,7 +345,7 @@ } .NetworkUI__host { - fill: @host-green; + fill: @blue; } .NetworkUI__host--background { @@ -470,7 +467,7 @@ .NetworkUI__interface { - fill: @dark-widget-detail; + fill: @button-outline; } .NetworkUI__interface--selected { @@ -551,7 +548,7 @@ stroke: @button-outline; stroke-width: 1; rx: 0; - stroke-dasharray: calc(~"100vh - 40px"); + stroke-dasharray: calc(~"100vh - 115px"); stroke-dashoffset: -45; } @@ -560,7 +557,7 @@ stroke-width: 1; fill: none; rx: 0; - stroke-dasharray: calc(~"100vh - 40px"); + stroke-dasharray: calc(~"100vh - 115px"); stroke-dashoffset: -200; } @@ -636,23 +633,27 @@ font-family: 'Open Sans'; } -.NetworkUI_chevron{ +.NetworkUI__chevron{ fill: @button-body-pressed; } -.NetworkUI_chevron--hover{ +.NetworkUI__chevron--hover, +.NetworkUI__chevron--pressed{ cursor: pointer; fill: white; } -.NetworkUI_iconBackground{ +.NetworkUI__iconBackground{ fill:@button-body; + cursor: pointer; } -.NetworkUI_iconBackground--hover{ - fill:@icon-background-hover; +.NetworkUI__iconBackground--hover, +.NetworkUI__iconBackground--pressed{ + fill: @icon-background-hover; } + .NetworkUI__toolbox--title{ fill: @dark-widget-detail; text-transform: uppercase; diff --git a/awx/ui/client/src/network-ui/switch.partial.svg b/awx/ui/client/src/network-ui/switch.partial.svg index 3b7ed184f2..2beace0df0 100644 --- a/awx/ui/client/src/network-ui/switch.partial.svg +++ b/awx/ui/client/src/network-ui/switch.partial.svg @@ -1,81 +1,83 @@ + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - {{item.name}} - {{item.name}}{{item.edit_label?'_':''}} - + + + + + + + + + + + + + + + + + + + + + + + + + + + {{item.name}} + {{item.name}}{{item.edit_label?'_':''}} + + diff --git a/awx/ui/client/src/network-ui/view.js b/awx/ui/client/src/network-ui/view.js index 0c25fb0dd2..24cfdd7bab 100644 --- a/awx/ui/client/src/network-ui/view.js +++ b/awx/ui/client/src/network-ui/view.js @@ -80,6 +80,8 @@ _Scale.prototype.onMouseWheel = function (controller, msg_type, message) { controller.scope.current_scale = new_scale; controller.scope.panX = new_panX; controller.scope.panY = new_panY; + var item = controller.scope.context_menus[0]; + item.enabled = false; controller.scope.updatePanAndScale(); controller.changeState(Ready); };