External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 11:20:39 -03:30
Code Issues Packages Projects Releases Wiki Activity

Cleans up network UI code for 3.3

Browse Source 
This removes features that were not selected for 3.3.

* Removes breadcrumb
* Removes "Jump To" panel and some of the hotkey panel items
* Removes Buttons in favor of Action Dropdown
* Removes chevrons
* Removes ActionIcon model
* Removes the Rename button on the context menu
* Makes details panel readonly
* Adds expand modal for extra vars
* Adds inventory copy function back to inventory list
* Sets cursor to visible
* Adds hide_menus
* Adds fix for mice that return large mousewheel deltas
This commit is contained in:
Jared Tabor 2018-02-22 13:24:01 -08:00 committed by Ben Thomasson
parent 766bee3753
commit 66c351c60c
No known key found for this signature in database
GPG Key ID: 5818EF4CC895D5F5
35 changed files with 582 additions and 1424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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});

2
awx/ui/client/src/network-ui/animation.fsm.js
View File

@ -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) {

31
awx/ui/client/src/network-ui/animations.js
View File

@ -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", {});

96
awx/ui/client/src/network-ui/buttons.fsm.js Normal file
View File

@ -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'];

14
awx/ui/client/src/network-ui/chevron.left.directive.js
View File

@ -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;

14
awx/ui/client/src/network-ui/chevron.right.directive.js
View File

@ -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;

13
awx/ui/client/src/network-ui/chevron_left.partial.svg
View File

@ -1,13 +0,0 @@
<rect
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__iconBackground--pressed' : actionIcon.mouse_over ? 'NetworkUI__iconBackground--hover' : 'NetworkUI__iconBackground'}}"
class="NetworkUI__iconBackground"
width=30
height=30
rx=5
ry=5
x=-4
y=-6 />
<path
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__chevron--pressed' : actionIcon.mouse_over ? 'NetworkUI__chevron--hover' : 'NetworkUI__chevron'}}"
ng-attr-transform="scale(0.01)"
d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z"/>

12
awx/ui/client/src/network-ui/chevron_right.partial.svg
View File

@ -1,12 +0,0 @@
<rect
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__iconBackground--pressed' : actionIcon.mouse_over ? 'NetworkUI__iconBackground--hover' : 'NetworkUI__iconBackground'}}"
width=30
height=30
rx=5
ry=5
x=-5
y=-6 />
<path
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__chevron--pressed' : actionIcon.mouse_over ? 'NetworkUI__chevron--hover' : 'NetworkUI__chevron'}}"
ng-attr-transform="scale(0.01)"
d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"/>

1
awx/ui/client/src/network-ui/debug.partial.svg
View File

@ -33,7 +33,6 @@
<text ng-attr-x="{{graph.right_column}}" y="575" class="NetworkUI__debug-text">Buttons State: {{buttons_controller.state.name}}</text>
<text ng-attr-x="{{graph.right_column}}" y="595" class="NetworkUI__debug-text">Time State: {{time_controller.state.name}}</text>
<text ng-attr-x="{{graph.right_column}}" y="615" class="NetworkUI__debug-text">Time Pointer: {{time_pointer}}</text>
<text ng-attr-x="{{graph.right_column}}" y="635" class="NetworkUI__debug-text">History: {{history.length}}</text>
<text ng-attr-x="{{graph.right_column}}" y="675" class="NetworkUI__debug-text">Group State: {{group_controller.state.name}}</text>
<text ng-attr-x="{{graph.right_column}}" y="715" class="NetworkUI__debug-text">Hotkeys State: {{hotkeys_controller.state.name}}</text>
<text ng-attr-x="{{graph.right_column}}" y="735" class="NetworkUI__debug-text">Mode State: {{mode_controller.state.name}}</text>

1
awx/ui/client/src/network-ui/details.panel.fsm.js
View File

@ -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);

10
awx/ui/client/src/network-ui/fsm.js
View File

@ -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) {

6
awx/ui/client/src/network-ui/inventory_toolbox.partial.svg
View File

@ -1,5 +1,6 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="!hide_menus">
<!-- begin collapsed toolbox -->
<g ng-if="overall_toolbox_collapsed">
<rect class="NetworkUI__toolbox-collapsed"
@ -27,10 +28,6 @@
ng-attr-transform="translate({{toolbox.title_coordinates.x}},{{toolbox.title_coordinates.y}})">
{{toolbox.name}}
</text>
<g awx-net-chevron-left-icon
action-icon="action_icons[0]"
ng-if="toolbox.enabled"
ng-attr-transform="translate({{action_icons[0].x}}, {{action_icons[0].y}})"></g>
<g clip-path="url(#inventory-toolbox-clip-path)">
<g ng-attr-transform="translate({{toolbox.x}}, {{toolbox.y+20}})">
@ -112,3 +109,4 @@
</g> <!-- end selected item -->
</g> <!-- ng-if -->
</g> <!-- ng-if toolbox.enabled -->
</g> <!-- ng-if !hide_menus -->

54
awx/ui/client/src/network-ui/messages.js
View File

@ -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;
}

318
awx/ui/client/src/network-ui/models.js
View File

@ -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;

194
awx/ui/client/src/network-ui/move.fsm.js
View File

@ -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);

52
awx/ui/client/src/network-ui/network-details/details.controller.js
View File

@ -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();
}];

29
awx/ui/client/src/network-ui/network-details/details.partial.html
View File

@ -16,7 +16,7 @@
<span class="Form-inputLabel" translate="">Host Name</span><a id="awp-name" href="" aw-pop-over="<p>Provide a host name, ip address, or ip address:port. Examples include:</p><blockquote>myserver.domain.com<br/>127.0.0.1<br />10.1.0.140:25<br />server.example.com:25</blockquote>" data-placement="right" data-container="body" over-title="Host Name" class="help-link" data-original-title="" title="" tabindex="-1"><i class="fa fa-question-circle"></i></a>
</label>
<div>
<input type="text" ng-model="item.name" name="name" id="host_name" class="form-control Form-textInput Networking-input ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required" required="" ng-disabled="!(item.summary_fields.user_capabilities.edit || canAdd)">
<input readonly type="text" ng-model="item.name" name="name" id="host_name" class="form-control Form-textInput Networking-input ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required" required="" ng-disabled="!(item.summary_fields.user_capabilities.edit || canAdd)">
<div class="error ng-hide" id="host-name-required-error" ng-show="host_form.name.$dirty &amp;&amp; host_form.name.$error.required">Please enter a value.</div>
<div class="error api-error ng-binding" id="host-name-api-error" ng-bind="name_api_error"></div>
</div>
@ -26,39 +26,16 @@
<span class="Form-inputLabel" translate="">Description</span>
</label>
<div>
<input type="text" ng-model="item.description" name="description" id="host_description" class="form-control Form-textInput Networking-input" ng-disabled="!(item.summary_fields.user_capabilities.edit || canAdd)">
<input readonly type="text" ng-model="item.description" name="description" id="host_description" class="form-control Form-textInput Networking-input" ng-disabled="!(item.summary_fields.user_capabilities.edit || canAdd)">
<div class="error api-error ng-binding" id="host-description-api-error" ng-bind="description_api_error"></div>
</div>
</div>
<div class="form-group Form-formGroup Form-formGroup--fullWidth">
<label class="Form-inputLabelContainer" for="variables">
<span class="Form-inputLabel" translate="">Variables</span>
<a id="awp-variables" href="" aw-pop-over="<p>Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>JSON:<br />
<blockquote>{<br />&emsp;&quot;somevar&quot;: &quot;somevalue&quot;,<br />&emsp;&quot;password&quot;: &quot;magic&quot;<br /> }</blockquote>
YAML:<br />
<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>
<p>View JSON examples at <a href=&quot;http://www.json.org&quot; target=&quot;_blank&quot;>www.json.org</a></p><p>View YAML examples at <a href=&quot;http://docs.ansible.com/YAMLSyntax.html&quot; target=&quot;_blank&quot;>docs.ansible.com</a></p>"
data-placement="right" data-container="body" over-title="Host Variables" class="help-link" data-original-title="" title="" tabindex="-1">
<i class="fa fa-question-circle"></i>
</a>
<div class="FormToggle-container" id="host_variables_parse_type">
<div class="btn-group">
<label ng-class="{'btn-primary': parseType === 'yaml','Button-primary--hollow' : parseType === 'json'}" class="btn btn-xs btn-primary">
<input type="radio" value="yaml" ng-model="parseType" ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty">YAML
</label>
<label ng-class="{'btn-primary': parseType === 'json','Button-primary--hollow' : parseType === 'yaml'}" class="btn btn-xs Button-primary--hollow">
<input type="radio" value="json" ng-model="parseType" ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty">JSON
</label>
</div>
</div>
</label>
<textarea rows="6" ng-model="variables" name="variables" class="form-control Form-textArea Form-formGroup--fullWidth" id="network_host_variables"></textarea>
<awx-net-extra-vars item="item"></awx-net-extra-vars>
</div>
</form>
<div class="buttons Form-buttons" id="host_controls" ng-show="item.host_id">
<button type="button" class="btn btn-sm Form-cancelButton" id="host_cancel_btn" ng-show="(item.summary_fields.user_capabilities.edit || canAdd)" ng-click="formCancel()"> Cancel</button>
<button type="button" class="btn btn-sm Form-cancelButton ng-hide" id="host_close_btn" ng-show="!(item.summary_fields.user_capabilities.edit || canAdd)" ng-click="formCancel()"> Close</button>
<button type="button" class="btn btn-sm Form-saveButton" id="host_save_btn" ng-show="(item.summary_fields.user_capabilities.edit || canAdd)" ng-click="formSave()" ng-disabled="host_form.$invalid || host_form.$pending"> Save</button>
</div>
<div class="Networking-saveConfirmation" ng-show="saveConfirmed">
Save Complete <i class="fa fa-check-circle"></i>

4
awx/ui/client/src/network-ui/network-details/main.js
View File

@ -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);

167
awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.block.less Normal file
View File

@ -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;
}

70
awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.directive.js Normal file
View File

@ -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);
}
}
};
}];

72
awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.partial.html Normal file
View File

@ -0,0 +1,72 @@
<label class="NetworkingExtraVarsLabel" for="variables">
<div class="NetworkingExtraVars-extraVarsLabelContainer">
<span class="Form-inputLabel" translate="">Variables</span>
<a id="awp-variables" href="" aw-pop-over="<p>Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>JSON:<br />
<blockquote>{<br />&emsp;&quot;somevar&quot;: &quot;somevalue&quot;,<br />&emsp;&quot;password&quot;: &quot;magic&quot;<br /> }</blockquote>
YAML:<br />
<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>
<p>View JSON examples at <a href=&quot;http://www.json.org&quot; target=&quot;_blank&quot;>www.json.org</a></p><p>View YAML examples at <a href=&quot;http://docs.ansible.com/YAMLSyntax.html&quot; target=&quot;_blank&quot;>docs.ansible.com</a></p>"
data-placement="right" data-container="body" over-title="Host Variables" class="help-link" data-original-title="" title="" tabindex="-1">
<i class="fa fa-question-circle"></i>
</a>
<div class="FormToggle-container" id="host_variables_parse_type">
<div class="btn-group">
<label ng-class="{'btn-primary': parseType === 'yaml','Button-primary--hollow' : parseType === 'json'}" class="btn btn-xs btn-primary">
<input type="radio" value="yaml" ng-model="parseType" ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty">YAML
</label>
<label ng-class="{'btn-primary': parseType === 'json','Button-primary--hollow' : parseType === 'yaml'}" class="btn btn-xs Button-primary--hollow">
<input type="radio" value="json" ng-model="parseType" ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty">JSON
</label>
</div>
</div>
</div>
<div class="NetworkingExtraVars-expandTextContainer" ng-click="openExtraVarsModal()">Expand</div>
</label>
<textarea readonly rows="6" disabled="disabled" ng-model="variables" name="variables" class="form-control Form-textArea Form-formGroup--fullWidth" id="network_host_variables"></textarea>
<div ng-if="networkingExtraVarsModalOpen" id="NetworkingExtraVarsModal" class="NetworkingExtraVarsModal modal" role="dialog">
<div id="NetworkingExtraVarsModalDialog" class="modal-dialog">
<div class="modal-content">
<!-- modal body -->
<div class="modal-body">
<div class="NetworkingExtraVars-header">
<span class="NetworkingExtraVars-title">{{item.name}}</span>
<button ng-click="closeExtraVarModal()" type="button" class="close">
<i class="fa fa-times-circle"></i>
</button>
</div>
<div class="NetworkingExtraVars-codemirrorContainer">
<!-- <textarea ng-hide="no_json" ng-model="variables" id="NetworkingExtraVars-codemirror" class="NetworkingExtraVars-codemirror"></textarea> -->
<label class="NetworkingExtraVarsModalLabel" for="variables">
<span class="Form-inputLabel" translate="">Variables</span>
<a id="awp-variables" href="" aw-pop-over="<p>Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>JSON:<br />
<blockquote>{<br />&emsp;&quot;somevar&quot;: &quot;somevalue&quot;,<br />&emsp;&quot;password&quot;: &quot;magic&quot;<br /> }</blockquote>
YAML:<br />
<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>
<p>View JSON examples at <a href=&quot;http://www.json.org&quot; target=&quot;_blank&quot;>www.json.org</a></p><p>View YAML examples at <a href=&quot;http://docs.ansible.com/YAMLSyntax.html&quot; target=&quot;_blank&quot;>docs.ansible.com</a></p>"
data-placement="right" data-container="body" over-title="Host Variables" class="help-link" data-original-title="" title="" tabindex="-1">
<i class="fa fa-question-circle"></i>
</a>
<div class="FormToggle-container" id="host_variables_parse_type">
<div class="btn-group">
<label ng-class="{'btn-primary': parseType === 'yaml','Button-primary--hollow' : parseType === 'json'}" class="btn btn-xs btn-primary">
<input type="radio" value="yaml" ng-model="parseType" ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty">YAML
</label>
<label ng-class="{'btn-primary': parseType === 'json','Button-primary--hollow' : parseType === 'yaml'}" class="btn btn-xs Button-primary--hollow">
<input type="radio" value="json" ng-model="parseType" ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty">JSON
</label>
</div>
</div>
</label>
<textarea readonly disabled ng-model="extra_variables" name="extra_variables" class="form-control Form-textArea Form-formGroup--fullWidth" id="NetworkingExtraVars-codemirror"></textarea>
</div>
<div ng-if="no_json" class="NetworkingExtraVars-noJson" translate>No JSON data returned by the module</div>
<div class="NetworkingExtraVars-controls">
<button ng-click="closeExtraVarModal()" class="btn btn-sm btn-default NetworkingExtraVars-close">Close</button>
</div>
</div>
</div>
</div>
</div>

106
awx/ui/client/src/network-ui/network-nav/network.nav.block.less
View File

@ -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;
}

58
awx/ui/client/src/network-ui/network-nav/network.nav.controller.js
View File

@ -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');
});
}

98
awx/ui/client/src/network-ui/network-nav/network.nav.view.html
View File

@ -12,24 +12,20 @@
</div>
<div class="Networking-toolbar">
<div class="Networking-toolbarLeftSide">
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('Record')">RECORD</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('Export')">EXPORT</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('Layout')">LAYOUT</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('ExportYaml')">EXPORT YAML</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('DownloadTrace')">DOWNLOAD TRACE</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('DownloadRecording')">DOWNLOAD RECORDING</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('UploadTest')">UPLOAD TEST</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('RunTests')">RUN TESTS</button>
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('CompileVariables')">COMPILE VARIABLES</button>
<div class="Networking-actionsDropDownContainer">
<select id="networking-actionsDropdown"
style="width:400px">
<option></option>
<option value="Export" title="Export">Export SVG</option>
<option value="ExportYaml" title="ExportYaml">Export YAML</option>
</select>
</div>
</div>
<div class="Networking-toolbarRightSide">
<div class="Networking-searchBarContainer">
<select id="networking-search"
ng-model="device"
ng-options="device.label group by device.type | capitalize for device in devices | orderBy:'label' "
style="width:100%">
<option></option>
</select>
<div class="">
<button ng-click="vm.hideToolbox()" type="button" class="Networking-toolbarIcon" ng-class="{'Networking-toolbarIcon--selected Networking-toolboxPanelToolbarIcon--selected' : vm.leftPanelIsExpanded}">
<i class="fa fa-wrench"></i>
</button>
</div>
<div class="Networking-keyContainer">
<button ng-click="vm.key()" type="button" class="Networking-toolbarIcon" ng-class="{'Networking-toolbarIcon--selected' : vm.keyPanelExpanded}">
@ -39,38 +35,6 @@
<div class="Networking-dropdownPanelTitle">
KEY
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">e</div>
<div class="Networking-keySymbolLabel">NEW SITE</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">a</div>
<div class="Networking-keySymbolLabel">NEW RACK</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">g</div>
<div class="Networking-keySymbolLabel">NEW GROUP</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">r</div>
<div class="Networking-keySymbolLabel">NEW ROUTER</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">s</div>
<div class="Networking-keySymbolLabel">NEW SWITCH</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">h</div>
<div class="Networking-keySymbolLabel">NEW HOST</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">l</div>
<div class="Networking-keySymbolLabel">NEW LINK</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">m</div>
<div class="Networking-keySymbolLabel">NEW STREAM</div>
</div>
<div class="Networking-keyPanelOption">
<div class="Networking-keySymbol">d</div>
<div class="Networking-keySymbolLabel">DEBUG MODE</div>
@ -93,40 +57,16 @@
</div>
</div>
</div>
<div class="Networking-jumpToContainer">
<button ng-click="vm.jumpTo()" type="button" class="Networking-toolbarIcon" ng-class="{'Networking-toolbarIcon--selected' : vm.jumpToPanelExpanded}">
<i class="fa fa-dot-circle-o"></i>
</button>
<div class="Networking-jumpToDropDownPanel" ng-if="vm.jumpToPanelExpanded">
<div class="Networking-dropdownPanelTitle">
JUMP TO
</div>
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('site')">
SITE
</div>
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('rack')">
RACK
</div>
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('inventory')">
INVENTORY
</div>
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('process')">
PROCESS
</div>
</div>
<div class="Networking-searchBarContainer">
<select id="networking-search"
ng-model="device"
ng-options="device.label group by device.type | capitalize for device in devices | orderBy:'label' "
style="width:400px">
<option></option>
</select>
</div>
</div>
</div>
<div class="Networking-toolbar Networking-breadCrumbBar">
<ol class="Networking-breadCrumbBarItem">
<li class="BreadCrumb-item Networking-breadCrumbText" ng-repeat="group in vm.breadcrumb_groups | limitTo:(vm.breadcrumb_groups.length-1)">
<span>{{group.name}}</span>
</li>
<li class="BreadCrumb-item Networking-breadCrumbText" ng-repeat="group in vm.breadcrumb_groups | limitTo:-1" class="active">
<span>{{group.name}}</span>
</li>
</ol>
</div>
</div>
</div>

4
awx/ui/client/src/network-ui/network.ui.app.js
View File

@ -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)

360
awx/ui/client/src/network-ui/network.ui.controller.js
View File

@ -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<hosts.length; i++){
try {
let host = hosts[i];
if (hosts_by_id[host.id] !== undefined) {
hosts_by_id[host.id].variables = util.parse_variables(host.variables);
}
} catch (error) {
console.log(error);
}
}
})
.catch(({data, status}) => {
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 () {

2
awx/ui/client/src/network-ui/network_ui.partial.svg
View File

@ -29,7 +29,7 @@
</defs>
<g transform="scale(1.0)" id="frame_g">
<g ng-if="!hide_links">
<g ng-if="current_scale > 0.5 && current_scale < 5">
<g ng-if="current_scale > 0.5">
<g ng-repeat="link in links">
<g awx-net-link></g>
</g> <!-- end ng-repeat link in links-->

32
awx/ui/client/src/network-ui/style.less
View File

@ -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;
}

8
awx/ui/client/src/network-ui/test.fsm.js
View File

@ -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);
}
};

72
awx/ui/client/src/network-ui/time.fsm.js
View File

@ -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) {

77
awx/ui/client/src/network-ui/util.js
View File

@ -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

0
awx/ui/client/src/network-ui/svg-crowbar.js → awx/ui/client/src/network-ui/vendor/svg-crowbar.js vendored
View File

5
awx/ui/client/src/network-ui/view.fsm.js
View File

@ -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();

6
awx/ui/client/src/network-ui/zoom-widget/zoom.block.less
View File

@ -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%;
}

6
awx/ui/client/src/network-ui/zoom-widget/zoom.directive.js
View File

@ -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);
};
}
};