External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-10 10:57:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

Cleans up feature set for 3.3

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

* Removes dpath requirement
* Removes generated action_plugins
* Removes network UI v1 api
* Removes unused network management commands
* Removes network UI CLI client
* Removes templates
* Removes unused DataBinding models
* Removes obsolete test
* Removes unused admin and tests
* Removes experimental UndoPersistence, RedoPersistence, and auto-layout functions
* Removes API endpoints for network visualization
* Removes unused consumer routes
* Removes group, site, and rack features for 3.3
* Removes unused tables controller
* Removes undo/redo
* Removes group code and scale checks
This commit is contained in:
Ben Thomasson
2018-02-22 14:41:53 -05:00
parent 8d28748451
commit b29a605800
217 changed files with 69 additions and 16430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui/client/src/network-ui/button.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/button.partial.svg');
function button () {
return { restrict: 'A', templateUrl};
}
exports.button = button;

14
awx/ui/client/src/network-ui/button.partial.svg
View File

@@ -1,14 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<rect ng-attr-class="{{button.is_pressed ? 'NetworkUI__button--button-pressed' : button.mouse_over ? 'NetworkUI__button--button-hover' : 'NetworkUI__button'}}"
x=0
y=0
ng-attr-width={{button.width}}
ng-attr-height={{button.height}}
rx=5></rect>
<text ng-attr-class="{{button.is_pressed ? 'NetworkUI__button-text--button-pressed' : button.mouse_over ? 'NetworkUI__button-text--button-hover' : 'NetworkUI__button-text'}}"
ng-attr-x="{{button.width/2}}"
ng-attr-y="{{button.height/2}}"
dy=".3em"
text-anchor="middle">{{button.name}}</text>

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

@@ -1,97 +0,0 @@
/* 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'];

4
awx/ui/client/src/network-ui/configuration.partial.svg
View File

@@ -1,4 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-attr-transform="translate({{item.x}}, {{item.y}}">
<path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="black" stroke-width="3" />
</g>

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

@@ -35,7 +35,6 @@
<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="695" class="NetworkUI__debug-text">Selected groups: {{selected_groups.length}}</text>
<text ng-attr-x="{{graph.right_column}}" y="715" class="NetworkUI__debug-text">Hotkeys State: {{hotkeys_controller.state.name}}</text>
<text ng-attr-x="{{graph.right_column}}" y="735" class="NetworkUI__debug-text">Mode State: {{mode_controller.state.name}}</text>
<text ng-attr-x="{{graph.right_column}}" y="755" class="NetworkUI__debug-text">Device Detail State: {{device_detail_controller.state.name}}</text>

8
awx/ui/client/src/network-ui/device.detail.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/device_detail.partial.svg');
function deviceDetail () {
return { restrict: 'A', templateUrl};
}
exports.deviceDetail = deviceDetail;

81
awx/ui/client/src/network-ui/device.detail.fsm.js
View File

@@ -1,81 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var models = require('./models.js');
var messages = require('./messages.js');
function _State () {
}
inherits(_State, fsm._State);
function _Ready () {
this.name = 'Ready';
}
inherits(_Ready, _State);
var Ready = new _Ready();
exports.Ready = Ready;
function _Disable () {
this.name = 'Disable';
}
inherits(_Disable, _State);
var Disable = new _Disable();
exports.Disable = Disable;
function _Start () {
this.name = 'Start';
}
inherits(_Start, _State);
var Start = new _Start();
exports.Start = Start;
_Start.prototype.start = function (controller) {
controller.changeState(Ready);
};
_Start.prototype.start.transitions = ['Ready'];
_Ready.prototype.onPasteProcess = function (controller, msg_type, message) {
console.log([msg_type, message]);
var i=0;
var devices = controller.scope.devices;
var device = null;
var x = controller.scope.scaledX;
var y = controller.scope.scaledY;
var app = null;
for(i=0; i < devices.length; i++) {
device = devices[i];
if (device.is_selected(x, y)) {
console.log(device);
app = new models.Process(device.process_id_seq(),
message.process.name,
message.process.type,
controller.scope.scaledX,
controller.scope.scaledY);
app.device = device;
device.processes.push(app);
controller.scope.send_control_message(new messages.ProcessCreate(controller.scope.client_id,
app.id,
app.name,
app.type,
app.device.id,
app.x,
app.y));
break;
} else {
console.log([x,y, device.x, device.y]);
}
}
};

108
awx/ui/client/src/network-ui/device_detail.partial.svg
View File

@@ -1,108 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-attr-transform="scale({{1/5}}) translate(-250,-250)">
<rect width=500
height=500
x=0
y=0
class="NetworkUI__group"/>
<g ng-attr-transform="translate(0,0)"
ng-attr-class="{{item.type}}"
ng-switch on="item.type">
<g ng-switch-when="router"><!-- begin router -->
<g awx-net-router></g>
</g> <!-- end router -->
<g ng-switch-when="switch"> <!-- begin switch -->
<g awx-net-switch> </g>
</g> <!-- end switch -->
<g ng-switch-when="host"> <!-- begin host -->
<g awx-net-host> </g>
</g> <!-- end host -->
<g ng-switch-default> <!-- begin default -->
<g awx-net-default></g>
</g> <!-- end default -->
</g> <!-- end transform class switch -->
<g transform="translate(0, 500)">
<g ng-repeat="interface in item.interfaces track by $index">
<g ng-attr-transform="translate({{$index * 60 + 30}}, -40)">
<g ng-if="interface.link !== null">
<line x1="0"
y1="0"
x2="0"
y2="100"
class="{{interface.link.status === null ? 'NetworkUI__link' : interface.link.status ? 'NetworkUI__link--link-pass' : 'NetworkUI__link--link-fail'}}"/>
</g>
<circle cx="0"
cy="0"
r=14
ng-attr-class="{{interface.selected ? 'NetworkUI__interface--selected' : 'NetworkUI--hidden'}}" ></circle>
<circle cx="0"
cy="0"
r=10
class="NetworkUI__interface" ></circle>
<text ng-attr-class="{{interface.selected && ! interface.edit_label ? 'NetworkUI__interface-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#selected)"
text-anchor="middle"
x="0"
y="-15"> {{interface.name}}</text>
<text class="NetworkUI__interface-text" text-anchor="middle" x="0" y="-15">{{interface.name}}{{interface.edit_label?'_':''}}</text>
<g ng-if="interface.remote_interface() !== null">
<circle cx="0"
cy="100"
r=14
ng-attr-class="{{interface.remote_interface().selected ? 'NetworkUI__interface--selected' : 'NetworkUI--hidden'}}" ></circle>
<circle cx="0"
cy="100"
r=10
class="NetworkUI__interface" ></circle>
</g>
<text class="NetworkUI__interface-text" text-anchor="middle" x="0" y="85">{{interface.remote_interface().name}}</text>
<g ng-repeat="item in [interface.remote_interface().device]">
<g ng-attr-transform="translate(0,100) scale(0.5) translate(0, {{item.height}})"
ng-attr-class="{{item.type}}"
ng-switch on="item.type">
<g ng-switch-when="router"><!-- begin router -->
<g awx-net-router></g>
</g> <!-- end router -->
<g ng-switch-when="switch"> <!-- begin switch -->
<g awx-net-switch> </g>
</g> <!-- end switch -->
<g ng-switch-when="host"> <!-- begin host -->
<g awx-net-host> </g>
</g> <!-- end host -->
<g ng-switch-default> <!-- begin default -->
</g> <!-- end default -->
</g> <!-- end transform class switch -->
</g> <!-- end repeat -->
</g> <!-- end transform -->
</g> <!-- end ng-repeat interface -->
</g> <!-- end transform translate -->
<g transform="translate(0, 100)">
<g ng-repeat="item in item.processes track by $index">
<g ng-attr-transform="translate({{$index * 75 + 50}}, 0) scale(0.5)">
<g awx-net-process></g>
</g> <!-- end translate -->
</g> <!-- end ng-repeat process -->
</g> <!-- end translate -->
</g> <!-- end transform scale translate -->

8
awx/ui/client/src/network-ui/group.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/group.partial.svg');
function group () {
return { restrict: 'A', templateUrl};
}
exports.group = group;

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

@@ -1,599 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var models = require('./models.js');
var messages = require('./messages.js');
var titlecase = require('titlecase');
function _State () {
}
inherits(_State, fsm._State);
function _Resize () {
this.name = 'Resize';
}
inherits(_Resize, _State);
var Resize = new _Resize();
exports.Resize = Resize;
function _Start () {
this.name = 'Start';
}
inherits(_Start, _State);
var Start = new _Start();
exports.Start = Start;
function _CornerSelected () {
this.name = 'CornerSelected';
}
inherits(_CornerSelected, _State);
var CornerSelected = new _CornerSelected();
exports.CornerSelected = CornerSelected;
function _Selected1 () {
this.name = 'Selected1';
}
inherits(_Selected1, _State);
var Selected1 = new _Selected1();
exports.Selected1 = Selected1;
function _Selected3 () {
this.name = 'Selected3';
}
inherits(_Selected3, _State);
var Selected3 = new _Selected3();
exports.Selected3 = Selected3;
function _Move () {
this.name = 'Move';
}
inherits(_Move, _State);
var Move = new _Move();
exports.Move = Move;
function _Ready () {
this.name = 'Ready';
}
inherits(_Ready, _State);
var Ready = new _Ready();
exports.Ready = Ready;
function _Disable () {
this.name = 'Disable';
}
inherits(_Disable, _State);
var Disable = new _Disable();
exports.Disable = Disable;
function _EditLabel () {
this.name = 'EditLabel';
}
inherits(_EditLabel, _State);
var EditLabel = new _EditLabel();
exports.EditLabel = EditLabel;
function _Selected2 () {
this.name = 'Selected2';
}
inherits(_Selected2, _State);
var Selected2 = new _Selected2();
exports.Selected2 = Selected2;
function _Placing () {
this.name = 'Placing';
}
inherits(_Placing, _State);
var Placing = new _Placing();
exports.Placing = Placing;
function _ContextMenu () {
this.name = 'ContextMenu';
}
inherits(_ContextMenu, _State);
var ContextMenu = new _ContextMenu();
exports.ContextMenu = ContextMenu;
_State.prototype.onUnselectAll = function (controller, msg_type, $event) {
controller.changeState(Ready);
controller.delegate_channel.send(msg_type, $event);
};
_Resize.prototype.onMouseUp = function (controller, msg_type, $event) {
controller.changeState(Selected1);
controller.handle_message(msg_type, $event);
};
_Resize.prototype.onMouseUp.transitions = ['Selected1'];
_Resize.prototype.onMouseMove = function (controller) {
var groups = controller.scope.selected_groups;
var diffX = controller.scope.scaledX - controller.scope.pressedScaledX;
var diffY = controller.scope.scaledY - controller.scope.pressedScaledY;
var i = 0;
var j = 0;
var membership_old_new = [];
var previous_x1, previous_y1, previous_x2, previous_y2;
for (i = 0; i < groups.length; i++) {
previous_x1 = groups[i].x1;
previous_y1 = groups[i].y1;
previous_x2 = groups[i].x2;
previous_y2 = groups[i].y2;
if (groups[i].selected_corner === models.TOP_LEFT) {
groups[i].x1 = groups[i].x1 + diffX;
groups[i].y1 = groups[i].y1 + diffY;
}
if (groups[i].selected_corner === models.BOTTOM_RIGHT) {
groups[i].x2 = groups[i].x2 + diffX;
groups[i].y2 = groups[i].y2 + diffY;
}
if (groups[i].selected_corner === models.TOP_RIGHT) {
groups[i].x2 = groups[i].x2 + diffX;
groups[i].y1 = groups[i].y1 + diffY;
}
if (groups[i].selected_corner === models.BOTTOM_LEFT) {
groups[i].x1 = groups[i].x1 + diffX;
groups[i].y2 = groups[i].y2 + diffY;
}
membership_old_new = groups[i].update_membership(controller.scope.devices,
controller.scope.groups);
for(j = 0; j < membership_old_new[0].length; j++) {
membership_old_new[0][j].selected = false;
}
for(j = 0; j < membership_old_new[1].length; j++) {
membership_old_new[1][j].selected = true;
}
controller.scope.send_control_message(new messages.GroupMove(controller.scope.client_id,
groups[i].id,
groups[i].x1,
groups[i].y1,
groups[i].x2,
groups[i].y2,
previous_x1,
previous_y1,
previous_x2,
previous_y2));
controller.scope.send_control_message(new messages.GroupMembership(controller.scope.client_id,
groups[i].id,
membership_old_new[2]));
controller.scope.create_group_association(groups[i], membership_old_new[6]);
controller.scope.delete_group_association(groups[i], membership_old_new[7]);
}
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
};
_Resize.prototype.start = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
for (i = 0; i < groups.length; i++) {
groups[i].moving = true;
}
};
_Resize.prototype.end = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
var j = 0;
for (i = 0; i < groups.length; i++) {
for(j = 0; j < groups[i].devices.length; j++) {
groups[i].devices[j].selected = false;
}
}
for (i = 0; i < groups.length; i++) {
groups[i].moving = false;
}
};
_Start.prototype.start = function (controller) {
controller.changeState(Ready);
};
_Start.prototype.start.transitions = ['Ready'];
_CornerSelected.prototype.start = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
var x = controller.scope.scaledX;
var y = controller.scope.scaledY;
for (i = 0; i < groups.length; i++) {
groups[i].selected_corner = groups[i].select_corner(x, y);
}
};
_CornerSelected.prototype.onMouseMove = function (controller) {
controller.changeState(Resize);
};
_CornerSelected.prototype.onMouseMove.transitions = ['Resize'];
_CornerSelected.prototype.onMouseUp = function (controller, msg_type, $event) {
controller.changeState(Selected1);
controller.handle_message(msg_type, $event);
};
_CornerSelected.prototype.onMouseUp.transitions = ['Selected1'];
_Selected1.prototype.onMouseMove = function (controller) {
controller.changeState(Move);
};
_Selected1.prototype.onMouseMove.transitions = ['Move'];
_Selected1.prototype.onMouseUp = function (controller) {
controller.changeState(Selected2);
};
_Selected1.prototype.onMouseUp.transitions = ['Selected2'];
_Selected3.prototype.onMouseMove = function (controller) {
controller.changeState(Move);
};
_Selected3.prototype.onMouseMove.transitions = ['Move'];
_Selected3.prototype.onMouseUp = function (controller, msg_type, $event) {
let context_menu = controller.scope.context_menus[0];
context_menu.enabled = true;
context_menu.x = $event.x;
context_menu.y = $event.y;
context_menu.buttons.forEach(function(button, index){
button.x = $event.x;
let menuPaddingTop = 5;
button.y = $event.y + menuPaddingTop + (button.height * index);
});
controller.changeState(ContextMenu);
};
_Selected3.prototype.onMouseUp.transitions = ['ContextMenu'];
_Move.prototype.onMouseMove = function (controller) {
var groups = controller.scope.selected_groups;
var diffX = controller.scope.scaledX - controller.scope.pressedScaledX;
var diffY = controller.scope.scaledY - controller.scope.pressedScaledY;
var i = 0;
var j = 0;
var membership_old_new = [];
var previous_x1, previous_y1, previous_x2, previous_y2;
for (i = 0; i < groups.length; i++) {
previous_x1 = groups[i].x1;
previous_y1 = groups[i].y1;
previous_x2 = groups[i].x2;
previous_y2 = groups[i].y2;
groups[i].x1 = groups[i].x1 + diffX;
groups[i].y1 = groups[i].y1 + diffY;
groups[i].x2 = groups[i].x2 + diffX;
groups[i].y2 = groups[i].y2 + diffY;
membership_old_new = groups[i].update_membership(controller.scope.devices,
controller.scope.groups);
for(j = 0; j < membership_old_new[0].length; j++) {
membership_old_new[0][j].selected = false;
}
for(j = 0; j < membership_old_new[1].length; j++) {
membership_old_new[1][j].selected = true;
}
controller.scope.send_control_message(new messages.GroupMove(controller.scope.client_id,
groups[i].id,
groups[i].x1,
groups[i].y1,
groups[i].x2,
groups[i].y2,
previous_x1,
previous_y1,
previous_x2,
previous_y2));
controller.scope.send_control_message(new messages.GroupMembership(controller.scope.client_id,
groups[i].id,
membership_old_new[2]));
controller.scope.create_group_association(groups[i], membership_old_new[6]);
controller.scope.delete_group_association(groups[i], membership_old_new[7]);
}
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
};
_Move.prototype.onMouseUp = function (controller) {
controller.changeState(Selected2);
};
_Move.prototype.onMouseUp.transitions = ['Selected2'];
_Move.prototype.onMouseDown = function (controller) {
controller.changeState(Selected1);
};
_Move.prototype.onMouseDown.transitions = ['Selected1'];
_Move.prototype.start = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
for (i = 0; i < groups.length; i++) {
groups[i].moving = true;
}
};
_Move.prototype.end = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
var j = 0;
for (i = 0; i < groups.length; i++) {
for(j = 0; j < groups[i].devices.length; j++) {
groups[i].devices[j].selected = false;
}
}
for (i = 0; i < groups.length; i++) {
groups[i].moving = false;
}
};
_Ready.prototype.onMouseMove = function (controller, msg_type, $event) {
if (controller.scope.hide_groups) {
controller.delegate_channel.send(msg_type, $event);
return;
}
var i = 0;
for (i = 0; i < controller.scope.groups.length; i++) {
controller.scope.groups[i].update_hightlighted(controller.scope.scaledX, controller.scope.scaledY);
}
controller.delegate_channel.send(msg_type, $event);
};
_Ready.prototype.onMouseDown = function (controller, msg_type, $event) {
if (controller.scope.hide_groups) {
controller.delegate_channel.send(msg_type, $event);
return;
}
//
var i = 0;
for (i = 0; i < controller.scope.groups.length; i++) {
controller.scope.groups[i].selected = false;
}
controller.scope.selected_groups = [];
for (i = 0; i < controller.scope.groups.length; i++) {
if (controller.scope.groups[i].has_corner_selected(controller.scope.scaledX, controller.scope.scaledY)) {
controller.scope.clear_selections();
if (controller.scope.selected_groups.indexOf(controller.scope.groups[i]) === -1) {
controller.scope.selected_groups.push(controller.scope.groups[i]);
}
controller.scope.groups[i].selected = true;
controller.changeState(CornerSelected);
controller.scope.pressedX = controller.scope.mouseX;
controller.scope.pressedY = controller.scope.mouseY;
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
return;
} else if (controller.scope.groups[i].is_selected(controller.scope.scaledX, controller.scope.scaledY)) {
controller.scope.clear_selections();
if (controller.scope.selected_groups.indexOf(controller.scope.groups[i]) === -1) {
controller.scope.selected_groups.push(controller.scope.groups[i]);
}
controller.scope.groups[i].selected = true;
controller.changeState(Selected1);
controller.scope.pressedX = controller.scope.mouseX;
controller.scope.pressedY = controller.scope.mouseY;
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
return;
}
}
controller.delegate_channel.send(msg_type, $event);
};
_Ready.prototype.onMouseDown.transitions = ['Selected1', 'CornerSelected'];
_Ready.prototype.onNewGroup = function (controller, msg_type, message) {
controller.scope.hide_groups = false;
controller.scope.new_group_type = message.type;
controller.changeState(Placing);
};
_Ready.prototype.onNewGroup.transitions = ['Placing'];
_EditLabel.prototype.start = function (controller) {
controller.scope.selected_groups[0].edit_label = true;
};
_EditLabel.prototype.end = function (controller) {
controller.scope.selected_groups[0].edit_label = false;
};
_EditLabel.prototype.onMouseDown = function (controller) {
controller.changeState(Ready);
};
_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_groups[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.changeState(Selected2);
} else if ($event.keyCode === 32) { //Space
item.name += " ";
} else {
console.log($event.keyCode);
}
controller.scope.send_control_message(new messages.GroupLabelEdit(controller.scope.client_id,
item.id,
item.name,
previous_name));
};
_EditLabel.prototype.onKeyDown.transitions = ['Selected2'];
_Selected2.prototype.onNewGroup = function (controller, msg_type, $event) {
controller.changeState(Ready);
controller.handle_message(msg_type, $event);
};
_Selected2.prototype.onNewGroup.transitions = ['Ready'];
_Selected2.prototype.onMouseDown = function (controller, msg_type, $event) {
controller.scope.pressedX = controller.scope.mouseX;
controller.scope.pressedY = controller.scope.mouseY;
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
var groups = controller.scope.selected_groups;
controller.scope.selected_groups = [];
var i = 0;
for (i = 0; i < groups.length; i++) {
if (groups[i].has_corner_selected(controller.scope.scaledX, controller.scope.scaledY)) {
controller.scope.selected_groups = [];
break;
}
else if (groups[i].is_selected(controller.scope.scaledX, controller.scope.scaledY)) {
if (controller.scope.selected_groups.indexOf(groups[i]) === -1) {
controller.scope.selected_groups.push(groups[i]);
}
}
}
if (controller.scope.selected_groups.length > 0) {
controller.changeState(Selected3);
} else {
controller.changeState(Ready);
controller.handle_message(msg_type, $event);
}
};
_Selected2.prototype.onMouseDown.transitions = ['Ready', 'Selected3'];
_Selected2.prototype.onKeyDown = function (controller, msg_type, $event) {
if ($event.keyCode === 8) {
//Delete
controller.scope.deleteGroup();
} else {
controller.delegate_channel.send(msg_type, $event);
}
};
_Selected2.prototype.onKeyDown.transitions = ['Ready'];
_Placing.prototype.onMouseDown = function (controller) {
var scope = controller.scope;
var group = null;
scope.pressedX = scope.mouseX;
scope.pressedY = scope.mouseY;
scope.pressedScaledX = scope.scaledX;
scope.pressedScaledY = scope.scaledY;
scope.clear_selections();
var id = scope.group_id_seq();
group = new models.Group(id,
titlecase.toTitleCase("" + scope.new_group_type + id),
scope.new_group_type,
scope.scaledX,
scope.scaledY,
scope.scaledX,
scope.scaledY,
false);
scope.send_control_message(new messages.GroupCreate(scope.client_id,
group.id,
group.x1,
group.y1,
group.x2,
group.y2,
group.name,
group.type,
group.group_id));
scope.create_inventory_group(group);
scope.groups.push(group);
scope.selected_groups.push(group);
group.selected = true;
group.selected_corner = models.BOTTOM_RIGHT;
controller.scope.new_group_type = null;
controller.changeState(Resize);
};
_Placing.prototype.onMouseDown.transitions = ['Resize'];
_ContextMenu.prototype.end = function (controller) {
controller.scope.removeContextMenu();
};
_ContextMenu.prototype.onLabelEdit = function (controller) {
controller.changeState(EditLabel);
};
_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel'];
_ContextMenu.prototype.onMouseDown = function (controller) {
controller.changeState(Ready);
};
_ContextMenu.prototype.onMouseDown.transitions = ['Ready'];

133
awx/ui/client/src/network-ui/group.partial.svg
View File

@@ -1,133 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="!hide_groups || item.type == 'site'">
<g ng-if="current_scale < 5">
<g ng-if="current_scale > 0.5 || item.type == 'site' || (item.type == 'rack' && current_scale > 0.1)" >
<g ng-if="item.moving">
<g ng-attr-transform="translate({{item.left_extent(scaledX)}}, {{item.top_extent(scaledY)}})">
<line x1="-100"
y1="0"
x2="+100"
y2="0"
class="NetworkUI--construction"></line>
<line x1="0"
y1="-100"
x2="0"
y2="+100"
class="NetworkUI--construction"></line>
</g>
<g ng-attr-transform="translate({{item.right_extent(scaledX)}}, {{item.top_extent(scaledY)}})">
<line x1="-100"
y1="0"
x2="+100"
y2="0"
class="NetworkUI--construction"></line>
<line x1="0"
y1="-100"
x2="0"
y2="+100"
class="NetworkUI--construction"></line>
</g>
<g ng-attr-transform="translate({{item.left_extent(scaledX)}}, {{item.bottom_extent(scaledY)}})">
<line x1="-100"
y1="0"
x2="+100"
y2="0"
class="NetworkUI--construction"></line>
<line x1="0"
y1="-100"
x2="0"
y2="+100"
class="NetworkUI--construction"></line>
</g>
<g ng-attr-transform="translate({{item.right_extent(scaledX)}}, {{item.bottom_extent(scaledY)}})">
<line x1="-100"
y1="0"
x2="+100"
y2="0"
class="NetworkUI--construction"></line>
<line x1="0"
y1="-100"
x2="0"
y2="+100"
class="NetworkUI--construction"></line>
</g>
</g>
<rect ng-attr-width="{{item.width(scaledX)}}"
ng-attr-height="{{item.height(scaledY)}}"
ng-attr-x="{{item.left_extent(scaledX)}}"
ng-attr-y="{{item.top_extent(scaledY)}}"
ng-attr-class="{{item.selected && 'NetworkUI__group--selected' || 'NetworkUI--hidden'}}"/>
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.left_extent(scaledX)}}"
ng-attr-y="{{item.top_extent(scaledY)}}"
ng-attr-class="{{item.selected && 'NetworkUI__group--selected' || 'NetworkUI--hidden'}}"/>
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.right_extent(scaledX) - 10}}"
ng-attr-y="{{item.top_extent(scaledY)}}"
ng-attr-class="{{item.selected && 'NetworkUI__group--selected' || 'NetworkUI--hidden'}}"/>
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.right_extent(scaledX) - 10}}"
ng-attr-y="{{item.bottom_extent(scaledY) - 10}}"
ng-attr-class="{{item.selected && 'NetworkUI__group--selected' || 'NetworkUI--hidden'}}"/>
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.left_extent(scaledX)}}"
ng-attr-y="{{item.bottom_extent(scaledY) - 10}}"
ng-attr-class="{{item.selected && 'NetworkUI__group--selected' || 'NetworkUI--hidden'}}"/>
<g ng-if="item.highlighted || item.selected">
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.left_extent(scaledX)}}"
ng-attr-y="{{item.top_extent(scaledY)}}"
class="NetworkUI__group"/>
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.right_extent(scaledX) - 10}}"
ng-attr-y="{{item.top_extent(scaledY)}}"
class="NetworkUI__group"/>
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.right_extent(scaledX) - 10}}"
ng-attr-y="{{item.bottom_extent(scaledY) - 10}}"
class="NetworkUI__group"/>
<rect ng-attr-width="10"
ng-attr-height="10"
ng-attr-x="{{item.left_extent(scaledX)}}"
ng-attr-y="{{item.bottom_extent(scaledY) - 10}}"
class="NetworkUI__group"/>
</g>
<rect ng-attr-width="{{item.width(scaledX)}}"
ng-attr-height="{{item.height(scaledY)}}"
ng-attr-x="{{item.left_extent(scaledX)}}"
ng-attr-y="{{item.top_extent(scaledY)}}"
class="NetworkUI__group"/>
<g ng-attr-transform="translate({{item.left_extent(scaledX)}},{{item.top_extent(scaledY)}})">
<g ng-if="current_scale > 0.5 && item.type == 'group'">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__group-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="left"
x="20"
y="32"> {{item.name}} </text>
<text class="NetworkUI__group-text" filter="url(#background)" text-anchor="left" x="20" y="32">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
<g awx-net-rack></g>
<g awx-net-site></g>
</g>
</g>
</g>
</g>

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

@@ -1,5 +1,4 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="item.icon || current_scale > 0.5 || !item.in_group">
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->
@@ -88,4 +87,3 @@
<text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>
</g>

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

@@ -1,7 +1,6 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var messages = require('./messages.js');
function _State () {
}
@@ -44,35 +43,14 @@ _Enabled.prototype.onKeyDown = function(controller, msg_type, $event) {
var scope = controller.scope;
if ($event.key === 'c' && ($event.ctrlKey || $event.metaKey)) {
scope.first_channel.send("CopySelected", $event);
}
if ($event.key === 'r' && ($event.ctrlKey || $event.metaKey)) {
location.reload();
}
if ($event.key === 'l') {
scope.first_channel.send("NewLink", $event);
return;
}
if ($event.key === 'm') {
scope.first_channel.send("NewStream", $event);
}
if ($event.key === 'd') {
scope.debug.hidden = !scope.debug.hidden;
return;
}
if ($event.key === 'p') {
scope.cursor.hidden = !scope.cursor.hidden;
return;
}
if ($event.key === 'b') {
scope.hide_buttons = !scope.hide_buttons;
return;
}
if ($event.key === 'i') {
scope.hide_interfaces = !scope.hide_interfaces;
return;
@@ -83,31 +61,7 @@ _Enabled.prototype.onKeyDown = function(controller, msg_type, $event) {
return;
}
if ($event.key === 'r' && !($event.ctrlKey || $event.metaKey)) {
scope.first_channel.send("NewDevice", new messages.NewDevice("router"));
return;
}
else if ($event.key === 's') {
scope.first_channel.send("NewDevice", new messages.NewDevice("switch"));
return;
}
else if ($event.key === 'a') {
scope.first_channel.send("NewGroup", new messages.NewGroup("rack"));
return;
}
else if ($event.key === 'h') {
scope.first_channel.send("NewDevice", new messages.NewDevice("host"));
return;
}
else if ($event.key === 'g') {
scope.first_channel.send("NewGroup", new messages.NewGroup("group"));
return;
}
else if ($event.key === 'e') {
scope.first_channel.send("NewGroup", new messages.NewGroup("site"));
return;
}
else if ($event.key === '0') {
if ($event.key === '0') {
scope.jump_to_animation(0, 0, 1.0);
}

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

@@ -1,144 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var models = require('./models.js');
var messages = require('./messages.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 _Connected () {
this.name = 'Connected';
}
inherits(_Connected, _State);
var Connected = new _Connected();
exports.Connected = Connected;
function _Connecting () {
this.name = 'Connecting';
}
inherits(_Connecting, _State);
var Connecting = new _Connecting();
exports.Connecting = Connecting;
function _Selecting () {
this.name = 'Selecting';
}
inherits(_Selecting, _State);
var Selecting = new _Selecting();
exports.Selecting = Selecting;
_Ready.prototype.onNewLink = function (controller, msg_type, message) {
controller.scope.clear_selections();
controller.changeState(Selecting);
controller.delegate_channel.send(msg_type, message);
};
_Ready.prototype.onNewLink.transitions = ['Selecting'];
_Start.prototype.start = function (controller) {
controller.changeState(Ready);
};
_Start.prototype.start.transitions = ['Ready'];
_Connected.prototype.start = function (controller) {
controller.scope.clear_selections();
controller.changeState(Ready);
};
_Connected.prototype.start.transitions = ['Ready'];
_Connecting.prototype.onMouseDown = function () {
};
_Connecting.prototype.onMouseUp = function (controller) {
var selected_device = controller.scope.select_items(false).last_selected_device;
var to_device_interface = null;
var from_device_interface = null;
var i = 0;
if (selected_device !== null) {
controller.scope.new_link.to_device = selected_device;
i = controller.scope.new_link.to_device.interface_seq();
to_device_interface = new models.Interface(i, "eth" + i);
controller.scope.new_link.to_device.interfaces.push(to_device_interface);
i = controller.scope.new_link.from_device.interface_seq();
from_device_interface = new models.Interface(i, "eth" + i);
controller.scope.new_link.from_device.interfaces.push(from_device_interface);
to_device_interface.link = controller.scope.new_link;
from_device_interface.link = controller.scope.new_link;
to_device_interface.device = controller.scope.new_link.to_device;
from_device_interface.device = controller.scope.new_link.from_device;
controller.scope.new_link.to_interface = to_device_interface;
controller.scope.new_link.from_interface = from_device_interface;
to_device_interface.dot();
from_device_interface.dot();
controller.scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, [
new messages.InterfaceCreate(controller.scope.client_id,
controller.scope.new_link.from_device.id,
from_device_interface.id,
from_device_interface.name),
new messages.InterfaceCreate(controller.scope.client_id,
controller.scope.new_link.to_device.id,
to_device_interface.id,
to_device_interface.name),
new messages.LinkCreate(controller.scope.client_id,
controller.scope.new_link.id,
controller.scope.new_link.from_device.id,
controller.scope.new_link.to_device.id,
from_device_interface.id,
to_device_interface.id)]));
controller.scope.new_link = null;
controller.changeState(Connected);
} else {
var index = controller.scope.links.indexOf(controller.scope.new_link);
if (index !== -1) {
controller.scope.links.splice(index, 1);
}
controller.scope.new_link = null;
controller.changeState(Ready);
}
};
_Connecting.prototype.onMouseUp.transitions = ['Ready', 'Connected'];
_Selecting.prototype.onMouseDown = function () {
};
_Selecting.prototype.onMouseUp = function (controller) {
var selected_device = controller.scope.select_items(false).last_selected_device;
if (selected_device !== null) {
controller.scope.new_link = new models.Link(controller.scope.link_id_seq(), selected_device, null, null, null, true);
controller.scope.links.push(controller.scope.new_link);
controller.changeState(Connecting);
}
};
_Selecting.prototype.onMouseUp.transitions = ['Connecting'];

8
awx/ui/client/src/network-ui/map.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/map.partial.svg');
function map () {
return { restrict: 'A', templateUrl};
}
exports.map = map;

2662
awx/ui/client/src/network-ui/map.partial.svg
View File

File diff suppressed because one or more lines are too long

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

@@ -25,14 +25,6 @@ function DeviceInventoryUpdate(sender, id, host_id) {
}
exports.DeviceInventoryUpdate = DeviceInventoryUpdate;
function GroupInventoryUpdate(sender, id, group_id) {
this.msg_type = "GroupInventoryUpdate";
this.sender = sender;
this.id = id;
this.group_id = group_id;
}
exports.GroupInventoryUpdate = GroupInventoryUpdate;
function DeviceCreate(sender, id, x, y, name, type, host_id) {
this.msg_type = "DeviceCreate";
this.sender = sender;
@@ -146,45 +138,6 @@ function LinkUnSelected(sender, id) {
}
exports.LinkUnSelected = LinkUnSelected;
function Undo(sender, original_message) {
this.msg_type = "Undo";
this.sender = sender;
this.original_message = original_message;
}
exports.Undo = Undo;
function Redo(sender, original_message) {
this.msg_type = "Redo";
this.sender = sender;
this.original_message = original_message;
}
exports.Redo = Redo;
function Deploy(sender) {
this.msg_type = "Deploy";
this.sender = sender;
}
exports.Deploy = Deploy;
function Destroy(sender) {
this.msg_type = "Destroy";
this.sender = sender;
}
exports.Destroy = Destroy;
function Discover(sender) {
this.msg_type = "Discover";
this.sender = sender;
}
exports.Discover = Discover;
function Layout(sender) {
this.msg_type = "Layout";
this.sender = sender;
}
exports.Layout = Layout;
function MultipleMessage(sender, messages) {
this.msg_type = "MultipleMessage";
this.sender = sender;
@@ -263,162 +216,6 @@ function PasteDevice(device) {
}
exports.PasteDevice = PasteDevice;
function PasteProcess(process) {
this.process = process;
}
exports.PasteProcess = PasteProcess;
function NewGroup(type) {
this.type = type;
}
exports.NewGroup = NewGroup;
function PasteRack(group) {
this.group = group;
}
exports.PasteRack = PasteRack;
function PasteSite(group) {
this.group = group;
}
exports.PasteSite = PasteSite;
function CopySite(site) {
this.msg_type = "CopySite";
this.site = site;
}
exports.CopySite = CopySite;
function GroupMove(sender, id, x1, y1, x2, y2, previous_x1, previous_y1, previous_x2, previous_y2) {
this.msg_type = "GroupMove";
this.sender = sender;
this.id = id;
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.previous_x1 = previous_x1;
this.previous_y1 = previous_y1;
this.previous_x2 = previous_x2;
this.previous_y2 = previous_y2;
}
exports.GroupMove = GroupMove;
function GroupCreate(sender, id, x1, y1, x2, y2, name, type, group_id) {
this.msg_type = "GroupCreate";
this.sender = sender;
this.id = id;
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.name = name;
this.type = type;
this.group_id = group_id;
}
exports.GroupCreate = GroupCreate;
function GroupDestroy(sender, id, previous_x1, previous_y1, previous_x2, previous_y2, previous_name, previous_type, previous_group_id) {
this.msg_type = "GroupDestroy";
this.sender = sender;
this.id = id;
this.previous_x1 = previous_x1;
this.previous_y1 = previous_y1;
this.previous_x2 = previous_x2;
this.previous_y2 = previous_y2;
this.previous_name = previous_name;
this.previous_type = previous_type;
this.previous_group_id = previous_group_id;
}
exports.GroupDestroy = GroupDestroy;
function GroupLabelEdit(sender, id, name, previous_name) {
this.msg_type = "GroupLabelEdit";
this.sender = sender;
this.id = id;
this.name = name;
this.previous_name = previous_name;
}
exports.GroupLabelEdit = GroupLabelEdit;
function GroupSelected(sender, id) {
this.msg_type = "GroupSelected";
this.sender = sender;
this.id = id;
}
exports.GroupSelected = GroupSelected;
function GroupUnSelected(sender, id) {
this.msg_type = "GroupUnSelected";
this.sender = sender;
this.id = id;
}
exports.GroupUnSelected = GroupUnSelected;
function GroupMembership(sender, id, members) {
this.msg_type = "GroupMembership";
this.sender = sender;
this.id = id;
this.members = members;
}
exports.GroupMembership = GroupMembership;
function ProcessCreate(sender, id, name, type, device_id, x, y) {
this.msg_type = "ProcessCreate";
this.id = id;
this.name = name;
this.type = type;
this.device_id = device_id;
this.x = x;
this.y = y;
}
exports.ProcessCreate = ProcessCreate;
function StreamCreate(sender, id, from_id, to_id, label) {
this.msg_type = "StreamCreate";
this.sender = sender;
this.id = id;
this.from_id = from_id;
this.to_id = to_id;
this.label = label;
}
exports.StreamCreate = StreamCreate;
function StreamDestroy(sender, id, from_id, to_id, label) {
this.msg_type = "StreamDestroy";
this.sender = sender;
this.id = id;
this.from_id = from_id;
this.to_id = to_id;
this.label = label;
}
exports.StreamDestroy = StreamDestroy;
function StreamLabelEdit(sender, id, label, previous_label) {
this.msg_type = "StreamLabelEdit";
this.sender = sender;
this.id = id;
this.label = label;
this.previous_label = previous_label;
}
exports.StreamLabelEdit = StreamLabelEdit;
function StreamSelected(sender, id) {
this.msg_type = "StreamSelected";
this.sender = sender;
this.id = id;
}
exports.StreamSelected = StreamSelected;
function StreamUnSelected(sender, id) {
this.msg_type = "StreamUnSelected";
this.sender = sender;
this.id = id;
}
exports.StreamUnSelected = StreamUnSelected;
function FSMTrace(order, fsm_name, from_state, to_state, recv_message_type) {
this.msg_type = 'FSMTrace';
this.order = order;
@@ -441,13 +238,11 @@ function ChannelTrace(from_fsm, to_fsm, sent_message_type) {
}
exports.ChannelTrace = ChannelTrace;
function Snapshot(sender, devices, links, groups, streams, order, trace_id) {
function Snapshot(sender, devices, links, order, trace_id) {
this.msg_type = 'Snapshot';
this.sender = 0;
this.devices = devices;
this.links = links;
this.groups = groups;
this.streams = streams;
this.order = order;
this.trace_id = trace_id;
}

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

@@ -2,9 +2,6 @@
var inherits = require('inherits');
var fsm = require('./fsm.js');
var move = require('./move.fsm.js');
var group = require('./group.fsm.js');
var rack_fsm = require('./rack.fsm.js');
var site_fsm = require('./site.fsm.js');
function _State () {
}
@@ -18,34 +15,6 @@ inherits(_Start, _State);
var Start = new _Start();
exports.Start = Start;
function _Interface () {
this.name = 'Interface';
}
inherits(_Interface, _State);
var Interface = new _Interface();
exports.Interface = Interface;
function _Site () {
this.name = 'Site';
}
inherits(_Site, _State);
var Site = new _Site();
exports.Site = Site;
function _Process () {
this.name = 'Process';
}
inherits(_Process, _State);
var Process = new _Process();
exports.Process = Process;
function _MultiSite () {
this.name = 'MultiSite';
}
inherits(_MultiSite, _State);
var MultiSite = new _MultiSite();
exports.MultiSite = MultiSite;
function _Rack () {
this.name = 'Rack';
}
@@ -53,13 +22,6 @@ inherits(_Rack, _State);
var Rack = new _Rack();
exports.Rack = Rack;
function _Device () {
this.name = 'Device';
}
inherits(_Device, _State);
var Device = new _Device();
exports.Device = Device;
_State.prototype.start = function (controller) {
controller.scope.current_mode = controller.state.name;
@@ -68,148 +30,22 @@ _State.prototype.start = function (controller) {
_Start.prototype.start = function (controller) {
controller.scope.app_toolbox_controller.handle_message('Disable', {});
controller.scope.inventory_toolbox_controller.handle_message('Disable', {});
controller.scope.rack_toolbox_controller.handle_message('Disable', {});
controller.scope.site_toolbox_controller.handle_message('Disable', {});
controller.changeState(Rack);
};
_Start.prototype.start.transitions = ['MultiSite'];
_Interface.prototype.onMouseWheel = function (controller, msg_type, $event) {
//controller.changeState(Device);
controller.delegate_channel.send(msg_type, $event);
};
_Interface.prototype.onMouseWheel.transitions = ['Device'];
_Interface.prototype.onScaleChanged = _Interface.prototype.onMouseWheel;
_Site.prototype.start = function (controller) {
controller.scope.current_mode = controller.state.name;
controller.scope.rack_toolbox_controller.handle_message('Enable', {});
controller.scope.rack_controller.changeState(rack_fsm.Ready);
};
_Site.prototype.end = function (controller) {
controller.scope.rack_toolbox_controller.handle_message('Disable', {});
controller.scope.rack_controller.changeState(rack_fsm.Disable);
};
_Site.prototype.onMouseWheel = function (controller, msg_type, $event) {
if (controller.scope.current_scale < 0.1) {
controller.changeState(MultiSite);
} else if (controller.scope.current_scale > 0.5) {
controller.changeState(Rack);
}
controller.delegate_channel.send(msg_type, $event);
};
_Site.prototype.onMouseWheel.transitions = ['MultiSite', 'Rack'];
_Site.prototype.onScaleChanged = _Site.prototype.onMouseWheel;
_Process.prototype.onMouseWheel = function (controller, msg_type, $event) {
controller.delegate_channel.send(msg_type, $event);
//controller.changeState(Device);
};
_Process.prototype.onMouseWheel.transitions = ['Device'];
_Process.prototype.onScaleChanged = _Process.prototype.onMouseWheel;
_MultiSite.prototype.start = function (controller) {
controller.scope.current_mode = controller.state.name;
controller.scope.site_toolbox_controller.handle_message('Enable', {});
controller.scope.site_controller.changeState(site_fsm.Ready);
};
_MultiSite.prototype.end = function (controller) {
controller.scope.site_toolbox_controller.handle_message('Disable', {});
controller.scope.site_controller.changeState(site_fsm.Disable);
};
_MultiSite.prototype.onMouseWheel = function (controller, msg_type, $event) {
if (controller.scope.current_scale > 0.1) {
controller.changeState(Site);
}
controller.delegate_channel.send(msg_type, $event);
};
_MultiSite.prototype.onMouseWheel.transitions = ['Site'];
_MultiSite.prototype.onScaleChanged = _MultiSite.prototype.onMouseWheel;
_Device.prototype.start = function (controller) {
controller.scope.current_mode = controller.state.name;
controller.scope.app_toolbox_controller.handle_message('Enable', {});
};
_Device.prototype.end = function (controller) {
controller.scope.app_toolbox_controller.handle_message('Disable', {});
};
_Device.prototype.onMouseWheel = function (controller, msg_type, $event) {
//controller.changeState(Process);
//controller.changeState(Interface);
//controller.changeState(Site);
if (controller.scope.current_scale < 5) {
controller.changeState(Rack);
}
controller.delegate_channel.send(msg_type, $event);
};
_Device.prototype.onMouseWheel.transitions = ['Process', 'Interface', 'Rack'];
_Device.prototype.onScaleChanged = _Device.prototype.onMouseWheel;
_Rack.prototype.start = function (controller) {
controller.scope.current_mode = controller.state.name;
controller.scope.inventory_toolbox_controller.handle_message('Enable', {});
controller.scope.move_controller.changeState(move.Ready);
controller.scope.group_controller.changeState(group.Ready);
};
_Rack.prototype.end = function (controller) {
controller.scope.inventory_toolbox_controller.handle_message('Disable', {});
controller.scope.move_controller.changeState(move.Disable);
controller.scope.group_controller.changeState(group.Disable);
};
_Rack.prototype.onMouseWheel = function (controller, msg_type, $event) {
if (controller.scope.current_scale < 0.5) {
controller.changeState(Site);
}
if (controller.scope.current_scale > 5) {
controller.changeState(Device);
}
controller.delegate_channel.send(msg_type, $event);
};
_Rack.prototype.onMouseWheel.transitions = ['Site', 'Device'];
_Rack.prototype.onScaleChanged = _Rack.prototype.onMouseWheel;

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

@@ -447,287 +447,6 @@ ContextMenuButton.prototype.is_selected = function (x, y) {
};
function Group(id, name, type, x1, y1, x2, y2, selected) {
this.id = id;
this.name = name;
this.type = type;
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.selected = selected;
this.moving = false;
this.highlighted = false;
this.fsm = null;
this.selected_corner = null;
this.devices = [];
this.links = [];
this.groups = [];
this.streams = [];
this.group_id = 0;
this.icon_size = type === 'site' ? 500 : 100;
this.template = false;
this.variables = {};
this.sequences = {};
}
exports.Group = Group;
Group.prototype.compile_variables = function () {
var variables = JSON.parse(JSON.stringify(this.variables));
return variables;
};
Group.prototype.toJSON = function () {
return {id: this.id,
name: this.name,
type: this.type,
x1: this.x1,
y1: this.y1,
x2: this.x2,
y2: this.y2,
devices: this.devices,
links: this.links,
streams: this.streams,
groups: this.groups};
};
Group.prototype.update_hightlighted = function (x, y) {
this.highlighted = this.is_highlighted(x, y);
};
Group.prototype.is_highlighted = function (x, y) {
return (x > this.left_extent() &&
x < this.right_extent() &&
y > this.top_extent() &&
y < this.bottom_extent());
};
Group.prototype.is_icon_selected = function (x, y) {
return ((x > this.left_extent() &&
x < this.right_extent() &&
y > this.top_extent() &&
y < this.bottom_extent()) ||
(x > this.centerX() - this.icon_size &&
x < this.centerX() + this.icon_size &&
y > this.centerY() - this.icon_size &&
y < this.centerY() + this.icon_size));
};
var TOP_LEFT = 0;
exports.TOP_LEFT = TOP_LEFT;
var TOP_RIGHT = 1;
exports.TOP_RIGHT = TOP_RIGHT;
var BOTTOM_LEFT = 2;
exports.BOTTOM_LEFT = BOTTOM_LEFT;
var BOTTOM_RIGHT = 3;
exports.BOTTOM_RIGHT = BOTTOM_RIGHT;
Group.prototype.has_corner_selected = function (x, y) {
if (x > this.left_extent() &&
x < this.left_extent() + 10 &&
y > this.top_extent() &&
y < this.top_extent() + 10) {
return true;
}
if (x > this.left_extent() &&
x < this.left_extent() + 10 &&
y > this.bottom_extent() - 10 &&
y < this.bottom_extent()) {
return true;
}
if (x > this.right_extent() - 10 &&
x < this.right_extent() &&
y > this.bottom_extent() - 10 &&
y < this.bottom_extent()) {
return true;
}
if (x > this.right_extent() - 10 &&
x < this.right_extent() &&
y > this.top_extent() &&
y < this.top_extent() + 10) {
return true;
}
return false;
};
Group.prototype.select_corner = function (x, y) {
var corners = [[util.distance(this.x1, this.y1, x, y), TOP_LEFT],
[util.distance(this.x2, this.y2, x, y), BOTTOM_RIGHT],
[util.distance(this.x1, this.y2, x, y), BOTTOM_LEFT],
[util.distance(this.x2, this.y1, x, y), TOP_RIGHT]];
corners.sort(function(a, b) {
return a[0] - b[0];
});
if (corners[0][0] > 30) {
return null;
}
return corners[0][1];
};
Group.prototype.is_selected = function (x, y) {
if (util.pDistance(x,
y,
this.left_extent(),
this.top_extent(),
this.left_extent(),
this.bottom_extent()) < 10) {
return true;
}
if (util.pDistance(x,
y,
this.left_extent(),
this.top_extent(),
this.right_extent(),
this.top_extent()) < 10) {
return true;
}
if (util.pDistance(x,
y,
this.left_extent(),
this.top_extent(),
this.right_extent(),
this.top_extent()) < 40 && y > this.top_extent()) {
return true;
}
if (util.pDistance(x,
y,
this.right_extent(),
this.bottom_extent(),
this.right_extent(),
this.top_extent()) < 10) {
return true;
}
if (util.pDistance(x,
y,
this.right_extent(),
this.bottom_extent(),
this.left_extent(),
this.bottom_extent()) < 10) {
return true;
}
return false;
};
Group.prototype.width = function (scaledX) {
var x2 = this.x2 !== null ? this.x2 : scaledX;
return Math.abs(this.x1 - x2);
};
Group.prototype.height = function (scaledY) {
var y2 = this.y2 !== null ? this.y2 : scaledY;
return Math.abs(this.y1 - y2);
};
Group.prototype.top_extent = function (scaledY) {
var y2 = this.y2 !== null ? this.y2 : scaledY;
return (this.y1 < y2? this.y1 : y2);
};
Group.prototype.left_extent = function (scaledX) {
var x2 = this.x2 !== null ? this.x2 : scaledX;
return (this.x1 < x2? this.x1 : x2);
};
Group.prototype.bottom_extent = function (scaledY) {
var y2 = this.y2 !== null ? this.y2 : scaledY;
return (this.y1 > y2? this.y1 : y2);
};
Group.prototype.right_extent = function (scaledX) {
var x2 = this.x2 !== null ? this.x2 : scaledX;
return (this.x1 > x2? this.x1 : x2);
};
Group.prototype.centerX = function (scaledX) {
return (this.right_extent(scaledX) + this.left_extent(scaledX)) / 2;
};
Group.prototype.centerY = function (scaledY) {
return (this.bottom_extent(scaledY) + this.top_extent(scaledY)) / 2;
};
Group.prototype.update_membership = function (devices, groups) {
var i = 0;
var y1 = this.top_extent();
var x1 = this.left_extent();
var y2 = this.bottom_extent();
var x2 = this.right_extent();
var old_devices = this.devices;
var new_devices = [];
var removed_devices = old_devices.slice();
var device_ids = [];
var index = -1;
this.devices = [];
for (i = 0; i < devices.length; i++) {
if (devices[i].x > x1 &&
devices[i].y > y1 &&
devices[i].x < x2 &&
devices[i].y < y2) {
devices[i].in_group = true;
this.devices.push(devices[i]);
device_ids.push(devices[i].id);
index = removed_devices.indexOf(devices[i]);
if (index !== -1) {
removed_devices.splice(index, 1);
} else {
new_devices.push(devices[i]);
}
}
}
var old_groups = this.groups;
this.groups = [];
var group_ids = [];
for (i = 0; i < groups.length; i++) {
if (groups[i].left_extent() > x1 &&
groups[i].top_extent() > y1 &&
groups[i].right_extent() < x2 &&
groups[i].bottom_extent() < y2) {
this.groups.push(groups[i]);
group_ids.push(groups[i].id);
}
}
return [old_devices, this.devices, device_ids, old_groups, this.groups, group_ids, new_devices, removed_devices];
};
Group.prototype.is_in_breadcrumb = function(viewport){
var groupY1 = this.top_extent();
var groupX1 = this.left_extent();
var groupY2 = this.bottom_extent();
var groupX2 = this.right_extent();
var viewportY1 = viewport.top_extent();
var viewportX1 = viewport.left_extent();
var viewportY2 = viewport.bottom_extent();
var viewportX2 = viewport.right_extent();
if (viewportX1 > groupX1 &&
viewportY1 > groupY1 &&
viewportX2 < groupX2 &&
viewportY2 < groupY2) {
this.on_screen = true;
return true;
} else {
this.on_screen = false;
return false;
}
};
function ToolBox(id, name, type, x, y, width, height) {
this.id = id;

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

@@ -372,7 +372,6 @@ _Move.prototype.end = function (controller) {
_Move.prototype.onMouseMove = function (controller) {
var devices = controller.scope.selected_devices;
var groups = controller.scope.groups;
var diffX = controller.scope.scaledX - controller.scope.pressedScaledX;
var diffY = controller.scope.scaledY - controller.scope.pressedScaledY;
@@ -402,16 +401,6 @@ _Move.prototype.onMouseMove = function (controller) {
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
//TODO: Improve the performance of this code from O(n^2) to O(n) or better
for (i = 0; i < groups.length; i++) {
membership_old_new = groups[i].update_membership(controller.scope.devices, controller.scope.groups);
controller.scope.send_control_message(new messages.GroupMembership(controller.scope.client_id,
groups[i].id,
membership_old_new[2]));
controller.scope.create_group_association(groups[i], membership_old_new[6]);
controller.scope.delete_group_association(groups[i], membership_old_new[7]);
}
};
_Move.prototype.onMouseUp = function (controller, msg_type, $event) {

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

@@ -12,22 +12,12 @@ 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 stream = require('./stream.directive.js');
var rack = require('./rack.directive.js');
var rackIcon = require('./rack.icon.directive.js');
var group = require('./group.directive.js');
var site = require('./site.directive.js');
var siteIcon = require('./site.icon.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 process = require('./process.directive.js');
var map = require('./map.directive.js');
var deviceDetail = require('./device.detail.directive.js');
var defaultd = require('./default.directive.js');
var quadrants = require('./quadrants.directive.js');
var button = require('./button.directive.js');
var inventoryToolbox = require('./inventory.toolbox.directive.js');
var debug = require('./debug.directive.js');
var test_results = require('./test_results.directive.js');
@@ -46,22 +36,12 @@ var networkUI = angular.module('networkUI', [
.directive('awxNetSwitch', switchd.switchd)
.directive('awxNetHost', host.host)
.directive('awxNetLink', link.link)
.directive('awxNetStream', stream.stream)
.directive('awxNetRack', rack.rack)
.directive('awxNetGroup', group.group)
.directive('awxNetSite', site.site)
.directive('awxNetSiteIcon', siteIcon.siteIcon)
.directive('awxNetRackIcon', rackIcon.rackIcon)
.directive('awxNetChevronRightIcon', chevronRight.chevronRight)
.directive('awxNetChevronLeftIcon', chevronLeft.chevronLeft)
.directive('awxNetContextMenu', contextMenu.contextMenu)
.directive('awxNetContextMenuButton', contextMenuButton.contextMenuButton)
.directive('awxNetProcess', process.process)
.directive('awxNetMap', map.map)
.directive('awxNetDeviceDetail', deviceDetail.deviceDetail)
.directive('awxNetDefault', defaultd.defaultd)
.directive('awxNetQuadrants', quadrants.quadrants)
.directive('awxNetButton', button.button)
.directive('awxNetInventoryToolbox', inventoryToolbox.inventoryToolbox)
.directive('awxNetTestResults', test_results.test_results)
.directive('awxNetworkUi', awxNetworkUI.awxNetworkUI);

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

@@ -3,17 +3,10 @@ var angular = require('angular');
var fsm = require('./fsm.js');
var null_fsm = require('./null.fsm.js');
var mode_fsm = require('./mode.fsm.js');
var device_detail_fsm = require('./device.detail.fsm.js');
var rack_fsm = require('./rack.fsm.js');
var site_fsm = require('./site.fsm.js');
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 link = require('./link.fsm.js');
var stream_fsm = require('./stream.fsm.js');
var group = require('./group.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');
@@ -35,12 +28,9 @@ var NetworkUIController = function($scope,
$state,
ProcessErrors,
ConfigService,
rbacUiControlService,
HostsService,
GroupsService) {
rbacUiControlService) {
window.scope = $scope;
var i = 0;
$scope.nunjucks = nunjucks;
@@ -99,7 +89,6 @@ var NetworkUIController = function($scope,
$scope.selected_links = [];
$scope.selected_interfaces = [];
$scope.selected_items = [];
$scope.selected_groups = [];
$scope.new_link = null;
$scope.new_stream = null;
$scope.new_group_type = null;
@@ -112,10 +101,11 @@ var NetworkUIController = function($scope,
$scope.hide_buttons = false;
$scope.hide_links = false;
$scope.hide_interfaces = false;
$scope.hide_groups = false;
$scope.graph = {'width': window.innerWidth,
'right_column': 300,
'height': window.innerHeight};
$scope.MAX_ZOOM = 5;
$scope.MIN_ZOOM = 0.1;
$scope.device_id_seq = util.natural_numbers(0);
$scope.link_id_seq = util.natural_numbers(0);
$scope.group_id_seq = util.natural_numbers(0);
@@ -130,8 +120,6 @@ var NetworkUIController = function($scope,
$scope.replay = false;
$scope.devices = [];
$scope.links = [];
$scope.groups = [];
$scope.processes = [];
$scope.tests = [];
$scope.current_tests = [];
$scope.current_test = null;
@@ -141,7 +129,6 @@ var NetworkUIController = function($scope,
$scope.test_events = [];
$scope.test_results = [];
$scope.test_errors = [];
$scope.streams = [];
$scope.animations = [];
$scope.sequences = {};
$scope.view_port = {'x': 0,
@@ -232,45 +219,16 @@ var NetworkUIController = function($scope,
$scope.hotkeys_controller = new fsm.FSMController($scope, "hotkeys_fsm", hotkeys.Start, $scope);
$scope.keybindings_controller = new fsm.FSMController($scope, "keybindings_fsm", keybindings.Start, $scope);
$scope.view_controller = new fsm.FSMController($scope, "view_fsm", view.Start, $scope);
$scope.device_detail_controller = new fsm.FSMController($scope, "device_detail_fsm", device_detail_fsm.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.link_controller = new fsm.FSMController($scope, "link_fsm", link.Start, $scope);
$scope.stream_controller = new fsm.FSMController($scope, "stream_fsm", stream_fsm.Start, $scope);
$scope.group_controller = new fsm.FSMController($scope, "group_fsm", group.Start, $scope);
$scope.rack_controller = new fsm.FSMController($scope, "rack_fsm", rack_fsm.Disable, $scope);
$scope.site_controller = new fsm.FSMController($scope, "site_fsm", site_fsm.Disable, $scope);
$scope.buttons_controller = new fsm.FSMController($scope, "buttons_fsm", buttons.Start, $scope);
$scope.time_controller = new fsm.FSMController($scope, "time_fsm", time.Start, $scope);
$scope.test_controller = new fsm.FSMController($scope, "test_fsm", test_fsm.Start, $scope);
$scope.app_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
//App Toolbox Setup
// const toolboxTopMargin = 115;
var toolboxTopMargin = $('.Networking-top').height();
var toolboxTitleMargin = toolboxTopMargin + 35;
var toolboxHeight = $scope.graph.height - $('.Networking-top').height();
$scope.app_toolbox = new models.ToolBox(0, 'Process', 'app', 0, toolboxTopMargin, 200, toolboxHeight);
$scope.app_toolbox.title_coordinates = {x: 70, y: toolboxTitleMargin};
$scope.app_toolbox.spacing = 150;
$scope.app_toolbox.enabled = false;
$scope.app_toolbox_controller.toolbox = $scope.app_toolbox;
$scope.app_toolbox_controller.debug = true;
$scope.app_toolbox_controller.dropped_action = function (selected_item) {
$scope.first_channel.send("PasteProcess", new messages.PasteProcess(selected_item));
};
$scope.app_toolbox.items.push(new models.Process(0, 'BGP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Process(0, 'OSPF', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Process(0, 'STP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Process(0, 'Zero Pipeline', 'process', 0, 0));
for(i = 0; i < $scope.app_toolbox.items.length; i++) {
$scope.app_toolbox.items[i].icon = true;
}
$scope.inventory_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
var toolboxTopMargin = $('.Networking-top').height();
var toolboxTitleMargin = toolboxTopMargin + 35;
var toolboxHeight = $scope.graph.height - $('.Networking-top').height();
//Inventory Toolbox Setup
$scope.inventory_toolbox = new models.ToolBox(0, 'Inventory', 'device', 0, toolboxTopMargin, 200, toolboxHeight);
@@ -335,40 +293,6 @@ var NetworkUIController = function($scope,
};
//End Inventory Toolbox Setup
$scope.rack_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
//Rack Toolbox Setup
$scope.rack_toolbox = new models.ToolBox(0, 'Rack', 'rack', 0, toolboxTopMargin, 200, toolboxHeight);
$scope.rack_toolbox.title_coordinates = {x: 80, y: toolboxTitleMargin};
$scope.rack_toolbox.spacing = 200;
$scope.rack_toolbox.enabled = false;
$scope.rack_toolbox_controller.remove_on_drop = false;
$scope.rack_toolbox_controller.toolbox = $scope.rack_toolbox;
$scope.rack_toolbox_controller.debug = true;
$scope.rack_toolbox_controller.dropped_action = function (selected_item) {
$scope.first_channel.send("PasteRack", new messages.PasteRack(selected_item));
};
for(i = 0; i < $scope.rack_toolbox.items.length; i++) {
$scope.rack_toolbox.items[i].icon = true;
$scope.rack_toolbox.items[i].selected = false;
}
//End Rack Toolbox Setup
$scope.site_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
//Site Toolbox Setup
$scope.site_toolbox = new models.ToolBox(0, 'Sites', 'sites', 0, toolboxTopMargin, 200, toolboxHeight);
$scope.site_toolbox.title_coordinates = {x: 80, y: toolboxTitleMargin};
$scope.site_toolbox.spacing = 200;
$scope.site_toolbox.enabled = false;
$scope.site_toolbox_controller.remove_on_drop = false;
$scope.site_toolbox_controller.toolbox = $scope.site_toolbox;
$scope.site_toolbox_controller.debug = true;
$scope.site_toolbox_controller.dropped_action = function (selected_item) {
$scope.first_channel.send("PasteSite", new messages.PasteSite(selected_item));
};
for(i = 0; i < $scope.site_toolbox.items.length; i++) {
$scope.site_toolbox.items[i].icon = true;
$scope.site_toolbox.items[i].selected = false;
}
//End Site Toolbox Setup
$scope.mode_controller = new fsm.FSMController($scope, "mode_fsm", mode_fsm.Start, $scope);
@@ -380,47 +304,17 @@ var NetworkUIController = function($scope,
$scope.view_controller.delegate_channel = new fsm.Channel($scope.view_controller,
$scope.keybindings_controller,
$scope);
$scope.device_detail_controller.delegate_channel = new fsm.Channel($scope.device_detail_controller,
$scope.view_controller,
$scope);
$scope.move_controller.delegate_channel = new fsm.Channel($scope.move_controller,
$scope.device_detail_controller,
$scope.view_controller,
$scope);
$scope.details_panel_controller.delegate_channel = new fsm.Channel($scope.details_panel_controller,
$scope.move_controller,
$scope);
$scope.link_controller.delegate_channel = new fsm.Channel($scope.link_controller,
$scope.details_panel_controller,
$scope);
$scope.stream_controller.delegate_channel = new fsm.Channel($scope.stream_controller,
$scope.link_controller,
$scope);
$scope.group_controller.delegate_channel = new fsm.Channel($scope.group_controller,
$scope.stream_controller,
$scope);
$scope.rack_controller.delegate_channel = new fsm.Channel($scope.rack_controller,
$scope.group_controller,
$scope);
$scope.site_controller.delegate_channel = new fsm.Channel($scope.site_controller,
$scope.rack_controller,
$scope);
$scope.app_toolbox_controller.delegate_channel = new fsm.Channel($scope.app_toolbox_controller,
$scope.site_controller,
$scope);
$scope.inventory_toolbox_controller.delegate_channel = new fsm.Channel($scope.inventory_toolbox_controller,
$scope.app_toolbox_controller,
$scope.details_panel_controller,
$scope);
$scope.rack_toolbox_controller.delegate_channel = new fsm.Channel($scope.rack_toolbox_controller,
$scope.inventory_toolbox_controller,
$scope);
$scope.site_toolbox_controller.delegate_channel = new fsm.Channel($scope.site_toolbox_controller,
$scope.rack_toolbox_controller,
$scope);
$scope.buttons_controller.delegate_channel = new fsm.Channel($scope.buttons_controller,
$scope.site_toolbox_controller,
$scope);
$scope.time_controller.delegate_channel = new fsm.Channel($scope.time_controller,
$scope.buttons_controller,
$scope.inventory_toolbox_controller,
$scope);
$scope.mode_controller.delegate_channel = new fsm.Channel($scope.mode_controller,
$scope.time_controller,
@@ -486,32 +380,23 @@ var NetworkUIController = function($scope,
$scope.clear_selections = function () {
var i = 0;
var j = 0;
var devices = $scope.devices;
var links = $scope.links;
var groups = $scope.groups;
$scope.selected_items = [];
$scope.selected_devices = [];
$scope.selected_links = [];
$scope.selected_interfaces = [];
$scope.selected_groups = [];
for (i = 0; i < devices.length; i++) {
for (j = 0; j < devices[i].interfaces.length; j++) {
devices[i].interfaces[j].selected = false;
}
if (devices[i].selected) {
$scope.send_control_message(new messages.DeviceUnSelected($scope.client_id, devices[i].id));
}
devices[i].selected = false;
}
for (i = 0; i < links.length; i++) {
if (links[i].selected) {
$scope.send_control_message(new messages.LinkUnSelected($scope.client_id, links[i].id));
}
links[i].selected = false;
}
for (i = 0; i < groups.length; i++) {
groups[i].selected = false;
for (i = 0; i < devices.length; i++) {
if (devices[i].selected) {
$scope.send_control_message(new messages.DeviceUnSelected($scope.client_id, devices[i].id));
}
devices[i].selected = false;
}
};
@@ -770,11 +655,6 @@ var NetworkUIController = function($scope,
emitCallback($scope.selected_links[0]);
}
//show details for groups, racks, and sites
else if ($scope.selected_groups.length === 1){
emitCallback($scope.selected_groups[0]);
}
};
$scope.onRenameContextButton = function () {
@@ -832,65 +712,11 @@ var NetworkUIController = function($scope,
}
};
$scope.deleteGroup = function(){
var i = 0;
var index = -1;
var selected_groups = $scope.selected_groups;
$scope.selected_groups = [];
$scope.group_controller.changeState(group.Ready);
function removeSingleGroup(group){
index = $scope.groups.indexOf(group);
if (index !== -1) {
group.selected = false;
group.remote_selected = false;
$scope.groups.splice(index, 1);
}
$scope.send_control_message(new messages.GroupDestroy($scope.client_id,
group.id,
group.x1,
group.y1,
group.x2,
group.y2,
group.name,
group.group_id));
}
if($scope.current_scale <= 0.5){
// current scale is in racks mode or sites mode
for (i = 0; i < selected_groups.length; i++) {
let group = selected_groups[i];
if(group.groups.length > 0){
for(var k = 0; k < group.groups.length; k++){
let nested_group = group.groups[k];
removeSingleGroup(nested_group);
}
}
// remove all the nested devices and links
$scope.selected_devices = group.devices;
$scope.selected_links = group.links;
$scope.deleteDevice();
removeSingleGroup(group);
}
}
if($scope.current_scale > 0.5){
// current scale is in devices mode
for (i = 0; i < selected_groups.length; i++) {
let group = selected_groups[i];
removeSingleGroup(group);
}
}
};
$scope.onDeleteContextMenu = function(){
$scope.removeContextMenu();
if($scope.selected_devices.length === 1){
$scope.deleteDevice();
}
else if($scope.selected_groups.length === 1){
$scope.deleteGroup();
}
};
// Button Event Handlers
@@ -1019,8 +845,6 @@ var NetworkUIController = function($scope,
new messages.Snapshot($scope.client_id,
$scope.devices,
$scope.links,
$scope.groups,
$scope.streams,
0,
$scope.trace_id)]));
} else {
@@ -1028,8 +852,6 @@ var NetworkUIController = function($scope,
[new messages.Snapshot($scope.client_id,
$scope.devices,
$scope.links,
$scope.groups,
$scope.streams,
1,
$scope.trace_id),
new messages.StopRecording($scope.client_id, $scope.trace_id)]));
@@ -1048,28 +870,6 @@ var NetworkUIController = function($scope,
}, 1000);
};
$scope.onLayoutButton = function () {
$scope.send_control_message(new messages.Layout($scope.client_id));
};
$scope.onTogglePhysical = function () {
$scope.hide_links = false;
};
$scope.onUnTogglePhysical = function () {
$scope.hide_links = true;
};
$scope.onToggleGroup = function () {
$scope.hide_groups = false;
};
$scope.onUnToggleGroup = function () {
$scope.hide_groups = true;
$scope.group_controller.changeState(group.Ready);
};
$scope.onExportYamlButton = function () {
$window.open('/network_ui/topology.yaml?topology_id=' + $scope.topology_id , '_blank');
};
@@ -1094,15 +894,15 @@ var NetworkUIController = function($scope,
];
$scope.onDownloadTraceButton = function () {
window.open("/network_ui/download_trace?topology_id=" + $scope.topology_id + "&trace_id=" + $scope.trace_id + "&client_id=" + $scope.client_id);
window.open("/network_ui_test/download_trace?topology_id=" + $scope.topology_id + "&trace_id=" + $scope.trace_id + "&client_id=" + $scope.test_client_id);
};
$scope.onDownloadRecordingButton = function () {
window.open("/network_ui/download_recording?topology_id=" + $scope.topology_id + "&trace_id=" + $scope.trace_id + "&client_id=" + $scope.client_id);
window.open("/network_ui_test/download_recording?topology_id=" + $scope.topology_id + "&trace_id=" + $scope.trace_id + "&client_id=" + $scope.test_client_id);
};
$scope.onUploadTestButton = function () {
window.open("/network_ui/upload_test", "_top");
window.open("/network_ui_test/upload_test", "_top");
};
$scope.onRunTestsButton = function () {
@@ -1112,107 +912,9 @@ var NetworkUIController = function($scope,
$scope.first_channel.send("EnableTest", new messages.EnableTest());
};
$scope.onCompileVariablesButton = function () {
function noop (response) {
console.log(response);
}
function error_handler (response) {
console.log(response);
}
var i = 0;
var variables = null;
for(i = 0; i < $scope.devices.length; i++) {
variables = $scope.devices[i].compile_variables();
if ($scope.devices[i].host_id !== 0) {
$http.put('/api/v2/hosts/' + $scope.devices[i].host_id + '/variable_data/', JSON.stringify(variables)).then(noop).catch(error_handler);
}
}
for(i = 0; i < $scope.groups.length; i++) {
variables = $scope.groups[i].compile_variables();
if ($scope.groups[i].group_id !== 0) {
$http.put('/api/v2/groups/' + $scope.groups[i].group_id + '/variable_data/', JSON.stringify(variables)).then(noop).catch(error_handler);
}
}
};
$scope.buttons = [
// new models.Button("DEPLOY", button_offset + 10, 48, 70, 30, $scope.onDeployButton, $scope),
// new models.Button("DESTROY", button_offset + 90, 48, 80, 30, $scope.onDestroyButton, $scope),
// new models.Button("RECORD", button_offset + 180, 48, 80, 30, $scope.onRecordButton, $scope),
// new models.Button("EXPORT", button_offset + 270, 48, 70, 30, $scope.onExportButton, $scope),
// new models.Button("DISCOVER", button_offset + 350, 48, 80, 30, $scope.onDiscoverButton, $scope),
// new models.Button("LAYOUT", button_offset + 440, 48, 70, 30, $scope.onLayoutButton, $scope),
// new models.Button("CONFIGURE", button_offset + 520, 48, 90, 30, $scope.onConfigureButton, $scope),
// new models.Button("EXPORT YAML", button_offset + 620, 48, 120, 30, $scope.onExportYamlButton, $scope),
// new models.Button("DOWNLOAD TRACE", button_offset + 750, 48, 150, 30, $scope.onDownloadTraceButton, $scope),
// new models.Button("DOWNLOAD RECORDING", button_offset + 910, 48, 170, 30, $scope.onDownloadRecordingButton, $scope),
// new models.Button("UPLOAD TEST", button_offset + 10, 88, 100, 30, $scope.onUploadTestButton, $scope),
// new models.Button("RUN TESTS", button_offset + 120, 88, 100, 30, $scope.onRunTestsButton, $scope),
];
$scope.all_buttons = [];
$scope.all_buttons.extend($scope.context_menu_buttons);
$scope.all_buttons.extend($scope.action_icons);
$scope.all_buttons.extend($scope.buttons);
$scope.onFacts = function(data) {
var i = 0;
var j = 0;
var k = 0;
var device = null;
var keys = null;
var peers = null;
var ptm = null;
var intf = null;
for (i = 0; i < $scope.devices.length; i++) {
device = $scope.devices[i];
if (device.name === data.key) {
//Check PTM
if (data.value.ansible_local !== undefined &&
data.value.ansible_local.ptm !== undefined) {
keys = Object.keys(data.value.ansible_local.ptm);
for (j = 0; j < keys.length; j++) {
ptm = data.value.ansible_local.ptm[keys[j]];
for (k = 0; k < device.interfaces.length; k++) {
intf = device.interfaces[k];
if (intf.name === ptm.port) {
intf.link.status = ptm['cbl status'] === 'pass';
}
}
}
}
//Check LLDP
if (data.value.ansible_net_neighbors !== undefined) {
keys = Object.keys(data.value.ansible_net_neighbors);
for (j = 0; j < keys.length; j++) {
peers = data.value.ansible_net_neighbors[keys[j]];
for (k = 0; k < peers.length; k++) {
intf = $scope.getDeviceInterface(device.name, keys[j]);
if (intf !== null && intf.link !== null) {
if (intf.link.to_interface === intf) {
intf.link.status = ($scope.getDeviceInterface(peers[k].host, peers[k].port) === intf.link.from_interface);
} else {
intf.link.status = ($scope.getDeviceInterface(peers[k].host, peers[k].port) === intf.link.to_interface);
}
}
}
}
}
}
}
$scope.$apply();
};
$scope.getDevice = function(name) {
@@ -1243,151 +945,6 @@ var NetworkUIController = function($scope,
return null;
};
$scope.create_template_sequences = function (sequences, template, template_context) {
var i = 0;
var template_variables = util.nunjucks_find_variables(template);
for (i = 0; i < template_variables.length; i++) {
if (template_context[template_variables[i]] === undefined) {
if (sequences[template_variables[i]] === undefined) {
sequences[template_variables[i]] = util.natural_numbers(0);
}
template_context[template_variables[i]] = sequences[template_variables[i]]();
}
}
};
$scope.create_inventory_host = function (device) {
if ($scope.template_building || device.template) {
return;
}
console.log(device);
function update_inventory () {
HostsService.post({inventory: $scope.inventory_id,
name: device.name,
variables: JSON.stringify({awx: {name: device.name,
type: device.type}})})
.then(function (res) {
console.log(res);
device.host_id = res.data.id;
device.variables = util.parse_variables(res.data.variables);
$scope.send_control_message(new messages.DeviceInventoryUpdate($scope.client_id,
device.id,
device.host_id));
})
.catch(function (res) {
console.log(res);
});
}
return HostsService.get({inventory: $scope.inventory_id,
name: device.name})
.then(function (res) {
console.log(res);
if (res.data.count === 0) {
update_inventory();
} else if (res.data.count === 1) {
device.host_id = res.data.results[0].id;
device.variables = util.parse_variables(res.data.results[0].variables);
$scope.send_control_message(new messages.DeviceInventoryUpdate($scope.client_id,
device.id,
device.host_id));
}
})
.catch(function (res) {
console.log(res);
});
};
$scope.create_inventory_group = function (group) {
if ($scope.template_building || group.template) {
return;
}
console.log(group);
function update_inventory () {
GroupsService.post({inventory: $scope.inventory_id,
name: group.name,
variables: JSON.stringify({awx: {name: group.name,
type: group.type}})})
.then(function (res) {
console.log(res);
group.group_id = res.data.id;
group.variables = util.parse_variables(res.data.variables);
$scope.send_control_message(new messages.GroupInventoryUpdate($scope.client_id,
group.id,
group.group_id));
})
.catch(function (res) {
console.log(res);
});
}
return GroupsService.get({inventory: $scope.inventory_id,
name: group.name})
.then(function (res) {
console.log(res);
if (res.data.count === 0) {
update_inventory();
} else if (res.data.count === 1) {
group.group_id = res.data.results[0].id;
group.variables = util.parse_variables(res.data.results[0].variables);
$scope.send_control_message(new messages.GroupInventoryUpdate($scope.client_id,
group.id,
group.group_id));
}
})
.catch(function (res) {
console.log(res);
});
};
$scope.create_group_association = function (group, devices) {
if ($scope.template_building || group.template) {
return;
}
console.log(['create_group_association', group, devices]);
function noop (response) {
console.log(response);
}
function error_handler (response) {
console.log(response);
}
var i = 0;
for (i = 0; i < devices.length; i ++) {
if (!devices[i].template) {
$http.post('/api/v2/groups/' + group.group_id + '/hosts/', JSON.stringify({name: devices[i].name})).then(noop).catch(error_handler);
}
}
};
$scope.delete_group_association = function (group, devices) {
if ($scope.template_building || group.template) {
return;
}
console.log(['delete_group_association', group, devices]);
function noop (response) {
console.log(response);
}
function error_handler (response) {
console.log(response);
}
var i = 0;
for (i = 0; i < devices.length; i ++) {
if (!devices[i].template) {
GroupsService.disassociateHost(devices[i].host_id, group.group_id).then(noop).catch(error_handler);
}
}
};
$scope.onDeviceCreate = function(data) {
$scope.create_device(data);
};
@@ -2168,7 +1725,7 @@ var NetworkUIController = function($scope,
toolboxTitleMargin = toolboxTopMargin + 35;
toolboxHeight = $scope.graph.height - toolboxTopMargin;
let toolboxes = ['site_toolbox', 'rack_toolbox', 'inventory_toolbox', 'app_toolbox'];
let toolboxes = ['inventory_toolbox'];
toolboxes.forEach((toolbox) => {
$scope[toolbox].y = toolboxTopMargin;
$scope[toolbox].height = toolboxHeight;
@@ -2267,34 +1824,14 @@ var NetworkUIController = function($scope,
$scope.keybindings_controller.state.start($scope.keybindings_controller);
$scope.view_controller.state = view.Start;
$scope.view_controller.state.start($scope.view_controller);
$scope.device_detail_controller.state = device_detail_fsm.Start;
$scope.device_detail_controller.state.start($scope.device_detail_controller);
$scope.move_controller.state = move.Start;
$scope.move_controller.state.start($scope.move_controller);
$scope.details_panel_controller.state = details_panel_fsm.Start;
$scope.details_panel_controller.state.start($scope.details_panel_controller);
$scope.link_controller.state = link.Start;
$scope.link_controller.state.start($scope.link_controller);
$scope.stream_controller.state = stream_fsm.Start;
$scope.stream_controller.state.start($scope.stream_controller);
$scope.group_controller.state = group.Start;
$scope.group_controller.state.start($scope.group_controller);
$scope.rack_controller.state = rack_fsm.Disable;
$scope.rack_controller.state.start($scope.rack_controller);
$scope.site_controller.state = site_fsm.Disable;
$scope.site_controller.state.start($scope.site_controller);
$scope.buttons_controller.state = buttons.Start;
$scope.buttons_controller.state.start($scope.buttons_controller);
$scope.time_controller.state = time.Start;
$scope.time_controller.state.start($scope.time_controller);
$scope.app_toolbox_controller.state = toolbox_fsm.Start;
$scope.app_toolbox_controller.state.start($scope.app_toolbox_controller);
$scope.inventory_toolbox_controller.state = toolbox_fsm.Start;
$scope.inventory_toolbox_controller.state.start($scope.inventory_toolbox_controller);
$scope.rack_toolbox_controller.state = toolbox_fsm.Start;
$scope.rack_toolbox_controller.state.start($scope.rack_toolbox_controller);
$scope.site_toolbox_controller.state = toolbox_fsm.Start;
$scope.site_toolbox_controller.state.start($scope.site_toolbox_controller);
$scope.mode_controller.state = mode_fsm.Start;
$scope.mode_controller.state.start($scope.mode_controller);
};
@@ -2304,18 +1841,7 @@ var NetworkUIController = function($scope,
};
$scope.reset_toolboxes = function () {
$scope.app_toolbox.items = [];
$scope.app_toolbox.items.push(new models.Process(0, 'BGP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Process(0, 'OSPF', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Process(0, 'STP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Process(0, 'Zero Pipeline', 'process', 0, 0));
for(i = 0; i < $scope.app_toolbox.items.length; i++) {
$scope.app_toolbox.items[i].icon = true;
}
$scope.inventory_toolbox.items = [];
$scope.rack_toolbox.items = [];
$scope.site_toolbox.items = [];
};
$scope.cancel_animations = function () {

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

@@ -28,7 +28,6 @@
</clipPath>
</defs>
<g transform="scale(1.0)" id="frame_g">
<g ng-if="current_mode == 'MultiSite'" transform="translate(-300000, -200000) scale(1000)" awx-net-map></g>
<g ng-if="!hide_links">
<g ng-if="current_scale > 0.5 && current_scale < 5">
<g ng-repeat="link in links">
@@ -37,15 +36,8 @@
</g> <!-- end ng-if current_scale -->
</g> <!-- end hide_links -->
<g ng-repeat="link in links">
<g ng-if="link.selected || link.to_interface.selected || link.from_interface.selected" link></g>
<g ng-if="link.selected || link.to_interface.selected || link.from_interface.selected" link></g>
</g>
<g ng-if="current_scale > 0.5 && current_scale < 5">
<g ng-repeat="stream in streams">
<g awx-net-stream></g>
</g> <!-- end ng-repeat stream in streams-->
</g> <!-- end ng-if current_scale -->
<g ng-if="current_scale < 5">
<g ng-repeat="item in devices"
ng-attr-transform="translate({{item.x}},{{item.y}})"
ng-attr-class="{{item.type}}"
@@ -66,19 +58,7 @@
<g ng-switch-default> <!-- begin default -->
<g awx-net-default></g>
</g> <!-- end default -->
<g awx-net-status-light></g>
</g> <!-- end devices -->
</g>
<g ng-if="current_scale >= 5">
<g ng-repeat="item in devices"
ng-attr-transform="translate({{item.x}},{{item.y}})">
<g awx-net-device-detail> </g>
</g>
</g>
<g ng-repeat="item in groups">
<g awx-net-group name="{{item.type + '_' + item.id + '_' + item.name}}"></g>
</g>
<g ng-attr-transform="translate({{scaledX}},{{scaledY}})" ng-attr-class="{{debug.hidden && 'hidden' || ''}} debug-cursor" >
<line x1="-5" y1="0" x2="5" y2="0"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
@@ -86,18 +66,9 @@
<g awx-net-quadrants>
</g>
</g> <!-- end frame_g -->
<g ng-repeat="toolbox in [site_toolbox, rack_toolbox, inventory_toolbox, app_toolbox]">
<g ng-repeat="toolbox in [inventory_toolbox]">
<g awx-net-inventory-toolbox></g>
</g>
<g ng-if="!hide_buttons">
<g> <!-- buttons -->
<g ng-repeat="button in buttons"
ng-attr-transform="translate({{button.x}},{{button.y}})">
<g awx-net-button></g>
</g>
</g> <!-- end buttons -->
</g>
<g awx-net-context-menu
context_menu="context_menus[0]"
ng-if="context_menus[0].enabled"
@@ -106,6 +77,5 @@
<g awx-net-debug></g>
<g awx-net-test-results></g>
<g awx-net-cursor></g>
<g ng-if="template_building"><text stroke="none" fill="red" font-size="48" ng-attr-x="{{graph.width/2}}" ng-attr-y="200">TEMPLATE BUILDING</text></g>
</svg>
</div>

8
awx/ui/client/src/network-ui/process.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/process.partial.svg');
function process () {
return { restrict: 'A', templateUrl};
}
exports.process = process;

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

@@ -1,12 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g class="NetworkUI__process" ng-attr-transform="translate(-50, -50)">
<path ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__switch--selected-conflict' : item.selected ? 'NetworkUI__switch--selected' : 'NetworkUI__switch--remote-selected' : 'NetworkUI--hidden'}}"
d="M0,0 h100 a10,10 0 0 1 10,10 v100 a10,10 0 0 1 -10,10 h-100 a10,10 0 0 1 -10,-10 v-100 a10,10 0 0 1 10,-10 z" />
<path d="M0,0 h100 a10,10 0 0 1 10,10 v100 a10,10 0 0 1 -10,10 h-100 a10,10 0 0 1 -10,-10 v-100 a10,10 0 0 1 10,-10 z" />
</g>
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__process-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#selected)"
text-anchor="middle"
x="0"
y="12"> {{item.name}} </text>
<text class="NetworkUI__process-text" text-anchor="middle" x="0" y="12">{{item.name}}{{item.edit_label?'_':''}}</text>

8
awx/ui/client/src/network-ui/rack.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/rack.partial.svg');
function rack () {
return { restrict: 'A', templateUrl};
}
exports.rack = rack;

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

@@ -1,595 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var models = require('./models.js');
var messages = require('./messages.js');
var nunjucks = require('nunjucks');
function _State () {
}
inherits(_State, fsm._State);
function _Ready () {
this.name = 'Ready';
}
inherits(_Ready, _State);
var Ready = new _Ready();
exports.Ready = Ready;
function _Disable () {
this.name = 'Disable';
}
inherits(_Disable, _State);
var Disable = new _Disable();
exports.Disable = Disable;
function _Start () {
this.name = 'Start';
}
inherits(_Start, _State);
var Start = new _Start();
exports.Start = Start;
function _Selected1 () {
this.name = 'Selected1';
}
inherits(_Selected1, _State);
var Selected1 = new _Selected1();
exports.Selected1 = Selected1;
function _Selected2 () {
this.name = 'Selected2';
}
inherits(_Selected2, _State);
var Selected2 = new _Selected2();
exports.Selected2 = Selected2;
function _Selected3 () {
this.name = 'Selected3';
}
inherits(_Selected3, _State);
var Selected3 = new _Selected3();
exports.Selected3 = Selected3;
function _EditLabel () {
this.name = 'EditLabel';
}
inherits(_EditLabel, _State);
var EditLabel = new _EditLabel();
exports.EditLabel = EditLabel;
function _Move () {
this.name = 'Move';
}
inherits(_Move, _State);
var Move = new _Move();
exports.Move = Move;
function _ContextMenu () {
this.name = 'ContextMenu';
}
inherits(_ContextMenu, _State);
var ContextMenu = new _ContextMenu();
exports.ContextMenu = ContextMenu;
_Start.prototype.start = function (controller) {
controller.changeState(Ready);
};
_Start.prototype.start.transitions = ['Ready'];
_Ready.prototype.onPasteRack = function (controller, msg_type, message) {
var scope = controller.scope;
var device = null;
var intf = null;
var process = null;
var link = null;
var i = 0;
var j = 0;
var top_left_x, top_left_y;
var device_map = {};
var c_messages = [];
var rack_template_context = null;
var device_template_context = null;
var promises = [];
scope.hide_groups = false;
scope.pressedX = scope.mouseX;
scope.pressedY = scope.mouseY;
scope.pressedScaledX = scope.scaledX;
scope.pressedScaledY = scope.scaledY;
top_left_x = scope.scaledX - message.group.x2/2;
top_left_y = scope.scaledY - message.group.y2/2;
var group = new models.Group(controller.scope.group_id_seq(),
message.group.name,
message.group.type,
top_left_x,
top_left_y,
top_left_x + message.group.x2,
top_left_y + message.group.y2,
false);
if (!controller.scope.template_building && message.group.template) {
try {
rack_template_context = {};
rack_template_context.id = group.id;
controller.scope.create_template_sequences(controller.scope.sequences, group.name, rack_template_context);
group.name = nunjucks.renderString(group.name, rack_template_context);
promises.push(scope.create_inventory_group(group));
} catch (err) {
console.log(err);
}
}
c_messages.push(new messages.GroupCreate(scope.client_id,
group.id,
group.x1,
group.y1,
group.x2,
group.y2,
group.name,
group.type,
0));
scope.groups.push(group);
if (!controller.scope.template_building && message.group.template) {
device_template_context = Object.assign({}, rack_template_context);
device_template_context.rack_id = group.id;
for(i=0; i<message.group.devices.length;i++) {
controller.scope.create_template_sequences(group.sequences, message.group.devices[i].name, device_template_context);
}
}
for(i=0; i<message.group.devices.length;i++) {
device = new models.Device(controller.scope.device_id_seq(),
message.group.devices[i].name,
top_left_x + message.group.devices[i].x,
top_left_y + message.group.devices[i].y,
message.group.devices[i].type);
device_map[message.group.devices[i].id] = device;
device.interface_map = {};
device.in_group = true;
scope.devices.push(device);
group.devices.push(device);
if (!controller.scope.template_building && message.group.template) {
try {
device_template_context.id = device.id;
device.name = nunjucks.renderString(device.name, device_template_context);
promises.push(scope.create_inventory_host(device));
} catch (err) {
console.log(err);
}
}
c_messages.push(new messages.DeviceCreate(scope.client_id,
device.id,
device.x,
device.y,
device.name,
device.type,
device.host_id));
for (j=0; j < message.group.devices[i].interfaces.length; j++) {
intf = new models.Interface(message.group.devices[i].interfaces[j].id, message.group.devices[i].interfaces[j].name);
intf.device = device;
device.interfaces.push(intf);
device.interface_map[intf.id] = intf;
c_messages.push(new messages.InterfaceCreate(controller.scope.client_id,
device.id,
intf.id,
intf.name));
}
for (j=0; j < message.group.devices[i].processes.length; j++) {
process = new models.Process(message.group.devices[i].processes[j].id,
message.group.devices[i].processes[j].name,
message.group.devices[i].processes[j].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);
}
}
for(i=0; i<message.group.links.length;i++) {
link = new models.Link(controller.scope.link_id_seq(),
device_map[message.group.links[i].from_device.id],
device_map[message.group.links[i].to_device.id],
device_map[message.group.links[i].from_device.id].interface_map[message.group.links[i].from_interface.id],
device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id]);
link.name = message.group.links[i].name;
device_map[message.group.links[i].from_device.id].interface_map[message.group.links[i].from_interface.id].link = link;
device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id].link = link;
device_map[message.group.links[i].from_device.id].interface_map[message.group.links[i].from_interface.id].dot();
device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id].dot();
scope.links.push(link);
c_messages.push(new messages.LinkCreate(controller.scope.client_id,
link.id,
link.from_device.id,
link.to_device.id,
link.from_interface.id,
link.to_interface.id));
}
scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
Promise.all(promises)
.then(function () {
controller.scope.create_group_association(group, group.devices);
})
.catch(function(res) {
console.log(res);
});
};
_Selected1.prototype.onMouseUp = function (controller) {
if(controller.scope.$parent.vm.rightPanelIsExpanded){
controller.scope.onDetailsContextButton();
}
controller.changeState(Selected2);
};
_Selected1.prototype.onMouseUp.transitions = ['Selected2'];
_Selected1.prototype.onMouseMove = function (controller) {
controller.changeState(Move);
};
_Selected1.prototype.onMouseMove.transitions = ['Move'];
_Selected2.prototype.onPasteRack = function (controller, msg_type, message) {
controller.changeState(Ready);
controller.handle_message(msg_type, message);
};
_Selected2.prototype.onCopySelected = function (controller) {
var groups = controller.scope.selected_groups;
var group_copy = null;
var group = null;
var devices = null;
var device_copy = null;
var process_copy = null;
var interface_copy = null;
var link_copy = null;
var device_map = {};
var i = 0;
var j = 0;
var k = 0;
for(i=0; i < groups.length; i++) {
group = groups[i];
group_copy = new models.Group(0,
group.name,
group.type,
0,
0,
group.right_extent() - group.left_extent(),
group.bottom_extent() - group.top_extent(),
false);
group_copy.icon = true;
devices = group.devices;
for(j=0; j < devices.length; j++) {
device_copy = new models.Device(devices[j].id,
devices[j].name,
devices[j].x - group.left_extent(),
devices[j].y - group.top_extent(),
devices[j].type);
device_map[device_copy.id] = device_copy;
device_copy.icon = true;
device_copy.interface_map = {};
for(k=0; k < devices[j].processes.length; k++) {
process_copy = new models.Process(0, devices[j].processes[k].name, devices[j].processes[k].name, 0, 0);
device_copy.processes.push(process_copy);
}
for(k=0; k < devices[j].interfaces.length; k++) {
interface_copy = new models.Interface(devices[j].interfaces[k].id, devices[j].interfaces[k].name);
device_copy.interfaces.push(interface_copy);
device_copy.interface_map[interface_copy.id] = interface_copy;
}
device_copy.variables = JSON.stringify(devices[j].variables);
device_copy.template = true;
group_copy.devices.push(device_copy);
}
group_copy.link_ids = [];
for(j=0; j < devices.length; j++) {
for(k=0; k < devices[j].interfaces.length; k++) {
if (devices[j].interfaces[k].link !== null) {
if ((devices.indexOf(devices[j].interfaces[k].remote_interface().device) !== -1) &&
(group_copy.link_ids.indexOf(devices[j].interfaces[k].link.id) === -1)) {
link_copy = new models.Link(devices[j].interfaces[k].link.id,
device_map[devices[j].interfaces[k].link.from_device.id],
device_map[devices[j].interfaces[k].link.to_device.id],
device_map[devices[j].interfaces[k].link.from_device.id].interface_map[devices[j].interfaces[k].link.from_interface.id],
device_map[devices[j].interfaces[k].link.to_device.id].interface_map[devices[j].interfaces[k].link.to_interface.id]);
link_copy.name = devices[j].interfaces[k].link.name;
group_copy.links.push(link_copy);
group_copy.link_ids.push(link_copy.id);
}
}
}
}
group_copy.variables = JSON.stringify(group.variables);
group_copy.template = true;
controller.scope.rack_toolbox.items.push(group_copy);
}
};
_Selected2.prototype.onKeyDown = function (controller, msg_type, $event) {
//controller.changeState(Ready);
controller.delegate_channel.send(msg_type, $event);
};
_Selected2.prototype.onKeyDown.transitions = ['Ready'];
_Selected2.prototype.onMouseDown = function (controller, msg_type, $event) {
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
var groups = controller.scope.selected_groups;
var i = 0;
var selected = false;
controller.scope.selected_groups = [];
for (i = 0; i < groups.length; i++) {
if (groups[i].type !== "rack") {
continue;
}
if (groups[i].is_icon_selected(controller.scope.scaledX, controller.scope.scaledY)) {
groups[i].selected = true;
selected = true;
controller.scope.selected_groups.push(groups[i]);
}
}
if (selected) {
controller.changeState(Selected3);
} else {
for (i = 0; i < groups.length; i++) {
groups[i].selected = false;
}
controller.changeState(Ready);
controller.handle_message(msg_type, $event);
}
};
_Selected2.prototype.onMouseDown.transitions = ['Selected3', 'Ready'];
_Selected3.prototype.onMouseUp = function (controller, msg_type, $event) {
let context_menu = controller.scope.context_menus[0];
context_menu.enabled = true;
context_menu.x = $event.x;
context_menu.y = $event.y;
context_menu.buttons.forEach(function(button, index){
button.x = $event.x;
let menuPaddingTop = 5;
button.y = $event.y + menuPaddingTop + (button.height * index);
});
controller.changeState(ContextMenu);
};
_Selected3.prototype.onMouseUp.transitions = ['ContextMenu'];
_Selected3.prototype.onMouseMove = function (controller) {
controller.changeState(Move);
};
_Selected3.prototype.onMouseMove.transitions = ['Move'];
_EditLabel.prototype.start = function (controller) {
controller.scope.selected_groups[0].edit_label = true;
};
_EditLabel.prototype.end = function (controller) {
controller.scope.selected_groups[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_groups[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.changeState(Selected2);
} else if ($event.keyCode === 32) { //Space
item.name += " ";
} else {
console.log($event.keyCode);
}
controller.scope.send_control_message(new messages.GroupLabelEdit(controller.scope.client_id,
item.id,
item.name,
previous_name));
};
_EditLabel.prototype.onKeyDown.transitions = ['Selected2'];
_Ready.prototype.onMouseDown = function (controller, msg_type, $event) {
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
var groups = controller.scope.groups;
var i = 0;
var selected = false;
controller.scope.clear_selections();
for (i = 0; i < groups.length; i++) {
if (groups[i].type !== "rack") {
continue;
}
if (groups[i].is_icon_selected(controller.scope.scaledX, controller.scope.scaledY)) {
groups[i].selected = true;
selected = true;
controller.scope.selected_groups.push(groups[i]);
}
}
if (selected) {
controller.changeState(Selected1);
} else {
controller.delegate_channel.send(msg_type, $event);
}
};
_Ready.prototype.onMouseDown.transitions = ['Selected1'];
_Move.prototype.start = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
for (i = 0; i < groups.length; i++) {
groups[i].moving = true;
}
};
_Move.prototype.end = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
var j = 0;
for (i = 0; i < groups.length; i++) {
for(j = 0; j < groups[i].devices.length; j++) {
groups[i].devices[j].selected = false;
}
}
for (i = 0; i < groups.length; i++) {
groups[i].moving = false;
}
};
_Move.prototype.onMouseUp = function (controller) {
controller.changeState(Selected2);
};
_Move.prototype.onMouseUp.transitions = ['Selected2'];
_Move.prototype.onMouseMove = function (controller) {
var groups = controller.scope.selected_groups;
var devices = null;
var diffX = controller.scope.scaledX - controller.scope.pressedScaledX;
var diffY = controller.scope.scaledY - controller.scope.pressedScaledY;
var i = 0;
var j = 0;
var k = 0;
var previous_x1, previous_y1, previous_x2, previous_y2, previous_x, previous_y;
var c_messages = [];
for (i = 0; i < groups.length; i++) {
c_messages = [];
previous_x1 = groups[i].x1;
previous_y1 = groups[i].y1;
previous_x2 = groups[i].x2;
previous_y2 = groups[i].y2;
groups[i].x1 = groups[i].x1 + diffX;
groups[i].y1 = groups[i].y1 + diffY;
groups[i].x2 = groups[i].x2 + diffX;
groups[i].y2 = groups[i].y2 + diffY;
c_messages.push(new messages.GroupMove(controller.scope.client_id,
groups[i].id,
groups[i].x1,
groups[i].y1,
groups[i].x2,
groups[i].y2,
previous_x1,
previous_y1,
previous_x2,
previous_y2));
devices = groups[i].devices;
for (j = 0; j < devices.length; j++) {
previous_x = devices[j].x;
previous_y = devices[j].y;
devices[j].x = devices[j].x + diffX;
devices[j].y = devices[j].y + diffY;
for (k = 0; k < devices[j].interfaces.length; k++) {
devices[j].interfaces[k].dot();
if (devices[j].interfaces[k].link !== null) {
devices[j].interfaces[k].link.to_interface.dot();
devices[j].interfaces[k].link.from_interface.dot();
}
}
c_messages.push(new messages.DeviceMove(controller.scope.client_id,
devices[j].id,
devices[j].x,
devices[j].y,
previous_x,
previous_y));
}
controller.scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
}
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
};
_Move.prototype.onTouchMove = _Move.prototype.onMouseMove;
_ContextMenu.prototype.end = function (controller) {
controller.scope.removeContextMenu();
};
_ContextMenu.prototype.onLabelEdit = function (controller) {
controller.changeState(EditLabel);
};
_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel'];
_ContextMenu.prototype.onMouseDown = function (controller) {
controller.changeState(Ready);
};
_ContextMenu.prototype.onMouseDown.transitions = ['Ready'];

8
awx/ui/client/src/network-ui/rack.icon.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/rack_icon.partial.svg');
function rackIcon () {
return { restrict: 'A', templateUrl};
}
exports.rackIcon = rackIcon;

242
awx/ui/client/src/network-ui/rack.partial.svg
View File

@@ -1,242 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<!-- <g transform="scale(0.75)"> -->
<g ng-if="current_scale >= 0.1 && current_scale <= 0.5 && item.type == 'rack'" ng-attr-transform="translate({{item.width()/2}}, {{item.height()/2}})">
<g ng-attr-transform="scale({{1/0.5}})">
<g ng-if="item.moving">
<!--horizontal line -->
<line x1="-150"
y1="0"
x2="150"
y2="0"
class="NetworkUI--construction">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-150"
x2="0"
y2="150"
class="NetworkUI--construction">
</line>
<!-- end vertical line -->
</g>
<g ng-if="!debug.hidden">
<!--horizontal line -->
<line x1="-60"
y1="0"
x2="60"
y2="0"
class="NetworkUI--debug">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-60"
x2="0"
y2="60"
class="NetworkUI--debug">
</line>
<!-- end vertical line -->
<!-- debug rectangle -->
<rect x="-50"
y="-50"
width="100"
height="100"
class="NetworkUI--debug">
</rect>
<!-- end debug rectangle -->
</g>
<g transform="translate(-50,-50)">
<rect
ry=15
rx=15
width=100
height=100
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
</rect>
<g transform="scale(2)">
<path
class="NetworkUI__rack"
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
<path
class="NetworkUI__rack"
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
<path
class="NetworkUI__rack"
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
<path
class="NetworkUI__rack"
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
<path
class="NetworkUI__rack"
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
<path
class="NetworkUI__rack"
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
<path
class="NetworkUI__rack"
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
</g>
</g>
</g>
<g ng-attr-transform="scale({{1/current_scale}})">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
x="0"
ng-attr-y="{{180*current_scale}}"> {{item.name}}
</text>
<text class="NetworkUI__rack-text" filter="url(#background)" text-anchor="middle" x="0" ng-attr-y="{{180*current_scale}}">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>
<!-- </g> -->
<g transform="scale(0.75)">
<g ng-if="current_scale >= 0.5 && current_scale <= 5 && item.type == 'rack'">
<g ng-attr-transform="scale({{1}})">
<g ng-if="item.moving">
<!--horizontal line -->
<line x1="-150"
y1="0"
x2="150"
y2="0"
class="NetworkUI--construction">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-150"
x2="0"
y2="150"
class="NetworkUI--construction">
</line>
<!-- end vertical line -->
</g>
<g ng-if="!debug.hidden">
<!--horizontal line -->
<line x1="-60"
y1="0"
x2="60"
y2="0"
class="NetworkUI--debug">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-60"
x2="0"
y2="60"
class="NetworkUI--debug">
</line>
<!-- end vertical line -->
<!-- debug rectangle -->
<rect x="-50"
y="-50"
width="100"
height="100"
class="NetworkUI--debug">
</rect>
<!-- end debug rectangle -->
</g>
<g transform="translate(-50,-50)">
<rect
ry=15
rx=15
width=100
height=100
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
</rect>
<g transform="scale(2)">
<path
class="NetworkUI__rack"
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
<path
class="NetworkUI__rack"
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
<path
class="NetworkUI__rack"
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
<path
class="NetworkUI__rack"
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
<path
class="NetworkUI__rack"
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
<path
class="NetworkUI__rack"
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
<path
class="NetworkUI__rack"
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
</g>
</g>
</g>
<g ng-attr-transform="scale({{1}})">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
x="0"
y="70"> {{item.name}}
</text>
<text class="NetworkUI__rack-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>
</g>

117
awx/ui/client/src/network-ui/rack_icon.partial.svg
View File

@@ -1,117 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->
<line x1="-150"
y1="0"
x2="150"
y2="0"
class="NetworkUI--construction">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-150"
x2="0"
y2="150"
class="NetworkUI--construction">
</line>
<!-- end vertical line -->
</g>
<g ng-if="!debug.hidden">
<!--horizontal line -->
<line x1="-60"
y1="0"
x2="60"
y2="0"
class="NetworkUI--debug">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-60"
x2="0"
y2="60"
class="NetworkUI--debug">
</line>
<!-- end vertical line -->
<!-- debug rectangle -->
<rect x="-50"
y="-50"
width="100"
height="100"
class="NetworkUI--debug">
</rect>
<!-- end debug rectangle -->
</g>
<g transform="translate(-50,-50)">
<rect
ry=15
rx=15
width=100
height=100
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
</rect>
<g transform="scale(2)">
<path
class="NetworkUI__rack"
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
<path
class="NetworkUI__rack"
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
<path
class="NetworkUI__rack"
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
<path
class="NetworkUI__rack"
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
<path
class="NetworkUI__rack"
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
<path
class="NetworkUI__rack"
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
<path
class="NetworkUI__rack"
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
</g>
</g>
<g ng-show="item.icon || current_scale > 0.5">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
x="0"
y="70"> {{item.name}}
</text>
<text class="NetworkUI__rack-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>

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

@@ -1,5 +1,4 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="item.icon || current_scale > 0.5 || !item.in_group">
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->
@@ -80,4 +79,3 @@
<text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>
</g>

8
awx/ui/client/src/network-ui/site.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/site.partial.svg');
function site () {
return { restrict: 'A', templateUrl};
}
exports.site = site;

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

@@ -1,730 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var models = require('./models.js');
var messages = require('./messages.js');
var nunjucks = require('nunjucks');
function _State () {
}
inherits(_State, fsm._State);
function _Ready () {
this.name = 'Ready';
}
inherits(_Ready, _State);
var Ready = new _Ready();
exports.Ready = Ready;
function _Disable () {
this.name = 'Disable';
}
inherits(_Disable, _State);
var Disable = new _Disable();
exports.Disable = Disable;
function _Start () {
this.name = 'Start';
}
inherits(_Start, _State);
var Start = new _Start();
exports.Start = Start;
function _Selected1 () {
this.name = 'Selected1';
}
inherits(_Selected1, _State);
var Selected1 = new _Selected1();
exports.Selected1 = Selected1;
function _Selected2 () {
this.name = 'Selected2';
}
inherits(_Selected2, _State);
var Selected2 = new _Selected2();
exports.Selected2 = Selected2;
function _Selected3 () {
this.name = 'Selected3';
}
inherits(_Selected3, _State);
var Selected3 = new _Selected3();
exports.Selected3 = Selected3;
function _EditLabel () {
this.name = 'EditLabel';
}
inherits(_EditLabel, _State);
var EditLabel = new _EditLabel();
exports.EditLabel = EditLabel;
function _Move () {
this.name = 'Move';
}
inherits(_Move, _State);
var Move = new _Move();
exports.Move = Move;
function _ContextMenu () {
this.name = 'ContextMenu';
}
inherits(_ContextMenu, _State);
var ContextMenu = new _ContextMenu();
exports.ContextMenu = ContextMenu;
_Start.prototype.start = function (controller) {
controller.changeState(Ready);
};
_Start.prototype.start.transitions = ['Ready'];
_Ready.prototype.onPasteSite = function (controller, msg_type, message) {
var scope = controller.scope;
var device = null;
var intf = null;
var process = null;
var link = null;
var stream = null;
var i = 0;
var j = 0;
var top_left_x, top_left_y;
var device_map = {};
var inner_group = null;
var c_messages = [];
var membership_old_new = null;
var site_template_context = null;
var rack_template_context = null;
var device_template_context = null;
var promises = [];
scope.hide_groups = false;
scope.pressedX = scope.mouseX;
scope.pressedY = scope.mouseY;
scope.pressedScaledX = scope.scaledX;
scope.pressedScaledY = scope.scaledY;
top_left_x = scope.scaledX - message.group.x2/2;
top_left_y = scope.scaledY - message.group.y2/2;
var group = new models.Group(controller.scope.group_id_seq(),
message.group.name,
message.group.type,
top_left_x,
top_left_y,
top_left_x + message.group.x2,
top_left_y + message.group.y2,
false);
c_messages.push(new messages.GroupCreate(scope.client_id,
group.id,
group.x1,
group.y1,
group.x2,
group.y2,
group.name,
group.type,
0));
scope.groups.push(group);
for(i=0; i<message.group.devices.length;i++) {
device = new models.Device(controller.scope.device_id_seq(),
message.group.devices[i].name,
top_left_x + message.group.devices[i].x,
top_left_y + message.group.devices[i].y,
message.group.devices[i].type);
device_map[message.group.devices[i].id] = device;
device.interface_map = {};
scope.devices.push(device);
group.devices.push(device);
c_messages.push(new messages.DeviceCreate(scope.client_id,
device.id,
device.x,
device.y,
device.name,
device.type,
device.host_id));
for (j=0; j < message.group.devices[i].interfaces.length; j++) {
intf = new models.Interface(message.group.devices[i].interfaces[j].id, message.group.devices[i].interfaces[j].name);
intf.device = device;
device.interfaces.push(intf);
device.interface_map[intf.id] = intf;
c_messages.push(new messages.InterfaceCreate(controller.scope.client_id,
device.id,
intf.id,
intf.name));
}
for (j=0; j < message.group.devices[i].processes.length; j++) {
process = new models.Process(message.group.devices[i].processes[j].id,
message.group.devices[i].processes[j].name,
message.group.devices[i].processes[j].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);
}
}
for(i=0; i<message.group.links.length;i++) {
link = new models.Link(controller.scope.link_id_seq(),
device_map[message.group.links[i].from_device.id],
device_map[message.group.links[i].to_device.id],
device_map[message.group.links[i].from_device.id].interface_map[message.group.links[i].from_interface.id],
device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id]);
link.name = message.group.links[i].name;
device_map[message.group.links[i].from_device.id].interface_map[message.group.links[i].from_interface.id].link = link;
device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id].link = link;
device_map[message.group.links[i].from_device.id].interface_map[message.group.links[i].from_interface.id].dot();
device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id].dot();
scope.links.push(link);
c_messages.push(new messages.LinkCreate(controller.scope.client_id,
link.id,
link.from_device.id,
link.to_device.id,
link.from_interface.id,
link.to_interface.id));
}
for(i=0; i<message.group.streams.length;i++) {
stream = new models.Stream(controller.scope.stream_id_seq(),
device_map[message.group.streams[i].from_device.id],
device_map[message.group.streams[i].to_device.id],
message.group.streams[i].label);
stream.name = message.group.streams[i].name;
c_messages.push(new messages.StreamCreate(controller.scope.client_id,
stream.id,
stream.from_device.id,
stream.to_device.id,
stream.name));
scope.streams.push(stream);
}
for(i=0; i<message.group.groups.length;i++) {
inner_group = new models.Group(controller.scope.group_id_seq(),
message.group.groups[i].name,
message.group.groups[i].type,
top_left_x + message.group.groups[i].x1,
top_left_y + message.group.groups[i].y1,
top_left_x + message.group.groups[i].x2,
top_left_y + message.group.groups[i].y2,
false);
scope.groups.push(inner_group);
group.groups.push(inner_group);
c_messages.push(new messages.GroupCreate(scope.client_id,
inner_group.id,
inner_group.x1,
inner_group.y1,
inner_group.x2,
inner_group.y2,
inner_group.name,
inner_group.type,
0));
}
for(i=0; i< group.groups.length; i++) {
membership_old_new = group.groups[i].update_membership(scope.devices, scope.groups);
c_messages.push(new messages.GroupMembership(controller.scope.client_id,
group.groups[i].id,
membership_old_new[2]));
}
membership_old_new = group.update_membership(scope.devices, scope.groups);
c_messages.push(new messages.GroupMembership(controller.scope.client_id,
group.id,
membership_old_new[2]));
if (!controller.scope.template_building && message.group.template) {
try {
site_template_context = {};
site_template_context.id = group.id;
controller.scope.create_template_sequences(controller.scope.sequences, group.name, site_template_context);
group.name = nunjucks.renderString(group.name, site_template_context);
promises.push(scope.create_inventory_group(group));
c_messages.push(new messages.GroupLabelEdit(controller.scope.client_id,
group.id,
group.name,
group.name));
rack_template_context = Object.assign({}, site_template_context);
rack_template_context.site_id = group.id;
for (i = 0; i < group.groups.length; i++) {
controller.scope.create_template_sequences(group.sequences,
group.groups[i].name,
rack_template_context);
}
for (i = 0; i < group.groups.length; i++) {
rack_template_context.id = group.groups[i].id;
group.groups[i].name = nunjucks.renderString(group.groups[i].name, rack_template_context);
promises.push(scope.create_inventory_group(group.groups[i]));
c_messages.push(new messages.GroupLabelEdit(controller.scope.client_id,
group.groups[i].id,
group.groups[i].name,
group.groups[i].name));
if (group.groups[i].type !== "rack") {
continue;
}
device_template_context = Object.assign({}, rack_template_context);
device_template_context.rack_id = group.groups[i].id;
for(j=0; j<group.groups[i].devices.length;j++) {
controller.scope.create_template_sequences(group.groups[i].sequences,
group.groups[i].devices[j].name,
device_template_context);
}
for (j=0; j < group.groups[i].devices.length; j++) {
device_template_context.id = group.groups[i].devices[j].id;
group.groups[i].devices[j].name = nunjucks.renderString(group.groups[i].devices[j].name, device_template_context);
console.log(group.groups[i].devices[j].name);
promises.push(scope.create_inventory_host(group.groups[i].devices[j]));
c_messages.push(new messages.DeviceLabelEdit(controller.scope.client_id,
group.groups[i].devices[j].id,
group.groups[i].devices[j].name,
group.groups[i].devices[j].name));
}
}
} catch (err) {
console.log(err);
}
}
scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
Promise.all(promises)
.then(function () {
controller.scope.create_group_association(group, group.devices);
for (i = 0; i < group.groups.length; i++) {
controller.scope.create_group_association(group.groups[i], group.groups[i].devices);
}
})
.catch(function(res) {
console.log(res);
});
};
_Selected1.prototype.onMouseUp = function (controller) {
if(controller.scope.$parent.vm.rightPanelIsExpanded){
controller.scope.onDetailsContextButton();
}
controller.changeState(Selected2);
};
_Selected1.prototype.onMouseUp.transitions = ['Selected2'];
_Selected1.prototype.onMouseMove = function (controller) {
controller.changeState(Move);
};
_Selected1.prototype.onMouseMove.transitions = ['Move'];
_Selected2.prototype.onPasteSite = function (controller, msg_type, message) {
controller.changeState(Ready);
controller.handle_message(msg_type, message);
};
_Selected2.prototype.onCopySelected = function (controller) {
var groups = controller.scope.selected_groups;
var group_copy = null;
var group = null;
var inner_group = null;
var devices = null;
var device_copy = null;
var process_copy = null;
var interface_copy = null;
var link_copy = null;
var device_map = {};
var streams = controller.scope.streams;
var stream;
var stream_copy;
var i = 0;
var j = 0;
var k = 0;
for(i=0; i < groups.length; i++) {
group = groups[i];
group_copy = new models.Group(0,
group.name,
group.type,
0,
0,
group.right_extent() - group.left_extent(),
group.bottom_extent() - group.top_extent(),
false);
group_copy.icon = true;
group_copy.template = true;
devices = group.devices;
for(j=0; j < devices.length; j++) {
device_copy = new models.Device(devices[j].id,
devices[j].name,
devices[j].x - group.left_extent(),
devices[j].y - group.top_extent(),
devices[j].type);
device_map[device_copy.id] = device_copy;
device_copy.icon = true;
device_copy.interface_map = {};
for(k=0; k < devices[j].processes.length; k++) {
process_copy = new models.Process(0, devices[j].processes[k].name, devices[j].processes[k].name, 0, 0);
device_copy.processes.push(process_copy);
}
for(k=0; k < devices[j].interfaces.length; k++) {
interface_copy = new models.Interface(devices[j].interfaces[k].id, devices[j].interfaces[k].name);
device_copy.interfaces.push(interface_copy);
device_copy.interface_map[interface_copy.id] = interface_copy;
}
group_copy.devices.push(device_copy);
}
group_copy.link_ids = [];
for(j=0; j < devices.length; j++) {
for(k=0; k < devices[j].interfaces.length; k++) {
if (devices[j].interfaces[k].link !== null) {
if ((devices.indexOf(devices[j].interfaces[k].remote_interface().device) !== -1) &&
(group_copy.link_ids.indexOf(devices[j].interfaces[k].link.id) === -1)) {
link_copy = new models.Link(devices[j].interfaces[k].link.id,
device_map[devices[j].interfaces[k].link.from_device.id],
device_map[devices[j].interfaces[k].link.to_device.id],
device_map[devices[j].interfaces[k].link.from_device.id].interface_map[devices[j].interfaces[k].link.from_interface.id],
device_map[devices[j].interfaces[k].link.to_device.id].interface_map[devices[j].interfaces[k].link.to_interface.id]);
link_copy.name = devices[j].interfaces[k].link.name;
group_copy.links.push(link_copy);
group_copy.link_ids.push(link_copy.id);
}
}
}
}
group_copy.stream_ids = [];
for (j=0; j<streams.length;j++) {
stream = streams[j];
if ((devices.indexOf(stream.to_device) !== -1) &&
(devices.indexOf(stream.from_device) !== -1)) {
stream_copy = new models.Stream(0, device_map[stream.from_device.id], device_map[stream.to_device.id], stream.label);
group_copy.streams.push(stream_copy);
}
}
for (j=0; j<group.groups.length;j++) {
inner_group = new models.Group(0,
group.groups[j].name,
group.groups[j].type,
group.groups[j].left_extent() - group.left_extent(),
group.groups[j].top_extent() - group.top_extent(),
group.groups[j].right_extent() - group.left_extent(),
group.groups[j].bottom_extent() - group.top_extent(),
false);
group_copy.groups.push(inner_group);
}
controller.scope.send_control_message(new messages.CopySite(group_copy));
controller.scope.site_toolbox.items.push(group_copy);
}
};
_Selected2.prototype.onKeyDown = function (controller, msg_type, $event) {
//controller.changeState(Ready);
controller.delegate_channel.send(msg_type, $event);
};
_Selected2.prototype.onKeyDown.transitions = ['Ready'];
_Selected2.prototype.onMouseDown = function (controller, msg_type, $event) {
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
var groups = controller.scope.selected_groups;
var i = 0;
var selected = false;
controller.scope.selected_groups = [];
for (i = 0; i < groups.length; i++) {
if (groups[i].type !== "site") {
continue;
}
if (groups[i].is_icon_selected(controller.scope.scaledX, controller.scope.scaledY)) {
groups[i].selected = true;
selected = true;
controller.scope.selected_groups.push(groups[i]);
}
}
if (selected) {
controller.changeState(Selected3);
} else {
for (i = 0; i < groups.length; i++) {
groups[i].selected = false;
}
controller.changeState(Ready);
controller.handle_message(msg_type, $event);
}
};
_Selected2.prototype.onMouseDown.transitions = ['Selected3', 'Ready'];
_Selected3.prototype.onMouseUp = function (controller, msg_type, $event) {
let context_menu = controller.scope.context_menus[0];
context_menu.enabled = true;
context_menu.x = $event.x;
context_menu.y = $event.y;
context_menu.buttons.forEach(function(button, index){
button.x = $event.x;
let menuPaddingTop = 5;
button.y = $event.y + menuPaddingTop + (button.height * index);
});
controller.changeState(ContextMenu);
};
_Selected3.prototype.onMouseUp.transitions = ['ContextMenu'];
_Selected3.prototype.onMouseMove = function (controller) {
controller.changeState(Move);
};
_Selected3.prototype.onMouseMove.transitions = ['Move'];
_EditLabel.prototype.start = function (controller) {
controller.scope.selected_groups[0].edit_label = true;
};
_EditLabel.prototype.end = function (controller) {
controller.scope.selected_groups[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_groups[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.changeState(Selected2);
} else if ($event.keyCode === 32) { //Space
item.name += " ";
} else {
console.log($event.keyCode);
}
controller.scope.send_control_message(new messages.GroupLabelEdit(controller.scope.client_id,
item.id,
item.name,
previous_name));
};
_EditLabel.prototype.onKeyDown.transitions = ['Selected2'];
_Ready.prototype.onMouseDown = function (controller, msg_type, $event) {
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
var groups = controller.scope.groups;
var i = 0;
var selected = false;
controller.scope.clear_selections();
for (i = 0; i < groups.length; i++) {
if (groups[i].type !== "site") {
continue;
}
if (groups[i].is_icon_selected(controller.scope.scaledX, controller.scope.scaledY)) {
groups[i].selected = true;
selected = true;
controller.scope.selected_groups.push(groups[i]);
}
}
if (selected) {
controller.changeState(Selected1);
} else {
controller.delegate_channel.send(msg_type, $event);
}
};
_Ready.prototype.onMouseDown.transitions = ['Selected1'];
_Move.prototype.start = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
for (i = 0; i < groups.length; i++) {
groups[i].moving = true;
}
};
_Move.prototype.end = function (controller) {
var groups = controller.scope.selected_groups;
var i = 0;
var j = 0;
for (i = 0; i < groups.length; i++) {
for(j = 0; j < groups[i].devices.length; j++) {
groups[i].devices[j].selected = false;
}
}
for (i = 0; i < groups.length; i++) {
groups[i].moving = false;
}
};
_Move.prototype.onMouseUp = function (controller) {
controller.changeState(Selected2);
};
_Move.prototype.onMouseUp.transitions = ['Selected2'];
_Move.prototype.onMouseMove = function (controller) {
var groups = controller.scope.selected_groups;
var devices = null;
var diffX = controller.scope.scaledX - controller.scope.pressedScaledX;
var diffY = controller.scope.scaledY - controller.scope.pressedScaledY;
var i = 0;
var j = 0;
var k = 0;
var previous_x1, previous_y1, previous_x2, previous_y2, previous_x, previous_y;
var c_messages = [];
for (i = 0; i < groups.length; i++) {
c_messages = [];
previous_x1 = groups[i].x1;
previous_y1 = groups[i].y1;
previous_x2 = groups[i].x2;
previous_y2 = groups[i].y2;
groups[i].x1 = groups[i].x1 + diffX;
groups[i].y1 = groups[i].y1 + diffY;
groups[i].x2 = groups[i].x2 + diffX;
groups[i].y2 = groups[i].y2 + diffY;
c_messages.push(new messages.GroupMove(controller.scope.client_id,
groups[i].id,
groups[i].x1,
groups[i].y1,
groups[i].x2,
groups[i].y2,
previous_x1,
previous_y1,
previous_x2,
previous_y2));
devices = groups[i].devices;
for (j = 0; j < devices.length; j++) {
previous_x = devices[j].x;
previous_y = devices[j].y;
devices[j].x = devices[j].x + diffX;
devices[j].y = devices[j].y + diffY;
for (k = 0; k < devices[j].interfaces.length; k++) {
devices[j].interfaces[k].dot();
if (devices[j].interfaces[k].link !== null) {
devices[j].interfaces[k].link.to_interface.dot();
devices[j].interfaces[k].link.from_interface.dot();
}
}
c_messages.push(new messages.DeviceMove(controller.scope.client_id,
devices[j].id,
devices[j].x,
devices[j].y,
previous_x,
previous_y));
}
for (j = 0; j < groups[i].groups.length; j++) {
previous_x1 = groups[i].groups[j].x1;
previous_y1 = groups[i].groups[j].y1;
previous_x2 = groups[i].groups[j].x2;
previous_y2 = groups[i].groups[j].y2;
groups[i].groups[j].x1 = groups[i].groups[j].x1 + diffX;
groups[i].groups[j].y1 = groups[i].groups[j].y1 + diffY;
groups[i].groups[j].x2 = groups[i].groups[j].x2 + diffX;
groups[i].groups[j].y2 = groups[i].groups[j].y2 + diffY;
c_messages.push(new messages.GroupMove(controller.scope.client_id,
groups[i].groups[j].id,
groups[i].groups[j].x1,
groups[i].groups[j].y1,
groups[i].groups[j].x2,
groups[i].groups[j].y2,
previous_x1,
previous_y1,
previous_x2,
previous_y2));
}
controller.scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
}
controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY;
};
_Move.prototype.onTouchMove = _Move.prototype.onMouseMove;
_ContextMenu.prototype.end = function (controller) {
controller.scope.removeContextMenu();
};
_ContextMenu.prototype.onLabelEdit = function (controller) {
controller.changeState(EditLabel);
};
_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel'];
_ContextMenu.prototype.onMouseDown = function (controller) {
controller.changeState(Ready);
};
_ContextMenu.prototype.onMouseDown.transitions = ['Ready'];

8
awx/ui/client/src/network-ui/site.icon.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/site_icon.partial.svg');
function siteIcon () {
return { restrict: 'A', templateUrl};
}
exports.siteIcon = siteIcon;

209
awx/ui/client/src/network-ui/site.partial.svg
View File

@@ -1,209 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="current_scale <= 0.1 && item.type == 'site'" ng-attr-transform="translate({{item.width()/2}}, {{item.height()/2}})">
<g ng-attr-transform="scale({{1/(2*current_scale)}})">
<g ng-if="item.moving">
<!--horizontal line -->
<line x1="-150"
y1="0"
x2="150"
y2="0"
class="NetworkUI--construction">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-150"
x2="0"
y2="150"
class="NetworkUI--construction">
</line>
<!-- end vertical line -->
</g>
<g ng-if="!debug.hidden">
<!--horizontal line -->
<line x1="-60"
y1="0"
x2="60"
y2="0"
class="NetworkUI--debug">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-60"
x2="0"
y2="60"
class="NetworkUI--debug">
</line>
<!-- end vertical line -->
<!-- debug rectangle -->
<rect x="-50"
y="-50"
width="100"
height="100"
class="NetworkUI--debug">
</rect>
<!-- end debug rectangle -->
</g>
<g transform="translate(-50,-50)">
<rect
ry=15
rx=15
width=100
height=100
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__site--selected-conflict' : item.selected ? 'NetworkUI__site--selected' : 'NetworkUI__site--remote-selected' : 'NetworkUI__site--background'}}">
</rect>
<g transform="scale(2)">
<path
class="NetworkUI__site--fill0"
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
C50,4.2,45.8,0,40.8,0z"/>
<path
class="NetworkUI__site--fill1"
d="M38.5,30.5v5c0,2.8-2.2,5-5,5h-17c-2.8,0-5-2.2-5-5v-5"/>
<rect
x="24"
y="32.1"
class="NetworkUI__site--fill2"
width="2"
height="8"/>
<path
class="NetworkUI__site--fill2"
d="M26,34.5h-2c-2.8,0-5-2.2-5-5v-17c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v17C31,32.2,28.7,34.5,26,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="25" cy="28.9" r="2.5"/>
<path
class="NetworkUI__site--fill2"
d="M39.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C44.5,32.2,42.2,34.5,39.5,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="38.5" cy="28.9" r="2.5"/>
<path
class="NetworkUI__site--fill2"
d="M12.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C17.5,32.2,15.2,34.5,12.5,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="11.5" cy="28.9" r="2.5"/>
</g>
</g>
</g>
<g ng-attr-transform="scale({{1/current_scale}})">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__site-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
ng-attr-x="0"
ng-attr-y="50"> {{item.name}} </text>
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" ng-attr-y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>
<g transform="scale(0.75)">
<g ng-if="current_scale >= 0.1 && item.type == 'site'">
<g transform="scale(1)">
<g ng-if="item.moving">
<!--horizontal line -->
<line x1="-150"
y1="0"
x2="150"
y2="0"
class="NetworkUI--construction">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-150"
x2="0"
y2="150"
class="NetworkUI--construction">
</line>
<!-- end vertical line -->
</g>
<g ng-if="!debug.hidden">
<!--horizontal line -->
<line x1="-60"
y1="0"
x2="60"
y2="0"
class="NetworkUI--debug">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-60"
x2="0"
y2="60"
class="NetworkUI--debug">
</line>
<!-- end vertical line -->
<!-- debug rectangle -->
<rect x="-50"
y="-50"
width="100"
height="100"
class="NetworkUI--debug">
</rect>
<!-- end debug rectangle -->
</g>
<g transform="translate(-50,-50)">
<rect
ry=15
rx=15
width=100
height=100
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__site--selected-conflict' : item.selected ? 'NetworkUI__site--selected' : 'NetworkUI__site--remote-selected' : 'NetworkUI__site--background'}}">
</rect>
<g transform="scale(2)">
<path
class="NetworkUI__site--fill0"
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
C50,4.2,45.8,0,40.8,0z"/>
<path
class="NetworkUI__site--fill1"
d="M38.5,30.5v5c0,2.8-2.2,5-5,5h-17c-2.8,0-5-2.2-5-5v-5"/>
<rect
x="24"
y="32.1"
class="NetworkUI__site--fill2"
width="2"
height="8"/>
<path
class="NetworkUI__site--fill2"
d="M26,34.5h-2c-2.8,0-5-2.2-5-5v-17c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v17C31,32.2,28.7,34.5,26,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="25" cy="28.9" r="2.5"/>
<path
class="NetworkUI__site--fill2"
d="M39.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C44.5,32.2,42.2,34.5,39.5,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="38.5" cy="28.9" r="2.5"/>
<path
class="NetworkUI__site--fill2"
d="M12.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C17.5,32.2,15.2,34.5,12.5,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="11.5" cy="28.9" r="2.5"/>
</g>
</g>
</g>
<g transform="scale(1)">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__site-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
x="0"
y="70"> {{item.name}} </text>
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>
</g>

102
awx/ui/client/src/network-ui/site_icon.partial.svg
View File

@@ -1,102 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->
<line x1="-150"
y1="0"
x2="150"
y2="0"
class="NetworkUI--construction">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-150"
x2="0"
y2="150"
class="NetworkUI--construction">
</line>
<!-- end vertical line -->
</g>
<g ng-if="!debug.hidden">
<!--horizontal line -->
<line x1="-60"
y1="0"
x2="60"
y2="0"
class="NetworkUI--debug">
</line>
<!-- end horizontal line -->
<!-- vertical line -->
<line x1="0"
y1="-60"
x2="0"
y2="60"
class="NetworkUI--debug">
</line>
<!-- end vertical line -->
<!-- debug rectangle -->
<rect x="-50"
y="-50"
width="100"
height="100"
class="NetworkUI--debug">
</rect>
<!-- end debug rectangle -->
</g>
<g transform="translate(-50,-50)">
<rect
ry=15
rx=15
width=100
height=100
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__site--selected-conflict' : item.selected ? 'NetworkUI__site--selected' : 'NetworkUI__site--remote-selected' : 'NetworkUI__site--background'}}">
</rect>
<g transform="scale(2)">
<path
class="NetworkUI__site--fill0"
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
C50,4.2,45.8,0,40.8,0z"/>
<path
class="NetworkUI__site--fill1"
d="M38.5,30.5v5c0,2.8-2.2,5-5,5h-17c-2.8,0-5-2.2-5-5v-5"/>
<rect
x="24"
y="32.1"
class="NetworkUI__site--fill2"
width="2"
height="8"/>
<path
class="NetworkUI__site--fill2"
d="M26,34.5h-2c-2.8,0-5-2.2-5-5v-17c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v17C31,32.2,28.7,34.5,26,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="25" cy="28.9" r="2.5"/>
<path
class="NetworkUI__site--fill2"
d="M39.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C44.5,32.2,42.2,34.5,39.5,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="38.5" cy="28.9" r="2.5"/>
<path
class="NetworkUI__site--fill2"
d="M12.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C17.5,32.2,15.2,34.5,12.5,34.5z"/>
<circle
class="NetworkUI__site--fill0"
cx="11.5" cy="28.9" r="2.5"/>
</g>
</g>
<g ng-if="current_scale <= 0.1 && item.type == 'site'">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__site-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
x="0"
y="70"> {{item.name}}
</text>
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>

8
awx/ui/client/src/network-ui/status.light.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/status_light.partial.svg');
function statusLight () {
return { restrict: 'A', templateUrl};
}
exports.statusLight = statusLight;

11
awx/ui/client/src/network-ui/status_light.partial.svg
View File

@@ -1,11 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="item.working">
<path ng-attr-transform="translate({{-item.width}}, {{-item.height}}) rotate({{frame/3}})" class="NetworkUI__status-path" ng-attr-d="{{item.describeArc(0, 0, 10, 0, 270)}}"/>
</g>
<g ng-if="!item.working">
<circle ng-attr-cx="{{-item.width}}"
ng-attr-cy="{{-item.height}}"
r=10
ng-attr-class="{{item.status === null ? 'NetworkUI--hidden' : item.status ? 'NetworkUI__status--pass': 'NetworkUI__status--fail'}}">
</circle>
</g>

8
awx/ui/client/src/network-ui/stream.directive.js
View File

@@ -1,8 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
const templateUrl = require('~network-ui/stream.partial.svg');
function stream () {
return { restrict: 'A', templateUrl};
}
exports.stream = stream;

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

@@ -1,116 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var models = require('./models.js');
var messages = require('./messages.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 _Connected () {
this.name = 'Connected';
}
inherits(_Connected, _State);
var Connected = new _Connected();
exports.Connected = Connected;
function _Connecting () {
this.name = 'Connecting';
}
inherits(_Connecting, _State);
var Connecting = new _Connecting();
exports.Connecting = Connecting;
function _Selecting () {
this.name = 'Selecting';
}
inherits(_Selecting, _State);
var Selecting = new _Selecting();
exports.Selecting = Selecting;
_Ready.prototype.onNewStream = function (controller) {
controller.scope.clear_selections();
controller.changeState(Selecting);
};
_Ready.prototype.onNewStream.transitions = ['Selecting'];
_Start.prototype.start = function (controller) {
controller.changeState(Ready);
};
_Start.prototype.start.transitions = ['Ready'];
_Connected.prototype.start = function (controller) {
controller.scope.clear_selections();
controller.changeState(Ready);
};
_Connected.prototype.start.transitions = ['Ready'];
_Connecting.prototype.onMouseDown = function () {
};
_Connecting.prototype.onMouseUp = function (controller) {
var selected = controller.scope.select_items(false);
if (selected.last_selected_device !== null) {
controller.scope.new_stream.to_device = selected.last_selected_device;
controller.scope.send_control_message(new messages.StreamCreate(controller.scope.client_id,
controller.scope.new_stream.id,
controller.scope.new_stream.from_device.id,
controller.scope.new_stream.to_device.id,
''));
controller.scope.new_stream = null;
controller.scope.update_offsets();
controller.changeState(Connected);
} else {
var index = controller.scope.streams.indexOf(controller.scope.new_stream);
if (index !== -1) {
controller.scope.streams.splice(index, 1);
}
controller.scope.new_stream = null;
controller.changeState(Ready);
}
};
_Connecting.prototype.onMouseUp.transitions = ['Ready', 'Connected'];
_Selecting.prototype.onMouseDown = function () {
};
_Selecting.prototype.onMouseUp = function (controller) {
var selected = controller.scope.select_items(false);
if (selected.last_selected_device !== null) {
controller.scope.new_stream = new models.Stream(controller.scope.stream_id_seq(), selected.last_selected_device, null, '');
controller.scope.streams.push(controller.scope.new_stream);
controller.changeState(Connecting);
}
};
_Selecting.prototype.onMouseUp.transitions = ['Connecting'];

134
awx/ui/client/src/network-ui/stream.partial.svg
View File

@@ -1,134 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<!-- Straight line -->
<g ng-if="!debug.hidden">
<line ng-attr-x1="{{stream.from_device.x}}"
ng-attr-y1="{{stream.from_device.y}}"
ng-attr-x2="{{stream.to_device !== null ? stream.to_device.x : scaledX}}"
ng-attr-y2="{{stream.to_device !== null ? stream.to_device.y : scaledY}}"
class="NetworkUI--debug"></line>
</g>
<g ng-if="stream.to_device === null">
<line ng-attr-x1="{{stream.from_device.x}}"
ng-attr-y1="{{stream.from_device.y}}"
ng-attr-x2="{{stream.to_device !== null ? stream.to_device.x : scaledX}}"
ng-attr-y2="{{stream.to_device !== null ? stream.to_device.y : scaledY}}"
class="NetworkUI__stream"></line>
</g>
<!-- End Straight line -->
<!-- Large arc -->
<g ng-if="stream.to_device !== null">
<g ng-if="stream.to_device !== stream.from_device">
<g ng-attr-transform="translate({{stream.from_device.x}},
{{stream.from_device.y}})
rotate({{stream.slope()}})">
<circle ng-if="!debug.hidden"
ng-attr-cx="{{-stream.length()/2}}"
ng-attr-cy="{{-stream.arc_offset2()}}"
r=10
class="NetworkUI__circle-debug" ></circle>
<path class="NetworkUI__stream--selected" ng-if="stream.to_device !== null && stream.selected" ng-attr-d="M0 0 A {{stream.arc_r2()}} {{stream.arc_r2()}} 0 0 0 {{-stream.length()}} 0"></path>
<path class="NetworkUI__stream" ng-if="stream.to_device !== null" ng-attr-d="M0 0 A {{stream.arc_r2()}} {{stream.arc_r2()}} 0 0 0 {{-stream.length()}} 0"></path>
<line ng-if="!debug.hidden"
ng-attr-x1="{{-stream.length()/2}}"
y1=0
ng-attr-x2="{{-stream.length()/2}}"
ng-attr-y2="{{-stream.arc_offset2()}}"
class="NetworkUI--debug"></line>
<g ng-attr-transform="rotate({{stream.start_arc_angle()}})
translate(-{{stream.from_device.size}}, 0)">
<circle ng-if="!debug.hidden"
ng-attr-cx="0"
ng-attr-cy="0"
r=10
class="NetworkUI__circle-debug" ></circle>
</g>
<rect ng-if="!debug.hidden"
ng-attr-x="{{-stream.length()}}"
ng-attr-y="{{-stream.arc_offset2()}}"
ng-attr-width="{{stream.length()}}"
ng-attr-height="{{stream.arc_offset2()}}"
class="NetworkUI--debug"></rect>
</g>
</g>
</g>
<!-- End Large arc -->
<!-- Debug -->
<g ng-if="stream.to_device !== null">
<g ng-if="stream.to_device !== stream.from_device">
<g ng-if="!debug.hidden && current_scale > 0.5">
<line ng-if="stream.to_device !== null"
ng-attr-x1="{{stream.perpendicular(scaledX, scaledY).x2}}"
ng-attr-y1="{{stream.perpendicular(scaledX, scaledY).y2}}"
ng-attr-x2="{{scaledX}}"
ng-attr-y2="{{scaledY}}"
ng-attr-class="NetworkUI--debug" />
<g ng-attr-transform="translate({{stream.to_device.x}},
{{stream.to_device.y}})
rotate({{stream.slope()}})
translate({{stream.length()/2}}, 0)">
</g>
<g ng-attr-transform="translate({{stream.to_device.x}},
{{stream.to_device.y}})
rotate({{stream.slope()}})
translate({{stream.to_device.size}}, 0)">
<circle ng-attr-cx="0"
ng-attr-cy="0"
r=10
class="NetworkUI__circle-debug" ></circle>
</g>
<g ng-attr-transform="translate({{stream.from_device.x}},
{{stream.from_device.y}})
rotate({{stream.slope()}})
translate({{-stream.from_device.size}}, 0)">
<circle ng-attr-cx="0"
ng-attr-cy="0"
r=10
class="NetworkUI__circle-debug" ></circle>
</g>
</g>
</g>
</g>
<!-- End Debug -->
<!-- Arrow -->
<g ng-if="stream.to_device !== stream.from_device">
<g ng-if="stream.to_device !== null" ng-attr-transform="translate({{stream.to_device.x}},
{{stream.to_device.y}})
rotate({{stream.slope()}})
rotate({{-stream.end_arc_angle()}})
translate({{stream.to_device.size}}, 0)
rotate({{stream.end_arc_angle()}})
rotate(180)
rotate({{-stream.arc_angle_tan2()}})">
<line ng-if="!debug.hidden"
x1=0
y1=0
x2=-100
y2=0
class="NetworkUI--debug"></line>
<g transform="translate(-19, -9)">
<path ng-attr-transform="translate(-2, -3)" d="M0,0 L0,24 L24,12 z" class="{{stream.selected && 'NetworkUI__stream--arrow-selected' || 'NetworkUI--hidden'}}"/>
<path d="M0,0 L0,18 L18,9 z" class="NetworkUI__stream-arrow"/>
</g>
</g>
<!-- End Arrow -->
<!-- Text -->
<g ng-if="current_scale > 0.5 && stream.to_device !== null"
ng-attr-transform="translate({{stream.from_device.x}},
{{stream.from_device.y}})
rotate({{stream.slope()}})
translate({{-stream.length()/2}}, 0)
translate(0, {{-stream.arc_offset2()}})
translate(0, -5)
rotate({{stream.flip_text_rotate()}})
translate(0, {{stream.flip_text_offset()}})
">
<text ng-attr-class="{{stream.selected && ! stream.edit_label ? 'NetworkUI__stream-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
x="0"
y="0"> {{stream.label}}</text>
<text class="NetworkUI__stream-text" filter="url(#background)" text-anchor="middle" x="0" y="0">{{stream.label}}{{stream.edit_label?'_':''}}</text>
</g>
</g>
<!-- End Text -->

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

@@ -1,5 +1,4 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="item.icon || current_scale > 0.5 || !item.in_group">
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->
@@ -82,4 +81,3 @@
<text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>
</g>

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

@@ -1,153 +0,0 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var util = require('./util.js');
var messages = require('./messages.js');
var ReconnectingWebSocket = require('reconnectingwebsocket');
var TablesUIController = function($scope, $window, $location, $timeout) {
$window.scope = $scope;
$scope.disconnected = false;
$scope.topology_id = $location.search().topology_id || 0;
if (!$scope.disconnected) {
$scope.control_socket = new ReconnectingWebSocket("ws://" + window.location.host + "/network_ui/tables?topology_id=" + $scope.topology_id,
null,
{debug: false, reconnectInterval: 300});
} else {
$scope.control_socket = {
on_message: util.noop
};
}
$scope.client_id = 0;
$scope.message_id_seq = util.natural_numbers(0);
$scope.onClientId = function(data) {
$scope.client_id = data;
};
$scope.control_socket.onmessage = function(message) {
var type_data = JSON.parse(message.data);
var type = type_data[0];
var data = type_data[1];
$scope.handle_message(type, data);
$scope.$apply();
};
$scope.control_socket.onopen = function() {
//Ignore
};
// Call onopen directly if $scope.control_socket is already open
if ($scope.control_socket.readyState === WebSocket.OPEN) {
$scope.control_socket.onopen();
}
$scope.send_control_message = function (message) {
var i = 0;
message.sender = $scope.client_id;
message.message_id = $scope.message_id_seq();
if (message.constructor.name === "MultipleMessage") {
for (i=0; i < message.messages.length; i++) {
message.messages[i].message_id = $scope.message_id_seq();
}
}
var data = messages.serialize(message);
if (!$scope.disconnected) {
$scope.control_socket.send(data);
console.log("Sent message");
} else {
console.log(data);
}
};
$scope.handle_message = function(msg_type, message) {
var handler_name = 'on' + msg_type;
if (typeof(this[handler_name]) !== "undefined") {
this[handler_name](msg_type, message);
} else {
this.default_handler(msg_type, message);
}
};
$scope.default_handler = function(msg_type, message) {
console.log([msg_type, message]);
};
// End web socket
//
//
$scope.onid = function(msg_type, message) {
console.log(["Set client_id to" , message]);
$scope.client_id = message;
};
$scope.ontopology_id = function(msg_type, message) {
console.log(["Set topology_id to" , message]);
$scope.topology_id = message;
$location.search({topology_id: message});
};
$scope.onsheet = function(msg_type, message) {
console.log("Update sheet");
console.log(message);
$scope.data = message.data;
$scope.name = message.name;
$scope.sheets.push(message.name);
$scope.sheets_by_name[message.name] = message.data;
};
$scope.onTableCellEdit = function(msg_type, message) {
if (message.sender === $scope.client_id) {
return;
}
console.log(["Updating data", message.sheet, message.row, message.col, message.new_value]);
$scope.sheets_by_name[message.sheet][message.row][message.col].value = message.new_value;
$scope.$apply();
};
$scope.user = {
name: 'world'
};
$scope.data = [];
$scope.sheets = [];
$scope.sheets_by_name = {};
console.log("Tables UI started");
$scope.$on('$destroy', function () {
console.log("Tables UI stopping");
});
$scope.updateData = function (old_data, new_data, column_index, row_index, column_name, row_name) {
console.log(['updateData', $scope.name, old_data, new_data, column_index, row_index, column_name, row_name]);
$scope.send_control_message(new messages.TableCellEdit($scope.client_id,
$scope.name,
column_index,
row_index,
old_data,
new_data));
$timeout(function () {
var q = document.querySelectorAll("#" + $scope.name + "_" + column_index + "_" + (row_index + 1));
if (q.length > 0) {
q[0].click();
}
});
};
$scope.changeSheet = function(sheet) {
$scope.name = sheet;
$scope.data = $scope.sheets_by_name[sheet];
};
};
exports.TablesUIController = TablesUIController;
console.log("Tables UI loaded");

30
awx/ui/client/src/network-ui/tables_ui.partial.svg
View File

@@ -1,30 +0,0 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<div ng-controller="TablesUIController">
<ul class="nav nav-tabs">
<li ng-repeat="sheet in sheets" role="presentation" class="{{sheet === name ? 'active': ''}}"><a href ng-click="changeSheet(sheet)">{{sheet}}</a></li>
</ul>
<table class="table table-bordered">
<colgroup>
<col ng-repeat="column_header in data[0]" style="width:10%">
</colgroup>
<thead>
<tr>
<th>
</th>
<th ng-repeat="column_header in data[0]">
{{column_header.value}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(row_index, row) in data track by $index" ng-if="$index > 0">
<th>
{{row[0].value}}
</th>
<td ng-repeat="(column_index, cell) in row track by $index" ng-if="$index > 0" buttons="no" onbeforesave="updateData(cell.value, $data, column_index, row_index, data[0][column_index-1].value, row[0].value)" editable-text="cell.value" edit-disabled="{{!cell.editable}}" ng-attr-id="{{name + '_' + column_index + '_' + row_index}}">
{{cell.value}}
</td>
</tr>
</tbody>
</table>
</div>

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

@@ -1,7 +1,6 @@
/* Copyright (c) 2017 Red Hat, Inc. */
var inherits = require('inherits');
var fsm = require('./fsm.js');
var messages = require('./messages.js');
var util = require('./util.js');
var models = require('./models.js');
@@ -9,13 +8,6 @@ function _State () {
}
inherits(_State, fsm._State);
function _Past () {
this.name = 'Past';
}
inherits(_Past, _State);
var Past = new _Past();
exports.Past = Past;
function _Start () {
this.name = 'Start';
}
@@ -30,211 +22,6 @@ inherits(_Present, _State);
var Present = new _Present();
exports.Present = Present;
_Past.prototype.start = function (controller) {
controller.scope.time_pointer = controller.scope.history.length - 1;
};
_Past.prototype.onMessage = function(controller, msg_type, message) {
var type_data = JSON.parse(message.data);
var type = type_data[0];
var data = type_data[1];
if (['DeviceCreate',
'DeviceDestroy',
'DeviceMove',
'DeviceLabelEdit',
'GroupLabelEdit',
'GroupCreate',
'LinkLabelEdit',
'InterfaceLabelEdit',
'InterfaceCreate',
'LinkCreate',
'LinkDestroy'].indexOf(type) !== -1) {
controller.changeState(Present);
controller.scope.history.splice(controller.scope.time_pointer);
if (data.sender !== controller.scope.client_id) {
controller.handle_message(msg_type, message);
} else {
controller.scope.history.push(message.data);
}
} else {
controller.handle_message(type, data);
}
};
_Past.prototype.onMultipleMessage = function(controller, msg_type, message) {
var i = 0;
if (message.sender !== controller.scope.client_id) {
for (i=0; i< message.messages.length; i++) {
controller.handle_message(message.messages[i].msg_type, message.messages[i]);
}
}
};
_Past.prototype.onDeviceSelected = function(controller, msg_type, message) {
if (message.sender !== controller.scope.client_id) {
controller.scope.onDeviceSelected(message);
}
};
_Past.prototype.onDeviceUnSelected = function(controller, msg_type, message) {
if (message.sender !== controller.scope.client_id) {
controller.scope.onDeviceUnSelected(message);
}
};
_Past.prototype.onUndo = function(controller, msg_type, message) {
if (message.sender !== controller.scope.client_id) {
controller.scope.time_pointer = Math.max(0, controller.scope.time_pointer - 1);
controller.scope.undo(message.original_message);
}
};
_Past.prototype.onRedo = function(controller, msg_type, message) {
if (message.sender !== controller.scope.client_id) {
controller.scope.time_pointer = Math.min(controller.scope.history.length, controller.scope.time_pointer + 1);
controller.scope.redo(message.original_message);
if (controller.scope.time_pointer === controller.scope.history.length) {
controller.changeState(Present);
}
}
};
_Past.prototype.onRedo.transitions = ['Present'];
_Past.prototype.onCoverageRequest = function(controller) {
controller.scope.send_coverage();
};
_Past.prototype.onStopRecording = function(controller) {
controller.scope.recording = false;
};
_Past.prototype.onStartReplay = function(controller) {
controller.scope.replay = true;
};
_Past.prototype.onStopReplay = function(controller) {
controller.scope.replay = false;
};
_Past.prototype.onViewPort = function(controller, msg_type, message) {
if (message.sender === controller.scope.client_id) {
return;
}
controller.scope.current_scale = message.scale;
controller.scope.panX = message.panX;
controller.scope.panY = message.panY;
controller.scope.updateScaledXY();
controller.scope.updatePanAndScale();
};
_Past.prototype.onMouseEvent = function(controller, msg_type, message) {
if (message.sender === controller.scope.client_id) {
return;
}
message.preventDefault = util.noop;
if (message.type === "mousemove") {
controller.scope.onMouseMove(message);
}
if (message.type === "mouseup") {
controller.scope.onMouseUp(message);
}
if (message.type === "mousedown") {
controller.scope.onMouseDown(message);
}
if (message.type === "mouseover") {
controller.scope.onMouseOver(message);
}
if (message.type === "mouseout") {
controller.scope.onMouseOver(message);
}
};
_Past.prototype.onMouseWheelEvent = function(controller, msg_type, message) {
if (message.sender === controller.scope.client_id) {
return;
}
message.preventDefault = util.noop;
message.stopPropagation = util.noop;
controller.scope.onMouseWheel(message, message.delta, message.deltaX, message.deltaY);
};
_Past.prototype.onKeyEvent = function(controller, msg_type, message) {
if (message.sender === controller.scope.client_id) {
return;
}
message.preventDefault = util.noop;
if (message.type === "keydown") {
controller.scope.onKeyDown(message);
}
};
_Past.prototype.onMouseWheel = function (controller, msg_type, message) {
var $event = message[0];
var delta = message[1];
if ($event.originalEvent.metaKey) {
if (delta < 0) {
this.undo(controller);
} else if (delta > 0) {
this.redo(controller);
}
} else {
controller.delegate_channel.send(msg_type, message);
}
};
_Past.prototype.onMouseWheel.transitions = ['Present'];
_Past.prototype.onKeyDown = function(controller, msg_type, $event) {
if ($event.key === 'z' && $event.metaKey && ! $event.shiftKey) {
this.undo(controller);
return;
} else if ($event.key === 'z' && $event.ctrlKey && ! $event.shiftKey) {
this.undo(controller);
return;
} else if ($event.key === 'Z' && $event.metaKey && $event.shiftKey) {
this.redo(controller);
return;
} else if ($event.key === 'Z' && $event.ctrlKey && $event.shiftKey) {
this.redo(controller);
return;
} else {
controller.delegate_channel.send(msg_type, $event);
}
};
_Past.prototype.onKeyDown.transitions = ['Present'];
_Past.prototype.undo = function(controller) {
//controller.changeState(Past);
controller.scope.time_pointer = Math.max(0, controller.scope.time_pointer - 1);
if (controller.scope.time_pointer >= 0) {
var change = controller.scope.history[controller.scope.time_pointer];
var type_data = JSON.parse(change);
controller.scope.send_control_message(new messages.Undo(controller.scope.client_id,
type_data));
controller.scope.undo(type_data);
}
};
_Past.prototype.redo = function(controller) {
if (controller.scope.time_pointer < controller.scope.history.length) {
var change = controller.scope.history[controller.scope.time_pointer];
var type_data = JSON.parse(change);
controller.scope.send_control_message(new messages.Redo(controller.scope.client_id,
type_data));
controller.scope.redo(type_data);
controller.scope.time_pointer = Math.min(controller.scope.history.length, controller.scope.time_pointer + 1);
if (controller.scope.time_pointer === controller.scope.history.length) {
controller.changeState(Present);
}
} else {
controller.changeState(Present);
}
};
_Start.prototype.start = function (controller) {
controller.changeState(Present);
@@ -350,14 +137,6 @@ _Present.prototype.onDeviceUnSelected = function(controller, msg_type, message)
controller.scope.onDeviceUnSelected(message);
}
};
_Present.prototype.onUndo = function(controller, msg_type, message) {
if (message.sender !== controller.scope.client_id) {
controller.scope.time_pointer = Math.max(0, controller.scope.time_pointer - 1);
controller.scope.undo(message.original_message);
controller.changeState(Past);
}
};
_Present.prototype.onUndo.transitions = ['Past'];
_Present.prototype.onSnapshot = function(controller, msg_type, message) {
if (message.sender !== controller.scope.client_id) {
controller.scope.onSnapshot(message);
@@ -445,52 +224,6 @@ _Present.prototype.onMouseWheelEvent = function(controller, msg_type, message) {
}
};
_Present.prototype.onMouseWheel = function (controller, msg_type, message) {
var $event = message[0];
var delta = message[1];
if ($event.originalEvent.metaKey) {
if (delta < 0) {
this.undo(controller);
}
} else {
controller.delegate_channel.send(msg_type, message);
}
};
_Present.prototype.onMouseWheel.transitions = ['Past'];
_Present.prototype.onKeyDown = function(controller, msg_type, $event) {
if ($event.key === 'z' && $event.metaKey && ! $event.shiftKey) {
this.undo(controller);
return;
} else if ($event.key === 'z' && $event.ctrlKey && ! $event.shiftKey) {
this.undo(controller);
return;
} else {
controller.delegate_channel.send(msg_type, $event);
}
};
_Present.prototype.onKeyDown.transitions = ['Past'];
_Present.prototype.undo = function(controller) {
controller.scope.time_pointer = controller.scope.history.length - 1;
if (controller.scope.time_pointer >= 0) {
var change = controller.scope.history[controller.scope.time_pointer];
var type_data = JSON.parse(change);
controller.scope.send_control_message(new messages.Undo(controller.scope.client_id,
type_data));
controller.scope.undo(type_data);
controller.changeState(Past);
}
};
_Present.prototype.onTestCase = function(controller, msg_type, message) {
if ('runnable' in message[1]) {
if (!message[1].runnable) {

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

@@ -4,24 +4,5 @@ var angular = require('angular');
var tower = angular.module('tower', ['networkUI', 'ui.router']);
tower.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state({
name: 'index',
url: '/index',
template: '<ul><li><a href="#!/topology">Topology</a></li><li><a href="#!/tables">Tables</a></li></ul>'
});
$stateProvider
.state({
name: 'topology',
url: '/topology',
template: "<awx-network-ui></awx-network-ui>"
});
});
exports.tower = tower;

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

@@ -73,7 +73,9 @@ _Start.prototype.start.transitions = ['Ready'];
_Scale.prototype.onMouseWheel = function (controller, msg_type, message) {
var delta = message[1];
var new_scale = Math.max(0.001, Math.min(100, (controller.scope.current_scale + delta / (100 / controller.scope.current_scale))));
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))));
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();