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

Adds streams and processes for application design

Browse Source 
Adds application level streams and process widgets to
model applications that run on networking devices or hosts.

* Changes Application to Process
* Adds StreamCreate and ProcessCreate messages
* Adds process id sequence to device
* Add serializers for streams and processes
This commit is contained in:
Ben Thomasson
2017-08-21 20:38:33 +00:00
parent d153d5f907
commit c79ef60d8b
17 changed files with 364 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/network_ui/admin.py
View File

@@ -30,7 +30,7 @@ from awx.network_ui.models import Process
class DeviceAdmin(admin.ModelAdmin): class DeviceAdmin(admin.ModelAdmin):
fields = ('topology', 'name', 'x', 'y', 'id', 'type', 'interface_id_seq',) fields = ('topology', 'name', 'x', 'y', 'id', 'type', 'interface_id_seq', 'process_id_seq',)
raw_id_fields = ('topology',) raw_id_fields = ('topology',)
@@ -127,7 +127,7 @@ admin.site.register(DataSheet, DataSheetAdmin)
class StreamAdmin(admin.ModelAdmin): class StreamAdmin(admin.ModelAdmin):
fields = ('from_device', 'to_device', 'label', 'id',) fields = ('from_device', 'to_device', 'label', 'id',)
raw_id_fields = ('stream_id', 'from_device', 'to_device', 'label',) raw_id_fields = ('stream_id', 'from_device', 'to_device',)
admin.site.register(Stream, StreamAdmin) admin.site.register(Stream, StreamAdmin)

44
awx/network_ui/consumers.py
View File

@@ -5,6 +5,7 @@ from awx.network_ui.models import Topology, Device, Link, Client, TopologyHistor
from awx.network_ui.models import Group as DeviceGroup from awx.network_ui.models import Group as DeviceGroup
from awx.network_ui.models import GroupDevice as GroupDeviceMap from awx.network_ui.models import GroupDevice as GroupDeviceMap
from awx.network_ui.models import DataSheet, DataBinding, DataType from awx.network_ui.models import DataSheet, DataBinding, DataType
from awx.network_ui.models import Process, Stream
from awx.network_ui.serializers import yaml_serialize_topology from awx.network_ui.serializers import yaml_serialize_topology
import urlparse import urlparse
from django.db.models import Q from django.db.models import Q
@@ -366,6 +367,29 @@ class _Persistence(object):
to_interface_id=Interface.objects.get(device_id=device_map[link['to_device_id']], to_interface_id=Interface.objects.get(device_id=device_map[link['to_device_id']],
id=link['to_interface_id']).pk).delete() id=link['to_interface_id']).pk).delete()
def onProcessCreate(self, process, topology_id, client_id):
Process.objects.get_or_create(device_id=Device.objects.get(id=process['device_id'],
topology_id=topology_id).pk,
id=process['id'],
defaults=dict(name=process['name'], type=process['type']))
(Device.objects
.filter(id=process['device_id'],
topology_id=topology_id,
interface_id_seq__lt=process['id'])
.update(interface_id_seq=process['id']))
def onStreamCreate(self, stream, topology_id, client_id):
device_map = dict(Device.objects
.filter(topology_id=topology_id, id__in=[stream['from_id'], stream['to_id']])
.values_list('id', 'pk'))
Stream.objects.get_or_create(id=stream['id'],
label=stream['label'],
from_device_id=device_map[stream['from_id']],
to_device_id=device_map[stream['to_id']])
(Topology.objects
.filter(topology_id=topology_id, stream_id_seq__lt=stream['id'])
.update(stream_id_seq=stream['id']))
def onDeviceSelected(self, message_value, topology_id, client_id): def onDeviceSelected(self, message_value, topology_id, client_id):
'Ignore DeviceSelected messages' 'Ignore DeviceSelected messages'
pass pass
@@ -755,15 +779,21 @@ def ws_connect(message):
def send_snapshot(channel, topology_id): def send_snapshot(channel, topology_id):
interfaces = defaultdict(list) interfaces = defaultdict(list)
processes = defaultdict(list)
for i in (Interface.objects for i in (Interface.objects
.filter(device__topology_id=topology_id) .filter(device__topology_id=topology_id)
.values()): .values()):
interfaces[i['device_id']].append(i) interfaces[i['device_id']].append(i)
for i in (Process.objects
.filter(device__topology_id=topology_id)
.values()):
processes[i['device_id']].append(i)
devices = list(Device.objects devices = list(Device.objects
.filter(topology_id=topology_id).values()) .filter(topology_id=topology_id).values())
for device in devices: for device in devices:
device['interfaces'] = interfaces[device['device_id']] device['interfaces'] = interfaces[device['device_id']]
device['processes'] = processes[device['device_id']]
links = [dict(id=x['id'], links = [dict(id=x['id'],
name=x['name'], name=x['name'],
@@ -789,10 +819,22 @@ def send_snapshot(channel, topology_id):
else: else:
group_map[group_id]['members'].append(device_id) group_map[group_id]['members'].append(device_id)
streams = [dict(id=x['id'],
label=x['label'],
from_id=x['from_device__id'],
to_id=x['to_device__id'])
for x in list(Stream.objects
.filter(Q(from_device__topology_id=topology_id) |
Q(to_device__topology_id=topology_id)).values('id',
'label',
'from_device__id',
'to_device__id'))]
snapshot = dict(sender=0, snapshot = dict(sender=0,
devices=devices, devices=devices,
links=links, links=links,
groups=groups) groups=groups,
streams=streams)
channel.send({"text": json.dumps(["Snapshot", snapshot])}) channel.send({"text": json.dumps(["Snapshot", snapshot])})

13
awx/network_ui/designs/models.yml
View File

@@ -25,6 +25,9 @@ models:
- default: 0 - default: 0
name: interface_id_seq name: interface_id_seq
type: IntegerField type: IntegerField
- default: 0
name: process_id_seq
type: IntegerField
name: Device name: Device
x: 348 x: 348
y: 124 y: 124
@@ -256,19 +259,17 @@ models:
ref_field: stream_id ref_field: stream_id
type: AutoField type: AutoField
- name: from_device - name: from_device
ref: Stream ref: Device
ref_field: from_device ref_field: device_id
related_name: from_stream related_name: from_stream
type: ForeignKey type: ForeignKey
- name: to_device - name: to_device
ref: Stream ref: Device
ref_field: to_device ref_field: device_id
related_name: to_stream related_name: to_stream
type: ForeignKey type: ForeignKey
- len: 200 - len: 200
name: label name: label
ref: Stream
ref_field: label
type: CharField type: CharField
- default: 0 - default: 0
name: id name: id

29
awx/network_ui/migrations/0019_auto_20170822_1723.py Normal file
View File

@@ -0,0 +1,29 @@
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('network_ui', '0018_auto_20170821_1557'),
]
operations = [
migrations.AlterField(
model_name='stream',
name='from_device',
field=models.ForeignKey(related_name='from_stream', to='network_ui.Device'),
),
migrations.AlterField(
model_name='stream',
name='label',
field=models.CharField(max_length=200),
),
migrations.AlterField(
model_name='stream',
name='to_device',
field=models.ForeignKey(related_name='to_stream', to='network_ui.Device'),
),
]

19
awx/network_ui/migrations/0020_device_process_id_seq.py Normal file
View File

@@ -0,0 +1,19 @@
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('network_ui', '0019_auto_20170822_1723'),
]
operations = [
migrations.AddField(
model_name='device',
name='process_id_seq',
field=models.IntegerField(default=0),
),
]

7
awx/network_ui/models.py
View File

@@ -11,6 +11,7 @@ class Device(models.Model):
id = models.IntegerField() id = models.IntegerField()
type = models.CharField(max_length=200,) type = models.CharField(max_length=200,)
interface_id_seq = models.IntegerField(default=0) interface_id_seq = models.IntegerField(default=0)
process_id_seq = models.IntegerField(default=0)
def __unicode__(self): def __unicode__(self):
return self.name return self.name
@@ -128,9 +129,9 @@ class DataSheet(models.Model):
class Stream(models.Model): class Stream(models.Model):
stream_id = models.AutoField('Stream', primary_key=True,) stream_id = models.AutoField('Stream', primary_key=True,)
from_device = models.ForeignKey('Stream', related_name='from_stream',) from_device = models.ForeignKey('Device', related_name='from_stream',)
to_device = models.ForeignKey('Stream', related_name='to_stream',) to_device = models.ForeignKey('Device', related_name='to_stream',)
label = models.CharField('Stream', max_length=200,) label = models.CharField(max_length=200,)
id = models.IntegerField(default=0) id = models.IntegerField(default=0)

20
awx/network_ui/serializers.py
View File

@@ -1,5 +1,5 @@
from awx.network_ui.models import Topology, Device, Link, Interface, Group, GroupDevice from awx.network_ui.models import Topology, Device, Link, Interface, Group, GroupDevice, Process, Stream
from django.db.models import Q from django.db.models import Q
import yaml import yaml
import json import json
@@ -19,7 +19,8 @@ def topology_data(topology_id):
data = dict(devices=[], data = dict(devices=[],
links=[], links=[],
groups=[]) groups=[],
streams=[])
topology = Topology.objects.get(pk=topology_id) topology = Topology.objects.get(pk=topology_id)
@@ -46,6 +47,7 @@ def topology_data(topology_id):
Q(to_device__topology_id=topology_id))) Q(to_device__topology_id=topology_id)))
interfaces = Interface.objects.filter(device__topology_id=topology_id) interfaces = Interface.objects.filter(device__topology_id=topology_id)
processes = Process.objects.filter(device__topology_id=topology_id)
for device in Device.objects.filter(topology_id=topology_id).order_by('name'): for device in Device.objects.filter(topology_id=topology_id).order_by('name'):
interfaces = list(NetworkAnnotatedInterface.filter(device_id=device.pk).order_by('name')) interfaces = list(NetworkAnnotatedInterface.filter(device_id=device.pk).order_by('name'))
@@ -55,12 +57,14 @@ def topology_data(topology_id):
remote_interface_name=x['from_link__to_interface__name'] or x['to_link__from_interface__name'], remote_interface_name=x['from_link__to_interface__name'] or x['to_link__from_interface__name'],
id=x['id'], id=x['id'],
) for x in interfaces] ) for x in interfaces]
processes = list(Process.objects.filter(device_id=device.pk).values())
data['devices'].append(dict(name=device.name, data['devices'].append(dict(name=device.name,
type=device.type, type=device.type,
x=device.x, x=device.x,
y=device.y, y=device.y,
id=device.id, id=device.id,
interfaces=interfaces, interfaces=interfaces,
processes=processes,
groups=[x['group__name'] for x in device_group_map[device.device_id]])) groups=[x['group__name'] for x in device_group_map[device.device_id]]))
for link in links: for link in links:
@@ -75,6 +79,18 @@ def topology_data(topology_id):
name=link.name, name=link.name,
network=link.pk)) network=link.pk))
streams = list(Stream.objects
.filter(Q(from_device__topology_id=topology_id) |
Q(to_device__topology_id=topology_id)))
for stream in streams:
data['streams'].append(dict(from_id=stream.from_device.id,
to_id=stream.to_device.id,
from_device=stream.from_device.name,
to_device=stream.to_device.name,
label=stream.label,
id=stream.id))
return data return data

20
awx/network_ui/static/network_ui/src/device.detail.fsm.js
View File

@@ -1,6 +1,7 @@
var inherits = require('inherits'); var inherits = require('inherits');
var fsm = require('./fsm.js'); var fsm = require('./fsm.js');
var models = require('./models.js'); var models = require('./models.js');
var messages = require('./messages.js');
function _State () { function _State () {
} }
@@ -57,13 +58,20 @@ _Ready.prototype.onPasteProcess = function (controller, msg_type, message) {
if (device.is_selected(x, y)) { if (device.is_selected(x, y)) {
console.log(device); console.log(device);
app = new models.Application(device.process_id_seq(), app = new models.Process(device.process_id_seq(),
message.process.name, message.process.name,
message.process.type, message.process.type,
controller.scope.scaledX, controller.scope.scaledX,
controller.scope.scaledY); controller.scope.scaledY);
app.device = device;
device.processes.push(app); device.processes.push(app);
console.log(device.processes); 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; break;
} else { } else {
console.log([x,y, device.x, device.y]); console.log([x,y, device.x, device.y]);

11
awx/network_ui/static/network_ui/src/messages.js
View File

@@ -362,6 +362,17 @@ function TableCellEdit(sender, sheet, col, row, old_value, new_value) {
} }
exports.TableCellEdit = TableCellEdit; exports.TableCellEdit = TableCellEdit;
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) { function StreamCreate(sender, id, from_id, to_id, label) {
this.msg_type = "StreamCreate"; this.msg_type = "StreamCreate";
this.sender = sender; this.sender = sender;

5
awx/network_ui/static/network_ui/src/models.js
View File

@@ -596,7 +596,7 @@ function Configuration(id, name, type, x, y, content) {
} }
exports.Configuration = Configuration; exports.Configuration = Configuration;
function Application(id, name, type, x, y) { function Process(id, name, type, x, y) {
this.id = id; this.id = id;
this.name = name; this.name = name;
this.type = type; this.type = type;
@@ -608,8 +608,9 @@ function Application(id, name, type, x, y) {
this.selected = null; this.selected = null;
this.enabled = true; this.enabled = true;
this.icon = false; this.icon = false;
this.device = null;
} }
exports.Application = Application; exports.Process = Process;
function Stream(id, from_device, to_device, label) { function Stream(id, from_device, to_device, label) {
this.id = id; this.id = id;

34
awx/network_ui/static/network_ui/src/move.js
View File

@@ -149,6 +149,7 @@ _Ready.prototype.onPasteDevice = function (controller, msg_type, message) {
var intf = null; var intf = null;
var process = null; var process = null;
var i = 0; var i = 0;
var c_messages = [];
scope.pressedX = scope.mouseX; scope.pressedX = scope.mouseX;
scope.pressedY = scope.mouseY; scope.pressedY = scope.mouseY;
@@ -161,24 +162,37 @@ _Ready.prototype.onPasteDevice = function (controller, msg_type, message) {
scope.scaledY, scope.scaledY,
message.device.type); message.device.type);
scope.devices.push(device); scope.devices.push(device);
scope.send_control_message(new messages.DeviceCreate(scope.client_id, c_messages.push(new messages.DeviceCreate(scope.client_id,
device.id, device.id,
device.x, device.x,
device.y, device.y,
device.name, device.name,
device.type)); device.type));
for (i=0; i < message.device.interfaces.length; i++) { for (i=0; i < message.device.interfaces.length; i++) {
intf = new models.Interface(message.device.interfaces[i].id, message.device.interfaces[i].name); intf = new models.Interface(message.device.interfaces[i].id, message.device.interfaces[i].name);
device.interfaces.push(intf); device.interfaces.push(intf);
c_messages.push(new messages.InterfaceCreate(controller.scope.client_id,
device.id,
intf.id,
intf.name));
} }
for (i=0; i < message.device.processes.length; i++) { for (i=0; i < message.device.processes.length; i++) {
process = new models.Application(message.device.processes[i].id, process = new models.Process(message.device.processes[i].id,
message.device.processes[i].name, message.device.processes[i].name,
message.device.processes[i].type, 0, 0); message.device.processes[i].type, 0, 0);
process.device = device;
c_messages.push(new messages.ProcessCreate(controller.scope.client_id,
process.id,
process.name,
process.type,
process.device.id,
process.x,
process.y));
device.processes.push(process); device.processes.push(process);
} }
scope.selected_devices.push(device); scope.selected_devices.push(device);
device.selected = true; device.selected = true;
scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
controller.changeState(Selected2); controller.changeState(Selected2);
}; };
_Ready.prototype.onPasteDevice.transitions = ['Selected2']; _Ready.prototype.onPasteDevice.transitions = ['Selected2'];
@@ -229,7 +243,7 @@ _Selected2.prototype.onCopySelected = function (controller) {
device_copy = new models.Device(0, devices[i].name, 0, 0, devices[i].type); device_copy = new models.Device(0, devices[i].name, 0, 0, devices[i].type);
device_copy.icon = true; device_copy.icon = true;
for(j=0; j < devices[i].processes.length; j++) { for(j=0; j < devices[i].processes.length; j++) {
process_copy = new models.Application(0, devices[i].processes[j].name, devices[i].processes[j].name, 0, 0); process_copy = new models.Process(0, devices[i].processes[j].name, devices[i].processes[j].name, 0, 0);
device_copy.processes.push(process_copy); device_copy.processes.push(process_copy);
} }
for(j=0; j < devices[i].interfaces.length; j++) { for(j=0; j < devices[i].interfaces.length; j++) {

67
awx/network_ui/static/network_ui/src/network.ui.controller.js
View File

@@ -26,7 +26,7 @@ var NetworkUIController = function($scope, $document, $location, $window) {
var i = 0; var i = 0;
$scope.api_token = ''; $scope.api_token = '';
$scope.disconnected = true; $scope.disconnected = false;
$scope.topology_id = $location.search().topology_id || 0; $scope.topology_id = $location.search().topology_id || 0;
// Create a web socket to connect to the backend server // Create a web socket to connect to the backend server
@@ -50,7 +50,6 @@ var NetworkUIController = function($scope, $document, $location, $window) {
$scope.onMouseMoveResult = ""; $scope.onMouseMoveResult = "";
$scope.current_scale = 1.0; $scope.current_scale = 1.0;
$scope.current_mode = null; $scope.current_mode = null;
$scope.current_location = ["Earth", "Site1", "Spine1", "Eth1"];
$scope.panX = 0; $scope.panX = 0;
$scope.panY = 0; $scope.panY = 0;
$scope.mouseX = 0; $scope.mouseX = 0;
@@ -96,7 +95,6 @@ var NetworkUIController = function($scope, $document, $location, $window) {
$scope.touch_data = {}; $scope.touch_data = {};
$scope.touches = []; $scope.touches = [];
$scope.devices = []; $scope.devices = [];
$scope.stencils = [];
$scope.links = []; $scope.links = [];
$scope.groups = []; $scope.groups = [];
$scope.processes = []; $scope.processes = [];
@@ -121,17 +119,17 @@ var NetworkUIController = function($scope, $document, $location, $window) {
$scope.time_controller = new fsm.FSMController($scope, time.Start, $scope.buttons_controller); $scope.time_controller = new fsm.FSMController($scope, time.Start, $scope.buttons_controller);
$scope.app_toolbox_controller = new fsm.FSMController($scope, toolbox_fsm.Start, $scope.time_controller); $scope.app_toolbox_controller = new fsm.FSMController($scope, toolbox_fsm.Start, $scope.time_controller);
//App Toolbox Setup //App Toolbox Setup
$scope.app_toolbox = new models.ToolBox(0, 'Application', 'app', 10, 200, 150, $scope.graph.height - 200 - 100); $scope.app_toolbox = new models.ToolBox(0, 'Process', 'app', 10, 200, 150, $scope.graph.height - 200 - 100);
$scope.app_toolbox.spacing = 150; $scope.app_toolbox.spacing = 150;
$scope.app_toolbox.enabled = false; $scope.app_toolbox.enabled = false;
$scope.app_toolbox_controller.toolbox = $scope.app_toolbox; $scope.app_toolbox_controller.toolbox = $scope.app_toolbox;
$scope.app_toolbox_controller.dropped_action = function (selected_item) { $scope.app_toolbox_controller.dropped_action = function (selected_item) {
$scope.first_controller.handle_message("PasteProcess", new messages.PasteProcess(selected_item)); $scope.first_controller.handle_message("PasteProcess", new messages.PasteProcess(selected_item));
}; };
$scope.app_toolbox.items.push(new models.Application(0, 'BGP', 'process', 0, 0)); $scope.app_toolbox.items.push(new models.Process(0, 'BGP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Application(0, 'OSPF', 'process', 0, 0)); $scope.app_toolbox.items.push(new models.Process(0, 'OSPF', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Application(0, 'STP', 'process', 0, 0)); $scope.app_toolbox.items.push(new models.Process(0, 'STP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Application(0, 'Zero Pipeline', '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++) { for(i = 0; i < $scope.app_toolbox.items.length; i++) {
$scope.app_toolbox.items[i].icon = true; $scope.app_toolbox.items[i].icon = true;
@@ -614,23 +612,9 @@ var NetworkUIController = function($scope, $document, $location, $window) {
true) true)
]; ];
var STENCIL_X = 10;
var STENCIL_Y = 100;
var STENCIL_SPACING = 40;
$scope.stencils = [
new models.Button("Switch", STENCIL_X, STENCIL_Y + STENCIL_SPACING * 0, 70, 30, function () {$scope.first_controller.handle_message("NewDevice", new messages.NewDevice("switch"));}),
new models.Button("Router", STENCIL_X, STENCIL_Y + STENCIL_SPACING * 1, 70, 30, function () {$scope.first_controller.handle_message("NewDevice", new messages.NewDevice("router"));}),
new models.Button("Host", STENCIL_X, STENCIL_Y + STENCIL_SPACING * 2, 70, 30, function () {$scope.first_controller.handle_message("NewDevice", new messages.NewDevice("host"));}),
new models.Button("Link", STENCIL_X, STENCIL_Y + STENCIL_SPACING * 3, 70, 30, function () { $scope.first_controller.handle_message("NewLink");}),
new models.Button("Group", STENCIL_X, STENCIL_Y + STENCIL_SPACING * 4, 70, 30, function () { $scope.first_controller.handle_message("NewGroup", new messages.NewGroup("group"));}),
new models.Button("Site", STENCIL_X, STENCIL_Y + STENCIL_SPACING * 5, 70, 30, function () { $scope.first_controller.handle_message("NewGroup", new messages.NewGroup("site"));}),
];
$scope.all_buttons = []; $scope.all_buttons = [];
$scope.all_buttons.extend($scope.buttons); $scope.all_buttons.extend($scope.buttons);
$scope.all_buttons.extend($scope.layers); $scope.all_buttons.extend($scope.layers);
$scope.all_buttons.extend($scope.stencils);
$scope.onTaskStatus = function(data) { $scope.onTaskStatus = function(data) {
var i = 0; var i = 0;
@@ -1140,12 +1124,16 @@ var NetworkUIController = function($scope, $document, $location, $window) {
var max_device_id = null; var max_device_id = null;
var max_link_id = null; var max_link_id = null;
var max_group_id = null; var max_group_id = null;
var max_stream_id = null;
var min_x = null; var min_x = null;
var min_y = null; var min_y = null;
var max_x = null; var max_x = null;
var max_y = null; var max_y = null;
var new_link = null; var new_link = null;
var new_group = null; var new_group = null;
var process = null;
var new_process = null;
var new_stream = null;
//Build the devices //Build the devices
for (i = 0; i < data.devices.length; i++) { for (i = 0; i < data.devices.length; i++) {
@@ -1171,9 +1159,20 @@ var NetworkUIController = function($scope, $document, $location, $window) {
device.y, device.y,
device.type); device.type);
new_device.interface_seq = util.natural_numbers(device.interface_id_seq); new_device.interface_seq = util.natural_numbers(device.interface_id_seq);
new_device.process_id_seq = util.natural_numbers(device.process_id_seq);
$scope.devices.push(new_device); $scope.devices.push(new_device);
device_map[device.id] = new_device; device_map[device.id] = new_device;
device_interface_map[device.id] = {}; device_interface_map[device.id] = {};
for (j = 0; j < device.processes.length; j++) {
process = device.processes[j];
new_process = (new models.Process(process.id,
process.name,
process.type,
0,
0));
new_process.device = new_device;
new_device.processes.push(new_process);
}
for (j = 0; j < device.interfaces.length; j++) { for (j = 0; j < device.interfaces.length; j++) {
intf = device.interfaces[j]; intf = device.interfaces[j];
new_intf = (new models.Interface(intf.id, new_intf = (new models.Interface(intf.id,
@@ -1202,6 +1201,20 @@ var NetworkUIController = function($scope, $document, $location, $window) {
device_interface_map[link.to_device_id][link.to_interface_id].link = new_link; device_interface_map[link.to_device_id][link.to_interface_id].link = new_link;
} }
//Build the streams
var stream = null;
for (i = 0; i < data.streams.length; i++) {
stream = data.streams[i];
if (max_stream_id === null || stream.id > max_stream_id) {
max_stream_id = stream.id;
}
new_stream = new models.Stream(stream.id,
device_map[stream.from_id],
device_map[stream.to_id],
stream.label);
$scope.streams.push(new_stream);
}
//Build the groups //Build the groups
var group = null; var group = null;
for (i = 0; i < data.groups.length; i++) { for (i = 0; i < data.groups.length; i++) {
@@ -1225,6 +1238,12 @@ var NetworkUIController = function($scope, $document, $location, $window) {
$scope.groups.push(new_group); $scope.groups.push(new_group);
} }
//Update group membership
for (i = 0; i < $scope.groups.length; i++) {
$scope.groups[i].update_membership($scope.devices, $scope.groups);
}
var diff_x; var diff_x;
var diff_y; var diff_y;
@@ -1256,6 +1275,10 @@ var NetworkUIController = function($scope, $document, $location, $window) {
if (max_link_id !== null) { if (max_link_id !== null) {
$scope.link_id_seq = util.natural_numbers(max_link_id); $scope.link_id_seq = util.natural_numbers(max_link_id);
} }
//Update the stream_id_seq to be greater than all stream ids to prevent duplicate ids.
if (max_stream_id !== null) {
$scope.stream_id_seq = util.natural_numbers(max_stream_id);
}
//Update the group_id_seq to be greater than all group ids to prevent duplicate ids. //Update the group_id_seq to be greater than all group ids to prevent duplicate ids.
if (max_group_id !== null) { if (max_group_id !== null) {
$scope.group_id_seq = util.natural_numbers(max_group_id); $scope.group_id_seq = util.natural_numbers(max_group_id);

11
awx/network_ui/static/network_ui/src/network.widgets.controller.js
View File

@@ -42,7 +42,6 @@ var NetworkWidgetsController = function($scope, $document, $location, $window) {
$scope.onMouseMoveResult = ""; $scope.onMouseMoveResult = "";
$scope.current_scale = 1.01; $scope.current_scale = 1.01;
$scope.current_mode = null; $scope.current_mode = null;
$scope.current_location = [];
$scope.panX = 100; $scope.panX = 100;
$scope.panY = 100; $scope.panY = 100;
$scope.mouseX = 0; $scope.mouseX = 0;
@@ -113,17 +112,17 @@ var NetworkWidgetsController = function($scope, $document, $location, $window) {
$scope.time_controller = new fsm.FSMController($scope, time.Start, $scope.buttons_controller); $scope.time_controller = new fsm.FSMController($scope, time.Start, $scope.buttons_controller);
$scope.app_toolbox_controller = new fsm.FSMController($scope, toolbox_fsm.Start, $scope.time_controller); $scope.app_toolbox_controller = new fsm.FSMController($scope, toolbox_fsm.Start, $scope.time_controller);
//App Toolbox Setup //App Toolbox Setup
$scope.app_toolbox = new models.ToolBox(0, 'Application', 'app', 10, 200, 150, $scope.graph.height - 200 - 100); $scope.app_toolbox = new models.ToolBox(0, 'Process', 'app', 10, 200, 150, $scope.graph.height - 200 - 100);
$scope.app_toolbox.spacing = 150; $scope.app_toolbox.spacing = 150;
$scope.app_toolbox.enabled = false; $scope.app_toolbox.enabled = false;
$scope.app_toolbox_controller.toolbox = $scope.app_toolbox; $scope.app_toolbox_controller.toolbox = $scope.app_toolbox;
$scope.app_toolbox_controller.dropped_action = function (selected_item) { $scope.app_toolbox_controller.dropped_action = function (selected_item) {
$scope.first_controller.handle_message("PasteProcess", new messages.PasteProcess(selected_item)); $scope.first_controller.handle_message("PasteProcess", new messages.PasteProcess(selected_item));
}; };
$scope.app_toolbox.items.push(new models.Application(0, 'BGP', 'process', 0, 0)); $scope.app_toolbox.items.push(new models.Process(0, 'BGP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Application(0, 'OSPF', 'process', 0, 0)); $scope.app_toolbox.items.push(new models.Process(0, 'OSPF', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Application(0, 'STP', 'process', 0, 0)); $scope.app_toolbox.items.push(new models.Process(0, 'STP', 'process', 0, 0));
$scope.app_toolbox.items.push(new models.Application(0, 'Zero Pipeline', '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++) { for(i = 0; i < $scope.app_toolbox.items.length; i++) {
$scope.app_toolbox.items[i].icon = true; $scope.app_toolbox.items[i].icon = true;

93
awx/network_ui/static/network_ui/src/rack.fsm.js
View File

@@ -88,6 +88,7 @@ _Ready.prototype.onPasteRack = function (controller, msg_type, message) {
var j = 0; var j = 0;
var top_left_x, top_left_y; var top_left_x, top_left_y;
var device_map = {}; var device_map = {};
var c_messages = [];
scope.hide_groups = false; scope.hide_groups = false;
scope.pressedX = scope.mouseX; scope.pressedX = scope.mouseX;
@@ -106,14 +107,14 @@ _Ready.prototype.onPasteRack = function (controller, msg_type, message) {
top_left_y + message.group.y2, top_left_y + message.group.y2,
false); false);
scope.send_control_message(new messages.GroupCreate(scope.client_id, c_messages.push(new messages.GroupCreate(scope.client_id,
group.id, group.id,
group.x1, group.x1,
group.y1, group.y1,
group.x2, group.x2,
group.y2, group.y2,
group.name, group.name,
group.type)); group.type));
scope.groups.push(group); scope.groups.push(group);
@@ -128,22 +129,34 @@ _Ready.prototype.onPasteRack = function (controller, msg_type, message) {
device.interface_map = {}; device.interface_map = {};
scope.devices.push(device); scope.devices.push(device);
group.devices.push(device); group.devices.push(device);
scope.send_control_message(new messages.DeviceCreate(scope.client_id, c_messages.push(new messages.DeviceCreate(scope.client_id,
device.id, device.id,
device.x, device.x,
device.y, device.y,
device.name, device.name,
device.type)); device.type));
for (j=0; j < message.group.devices[i].interfaces.length; j++) { 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 = new models.Interface(message.group.devices[i].interfaces[j].id, message.group.devices[i].interfaces[j].name);
intf.device = device; intf.device = device;
device.interfaces.push(intf); device.interfaces.push(intf);
device.interface_map[intf.id] = 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++) { for (j=0; j < message.group.devices[i].processes.length; j++) {
process = new models.Application(message.group.devices[i].processes[j].id, process = new models.Process(message.group.devices[i].processes[j].id,
message.group.devices[i].processes[j].name, message.group.devices[i].processes[j].name,
message.group.devices[i].processes[j].type, 0, 0); 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); device.processes.push(process);
} }
} }
@@ -160,7 +173,15 @@ _Ready.prototype.onPasteRack = function (controller, msg_type, message) {
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].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(); device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id].dot();
scope.links.push(link); 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));
}; };
@@ -223,7 +244,7 @@ _Selected2.prototype.onCopySelected = function (controller) {
device_copy.icon = true; device_copy.icon = true;
device_copy.interface_map = {}; device_copy.interface_map = {};
for(k=0; k < devices[j].processes.length; k++) { for(k=0; k < devices[j].processes.length; k++) {
process_copy = new models.Application(0, devices[j].processes[k].name, devices[j].processes[k].name, 0, 0); process_copy = new models.Process(0, devices[j].processes[k].name, devices[j].processes[k].name, 0, 0);
device_copy.processes.push(process_copy); device_copy.processes.push(process_copy);
} }
for(k=0; k < devices[j].interfaces.length; k++) { for(k=0; k < devices[j].interfaces.length; k++) {
@@ -436,7 +457,9 @@ _Move.prototype.onMouseMove = function (controller) {
var j = 0; var j = 0;
var k = 0; var k = 0;
var previous_x1, previous_y1, previous_x2, previous_y2, previous_x, previous_y; var previous_x1, previous_y1, previous_x2, previous_y2, previous_x, previous_y;
var c_messages = [];
for (i = 0; i < groups.length; i++) { for (i = 0; i < groups.length; i++) {
c_messages = [];
previous_x1 = groups[i].x1; previous_x1 = groups[i].x1;
previous_y1 = groups[i].y1; previous_y1 = groups[i].y1;
previous_x2 = groups[i].x2; previous_x2 = groups[i].x2;
@@ -446,16 +469,16 @@ _Move.prototype.onMouseMove = function (controller) {
groups[i].x2 = groups[i].x2 + diffX; groups[i].x2 = groups[i].x2 + diffX;
groups[i].y2 = groups[i].y2 + diffY; groups[i].y2 = groups[i].y2 + diffY;
controller.scope.send_control_message(new messages.GroupMove(controller.scope.client_id, c_messages.push(new messages.GroupMove(controller.scope.client_id,
groups[i].id, groups[i].id,
groups[i].x1, groups[i].x1,
groups[i].y1, groups[i].y1,
groups[i].x2, groups[i].x2,
groups[i].y2, groups[i].y2,
previous_x1, previous_x1,
previous_y1, previous_y1,
previous_x2, previous_x2,
previous_y2)); previous_y2));
devices = groups[i].devices; devices = groups[i].devices;
@@ -471,13 +494,15 @@ _Move.prototype.onMouseMove = function (controller) {
devices[j].interfaces[k].link.from_interface.dot(); devices[j].interfaces[k].link.from_interface.dot();
} }
} }
controller.scope.send_control_message(new messages.DeviceMove(controller.scope.client_id, c_messages.push(new messages.DeviceMove(controller.scope.client_id,
devices[j].id, devices[j].id,
devices[j].x, devices[j].x,
devices[j].y, devices[j].y,
previous_x, previous_x,
previous_y)); previous_y));
} }
controller.scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
} }
controller.scope.pressedScaledX = controller.scope.scaledX; controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY; controller.scope.pressedScaledY = controller.scope.scaledY;

124
awx/network_ui/static/network_ui/src/site.fsm.js
View File

@@ -90,6 +90,7 @@ _Ready.prototype.onPasteSite = function (controller, msg_type, message) {
var top_left_x, top_left_y; var top_left_x, top_left_y;
var device_map = {}; var device_map = {};
var inner_group = null; var inner_group = null;
var c_messages = [];
scope.hide_groups = false; scope.hide_groups = false;
scope.pressedX = scope.mouseX; scope.pressedX = scope.mouseX;
@@ -108,14 +109,14 @@ _Ready.prototype.onPasteSite = function (controller, msg_type, message) {
top_left_y + message.group.y2, top_left_y + message.group.y2,
false); false);
scope.send_control_message(new messages.GroupCreate(scope.client_id, c_messages.push(new messages.GroupCreate(scope.client_id,
group.id, group.id,
group.x1, group.x1,
group.y1, group.y1,
group.x2, group.x2,
group.y2, group.y2,
group.name, group.name,
group.type)); group.type));
scope.groups.push(group); scope.groups.push(group);
@@ -130,22 +131,34 @@ _Ready.prototype.onPasteSite = function (controller, msg_type, message) {
device.interface_map = {}; device.interface_map = {};
scope.devices.push(device); scope.devices.push(device);
group.devices.push(device); group.devices.push(device);
scope.send_control_message(new messages.DeviceCreate(scope.client_id, c_messages.push(new messages.DeviceCreate(scope.client_id,
device.id, device.id,
device.x, device.x,
device.y, device.y,
device.name, device.name,
device.type)); device.type));
for (j=0; j < message.group.devices[i].interfaces.length; j++) { 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 = new models.Interface(message.group.devices[i].interfaces[j].id, message.group.devices[i].interfaces[j].name);
intf.device = device; intf.device = device;
device.interfaces.push(intf); device.interfaces.push(intf);
device.interface_map[intf.id] = 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++) { for (j=0; j < message.group.devices[i].processes.length; j++) {
process = new models.Application(message.group.devices[i].processes[j].id, process = new models.Process(message.group.devices[i].processes[j].id,
message.group.devices[i].processes[j].name, message.group.devices[i].processes[j].name,
message.group.devices[i].processes[j].type, 0, 0); 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); device.processes.push(process);
} }
} }
@@ -162,14 +175,25 @@ _Ready.prototype.onPasteSite = function (controller, msg_type, message) {
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].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(); device_map[message.group.links[i].to_device.id].interface_map[message.group.links[i].to_interface.id].dot();
scope.links.push(link); 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++) { for(i=0; i<message.group.streams.length;i++) {
stream = new models.Stream(controller.scope.stream_id_seq(), stream = new models.Stream(controller.scope.stream_id_seq(),
device_map[message.group.streams[i].from_device.id], device_map[message.group.streams[i].from_device.id],
device_map[message.group.streams[i].to_device.id], device_map[message.group.streams[i].to_device.id],
message.group.streams[i].label); message.group.streams[i].label);
stream.name = message.group.streams[i].name; 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); scope.streams.push(stream);
} }
@@ -188,6 +212,8 @@ _Ready.prototype.onPasteSite = function (controller, msg_type, message) {
for(i=0; i< group.groups.length; i++) { for(i=0; i< group.groups.length; i++) {
group.groups[i].update_membership(scope.devices, scope.groups); group.groups[i].update_membership(scope.devices, scope.groups);
} }
scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
}; };
@@ -255,7 +281,7 @@ _Selected2.prototype.onCopySelected = function (controller) {
device_copy.icon = true; device_copy.icon = true;
device_copy.interface_map = {}; device_copy.interface_map = {};
for(k=0; k < devices[j].processes.length; k++) { for(k=0; k < devices[j].processes.length; k++) {
process_copy = new models.Application(0, devices[j].processes[k].name, devices[j].processes[k].name, 0, 0); process_copy = new models.Process(0, devices[j].processes[k].name, devices[j].processes[k].name, 0, 0);
device_copy.processes.push(process_copy); device_copy.processes.push(process_copy);
} }
for(k=0; k < devices[j].interfaces.length; k++) { for(k=0; k < devices[j].interfaces.length; k++) {
@@ -495,7 +521,9 @@ _Move.prototype.onMouseMove = function (controller) {
var j = 0; var j = 0;
var k = 0; var k = 0;
var previous_x1, previous_y1, previous_x2, previous_y2, previous_x, previous_y; var previous_x1, previous_y1, previous_x2, previous_y2, previous_x, previous_y;
var c_messages = [];
for (i = 0; i < groups.length; i++) { for (i = 0; i < groups.length; i++) {
c_messages = [];
previous_x1 = groups[i].x1; previous_x1 = groups[i].x1;
previous_y1 = groups[i].y1; previous_y1 = groups[i].y1;
previous_x2 = groups[i].x2; previous_x2 = groups[i].x2;
@@ -505,16 +533,16 @@ _Move.prototype.onMouseMove = function (controller) {
groups[i].x2 = groups[i].x2 + diffX; groups[i].x2 = groups[i].x2 + diffX;
groups[i].y2 = groups[i].y2 + diffY; groups[i].y2 = groups[i].y2 + diffY;
controller.scope.send_control_message(new messages.GroupMove(controller.scope.client_id, c_messages.push(new messages.GroupMove(controller.scope.client_id,
groups[i].id, groups[i].id,
groups[i].x1, groups[i].x1,
groups[i].y1, groups[i].y1,
groups[i].x2, groups[i].x2,
groups[i].y2, groups[i].y2,
previous_x1, previous_x1,
previous_y1, previous_y1,
previous_x2, previous_x2,
previous_y2)); previous_y2));
devices = groups[i].devices; devices = groups[i].devices;
@@ -530,12 +558,12 @@ _Move.prototype.onMouseMove = function (controller) {
devices[j].interfaces[k].link.from_interface.dot(); devices[j].interfaces[k].link.from_interface.dot();
} }
} }
controller.scope.send_control_message(new messages.DeviceMove(controller.scope.client_id, c_messages.push(new messages.DeviceMove(controller.scope.client_id,
devices[j].id, devices[j].id,
devices[j].x, devices[j].x,
devices[j].y, devices[j].y,
previous_x, previous_x,
previous_y)); previous_y));
} }
for (j = 0; j < groups[i].groups.length; j++) { for (j = 0; j < groups[i].groups.length; j++) {
previous_x1 = groups[i].groups[j].x1; previous_x1 = groups[i].groups[j].x1;
@@ -547,17 +575,19 @@ _Move.prototype.onMouseMove = function (controller) {
groups[i].groups[j].x2 = groups[i].groups[j].x2 + diffX; groups[i].groups[j].x2 = groups[i].groups[j].x2 + diffX;
groups[i].groups[j].y2 = groups[i].groups[j].y2 + diffY; groups[i].groups[j].y2 = groups[i].groups[j].y2 + diffY;
controller.scope.send_control_message(new messages.GroupMove(controller.scope.client_id, c_messages.push(new messages.GroupMove(controller.scope.client_id,
groups[i].groups[j].id, groups[i].groups[j].id,
groups[i].groups[j].x1, groups[i].groups[j].x1,
groups[i].groups[j].y1, groups[i].groups[j].y1,
groups[i].groups[j].x2, groups[i].groups[j].x2,
groups[i].groups[j].y2, groups[i].groups[j].y2,
previous_x1, previous_x1,
previous_y1, previous_y1,
previous_x2, previous_x2,
previous_y2)); previous_y2));
} }
controller.scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
} }
controller.scope.pressedScaledX = controller.scope.scaledX; controller.scope.pressedScaledX = controller.scope.scaledX;
controller.scope.pressedScaledY = controller.scope.scaledY; controller.scope.pressedScaledY = controller.scope.scaledY;

8
awx/network_ui/static/network_ui/src/stream.fsm.js
View File

@@ -80,10 +80,10 @@ _Connecting.prototype.onMouseUp = function (controller) {
if (selected.last_selected_device !== null) { if (selected.last_selected_device !== null) {
controller.scope.new_stream.to_device = selected.last_selected_device; controller.scope.new_stream.to_device = selected.last_selected_device;
controller.scope.send_control_message(new messages.StreamCreate(controller.scope.client_id, controller.scope.send_control_message(new messages.StreamCreate(controller.scope.client_id,
controller.scope.new_stream.id, controller.scope.new_stream.id,
controller.scope.new_stream.from_device.id, controller.scope.new_stream.from_device.id,
controller.scope.new_stream.to_device.id), controller.scope.new_stream.to_device.id,
''); ''));
controller.scope.new_stream = null; controller.scope.new_stream = null;
controller.scope.update_offsets(); controller.scope.update_offsets();
controller.changeState(Connected); controller.changeState(Connected);

11
awx/network_ui/static/network_ui/widgets/network_ui.html
View File

@@ -101,14 +101,6 @@
</g> </g>
</g> <!-- end buttons --> </g> <!-- end buttons -->
<g> <!-- stencils -->
<g ng-repeat="stencil in stencils"
ng-attr-transform="translate({{stencil.x}},{{stencil.y}})"
class="button">
<g awx-net-stencil></g>
</g>
</g> <!-- end stencils -->
<g> <!-- layers --> <g> <!-- layers -->
<g ng-repeat="layer in layers" <g ng-repeat="layer in layers"
ng-attr-transform="translate({{layer.x}},{{layer.y}})" ng-attr-transform="translate({{layer.x}},{{layer.y}})"
@@ -122,8 +114,5 @@
<g ng-repeat="touch in touches"> <g ng-repeat="touch in touches">
<g awx-net-touch></g> <g awx-net-touch></g>
</g> </g>
<g ng-repeat="l in current_location track by $index">
<text x="10" ng-attr-y="{{20 * (1 + $index)}}" text-anchor="left" class="NetworkUI__location-text">{{l}}</text>
</g>
</svg> </svg>
</div> </div>