diff --git a/awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js b/awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js index 5410f1f54c..7ca8d6933d 100644 --- a/awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js +++ b/awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js @@ -73,6 +73,18 @@ function InventoriesList($scope, inventory.linkToDetails = (inventory.kind && inventory.kind === 'smart') ? `inventories.editSmartInventory({smartinventory_id:${inventory.id}})` : `inventories.edit({inventory_id:${inventory.id}})`; } + $scope.copyInventory = inventory => { + Wait('start'); + new Inventory('get', inventory.id) + .then(model => model.copy()) + .then(copy => $scope.editInventory(copy)) + .catch(({ data, status }) => { + const params = { hdr: 'Error!', msg: `Call to copy failed. Return status: ${status}` }; + ProcessErrors($scope, data, status, null, params); + }) + .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}); diff --git a/awx/ui/client/src/network-ui/animation.fsm.js b/awx/ui/client/src/network-ui/animation.fsm.js index 19fe58c731..dc1e737d50 100644 --- a/awx/ui/client/src/network-ui/animation.fsm.js +++ b/awx/ui/client/src/network-ui/animation.fsm.js @@ -53,7 +53,7 @@ _Running.prototype.start = function (controller) { } controller.scope.callback(controller.scope); controller.scope.scope.$apply(); - }, 17); + }, controller.scope.frame_delay); }; _Running.prototype.onAnimationCancelled = function (controller) { diff --git a/awx/ui/client/src/network-ui/animations.js b/awx/ui/client/src/network-ui/animations.js index af73c718d5..74ead1a423 100644 --- a/awx/ui/client/src/network-ui/animations.js +++ b/awx/ui/client/src/network-ui/animations.js @@ -1,33 +1,9 @@ -/* - * Uses y = cx^2 * cdx to calculate the height of the camera - * Uses scale = 1 / (height + 1) to calculate the scale of the virtual canvas - */ - function scale_animation (scope) { - var d = scope.steps; - var c = scope.data.c; - var x = scope.frame_number; var initial_height = ((1 / scope.data.current_scale) - 1); - var a = -1 * initial_height / (c * d); - var height = 0; - if(scope.data.distance > 0) { - height = (x + a) * (x - d) * c + scope.data.end_height; - } else { - height = (scope.data.end_height - initial_height) * (scope.frame_number / scope.steps) + initial_height; - } - //console.log({x: x, - // c: c, - // d: d, - // a: a, - // h: height, - // i: initial_height}); + var height = (scope.data.end_height - initial_height) * (scope.frame_number / scope.steps) + initial_height; scope.data.scope.current_scale = 1 / (1 + height); - //console.log(scope.data.scope.current_scale); - //scope.data.scope.current_scale = 1.0; - scope.data.scope.first_channel.send("ScaleChanged", {}); - scope.data.scope.first_channel.send("ScaleChanged", {}); scope.data.scope.updatePanAndScale(); scope.data.scope.$emit('awxNet-UpdateZoomWidget', scope.data.scope.current_scale, scope.data.updateZoomBoolean); } @@ -36,14 +12,9 @@ exports.scale_animation = scale_animation; function pan_animation (scope) { var incr_x = (scope.data.x2 - scope.data.x1) / scope.steps; var incr_y = (scope.data.y2 - scope.data.y1) / scope.steps; - //console.log({incr_x: incr_x, incr_y: incr_y}); var v_x = incr_x * scope.frame_number + scope.data.x1; var v_y = incr_y * scope.frame_number + scope.data.y1; var p = scope.data.scope.to_pan(v_x, v_y); - //console.log({v_x: v_x, v_y: v_y}); - //console.log({p_x: p.x, p_y: p.y}); - //scope.data.scope.panX = scope.data.scope.graph.width/2 - scope.data.scope.current_scale * p.x / 1.0; - //scope.data.scope.panY = scope.data.scope.graph.height/2 - scope.data.scope.current_scale * p.y / 1.0; scope.data.scope.panX = p.x + scope.data.scope.graph.width/2; scope.data.scope.panY = p.y + scope.data.scope.graph.height/2; scope.data.scope.first_channel.send("PanChanged", {}); diff --git a/awx/ui/client/src/network-ui/buttons.fsm.js b/awx/ui/client/src/network-ui/buttons.fsm.js new file mode 100644 index 0000000000..2a01a0bd3a --- /dev/null +++ b/awx/ui/client/src/network-ui/buttons.fsm.js @@ -0,0 +1,96 @@ +/* Copyright (c) 2017 Red Hat, Inc. */ +var inherits = require('inherits'); +var fsm = require('./fsm.js'); + +function _State () { +} +inherits(_State, fsm._State); + + +function _Ready () { + this.name = 'Ready'; +} +inherits(_Ready, _State); +var Ready = new _Ready(); +exports.Ready = Ready; + +function _Start () { + this.name = 'Start'; +} +inherits(_Start, _State); +var Start = new _Start(); +exports.Start = Start; + +function _ButtonPressed () { + this.name = 'ButtonPressed'; +} +inherits(_ButtonPressed, _State); +var ButtonPressed = new _ButtonPressed(); +exports.ButtonPressed = ButtonPressed; + + + + +_Ready.prototype.onMouseDown = function (controller, msg_type, $event) { + + var i = 0; + var buttons = controller.scope.all_buttons; + var button = null; + for (i = 0; i < buttons.length; i++) { + button = buttons[i]; + if (button.is_selected(controller.scope.mouseX, controller.scope.mouseY)) { + button.fsm.handle_message(msg_type, $event); + controller.changeState(ButtonPressed); + break; + } + button = null; + } + if (button === null) { + controller.delegate_channel.send(msg_type, $event); + } + +}; +_Ready.prototype.onMouseDown.transitions = ['ButtonPressed']; + +_Ready.prototype.onMouseMove = function (controller, msg_type, $event) { + + if (!controller.scope.hide_buttons) { + + var i = 0; + var buttons = controller.scope.all_buttons; + var button = null; + for (i = 0; i < buttons.length; i++) { + button = buttons[i]; + button.mouse_over = false; + if (button.is_selected(controller.scope.mouseX, controller.scope.mouseY)) { + button.mouse_over = true; + } + } + } + + controller.delegate_channel.send(msg_type, $event); +}; + + +_Start.prototype.start = function (controller) { + + controller.changeState(Ready); + +}; +_Start.prototype.start.transitions = ['Ready']; + + + +_ButtonPressed.prototype.onMouseUp = function (controller, msg_type, $event) { + + var i = 0; + var buttons = controller.scope.all_buttons; + var button = null; + for (i = 0; i < buttons.length; i++) { + button = buttons[i]; + button.fsm.handle_message(msg_type, $event); + } + controller.changeState(Ready); + +}; +_ButtonPressed.prototype.onMouseUp.transitions = ['Ready']; diff --git a/awx/ui/client/src/network-ui/chevron.left.directive.js b/awx/ui/client/src/network-ui/chevron.left.directive.js deleted file mode 100644 index 2dbb45950c..0000000000 --- a/awx/ui/client/src/network-ui/chevron.left.directive.js +++ /dev/null @@ -1,14 +0,0 @@ -/* Copyright (c) 2017 Red Hat, Inc. */ - -const templateUrl = require('~network-ui/chevron_left.partial.svg'); - -function chevronLeft () { - return { - restrict: 'A', - templateUrl, - scope: { - actionIcon: '=' - } - }; -} -exports.chevronLeft = chevronLeft; diff --git a/awx/ui/client/src/network-ui/chevron.right.directive.js b/awx/ui/client/src/network-ui/chevron.right.directive.js deleted file mode 100644 index 995d511f2c..0000000000 --- a/awx/ui/client/src/network-ui/chevron.right.directive.js +++ /dev/null @@ -1,14 +0,0 @@ -/* Copyright (c) 2017 Red Hat, Inc. */ - -const templateUrl = require('~network-ui/chevron_right.partial.svg'); - -function chevronRight () { - return { - restrict: 'A', - templateUrl, - scope: { - actionIcon: '=' - } - }; -} -exports.chevronRight = chevronRight; diff --git a/awx/ui/client/src/network-ui/chevron_left.partial.svg b/awx/ui/client/src/network-ui/chevron_left.partial.svg deleted file mode 100644 index 0ba380eaaa..0000000000 --- a/awx/ui/client/src/network-ui/chevron_left.partial.svg +++ /dev/null @@ -1,13 +0,0 @@ - - diff --git a/awx/ui/client/src/network-ui/chevron_right.partial.svg b/awx/ui/client/src/network-ui/chevron_right.partial.svg deleted file mode 100644 index dcc1478520..0000000000 --- a/awx/ui/client/src/network-ui/chevron_right.partial.svg +++ /dev/null @@ -1,12 +0,0 @@ - - diff --git a/awx/ui/client/src/network-ui/debug.partial.svg b/awx/ui/client/src/network-ui/debug.partial.svg index 3d037ea094..ff49f518f0 100644 --- a/awx/ui/client/src/network-ui/debug.partial.svg +++ b/awx/ui/client/src/network-ui/debug.partial.svg @@ -33,7 +33,6 @@ Buttons State: {{buttons_controller.state.name}} Time State: {{time_controller.state.name}} Time Pointer: {{time_pointer}} - History: {{history.length}} Group State: {{group_controller.state.name}} Hotkeys State: {{hotkeys_controller.state.name}} Mode State: {{mode_controller.state.name}} diff --git a/awx/ui/client/src/network-ui/details.panel.fsm.js b/awx/ui/client/src/network-ui/details.panel.fsm.js index 007057460a..2d8560594d 100644 --- a/awx/ui/client/src/network-ui/details.panel.fsm.js +++ b/awx/ui/client/src/network-ui/details.panel.fsm.js @@ -55,7 +55,6 @@ _Collapsed.prototype.onDetailsPanel.transitions = ['Expanded']; _Expanded.prototype.onDetailsPanelClose = function (controller, msg_type, $event) { controller.scope.$parent.vm.rightPanelIsExpanded = false; - controller.scope.$parent.vm.jumpToPanelExpanded = false; controller.scope.$parent.vm.keyPanelExpanded = false; controller.changeState(Collapsed); controller.handle_message(msg_type, $event); diff --git a/awx/ui/client/src/network-ui/fsm.js b/awx/ui/client/src/network-ui/fsm.js index 4c04dfa971..e66e865a57 100644 --- a/awx/ui/client/src/network-ui/fsm.js +++ b/awx/ui/client/src/network-ui/fsm.js @@ -10,11 +10,6 @@ function Channel(from_controller, to_controller, tracer) { exports.Channel = Channel; Channel.prototype.send = function(msg_type, message) { - if (this.trace && this.from_controller !== null) { - this.tracer.send_trace_message(new messages.ChannelTrace(this.from_controller.name, - this.to_controller.name, - msg_type)); - } this.to_controller.handle_message(msg_type, message); }; @@ -25,11 +20,6 @@ function NullChannel(from_controller, tracer) { } NullChannel.prototype.send = function(msg_type) { - if (this.trace) { - this.tracer.send_trace_message(new messages.ChannelTrace(this.from_controller.name, - 'null', - msg_type)); - } }; function FSMController (scope, name, initial_state, tracer) { 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 a723dd7db8..06e02a965d 100644 --- a/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg +++ b/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg @@ -1,5 +1,6 @@ + {{toolbox.name}} - @@ -112,3 +109,4 @@ + diff --git a/awx/ui/client/src/network-ui/messages.js b/awx/ui/client/src/network-ui/messages.js index abf68e22e0..88950cee74 100644 --- a/awx/ui/client/src/network-ui/messages.js +++ b/awx/ui/client/src/network-ui/messages.js @@ -17,14 +17,6 @@ function DeviceMove(sender, id, x, y, previous_x, previous_y) { } exports.DeviceMove = DeviceMove; -function DeviceInventoryUpdate(sender, id, host_id) { - this.msg_type = "DeviceInventoryUpdate"; - this.sender = sender; - this.id = id; - this.host_id = host_id; -} -exports.DeviceInventoryUpdate = DeviceInventoryUpdate; - function DeviceCreate(sender, id, x, y, name, type, host_id) { this.msg_type = "DeviceCreate"; this.sender = sender; @@ -49,15 +41,6 @@ function DeviceDestroy(sender, id, previous_x, previous_y, previous_name, previo } exports.DeviceDestroy = DeviceDestroy; -function DeviceLabelEdit(sender, id, name, previous_name) { - this.msg_type = "DeviceLabelEdit"; - this.sender = sender; - this.id = id; - this.name = name; - this.previous_name = previous_name; -} -exports.DeviceLabelEdit = DeviceLabelEdit; - function DeviceSelected(sender, id) { this.msg_type = "DeviceSelected"; this.sender = sender; @@ -81,25 +64,6 @@ function InterfaceCreate(sender, device_id, id, name) { } exports.InterfaceCreate = InterfaceCreate; -function InterfaceLabelEdit(sender, id, device_id, name, previous_name) { - this.msg_type = "InterfaceLabelEdit"; - this.sender = sender; - this.id = id; - this.device_id = device_id; - this.name = name; - this.previous_name = previous_name; -} -exports.InterfaceLabelEdit = InterfaceLabelEdit; - -function LinkLabelEdit(sender, id, name, previous_name) { - this.msg_type = "LinkLabelEdit"; - this.sender = sender; - this.id = id; - this.name = name; - this.previous_name = previous_name; -} -exports.LinkLabelEdit = LinkLabelEdit; - function LinkCreate(sender, id, from_device_id, to_device_id, from_interface_id, to_interface_id) { this.msg_type = "LinkCreate"; this.id = id; @@ -208,11 +172,6 @@ function ViewPort(sender, scale, panX, panY, graph_width, graph_height, trace_id } exports.ViewPort = ViewPort; -function NewDevice(type) { - this.type = type; -} -exports.NewDevice = NewDevice; - function PasteDevice(device) { this.device = device; } @@ -230,21 +189,12 @@ function FSMTrace(order, fsm_name, from_state, to_state, recv_message_type) { } exports.FSMTrace = FSMTrace; -function ChannelTrace(from_fsm, to_fsm, sent_message_type) { - this.msg_type = 'ChannelTrace'; - this.sender = 0; - this.trace_id = 0; - this.from_fsm = from_fsm; - this.to_fsm = to_fsm; - this.sent_message_type = sent_message_type; -} -exports.ChannelTrace = ChannelTrace; - -function Snapshot(sender, devices, links, order, trace_id) { +function Snapshot(sender, devices, links, inventory_toolbox, order, trace_id) { this.msg_type = 'Snapshot'; this.sender = 0; this.devices = devices; this.links = links; + this.inventory_toolbox = inventory_toolbox; this.order = order; this.trace_id = trace_id; } diff --git a/awx/ui/client/src/network-ui/models.js b/awx/ui/client/src/network-ui/models.js index 392fa2341d..b2b9f16204 100644 --- a/awx/ui/client/src/network-ui/models.js +++ b/awx/ui/client/src/network-ui/models.js @@ -2,7 +2,6 @@ var fsm = require('./fsm.js'); var button = require('./button.fsm.js'); var util = require('./util.js'); -var inherits = require('inherits'); var animation_fsm = require('./animation.fsm.js'); function Device(id, name, x, y, type, host_id) { @@ -60,29 +59,6 @@ Device.prototype.is_selected = function (x, y) { Device.prototype.describeArc = util.describeArc; -Device.prototype.compile_variables = function () { - var variables = JSON.parse(JSON.stringify(this.variables)); - var awx_variables = {}; - variables.awx = awx_variables; - awx_variables.name = this.name; - awx_variables.type = this.type; - awx_variables.interfaces = []; - var i = 0; - var intf = null; - for (i = 0; i < this.interfaces.length; i++) { - intf = {name: this.interfaces[i].name, - id: this.interfaces[i].id}; - if (this.interfaces[i].link !== null) { - intf.link_id = this.interfaces[i].link.id; - intf.link_name = this.interfaces[i].link.name; - intf.remote_interface_name = this.interfaces[i].remote_interface().name; - intf.remote_device_name = this.interfaces[i].remote_interface().device.name; - } - awx_variables.interfaces.push(intf); - } - return variables; -}; - function Interface(id, name) { this.id = id; this.name = name; @@ -321,82 +297,6 @@ Link.prototype.plength = function (x, y) { return util.pDistance(x, y, x1, y1, x2, y2); }; -function ActionIcon(name, x, y, r, callback, enabled, tracer) { - this.name = name; - this.x = x; - this.y = y; - this.r = r; - this.callback = callback; - this.is_pressed = false; - this.mouse_over = false; - this.enabled = enabled; - this.fsm = new fsm.FSMController(this, "button_fsm", enabled ? button.Start : button.Disabled, tracer); -} -exports.ActionIcon = ActionIcon; - -ActionIcon.prototype.is_selected = function (x, y) { - - return (x > this.x - this.r && - x < this.x + this.r && - y > this.y - this.r && - y < this.y + this.r); - -}; - -function Button(name, x, y, width, height, callback, tracer) { - this.name = name; - this.x = x; - this.y = y; - this.width = width; - this.height = height; - this.callback = callback; - this.is_pressed = false; - this.mouse_over = false; - this.enabled = true; - this.fsm = new fsm.FSMController(this, "button_fsm", button.Start, tracer); -} -exports.Button = Button; - - -Button.prototype.is_selected = function (x, y) { - - return (x > this.x && - x < this.x + this.width && - y > this.y && - y < this.y + this.height); - -}; - - -function ToggleButton(name, x, y, width, height, toggle_callback, untoggle_callback, default_toggled, tracer) { - this.name = name; - this.x = x; - this.y = y; - this.width = width; - this.height = height; - this.callback = this.toggle; - this.is_pressed = default_toggled; - this.toggled = default_toggled; - this.toggle_callback = toggle_callback; - this.untoggle_callback = untoggle_callback; - this.mouse_over = false; - this.enabled = true; - this.fsm = new fsm.FSMController(this, "button_fsm", button.Start, tracer); -} -inherits(ToggleButton, Button); -exports.ToggleButton = ToggleButton; - -ToggleButton.prototype.toggle = function () { - this.toggled = !this.toggled; - this.is_pressed = this.toggled; - - if (this.toggled) { - this.toggle_callback(); - } else { - this.untoggle_callback(); - } -}; - function ContextMenu(name, x, y, width, height, callback, enabled, buttons, tracer) { this.name = name; this.x = x; @@ -447,7 +347,6 @@ ContextMenuButton.prototype.is_selected = function (x, y) { }; - function ToolBox(id, name, type, x, y, width, height) { this.id = id; this.name = name; @@ -464,222 +363,6 @@ function ToolBox(id, name, type, x, y, width, height) { } exports.ToolBox = ToolBox; - -function Process(id, name, type, x, y) { - this.id = id; - this.name = name; - this.type = type; - this.x = x; - this.y = y; - this.height = 50; - this.width = 50; - this.size = 50; - this.selected = null; - this.enabled = true; - this.icon = false; - this.device = null; -} -exports.Process = Process; - -Process.prototype.toJSON = function () { - return {id: this.id, - name: this.name}; -}; - -function Stream(id, from_device, to_device, label) { - this.id = id; - this.from_device = from_device; - this.to_device = to_device; - this.selected = false; - this.remote_selected = false; - this.label = label; - this.offset = 0; -} -exports.Stream = Stream; - -Stream.prototype.toJSON = function () { - return {to_device: this.to_device.id, - from_device: this.from_device.id}; -}; - -Stream.prototype.slope_rad = function () { - //Return the slope in radians for this transition. - var x1 = this.from_device.x; - var y1 = this.from_device.y; - var x2 = this.to_device.x; - var y2 = this.to_device.y; - return Math.atan2(y2 - y1, x2 - x1) + Math.PI; -}; - -Stream.prototype.slope = function () { - //Return the slope in degrees for this transition. - var x1 = this.from_device.x; - var y1 = this.from_device.y; - var x2 = this.to_device.x; - var y2 = this.to_device.y; - return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI + 180; -}; - -Stream.prototype.flip_text_rotate = function () { - var slope = this.slope(); - if (slope > 90 && slope < 270) { - return 180; - } else { - return 0; - } -}; - -Stream.prototype.flip_text_offset = function () { - var slope = this.slope(); - if (slope > 90 && slope < 270) { - return 10; - } else { - return 0; - } -}; - -Stream.prototype.pslope = function () { - //Return the slope of a perpendicular line to this - //transition - var x1 = this.from_device.x; - var y1 = this.from_device.y; - var x2 = this.to_device.x; - var y2 = this.to_device.y; - var slope = (y2 - y1)/(x2 - x1); - //var intercept = - slope * x1; - var pslope = 1/slope; - return Math.atan(pslope) * 180 / Math.PI + 180; -}; - -Stream.prototype.perpendicular = function (x, y) { - //Find the perpendicular line through x, y to this transition. - var x1 = this.from_device.x; - var y1 = this.from_device.y; - var x2 = this.to_device.x; - var y2 = this.to_device.y; - var slope = (y2 - y1)/(x2 - x1); - var intercept = y1 - slope * x1; - var pslope = -1/slope; - var pintercept = y - pslope * x; - - var xi = (pintercept - intercept) / (slope - pslope); - var yi = pslope * xi + pintercept; - return {x1:x, y1:y, x2: xi, y2: yi}; -}; - -Stream.prototype.is_selected = function (x, y) { - // Is the distance to the mouse location less than 25 if on the label side - // or 5 on the other from the shortest line to the transition? - console.log("is_selected"); - var phi = this.slope_rad(); - console.log({"phi": phi}); - console.log({'x': this.from_device.x, 'y': this.from_device.y}); - console.log({'x': this.to_device.x, 'y': this.to_device.y}); - console.log({'x': x, 'y': y}); - var p1 = util.cartesianToPolar(this.from_device.x, this.from_device.y); - var p2 = util.cartesianToPolar(this.to_device.x, this.to_device.y); - var p3 = util.cartesianToPolar(x, y); - console.log(p1); - p1.theta -= phi; - console.log(p1); - console.log(p2); - p2.theta -= phi; - console.log(p2); - p3.theta -= phi; - - p1 = util.polarToCartesian_rad(0, 0, p1.r, p1.theta); - p2 = util.polarToCartesian_rad(0, 0, p2.r, p2.theta); - p3 = util.polarToCartesian_rad(0, 0, p3.r, p3.theta); - p2.y -= this.arc_offset2(); - console.log(p1); - console.log(p2); - console.log(p3); - var max_x = Math.max(p1.x, p2.x); - var min_x = Math.min(p1.x, p2.x); - var max_y = Math.max(p1.y, p2.y) + 5; - var min_y = Math.min(p1.y, p2.y) - 25 ; - - return p3.x > min_x && p3.x < max_x && p3.y > min_y && p3.y < max_y; -}; - -Stream.prototype.length = function () { - //Return the length of this transition. - var x1 = this.from_device.x; - var y1 = this.from_device.y; - var x2 = this.to_device.x; - var y2 = this.to_device.y; - return Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2)); -}; - - -Stream.prototype.inter_length = function () { - //Return the length of this transition between states. - return this.length() - this.from_device.size - this.to_device.size; -}; - -Stream.prototype.arc_r = function () { - return this.inter_length(); -}; - -Stream.prototype.arc_r2 = function () { - var offset_to_r = [2, 1, 0.75, 0.6, 0.55, 0.53, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5]; - return this.length() * offset_to_r[this.offset]; -}; - -Stream.prototype.arc_offset = function () { - var r = this.arc_r(); - var offset = r - (Math.sin(this.arc_angle_rad()) * r); - return offset; -}; - -Stream.prototype.arc_offset2 = function () { - var r = this.arc_r2(); - var theta = Math.acos((this.length() / 2) / r); - var offset = r * (1 - Math.sin(theta)); - return offset; -}; - -Stream.prototype.arc_angle_rad = function () { - return Math.acos((this.inter_length() / 2) / this.arc_r()); -}; - -Stream.prototype.arc_angle_tan_rad = function () { - return Math.PI/2 - Math.acos((this.inter_length() / 2) / this.arc_r()); -}; - -Stream.prototype.arc_angle_tan = function () { - return this.arc_angle_tan_rad() * 180 / Math.PI; -}; - -Stream.prototype.arc_angle_tan_rad2 = function () { - var r = this.arc_r2(); - var l = this.length(); - var phi = this.end_arc_angle_rad(); - return Math.PI/2 - Math.acos((l/2 - Math.cos(phi) * this.to_device.size) / r); -}; - -Stream.prototype.arc_angle_tan2 = function () { - return this.arc_angle_tan_rad2() * 180 / Math.PI; -}; - -Stream.prototype.end_arc_angle_rad = function () { - var r = this.arc_r2(); - var l = this.length(); - return Math.acos((this.to_device.size / 2) / r) - Math.acos((l/2)/r); -}; - -Stream.prototype.end_arc_angle = function () { - return this.end_arc_angle_rad() * 180 / Math.PI; -}; - -Stream.prototype.start_arc_angle_rad = function () { - return Math.acos((this.from_device.size / 2) / this.arc_r2()) - Math.acos((this.length()/2)/this.arc_r2()); -}; - -Stream.prototype.start_arc_angle = function () { - return this.start_arc_angle_rad() * 180 / Math.PI; -}; - function Test(name, event_trace, fsm_trace, pre_test_snapshot, post_test_snapshot) { this.name = name; this.event_trace = event_trace; @@ -710,6 +393,7 @@ function Animation(id, steps, data, scope, tracer, callback) { this.callback = callback; this.scope = scope; this.interval = null; + this.frame_delay = 17; this.fsm = new fsm.FSMController(this, "animation_fsm", animation_fsm.Start, tracer); } exports.Animation = Animation; diff --git a/awx/ui/client/src/network-ui/move.fsm.js b/awx/ui/client/src/network-ui/move.fsm.js index 9a66cd3ca2..0a99d2b235 100644 --- a/awx/ui/client/src/network-ui/move.fsm.js +++ b/awx/ui/client/src/network-ui/move.fsm.js @@ -4,7 +4,6 @@ var fsm = require('./fsm.js'); var models = require('./models.js'); var messages = require('./messages.js'); var util = require('./util.js'); -var nunjucks = require('nunjucks'); function _State () { } @@ -59,16 +58,6 @@ inherits(_Selected1, _State); var Selected1 = new _Selected1(); exports.Selected1 = Selected1; - - -function _EditLabel () { - this.name = 'EditLabel'; -} -inherits(_EditLabel, _State); -var EditLabel = new _EditLabel(); -exports.EditLabel = EditLabel; - - function _Placing () { this.name = 'Placing'; } @@ -91,74 +80,13 @@ _State.prototype.onUnselectAll = function (controller, msg_type, $event) { controller.delegate_channel.send(msg_type, $event); }; -_Ready.prototype.onNewDevice = function (controller, msg_type, message) { - - var scope = controller.scope; - var device = null; - var id = null; - - scope.pressedX = scope.mouseX; - scope.pressedY = scope.mouseY; - scope.pressedScaledX = scope.scaledX; - scope.pressedScaledY = scope.scaledY; - - scope.clear_selections(); - - if (message.type === "router") { - id = controller.scope.device_id_seq(); - device = new models.Device(id, - "Router" + id, - scope.scaledX, - scope.scaledY, - "router"); - } - else if (message.type === "switch") { - id = controller.scope.device_id_seq(); - device = new models.Device(id, - "Switch" + id, - scope.scaledX, - scope.scaledY, - "switch"); - } - else if (message.type === "host") { - id = controller.scope.device_id_seq(); - device = new models.Device(id, - "Host" + id, - scope.scaledX, - scope.scaledY, - "host"); - } - - if (device !== null) { - scope.devices.push(device); - scope.send_control_message(new messages.DeviceCreate(scope.client_id, - device.id, - device.x, - device.y, - device.name, - device.type, - device.host_id)); - if (scope.template_building) { - device.template = true; - } - scope.create_inventory_host(device); - scope.selected_devices.push(device); - device.selected = true; - scope.$emit('addSearchOption', device); - controller.changeState(Placing); - } -}; -_Ready.prototype.onNewDevice.transitions = ['Placing']; - _Ready.prototype.onPasteDevice = function (controller, msg_type, message) { var scope = controller.scope; var device = null; var intf = null; - var process = null; var i = 0; var c_messages = []; - var template_context = null; scope.pressedX = scope.mouseX; scope.pressedY = scope.mouseY; @@ -171,20 +99,6 @@ _Ready.prototype.onPasteDevice = function (controller, msg_type, message) { scope.scaledY, message.device.type, message.device.host_id); - if (!controller.scope.template_building && message.device.template) { - try { - template_context = {}; - template_context.id = device.id; - controller.scope.create_template_sequences(controller.scope.sequences, device.name, template_context); - device.name = nunjucks.renderString(device.name, template_context); - scope.create_inventory_host(device); - } catch (err) { - console.log(err); - } - } else { - device.template = true; - } - device.variables = JSON.parse(message.device.variables); scope.devices.push(device); c_messages.push(new messages.DeviceCreate(scope.client_id, device.id, @@ -201,20 +115,6 @@ _Ready.prototype.onPasteDevice = function (controller, msg_type, message) { intf.id, intf.name)); } - for (i=0; i < message.device.processes.length; i++) { - process = new models.Process(message.device.processes[i].id, - message.device.processes[i].name, - message.device.processes[i].type, 0, 0); - process.device = device; - c_messages.push(new messages.ProcessCreate(controller.scope.client_id, - process.id, - process.name, - process.type, - process.device.id, - process.x, - process.y)); - device.processes.push(process); - } scope.selected_devices.push(device); device.selected = true; scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages)); @@ -246,38 +146,6 @@ _Start.prototype.start = function (controller) { _Start.prototype.start.transitions = ['Ready']; -_Selected2.prototype.onNewDevice = function (controller, msg_type, message) { - - controller.changeState(Ready); - controller.handle_message(msg_type, message); -}; -_Selected2.prototype.onNewDevice.transitions = ['Ready']; - -_Selected2.prototype.onCopySelected = function (controller) { - - var devices = controller.scope.selected_devices; - var device_copy = null; - var process_copy = null; - var interface_copy = null; - var i = 0; - var j = 0; - for(i=0; i < devices.length; i++) { - device_copy = new models.Device(0, devices[i].name, 0, 0, devices[i].type, 0); - device_copy.icon = true; - for(j=0; j < devices[i].processes.length; j++) { - process_copy = new models.Process(0, devices[i].processes[j].name, devices[i].processes[j].name, 0, 0); - device_copy.processes.push(process_copy); - } - for(j=0; j < devices[i].interfaces.length; j++) { - interface_copy = new models.Interface(devices[i].interfaces[j].id, devices[i].interfaces[j].name); - device_copy.interfaces.push(interface_copy); - } - device_copy.variables = JSON.stringify(devices[i]); - device_copy.template = true; - controller.scope.inventory_toolbox.items.push(device_copy); - } -}; - _Selected2.prototype.onMouseDown = function (controller, msg_type, $event) { var last_selected = null; @@ -435,61 +303,6 @@ _Selected3.prototype.onMouseMove = function (controller) { }; _Selected3.prototype.onMouseMove.transitions = ['Move']; -_EditLabel.prototype.start = function (controller) { - controller.scope.selected_items[0].edit_label = true; -}; - -_EditLabel.prototype.end = function (controller) { - controller.scope.selected_items[0].edit_label = false; -}; - -_EditLabel.prototype.onMouseDown = function (controller, msg_type, $event) { - - controller.changeState(Ready); - controller.handle_message(msg_type, $event); - -}; -_EditLabel.prototype.onMouseDown.transitions = ['Ready']; - - -_EditLabel.prototype.onKeyDown = function (controller, msg_type, $event) { - //Key codes found here: - //https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes - var item = controller.scope.selected_items[0]; - var previous_name = item.name; - if ($event.keyCode === 8 || $event.keyCode === 46) { //Delete - item.name = item.name.slice(0, -1); - } else if ($event.keyCode >= 48 && $event.keyCode <=90) { //Alphanumeric - item.name += $event.key; - } else if ($event.keyCode >= 186 && $event.keyCode <=222) { //Punctuation - item.name += $event.key; - } else if ($event.keyCode === 13) { //Enter - controller.scope.$emit('editSearchOption', item); - controller.changeState(Selected2); - } - if (item.constructor.name === "Device") { - controller.scope.send_control_message(new messages.DeviceLabelEdit(controller.scope.client_id, - item.id, - item.name, - previous_name)); - } - if (item.constructor.name === "Interface") { - controller.scope.send_control_message(new messages.InterfaceLabelEdit(controller.scope.client_id, - item.id, - item.device.id, - item.name, - previous_name)); - } - if (item.constructor.name === "Link") { - controller.scope.send_control_message(new messages.LinkLabelEdit(controller.scope.client_id, - item.id, - item.name, - previous_name)); - } -}; -_EditLabel.prototype.onKeyDown.transitions = ['Selected2']; - - _Placing.prototype.onMouseDown = function (controller) { controller.changeState(Selected1); @@ -510,13 +323,6 @@ _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); diff --git a/awx/ui/client/src/network-ui/network-details/details.controller.js b/awx/ui/client/src/network-ui/network-details/details.controller.js index ded189c465..19cf3198a2 100644 --- a/awx/ui/client/src/network-ui/network-details/details.controller.js +++ b/awx/ui/client/src/network-ui/network-details/details.controller.js @@ -24,7 +24,7 @@ HostsService.put(host).then(function(response){ $scope.saveConfirmed = true; if(_.has(response, "data")){ - $scope.$parent.$broadcast('hostUpdateSaved', response.data); + $scope.$parent.$broadcast('awxNet-hostUpdateSaved', response.data); } setTimeout(function(){ $scope.saveConfirmed = false; @@ -33,7 +33,7 @@ }; - $scope.$parent.$on('showDetails', (e, data, canAdd) => { + $scope.$parent.$on('awxNet-showDetails', (e, data, canAdd) => { if (!_.has(data, 'host_id')) { $scope.item = data; $scope.canAdd = canAdd; @@ -41,52 +41,4 @@ $scope.item = data; } }); - - var init = function(){ - if($scope.item && $scope.item.host_id){ - $scope.variables = getVars($scope.item.variables); - ParseTypeChange({ - scope: $scope, - field_id: 'network_host_variables', - variable: 'variables', - }); - } - - }; - - $scope.$watch('item', function(){ - init(); - }); - - // Adding this function b/c sometimes extra vars are returned to the - // UI as a string (ex: "foo: bar"), and other times as a - // json-object-string (ex: "{"foo": "bar"}"). CodeMirror wouldn't know - // how to prettify the latter. The latter occurs when host vars were - // system generated and not user-input (such as adding a cloud host); - function getVars(str){ - - // Quick function to test if the host vars are a json-object-string, - // by testing if they can be converted to a JSON object w/o error. - function IsJsonString(str) { - try { - JSON.parse(str); - } catch (e) { - return false; - } - return true; - } - - if(str === ''){ - return '---'; - } - else if(IsJsonString(str)){ - str = JSON.parse(str); - return jsyaml.safeDump(str); - } - else if(!IsJsonString(str)){ - return str; - } - } - - // init(); }]; diff --git a/awx/ui/client/src/network-ui/network-details/details.partial.html b/awx/ui/client/src/network-ui/network-details/details.partial.html index 09622950d0..a106d3bcad 100644 --- a/awx/ui/client/src/network-ui/network-details/details.partial.html +++ b/awx/ui/client/src/network-ui/network-details/details.partial.html @@ -16,7 +16,7 @@ Host Name
- +
Please enter a value.
@@ -26,39 +26,16 @@ Description
- +
- - +
- -
Save Complete diff --git a/awx/ui/client/src/network-ui/network-details/main.js b/awx/ui/client/src/network-ui/network-details/main.js index ffa06f41e4..1827ce7297 100644 --- a/awx/ui/client/src/network-ui/network-details/main.js +++ b/awx/ui/client/src/network-ui/network-details/main.js @@ -5,7 +5,9 @@ *************************************************/ import awxNetDetailsPanel from './details.directive'; +import awxNetExtraVars from './network-extra-vars/network-extra-vars.directive'; export default angular.module('networkDetailsDirective', []) - .directive('awxNetDetailsPanel', awxNetDetailsPanel); + .directive('awxNetDetailsPanel', awxNetDetailsPanel) + .directive('awxNetExtraVars', awxNetExtraVars); diff --git a/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.block.less b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.block.less new file mode 100644 index 0000000000..79b24118c7 --- /dev/null +++ b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.block.less @@ -0,0 +1,167 @@ +.NetworkingExtraVarsLabel{ + display: flex; + width: 100%; +} + +.NetworkingExtraVars-extraVarsLabelContainer{ + flex: 1 0 auto; +} + +.NetworkingExtraVars-expandTextContainer{ + flex: 1 0 auto; + text-align: right; + font-weight: normal; + color: @default-link; + cursor: pointer; +} + +.noselect { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + not supported by any browser */ +} + +@media screen and (min-width: 768px){ + .NetworkingExtraVars .modal-dialog{ + width: 700px; + } +} + +.NetworkingExtraVarsModal .modal-dialog{ + width: calc(~"100% - 200px"); + height: calc(~"100vh - 80px"); +} + +.NetworkingExtraVarsModal .modal-content{ + height: 100%; +} + +.NetworkingExtraVars .CodeMirror{ + overflow-x: hidden; +} + +.NetworkingExtraVars-close:hover{ + color: @btn-txt; + background-color: @btn-bg-hov; +} + +.NetworkingExtraVars-body{ + margin-bottom: 20px; +} + +.NetworkingExtraVars-tab:hover { + color: @btn-txt; + background-color: @btn-bg-hov; + cursor: pointer; +} +.NetworkingExtraVars-tab--selected{ + color: @btn-txt-sel!important; + background-color: @default-icon!important; + border-color: @default-icon!important; +} +.NetworkingExtraVars-view--container{ + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; +} +.NetworkingExtraVars .modal-footer{ + border: 0; + margin-top: 0px; + padding-top: 5px; +} +.NetworkingExtraVars-controls{ + float: right; + margin-top: 15px; + button { + margin-left: 10px; + } +} + +.NetworkingExtraVars-header{ + padding-bottom: 15px; +} +.NetworkingExtraVars-title{ + color: @default-interface-txt; + font-weight: 600; + margin-bottom: 8px; +} +.NetworkingExtraVarsModal .modal-body{ + padding: 0px!important; + overflow-y: auto; +} +.NetworkingExtraVars-nav{ + padding-top: 12px; + padding-bottom: 20px; +} +.NetworkingExtraVars-field{ + margin-bottom: 8px; + flex: 0 1 12em; +} +.NetworkingExtraVars-field--label{ + text-transform: uppercase; + flex: 0 1 80px; + max-width: 80px; + min-width: 80px; + font-size: 12px; + word-wrap: break-word; +} +.NetworkingExtraVars-field{ + .OnePlusTwo-left--detailsRow; +} +.NetworkingExtraVars-field--content{ + word-wrap: break-word; +} +.NetworkingExtraVars-field--monospaceContent{ + font-family: monospace; +} +.NetworkingExtraVars-button:disabled { + pointer-events: all!important; +} + +.NetworkingExtraVars-numberColumnPreload { + background-color: @default-list-header-bg; + height: 198px; + border-right: 1px solid #ccc; + width: 30px; + position: fixed; +} + +.NetworkingExtraVars-numberColumn { + background-color: @default-list-header-bg; + border-right: 1px solid #ccc; + border-bottom-left-radius: 5px; + color: #999; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + position: fixed; + padding: 4px 3px 0 5px; + text-align: right; + white-space: nowrap; + width: 30px; +} + +.NetworkingExtraVars-numberColumn--second{ + padding-top:0px; +} + +.NetworkingExtraVars-noJson{ + align-items: center; + background-color: @default-no-items-bord; + border: 1px solid @default-icon-hov; + border-radius: 5px; + color: @b7grey; + display: flex; + height: 200px; + justify-content: center; + text-transform: uppercase; + width: 100%; +} + +.NetworkingExtraVarsModal .CodeMirror{ + max-height: none; +} diff --git a/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.directive.js b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.directive.js new file mode 100644 index 0000000000..35cf89539d --- /dev/null +++ b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.directive.js @@ -0,0 +1,70 @@ +/************************************************* + * Copyright (c) 2018 Ansible, Inc. + * + * All Rights Reserved + *************************************************/ + +const templateUrl = require('~network-ui/network-details/network-extra-vars/network-extra-vars.partial.html'); + +export default [ 'ParseTypeChange', 'ParseVariableString', + function(ParseTypeChange, ParseVariableString) { + return { + scope:{ + item: "=" + }, + templateUrl, + restrict: 'E', + link(scope){ + scope.networkingExtraVarsModalOpen = true; + function init(){ + if(scope.item && scope.item.host_id){ + scope.variables = ParseVariableString(scope.item.variables); + scope.parseType = 'yaml'; + ParseTypeChange({ + scope: scope, + field_id: 'network_host_variables', + variable: 'variables', + readOnly: true + }); + } + } + + scope.$watch('item', function(){ + init(); + }); + + scope.closeExtraVarModal = function() { + // Unbind the listener so it doesn't fire when we close the modal via navigation + $('.CodeMirror')[1].remove(); + $('#NetworkingExtraVarsModal').off('hidden.bs.modal'); + $('#NetworkingExtraVarsModal').modal('hide'); + scope.networkingExtraVarsModalOpen = false; + }; + + scope.openExtraVarsModal = function(){ + scope.networkingExtraVarsModalOpen = true; + $('#NetworkingExtraVarsModal').modal('show'); + + $('.modal-dialog').on('resize', function(){ + resize(); + }); + scope.extra_variables = ParseVariableString(_.cloneDeep(scope.item.variables)); + scope.parseType = 'yaml'; + ParseTypeChange({ + scope: scope, + field_id: 'NetworkingExtraVars-codemirror', + variable: 'extra_variables', + readOnly: true + }); + resize(); + }; + + function resize(){ + let editor = $('.CodeMirror')[1].CodeMirror; + let height = $('#NetworkingExtraVarsModalDialog').height() - $('.NetworkingExtraVars-header').height() - $('.NetworkingExtraVars-controls').height() - 110; + editor.setSize("100%", height); + } + + } + }; +}]; diff --git a/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.partial.html b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.partial.html new file mode 100644 index 0000000000..029ef8ee28 --- /dev/null +++ b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.partial.html @@ -0,0 +1,72 @@ + + + + + diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.block.less b/awx/ui/client/src/network-ui/network-nav/network.nav.block.less index 8493b4df63..78037236ac 100644 --- a/awx/ui/client/src/network-ui/network-nav/network.nav.block.less +++ b/awx/ui/client/src/network-ui/network-nav/network.nav.block.less @@ -53,7 +53,7 @@ background-color: inherit; border: none; border-radius: 5px; - margin-left: 20px; + margin-left: 5px; } .Networking-toolbarIcon:hover{ @@ -90,70 +90,39 @@ .Networking-toolbar{ min-height: 40px; width:100%; - background-color: #ebebeb; + background-color: @ebgrey; display:flex; flex: 1 0 auto; + justify-content: space-between; + flex-wrap: wrap; 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-breadCrumbBarItem{ - margin: 0px; - padding-left:0px; -} - -.Networking-breadCrumbText{ - font-size: 14px; -} - -.Networking-breadCrumbSlash{ - padding: 0px 10px 0px 10px; - color: #707070; -} - -.Networking-breadCrumbText--last{ - color: #707070; - text-transform: none; -} - -.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%; + min-width: 400px; padding-left: 20px; + height: 40px; + align-items: center; } .Networking-toolbarRightSide{ align-items: center; flex-wrap: wrap; display: flex; - min-width: 400px; + min-width: 500px; padding-right: 20px; + height: 40px; +} + +.Networking-actionsDropDownContainer{ + height: 30px; + flex: 1 0 auto; + display: flex; + margin-top:-5px; + margin-left: -2px; } .Networking-searchBarContainer{ @@ -161,6 +130,7 @@ flex: 1 0 auto; display: flex; margin-top:-5px; + margin-left: 5px; } .Networking-dropDown{ @@ -172,21 +142,12 @@ } .Networking-searchButton i{ - color:#848992 + color:@default-icon; } -.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; + color: @default-stdout-txt; padding-left:15px; min-height: 30px; font-size: 14px; @@ -195,21 +156,6 @@ 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; @@ -218,7 +164,7 @@ .Networking-keyDropDownPanel{ width: 180px; padding: 10px 0px 10px 0px; - border: 1px solid #b7b7b7; + border: 1px solid @btn-bord; background-color: white; position: absolute; right:0px; @@ -226,7 +172,7 @@ } .Networking-keyPanelOption{ - color: #707070; + color: @default-stdout-txt; padding-left:15px; min-height: 30px; font-size: 12px; @@ -235,7 +181,7 @@ } .Networking-keySymbol{ - background-color: #848992; + background-color: @default-icon; color: white; border-radius: 50%; width: 20px; @@ -249,5 +195,9 @@ .Networking-keySymbolLabel{ font-size: 12px; padding-left: 15px; - color: #707070 + color: @default-stdout-txt +} + +.Networking-toolboxPanelToolbarIcon--selected{ + border-radius: 5px; } diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js b/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js index 8094ef8be8..92cbc72fea 100644 --- a/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js +++ b/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js @@ -12,7 +12,6 @@ function NetworkingController (models, $state, $scope, strings) { vm.rightPanelIsExpanded = false; vm.leftPanelIsExpanded = true; - vm.jumpToPanelExpanded = false; vm.keyPanelExpanded = false; vm.groups = []; $scope.devices = []; @@ -20,35 +19,16 @@ function NetworkingController (models, $state, $scope, strings) { $state.go('inventories'); }; - vm.redirectButtonHandler = (string) => { - $scope.$broadcast('toolbarButtonEvent', string); - }; - - vm.jumpTo = (thing) => { - vm.jumpToPanelExpanded = !vm.jumpToPanelExpanded; - vm.keyPanelExpanded = false; - if (thing && typeof thing === 'string') { - $scope.$broadcast('jumpTo', thing); - } - if (thing && typeof thing === 'object') { - $scope.$broadcast('search', thing); - } - }; - vm.key = () => { vm.keyPanelExpanded = !vm.keyPanelExpanded; - vm.jumpToPanelExpanded = false; }; - $scope.$on('overall_toolbox_collapsed', () => { + vm.hideToolbox = () => { vm.leftPanelIsExpanded = !vm.leftPanelIsExpanded; - }); + $scope.$broadcast('awxNet-hideToolbox', vm.leftPanelIsExpanded); + }; - $scope.$on('awxNet-breadcrumbGroups', (e, groups) => { - vm.breadcrumb_groups = _.sortBy(groups, 'distance').reverse(); - }); - - $scope.$on('instatiateSelect', (e, devices) => { + $scope.$on('awxNet-instatiateSelect', (e, devices) => { for(var i = 0; i < devices.length; i++){ let device = devices[i]; $scope.devices.push({ @@ -61,13 +41,19 @@ function NetworkingController (models, $state, $scope, strings) { } $("#networking-search").select2({ - width:'100%', + width:'400px', containerCssClass: 'Form-dropDown', placeholder: 'SEARCH' }); + $("#networking-actionsDropdown").select2({ + width:'400px', + containerCssClass: 'Form-dropDown', + minimumResultsForSearch: -1, + placeholder: 'ACTIONS' + }); }); - $scope.$on('addSearchOption', (e, device) => { + $scope.$on('awxNet-addSearchOption', (e, device) => { $scope.devices.push({ value: device.id, text: device.name, @@ -76,7 +62,7 @@ function NetworkingController (models, $state, $scope, strings) { }); }); - $scope.$on('editSearchOption', (e, device) => { + $scope.$on('awxNet-editSearchOption', (e, device) => { for(var i = 0; i < $scope.devices.length; i++){ if(device.id === $scope.devices[i].id){ $scope.devices[i].text = device.name; @@ -85,7 +71,7 @@ function NetworkingController (models, $state, $scope, strings) { } }); - $scope.$on('removeSearchOption', (e, device) => { + $scope.$on('awxNet-removeSearchOption', (e, device) => { for (var i = 0; i < $scope.devices.length; i++) { if ($scope.devices[i].id === device.id) { $scope.devices.splice(i, 1); @@ -93,13 +79,23 @@ function NetworkingController (models, $state, $scope, strings) { } }); + //Handlers for actions drop down + $('#networking-actionsDropdown').on('select2:select', (e) => { + $scope.$broadcast('awxNet-toolbarButtonEvent', e.params.data.title); + }); + + $('#networking-actionsDropdown').on('select2:open', () => { + $('.select2-dropdown').addClass('Networking-dropDown'); + }); + + // Handlers for search dropdown $('#networking-search').on('select2:select', () => { - $scope.$broadcast('search', $scope.device); + $scope.$broadcast('awxNet-search', $scope.device); }); $('#networking-search').on('select2:open', () => { $('.select2-dropdown').addClass('Networking-dropDown'); - $scope.$broadcast('SearchDropdown'); + $scope.$broadcast('awxNet-SearchDropdown'); }); $('#networking-search').on('select2:close', () => { @@ -107,7 +103,7 @@ function NetworkingController (models, $state, $scope, strings) { $('.select2-container-active').removeClass('select2-container-active'); $(':focus').blur(); }, 1); - $scope.$broadcast('SearchDropdownClose'); + $scope.$broadcast('awxNet-SearchDropdownClose'); }); } diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.view.html b/awx/ui/client/src/network-ui/network-nav/network.nav.view.html index 487c46a80c..1b884acd48 100644 --- a/awx/ui/client/src/network-ui/network-nav/network.nav.view.html +++ b/awx/ui/client/src/network-ui/network-nav/network.nav.view.html @@ -12,24 +12,20 @@
- - - - - - - - - +
+ +
-
- +
+
-
- -
-
- JUMP TO -
-
- SITE -
-
- RACK -
-
- INVENTORY -
-
- PROCESS -
-
+
+
-
-
    -
  1. - {{group.name}} -
    2. -
  2. - {{group.name}} -
    3. -
-
diff --git a/awx/ui/client/src/network-ui/network.ui.app.js b/awx/ui/client/src/network-ui/network.ui.app.js index d29d6a1929..bc71fd4a3e 100644 --- a/awx/ui/client/src/network-ui/network.ui.app.js +++ b/awx/ui/client/src/network-ui/network.ui.app.js @@ -12,8 +12,6 @@ var router = require('./router.directive.js'); var switchd = require('./switch.directive.js'); var host = require('./host.directive.js'); var link = require('./link.directive.js'); -var chevronRight = require('./chevron.right.directive.js'); -var chevronLeft = require('./chevron.left.directive.js'); var contextMenu = require('./context.menu.directive.js'); var contextMenuButton = require('./context.menu.button.directive.js'); var defaultd = require('./default.directive.js'); @@ -36,8 +34,6 @@ var networkUI = angular.module('networkUI', [ .directive('awxNetSwitch', switchd.switchd) .directive('awxNetHost', host.host) .directive('awxNetLink', link.link) - .directive('awxNetChevronRightIcon', chevronRight.chevronRight) - .directive('awxNetChevronLeftIcon', chevronLeft.chevronLeft) .directive('awxNetContextMenu', contextMenu.contextMenu) .directive('awxNetContextMenuButton', contextMenuButton.contextMenuButton) .directive('awxNetDefault', defaultd.defaultd) diff --git a/awx/ui/client/src/network-ui/network.ui.controller.js b/awx/ui/client/src/network-ui/network.ui.controller.js index 6b8dfef08c..433f4ed807 100644 --- a/awx/ui/client/src/network-ui/network.ui.controller.js +++ b/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 buttons = require('./buttons.fsm.js'); var time = require('./time.fsm.js'); var test_fsm = require('./test.fsm.js'); var util = require('./util.js'); @@ -14,9 +15,8 @@ var messages = require('./messages.js'); var animations = require('./animations.js'); var keybindings = require('./keybindings.fsm.js'); var details_panel_fsm = require('./details.panel.fsm.js'); -var svg_crowbar = require('./svg-crowbar.js'); +var svg_crowbar = require('./vendor/svg-crowbar.js'); var ReconnectingWebSocket = require('reconnectingwebsocket'); -var nunjucks = require('nunjucks'); var NetworkUIController = function($scope, $document, @@ -31,8 +31,6 @@ var NetworkUIController = function($scope, window.scope = $scope; - $scope.nunjucks = nunjucks; - $scope.http = $http; $scope.api_token = ''; @@ -65,7 +63,6 @@ var NetworkUIController = function($scope, }; } $scope.my_location = $location.protocol() + "://" + $location.host() + ':' + $location.port(); - $scope.history = []; $scope.client_id = 0; $scope.test_client_id = 0; $scope.onMouseDownResult = ""; @@ -97,10 +94,11 @@ var NetworkUIController = function($scope, $scope.last_key = ""; $scope.last_key_code = null; $scope.last_event = null; - $scope.cursor = {'x':100, 'y': 100, 'hidden': false}; + $scope.cursor = {'x':100, 'y': 100, 'hidden': true}; $scope.debug = {'hidden': true}; $scope.hide_buttons = false; + $scope.hide_menus = false; $scope.hide_links = false; $scope.hide_interfaces = false; $scope.graph = {'width': window.innerWidth, @@ -123,7 +121,6 @@ var NetworkUIController = function($scope, $scope.tests = []; $scope.current_tests = []; $scope.current_test = null; - $scope.testing = false; $scope.template_building = false; $scope.version = null; $scope.test_events = []; @@ -135,38 +132,6 @@ var NetworkUIController = function($scope, 'y': 0, 'width': 0, 'height': 0, - top_extent: function (scaledY) { - this.x1 = this.x; - this.x2 = this.x + this.width; - this.y1 = this.y; - this.y2 = this.y + this.height; - var y2 = this.y2 !== null ? this.y2 : scaledY; - return (this.y1 < y2? this.y1 : y2); - }, - left_extent: function (scaledX) { - this.x1 = this.x; - this.x2 = this.x + this.width; - this.y1 = this.y; - this.y2 = this.y + this.height; - var x2 = this.x2 !== null ? this.x2 : scaledX; - return (this.x1 < x2? this.x1 : x2); - }, - bottom_extent: function (scaledY) { - this.x1 = this.x; - this.x2 = this.x + this.width; - this.y1 = this.y; - this.y2 = this.y + this.height; - var y2 = this.y2 !== null ? this.y2 : scaledY; - return (this.y1 > y2? this.y1 : y2); - }, - right_extent: function (scaledX) { - this.x1 = this.x; - this.x2 = this.x + this.width; - this.y1 = this.y; - this.y2 = this.y + this.height; - var x2 = this.x2 !== null ? this.x2 : scaledX; - return (this.x1 > x2? this.x1 : x2); - } }; $scope.trace_id_seq = util.natural_numbers(0); $scope.trace_order_seq = util.natural_numbers(0); @@ -220,6 +185,7 @@ var NetworkUIController = function($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.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); @@ -312,9 +278,12 @@ var NetworkUIController = function($scope, $scope.inventory_toolbox_controller.delegate_channel = new fsm.Channel($scope.inventory_toolbox_controller, $scope.details_panel_controller, $scope); - $scope.time_controller.delegate_channel = new fsm.Channel($scope.time_controller, + $scope.buttons_controller.delegate_channel = new fsm.Channel($scope.buttons_controller, $scope.inventory_toolbox_controller, $scope); + $scope.time_controller.delegate_channel = new fsm.Channel($scope.time_controller, + $scope.buttons_controller, + $scope); $scope.mode_controller.delegate_channel = new fsm.Channel($scope.mode_controller, $scope.time_controller, $scope); @@ -368,12 +337,6 @@ var NetworkUIController = function($scope, return {x: v_x, y: v_y}; }; - $scope.to_browser_coordinates = function (v_x, v_y) { - var b_x = (v_x * $scope.current_scale) + $scope.panX; - var b_y = (v_y * $scope.current_scale) + $scope.panY; - return {x: b_x, y: b_y}; - }; - $scope.to_pan = function (v_x, v_y) { var p_x = v_x * $scope.current_scale * -1; var p_y = v_y * $scope.current_scale * -1; @@ -536,7 +499,6 @@ var NetworkUIController = function($scope, $scope.send_test_message(new messages.MouseEvent($scope.test_client_id, $event.x, $event.y, $event.type, $scope.trace_id)); } $scope.onMouseLeaveResult = getMouseEventResult($event); - $scope.cursor.hidden = true; $event.preventDefault(); }; @@ -546,7 +508,6 @@ var NetworkUIController = function($scope, $scope.send_test_message(new messages.MouseEvent($scope.test_client_id, $event.x, $event.y, $event.type, $scope.trace_id)); } //var coords = getCrossBrowserElementCoords($event); - $scope.cursor.hidden = false; $scope.cursor.x = $event.x; $scope.cursor.y = $event.y; $scope.mouseX = $event.x; @@ -563,7 +524,6 @@ var NetworkUIController = function($scope, $scope.send_test_message(new messages.MouseEvent($scope.test_client_id, $event.x, $event.y, $event.type, $scope.trace_id)); } $scope.onMouseOverResult = getMouseEventResult($event); - $scope.cursor.hidden = false; $event.preventDefault(); }; @@ -600,19 +560,12 @@ var NetworkUIController = function($scope, $scope.first_channel.send('DetailsPanelClose', {}); }; - $scope.$on('hostUpdateSaved', (e, host) => { - if (host.variables !== "" && $scope.selected_devices.length === 1) { - host.data = jsyaml.safeLoad(host.variables); - $scope.selected_devices[0].type = host.data.type; - } - }); - $scope.onDetailsContextButton = function () { function emitCallback(item, canAdd){ $scope.first_channel.send('DetailsPanel', {}); $scope.removeContextMenu(); $scope.update_toolbox_heights(); - $scope.$emit('showDetails', item, canAdd); + $scope.$emit('awxNet-showDetails', item, canAdd); } // show details for devices @@ -660,41 +613,20 @@ var NetworkUIController = function($scope, }; - $scope.onRenameContextButton = function () { - $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.$emit('removeSearchOption', devices[i]); + $scope.$emit('awxNet-removeSearchOption', devices[i]); $scope.send_control_message(new messages.DeviceDestroy($scope.client_id, devices[i].id, devices[i].x, @@ -722,36 +654,24 @@ var NetworkUIController = function($scope, } }; - // Button Event Handlers - $scope.onToggleToolboxButtonLeft = function () { + $scope.$on('awxNet-hideToolbox', () => { $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 () { - $scope.first_channel.send("ToggleToolbox", {}); - $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('awxNet-toolbarButtonEvent', function(e, functionName){ $scope[`on${functionName}Button`](); }); - $scope.$on('SearchDropdown', function(){ + $scope.$on('awxNet-SearchDropdown', function(){ $scope.first_channel.send('SearchDropdown', {}); }); - $scope.$on('SearchDropdownClose', function(){ + $scope.$on('awxNet-SearchDropdownClose', function(){ $scope.first_channel.send('SearchDropdownClose', {}); }); - $scope.$on('search', function(e, device){ + $scope.$on('awxNet-search', function(e, device){ var searched; for(var i = 0; i < $scope.devices.length; i++){ @@ -802,25 +722,7 @@ var NetworkUIController = function($scope, $scope.animations.push(pan_animation); }; - $scope.$on('jumpTo', function(e, zoomLevel) { - var v_center = $scope.to_virtual_coordinates($scope.graph.width/2, $scope.graph.height/2); - switch (zoomLevel){ - case 'site': - $scope.jump_to_animation(v_center.x, v_center.y, 0.051); - break; - case 'rack': - $scope.jump_to_animation(v_center.x, v_center.y, 0.11); - break; - case 'inventory': - $scope.jump_to_animation(v_center.x, v_center.y, 0.51); - break; - case 'process': - $scope.jump_to_animation(v_center.x, v_center.y, 5.1); - break; - } - }); - - $scope.$on('zoom', (e, zoomPercent) => { + $scope.$on('awxNet-zoom', (e, zoomPercent) => { let v_center = $scope.to_virtual_coordinates($scope.graph.width/2, $scope.graph.height/2); let scale = Math.pow(10, (zoomPercent - 120) / 40); $scope.jump_to_animation(v_center.x, v_center.y, scale, false); @@ -836,10 +738,13 @@ var NetworkUIController = function($scope, $scope.current_scale, $scope.panX, $scope.panY, + $scope.graph.width, + $scope.graph.height, $scope.trace_id), new messages.Snapshot($scope.test_client_id, $scope.devices, $scope.links, + $scope.inventory_toolbox.items, 0, $scope.trace_id)])); } else { @@ -847,6 +752,7 @@ var NetworkUIController = function($scope, [new messages.Snapshot($scope.test_client_id, $scope.devices, $scope.links, + $scope.inventory_toolbox.items, 1, $scope.trace_id), new messages.StopRecording($scope.test_client_id, $scope.trace_id)])); @@ -857,10 +763,12 @@ var NetworkUIController = function($scope, $scope.cursor.hidden = true; $scope.debug.hidden = true; $scope.hide_buttons = true; + $scope.hide_menus = true; setTimeout(function () { svg_crowbar.svg_crowbar(); $scope.cursor.hidden = false; $scope.hide_buttons = false; + $scope.hide_menus = false; $scope.$apply(); }, 1000); }; @@ -871,21 +779,13 @@ var NetworkUIController = function($scope, // 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("Delete", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope) ]; // Context Menus $scope.context_menus = [ - 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, actionIconVerticalOffset, 16, $scope.onToggleToolboxButtonLeft, true, $scope), - new models.ActionIcon("chevron-right", 15, actionIconVerticalOffset, 16, $scope.onToggleToolboxButtonRight, false, $scope) + new models.ContextMenu('HOST', 210, 200, 160, 64, $scope.contextMenuCallback, false, $scope.context_menu_buttons, $scope) ]; $scope.onDownloadTraceButton = function () { @@ -909,36 +809,6 @@ var NetworkUIController = function($scope, $scope.all_buttons = []; $scope.all_buttons.extend($scope.context_menu_buttons); - $scope.all_buttons.extend($scope.action_icons); - - $scope.getDevice = function(name) { - - var i = 0; - for (i = 0; i < $scope.devices.length; i++) { - if ($scope.devices[i].name === name) { - return $scope.devices[i]; - } - } - - return null; - }; - - - $scope.getDeviceInterface = function(device_name, interface_name) { - - var i = 0; - var k = 0; - for (i = 0; i < $scope.devices.length; i++) { - if ($scope.devices[i].name === device_name) { - for (k = 0; k < $scope.devices[i].interfaces.length; k++) { - if ($scope.devices[i].interfaces[k].name === interface_name) { - return $scope.devices[i].interfaces[k]; - } - } - } - } - return null; - }; $scope.onDeviceCreate = function(data) { $scope.create_device(data); @@ -956,51 +826,6 @@ var NetworkUIController = function($scope, $scope.devices.push(device); }; - $scope.forDevice = function(device_id, data, fn) { - var i = 0; - for (i = 0; i < $scope.devices.length; i++) { - if ($scope.devices[i].id === device_id) { - fn($scope.devices[i], data); - break; - } - } - }; - - $scope.forLink = function(link_id, data, fn) { - var i = 0; - for (i = 0; i < $scope.links.length; i++) { - if ($scope.links[i].id === link_id) { - fn($scope.links[i], data); - break; - } - } - }; - - $scope.forDeviceInterface = function(device_id, interface_id, data, fn) { - var i = 0; - var j = 0; - for (i = 0; i < $scope.devices.length; i++) { - if ($scope.devices[i].id === device_id) { - for (j = 0; j < $scope.devices[i].interfaces.length; j++) { - if ($scope.devices[i].interfaces[j].id === interface_id) { - fn($scope.devices[i].interfaces[j], data); - break; - } - } - } - } - }; - - $scope.onDeviceLabelEdit = function(data) { - $scope.edit_device_label(data); - }; - - $scope.edit_device_label = function(data) { - $scope.forDevice(data.id, data, function(device, data) { - device.name = data.name; - }); - }; - $scope.onInterfaceCreate = function(data) { $scope.create_interface(data); }; @@ -1017,16 +842,6 @@ var NetworkUIController = function($scope, } }; - $scope.onInterfaceLabelEdit = function(data) { - $scope.edit_interface_label(data); - }; - - $scope.edit_interface_label = function(data) { - $scope.forDeviceInterface(data.device_id, data.id, data, function(intf, data) { - intf.name = data.name; - }); - }; - $scope.onLinkCreate = function(data) { $scope.create_link(data); }; @@ -1091,16 +906,6 @@ var NetworkUIController = function($scope, } }; - $scope.onLinkLabelEdit = function(data) { - $scope.edit_link_label(data); - }; - - $scope.edit_link_label = function(data) { - $scope.forLink(data.id, data, function(link, data) { - link.name = data.name; - }); - }; - $scope.onDeviceMove = function(data) { $scope.move_device(data); }; @@ -1159,7 +964,6 @@ var NetworkUIController = function($scope, $scope.onClientId = function(data) { $scope.client_id = data; - $scope.send_initial_messages(); }; $scope.onTopology = function(data) { @@ -1190,15 +994,6 @@ var NetworkUIController = function($scope, } }; - $scope.onHistory = function (data) { - - $scope.history = []; - var i = 0; - for (i = 0; i < data.length; i++) { - $scope.history.push(data[i]); - } - }; - $scope.onSnapshot = function (data) { //Erase the existing state @@ -1239,6 +1034,9 @@ var NetworkUIController = function($scope, if (max_y === null || device.y > max_y) { max_y = device.y; } + if (device.device_type === undefined) { + device.device_type = device.type; + } new_device = new models.Device(device.id, device.name, device.x, @@ -1318,38 +1116,28 @@ var NetworkUIController = function($scope, $scope.link_id_seq = util.natural_numbers(max_link_id); } + console.log(['data.inventory_toolbox', data.inventory_toolbox]); + if (data.inventory_toolbox !== undefined) { + $scope.inventory_toolbox.items = []; + for (i = 0; i < data.inventory_toolbox.length; i++) { + device = data.inventory_toolbox[i]; + console.log(device); + if (device.device_type === undefined) { + device.device_type = device.type; + } + new_device = new models.Device(device.id, + device.name, + device.x, + device.y, + device.device_type, + device.host_id); + $scope.inventory_toolbox.items.push(new_device); + } + console.log($scope.inventory_toolbox.items); + } + $scope.updateInterfaceDots(); - $scope.$emit('instatiateSelect', $scope.devices); - $scope.update_device_variables(); - }; - - $scope.update_device_variables = function () { - - var hosts_by_id = {}; - var i = 0; - for (i = 0; i < $scope.devices.length; i++) { - hosts_by_id[$scope.devices[i].host_id] = $scope.devices[i]; - } - - $http.get('/api/v2/inventories/' + $scope.inventory_id + '/hosts/') - .then(function(response) { - let hosts = response.data.results; - for(var i = 0; i { - console.log([data, status]); - ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to get host data: ' + status }); - }); - + $scope.$emit('awxNet-instatiateSelect', $scope.devices); }; $scope.updateInterfaceDots = function() { @@ -1381,20 +1169,6 @@ var NetworkUIController = function($scope, //ignore }; - $scope.send_initial_messages = function() { - var i = 0; - var messages_to_send = $scope.initial_messages; - var message = null; - var data = null; - $scope.initial_messages = []; - for(i = 0; i < messages_to_send.length; i++) { - message = messages_to_send[i]; - message.sender = $scope.test_client_id; - data = messages.serialize(message); - $scope.test_socket.send(data); - } - }; - // Call onopen directly if $scope.control_socket is already open if ($scope.control_socket.readyState === WebSocket.OPEN) { $scope.control_socket.onopen(); @@ -1465,9 +1239,9 @@ var NetworkUIController = function($scope, }); $scope.update_toolbox_heights = function(){ - toolboxTopMargin = $('.Networking-top').height(); - toolboxTitleMargin = toolboxTopMargin + 35; - toolboxHeight = $scope.graph.height - toolboxTopMargin; + var toolboxTopMargin = $('.Networking-top').height(); + var toolboxTitleMargin = toolboxTopMargin + 35; + var toolboxHeight = $scope.graph.height - toolboxTopMargin; let toolboxes = ['inventory_toolbox']; toolboxes.forEach((toolbox) => { @@ -1476,11 +1250,6 @@ var NetworkUIController = function($scope, $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); }; @@ -1489,26 +1258,6 @@ var NetworkUIController = function($scope, $scope.update_toolbox_heights(); }; - $scope.update_offsets = function () { - - var i = 0; - var streams = $scope.streams; - var map = new Map(); - var stream = null; - var key = null; - for (i = 0; i < streams.length; i++) { - stream = streams[i]; - key = "" + stream.from_device.id + "_" + stream.to_device.id; - map.set(key, 0); - } - for (i = 0; i < streams.length; i++) { - stream = streams[i]; - key = "" + stream.from_device.id + "_" + stream.to_device.id; - stream.offset = map.get(key); - map.set(key, stream.offset + 1); - } - }; - setInterval( function () { var test_event = null; if ($scope.test_events.length > 0) { @@ -1577,12 +1326,9 @@ var NetworkUIController = function($scope, $scope.mode_controller.state.start($scope.mode_controller); }; - $scope.reset_history = function () { - $scope.history = []; - }; - $scope.reset_toolboxes = function () { $scope.inventory_toolbox.items = []; + $scope.inventory_toolbox.scroll_offset = 0; }; $scope.cancel_animations = 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 132636ae37..22c1c89189 100644 --- a/awx/ui/client/src/network-ui/network_ui.partial.svg +++ b/awx/ui/client/src/network-ui/network_ui.partial.svg @@ -29,7 +29,7 @@ - + diff --git a/awx/ui/client/src/network-ui/style.less b/awx/ui/client/src/network-ui/style.less index f791e66f1b..154445a6ce 100644 --- a/awx/ui/client/src/network-ui/style.less +++ b/awx/ui/client/src/network-ui/style.less @@ -1,6 +1,7 @@ /* Copyright (c) 2017 Red Hat, Inc. */ @import 'network-nav/network.nav.block.less'; @import 'network-details/details.block.less'; +@import 'network-details/network-extra-vars/network-extra-vars.block.less'; @import 'zoom-widget/zoom.block.less'; @font-face { @@ -38,10 +39,10 @@ @blue: #337AB7; @light-toolbox-background: #f6f6f6; @icon-background-hover:@blue; +@context-menu-text: #333; .NetworkUI { background-color: @light-toolbox-background; - cursor: none; } .NetworkUI__text { @@ -551,7 +552,7 @@ stroke: @button-outline; stroke-width: 1; rx: 0; - stroke-dasharray: calc(~"100vh - 115px"); + stroke-dasharray: calc(~"100vh - 80px"); stroke-dashoffset: -45; } @@ -560,7 +561,7 @@ stroke-width: 1; fill: none; rx: 0; - stroke-dasharray: calc(~"100vh - 115px"); + stroke-dasharray: calc(~"100vh - 80px"); stroke-dashoffset: -200; } @@ -636,27 +637,6 @@ font-family: 'Open Sans'; } -.NetworkUI__chevron{ - fill: @button-body-pressed; -} - -.NetworkUI__chevron--hover, -.NetworkUI__chevron--pressed{ - cursor: pointer; - fill: white; -} - -.NetworkUI__iconBackground{ - fill:@button-body; - cursor: pointer; -} - -.NetworkUI__iconBackground--hover, -.NetworkUI__iconBackground--pressed{ - fill: @icon-background-hover; -} - - .NetworkUI__toolbox--title{ fill: @dark-widget-detail; text-transform: uppercase; @@ -676,13 +656,13 @@ } .NetworkUI__contextMenuButtonText{ - fill: #333; //@button-text; + fill: @context-menu-text; font-family: 'Open Sans'; font-size: 14px; } .NetworkUI__contextMenuButtonText-hover{ - fill: #333; //@button-text; + fill: @context-menu-text; font-family: 'Open Sans'; font-size: 14px; } diff --git a/awx/ui/client/src/network-ui/test.fsm.js b/awx/ui/client/src/network-ui/test.fsm.js index 85039e1f84..4867e92f59 100644 --- a/awx/ui/client/src/network-ui/test.fsm.js +++ b/awx/ui/client/src/network-ui/test.fsm.js @@ -106,6 +106,7 @@ _Reporting.prototype.start = function (controller) { controller.scope.replay = false; controller.scope.disconnected = false; controller.scope.recording = false; + controller.scope.cursor.hidden = true; var result = "passed"; if (controller.scope.test_errors.length > 0) { result = "errored"; @@ -138,18 +139,19 @@ _Loading.prototype.start = function (controller) { controller.changeState(Disabled); } else { console.log("Starting test"); + controller.scope.reset_coverage(); controller.scope.current_test = controller.scope.current_tests.shift(); + controller.scope.reset_toolboxes(); controller.scope.onSnapshot(controller.scope.current_test.pre_test_snapshot); controller.scope.replay = true; controller.scope.disconnected = true; controller.scope.test_errors = []; controller.scope.test_events = controller.scope.current_test.event_trace.slice(); controller.scope.test_events.push(new messages.TestCompleted()); - controller.scope.reset_coverage(); controller.scope.reset_flags(); controller.scope.reset_fsm_state(); - controller.scope.reset_history(); - controller.scope.reset_toolboxes(); + controller.scope.cancel_animations(); + controller.scope.cursor.hidden = false; controller.changeState(Running); } }; diff --git a/awx/ui/client/src/network-ui/time.fsm.js b/awx/ui/client/src/network-ui/time.fsm.js index 86ad3bc06e..de98dd3748 100644 --- a/awx/ui/client/src/network-ui/time.fsm.js +++ b/awx/ui/client/src/network-ui/time.fsm.js @@ -34,22 +34,6 @@ _Present.prototype.onMessage = function(controller, msg_type, message) { var type = type_data[0]; var data = type_data[1]; - - if (['DeviceCreate', - 'DeviceDestroy', - 'DeviceMove', - 'DeviceLabelEdit', - 'GroupLabelEdit', - 'GroupCreate', - 'InterfaceCreate', - 'InterfaceLabelEdit', - 'LinkCreate', - 'LinkDestroy', - 'LinkLabelEdit', - 'Snapshot'].indexOf(type) !== -1) { - - controller.scope.history.push(message.data); - } controller.handle_message(type, data); }; @@ -63,24 +47,11 @@ _Present.prototype.onMultipleMessage = function(controller, msg_type, message) { } }; -_Present.prototype.onDeviceStatus = function(controller, msg_type, message) { - controller.scope.onDeviceStatus(message); -}; - -_Present.prototype.onFacts = function(controller, msg_type, message) { - controller.scope.onFacts(message); -}; - _Present.prototype.onDeviceCreate = function(controller, msg_type, message) { if (message.sender !== controller.scope.client_id) { controller.scope.onDeviceCreate(message); } }; -_Present.prototype.onGroupCreate = function(controller, msg_type, message) { - if (message.sender !== controller.scope.client_id) { - controller.scope.onGroupCreate(message); - } -}; _Present.prototype.onInterfaceCreate = function(controller, msg_type, message) { if (message.sender !== controller.scope.client_id) { controller.scope.onInterfaceCreate(message); @@ -106,26 +77,6 @@ _Present.prototype.onLinkDestroy = function(controller, msg_type, message) { controller.scope.onLinkDestroy(message); } }; -_Present.prototype.onDeviceLabelEdit = function(controller, msg_type, message) { - if (message.sender !== controller.scope.client_id) { - controller.scope.onDeviceLabelEdit(message); - } -}; -_Present.prototype.onGroupLabelEdit = function(controller, msg_type, message) { - if (message.sender !== controller.scope.client_id) { - controller.scope.onGroupLabelEdit(message); - } -}; -_Present.prototype.onLinkLabelEdit = function(controller, msg_type, message) { - if (message.sender !== controller.scope.client_id) { - controller.scope.onLinkLabelEdit(message); - } -}; -_Present.prototype.onInterfaceLabelEdit = function(controller, msg_type, message) { - if (message.sender !== controller.scope.client_id) { - controller.scope.onInterfaceLabelEdit(message); - } -}; _Present.prototype.onDeviceSelected = function(controller, msg_type, message) { if (message.sender !== controller.scope.client_id) { controller.scope.onDeviceSelected(message); @@ -141,33 +92,12 @@ _Present.prototype.onSnapshot = function(controller, msg_type, message) { controller.scope.onSnapshot(message); } }; -_Present.prototype.onToolboxItem = function(controller, msg_type, message) { - if (message.sender !== controller.scope.client_id) { - controller.scope.onToolboxItem(message); - } -}; _Present.prototype.onid = function(controller, msg_type, message) { controller.scope.onClientId(message); }; _Present.prototype.onTopology = function(controller, msg_type, message) { controller.scope.onTopology(message); }; -_Present.prototype.onHistory = function(controller, msg_type, message) { - controller.scope.onHistory(message); -}; - -_Present.prototype.onCoverageRequest = function(controller) { - controller.scope.send_coverage(); -}; -_Present.prototype.onStopRecording = function(controller) { - controller.scope.recording = false; -}; -_Present.prototype.onStartReplay = function(controller) { - controller.scope.replay = true; -}; -_Present.prototype.onStopReplay = function(controller) { - controller.scope.replay = false; -}; _Present.prototype.onViewPort = function(controller, msg_type, message) { if (message.sender === controller.scope.client_id) { return; @@ -257,7 +187,7 @@ _Present.prototype.onNoop = function(controller, msg_type, message) { _Present.prototype.onTestCompleted = function(controller, msg_type, message) { controller.scope.test_channel.send(msg_type, message); -} +}; _Present.prototype.onError = function(controller, msg_type, message) { diff --git a/awx/ui/client/src/network-ui/util.js b/awx/ui/client/src/network-ui/util.js index f7009b1e17..bf11beebb6 100644 --- a/awx/ui/client/src/network-ui/util.js +++ b/awx/ui/client/src/network-ui/util.js @@ -8,52 +8,6 @@ Array.prototype.extend = function (other_array) { }; var math = require('mathjs'); -var yaml = require('js-yaml'); -var nunjucks = require('nunjucks'); - -function nunjucks_find_variables (text) { - - var variables = []; - var tokenizer = nunjucks.lexer.lex(text, {}); - var token = tokenizer.nextToken(); - while (token !== null) { - if (token.type === 'variable-start') { - token = tokenizer.nextToken(); - while (token !== null) { - if (token.type === 'symbol') { - variables.push(token.value); - } - if (token.type === 'variable-end') { - break; - } - token = tokenizer.nextToken(); - } - } - token = tokenizer.nextToken(); - } - - return variables; -} -exports.nunjucks_find_variables = nunjucks_find_variables; - -function parse_variables (variables) { - var parsed_variables = {}; - try { - parsed_variables = JSON.parse(variables); - } catch (err) { - try { - parsed_variables = yaml.safeLoad(variables); - } catch (err) { - parsed_variables = {}; - } - } - if (parsed_variables === undefined) { - return {}; - } - return parsed_variables; -} -exports.parse_variables = parse_variables; - function noop () { } @@ -72,37 +26,6 @@ function distance (x1, y1, x2, y2) { } exports.distance = distance; -// polarToCartesian -// @wdebeaum, @opsb -// from http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle -function polarToCartesian(centerX, centerY, radius, angleInDegrees) { - var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; - - return { - x: centerX + (radius * Math.cos(angleInRadians)), - y: centerY + (radius * Math.sin(angleInRadians)) - }; -} - -// describeArc -// @wdebeaum, @opsb -// from http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle -function describeArc(x, y, radius, startAngle, endAngle){ - - var start = polarToCartesian(x, y, radius, endAngle); - var end = polarToCartesian(x, y, radius, startAngle); - - var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; - - var d = [ - "M", start.x, start.y, - "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y - ].join(" "); - - return d; -} -exports.describeArc = describeArc; - function pDistanceLine(x, y, x1, y1, x2, y2) { //Code from http://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment //Joshua diff --git a/awx/ui/client/src/network-ui/svg-crowbar.js b/awx/ui/client/src/network-ui/vendor/svg-crowbar.js similarity index 100% rename from awx/ui/client/src/network-ui/svg-crowbar.js rename to awx/ui/client/src/network-ui/vendor/svg-crowbar.js diff --git a/awx/ui/client/src/network-ui/view.fsm.js b/awx/ui/client/src/network-ui/view.fsm.js index 626101d6cb..b1e047c1da 100644 --- a/awx/ui/client/src/network-ui/view.fsm.js +++ b/awx/ui/client/src/network-ui/view.fsm.js @@ -73,9 +73,12 @@ _Start.prototype.start.transitions = ['Ready']; _Scale.prototype.onMouseWheel = function (controller, msg_type, message) { var delta = message[1]; + if (Math.abs(delta) > 100) { + delta = delta / 10; + } var new_scale = Math.max(controller.scope.MIN_ZOOM, Math.min(controller.scope.MAX_ZOOM, - (controller.scope.current_scale + delta / (controller.scope.MAX_ZOOM / controller.scope.current_scale)))); + (controller.scope.current_scale + delta / (100 / controller.scope.current_scale)))); var new_panX = controller.scope.mouseX - 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(); diff --git a/awx/ui/client/src/network-ui/zoom-widget/zoom.block.less b/awx/ui/client/src/network-ui/zoom-widget/zoom.block.less index 2baaaca481..d827dcbe1e 100644 --- a/awx/ui/client/src/network-ui/zoom-widget/zoom.block.less +++ b/awx/ui/client/src/network-ui/zoom-widget/zoom.block.less @@ -2,8 +2,8 @@ position: absolute; bottom:0px; right:0px; - border-top: 1px solid #B7B7B7; - border-left: 1px solid #B7B7B7; + border-top: 1px solid @btn-bord; + border-left: 1px solid @btn-bord; width: 200px; height:60px; } @@ -14,7 +14,7 @@ .NetworkingControls-manualControls{ position: absolute; - background-color: #FFFFFF; + background-color: @default-bg; padding-left:15px; width: 100%; } diff --git a/awx/ui/client/src/network-ui/zoom-widget/zoom.directive.js b/awx/ui/client/src/network-ui/zoom-widget/zoom.directive.js index 76d13d1c97..da2c31d114 100644 --- a/awx/ui/client/src/network-ui/zoom-widget/zoom.directive.js +++ b/awx/ui/client/src/network-ui/zoom-widget/zoom.directive.js @@ -43,17 +43,17 @@ export default [ scope.zoomTo = function() { scope.zoom = Math.ceil(scope.zoom / 10) * 10; - this.$parent.$broadcast('zoom', scope.zoom); + this.$parent.$broadcast('awxNet-zoom', scope.zoom); }; scope.zoomOut = function(){ scope.zoom = scope.zoom - 10 > 0 ? scope.zoom - 10 : 0; - this.$parent.$broadcast('zoom', scope.zoom); + this.$parent.$broadcast('awxNet-zoom', scope.zoom); }; scope.zoomIn = function(){ scope.zoom = scope.zoom + 10 < 200 ? scope.zoom + 10 : 200; - this.$parent.$broadcast('zoom', scope.zoom); + this.$parent.$broadcast('awxNet-zoom', scope.zoom); }; } };