Delete and launch devices on the topology view
This feature enables to delete and launch a instance or router on the network topology view. So you can do basic actions on this view. Also it enables to change view small or normal. You can see more networks and devices in the small view. implements bp editable-network-topology-view fixes bug #1215683 Change-Id: Ie65d50d2a99f72696c8f10223f8430ad5f90b144
This commit is contained in:
Toshi Hayashi
Toshiyuki Hayashi
parent
d45413e9bf
commit
88b9335910
|
|
@ -1,201 +1,447 @@
|
|||
/* Namespace for core functionality related to Network Topology. */
|
||||
|
||||
horizon.network_topology = {
|
||||
model: null,
|
||||
network_margin: 270,
|
||||
topologyCanvas_padding: 120,
|
||||
min_network_height:500,
|
||||
port_margin: 20,
|
||||
device_initial_position : 40,
|
||||
device_last_position : 0,
|
||||
device_left_position : 90,
|
||||
device_margin : 20,
|
||||
device_min_height : 45,
|
||||
port_initial_position: 1,
|
||||
svg:'#topology_canvas',
|
||||
svg_container:'#topologyCanvasContainer',
|
||||
post_messages:'#topologyMessages',
|
||||
network_tmpl:{
|
||||
small:'#topology_template > .network_container_small',
|
||||
normal:'#topology_template > .network_container_normal'
|
||||
},
|
||||
router_tmpl: {
|
||||
small:'#topology_template > .router_small',
|
||||
normal:'#topology_template > .router_normal'
|
||||
},
|
||||
instance_tmpl: {
|
||||
small:'#topology_template > .instance_small',
|
||||
normal:'#topology_template > .instance_normal'
|
||||
},
|
||||
balloon_tmpl : null,
|
||||
balloon_device_tmpl : null,
|
||||
balloon_port_tmpl : null,
|
||||
network_index: {},
|
||||
network_color_unit: 0,
|
||||
network_saturation: 1,
|
||||
network_lightness: 0.7,
|
||||
balloon_id:null,
|
||||
reload_duration: 10000,
|
||||
spinner:null,
|
||||
init:function(){
|
||||
draw_mode:'normal',
|
||||
network_height : 0,
|
||||
previous_message : null,
|
||||
element_properties:{
|
||||
normal:{
|
||||
network_width:270,
|
||||
network_min_height:500,
|
||||
top_margin:80,
|
||||
default_height:50,
|
||||
margin:20,
|
||||
device_x:98.5,
|
||||
device_width:90,
|
||||
port_margin:16,
|
||||
port_height:6,
|
||||
port_width:82,
|
||||
port_text_margin:{x:6,y:-4},
|
||||
texts_bg_y:32,
|
||||
type_y:46,
|
||||
balloon_margin:{x:12,y:-12}
|
||||
},
|
||||
small :{
|
||||
network_width:100,
|
||||
network_min_height:400,
|
||||
top_margin:50,
|
||||
default_height:20,
|
||||
margin:30,
|
||||
device_x:47.5,
|
||||
device_width:20,
|
||||
port_margin:5,
|
||||
port_height:3,
|
||||
port_width:32.5,
|
||||
port_text_margin:{x:0,y:0},
|
||||
texts_bg_y:0,
|
||||
type_y:0,
|
||||
balloon_margin:{x:12,y:-30}
|
||||
},
|
||||
cidr_margin:5,
|
||||
device_name_max_size:9,
|
||||
device_name_suffix:'..'
|
||||
},
|
||||
init:function() {
|
||||
var self = this;
|
||||
$("#topologyCanvas").spin(horizon.conf.spinner_options.modal);
|
||||
self.retrieve_network_info();
|
||||
$(self.svg_container).spin(horizon.conf.spinner_options.modal);
|
||||
if($('#networktopology').length === 0) {
|
||||
return;
|
||||
}
|
||||
self.color = d3.scale.category10();
|
||||
self.balloon_tmpl = Hogan.compile($('#balloon_container').html());
|
||||
self.balloon_device_tmpl = Hogan.compile($('#balloon_device').html());
|
||||
self.balloon_port_tmpl = Hogan.compile($('#balloon_port').html());
|
||||
|
||||
$(document)
|
||||
.on('click', 'a.closeTopologyBalloon', function(e) {
|
||||
e.preventDefault();
|
||||
self.delete_balloon();
|
||||
})
|
||||
.on('click', '.topologyBalloon', function(e) {
|
||||
e.stopPropagation();
|
||||
})
|
||||
.on('click', 'a.vnc_window', function(e) {
|
||||
e.preventDefault();
|
||||
var vnc_window = window.open($(this).attr('href'), vnc_window, 'width=760,height=560');
|
||||
self.delete_balloon();
|
||||
})
|
||||
.click(function(){
|
||||
self.delete_balloon();
|
||||
});
|
||||
|
||||
$('.toggleView > .btn').click(function(){
|
||||
self.draw_mode = $(this).data('value');
|
||||
$('g.network').remove();
|
||||
$.cookie('ntp_draw_mode',self.draw_mode);
|
||||
self.data_convert();
|
||||
});
|
||||
|
||||
$(window)
|
||||
.on('message',function(e){
|
||||
var message = JSON.parse(e.originalEvent.data);
|
||||
if (self.previous_message != message.message) {
|
||||
horizon.alert(message.type, message.message);
|
||||
horizon.autoDismissAlerts();
|
||||
self.previous_message = message.message;
|
||||
self.delete_post_message(message.iframe_id);
|
||||
self.load_network_info();
|
||||
setTimeout(function() {
|
||||
self.previous_message = null;
|
||||
},10000);
|
||||
}
|
||||
});
|
||||
|
||||
self.load_network_info();
|
||||
setInterval(function(){
|
||||
self.retrieve_network_info();
|
||||
self.load_network_info();
|
||||
}, self.reload_duration);
|
||||
},
|
||||
retrieve_network_info: function(){
|
||||
load_network_info:function(){
|
||||
var self = this;
|
||||
if($("#networktopology").length === 0) {
|
||||
return;
|
||||
if($('#networktopology').length === 0) {
|
||||
return;
|
||||
}
|
||||
$.getJSON($("#networktopology").data("networktopology"),
|
||||
$.getJSON($('#networktopology').data('networktopology') + '?' + $.now(),
|
||||
function(data) {
|
||||
self.draw_graph(data);
|
||||
self.model = data;
|
||||
self.data_convert();
|
||||
}
|
||||
);
|
||||
},
|
||||
draw_loading: function () {
|
||||
$("#topologyCanvas").spin(horizon.conf.spinner_options.modal);
|
||||
},
|
||||
draw_graph: function(data){
|
||||
var canvas = $("#topologyCanvas");
|
||||
var networks = $("#topologyCanvas > .networks");
|
||||
var nodata = $("#topologyCanvas > .nodata");
|
||||
networks.show();
|
||||
nodata.hide();
|
||||
canvas.spin(false);
|
||||
networks.empty();
|
||||
this.model = data;
|
||||
this.device_last_position = this.device_initial_position;
|
||||
var network_elements = this.draw_networks();
|
||||
var router_elements = this.draw_routers();
|
||||
var server_elements = this.draw_servers();
|
||||
if ((network_elements + router_elements + server_elements) <= 0){
|
||||
networks.hide();
|
||||
nodata.show();
|
||||
select_draw_mode:function() {
|
||||
var self = this;
|
||||
var draw_mode = $.cookie('ntp_draw_mode');
|
||||
if (draw_mode && (draw_mode == 'normal'| draw_mode == 'small')) {
|
||||
self.draw_mode = draw_mode;
|
||||
} else {
|
||||
canvas.height(
|
||||
Math.max(this.device_last_position + this.topologyCanvas_padding, this.min_network_height)
|
||||
);
|
||||
networks.width(
|
||||
this.model.networks.length * this.network_margin
|
||||
);
|
||||
if (self.model.networks.length *
|
||||
self.element_properties.normal.network_width > $('#topologyCanvas').width()) {
|
||||
self.draw_mode = 'small';
|
||||
} else {
|
||||
self.draw_mode = 'normal';
|
||||
}
|
||||
$.cookie('ntp_draw_mode',self.draw_mode);
|
||||
}
|
||||
$('.toggleView > .btn').each(function(){
|
||||
var $this = $(this);
|
||||
if($this.hasClass(self.draw_mode)) {
|
||||
$this.addClass('active');
|
||||
}
|
||||
});
|
||||
},
|
||||
network_color: function(network_id){
|
||||
var max_hue = 360;
|
||||
var num_network = this.model.networks.length;
|
||||
if(num_network <= 0){
|
||||
data_convert:function() {
|
||||
var self = this;
|
||||
var model = self.model;
|
||||
$.each(model.networks, function(index, network) {
|
||||
self.network_index[network.id] = index;
|
||||
});
|
||||
self.select_draw_mode();
|
||||
var element_properties = self.element_properties[self.draw_mode];
|
||||
self.network_height = element_properties.top_margin;
|
||||
$.each([
|
||||
{model:model.routers, type:'router'},
|
||||
{model:model.servers, type:'instance'}
|
||||
], function(index, devices) {
|
||||
var type = devices.type;
|
||||
var model = devices.model;
|
||||
$.each(model, function(index, device) {
|
||||
device.type = type;
|
||||
device.ports = self.select_port(device.id);
|
||||
var hasports = (device.ports.length <= 0) ? false : true;
|
||||
device.parent_network = (hasports) ?
|
||||
self.select_main_port(device.ports).network_id : self.model.networks[0].id;
|
||||
var height = element_properties.port_margin*(device.ports.length - 1);
|
||||
device.height =
|
||||
(self.draw_mode == 'normal' && height > element_properties.default_height) ? height :
|
||||
element_properties.default_height;
|
||||
device.pos_y = self.network_height;
|
||||
device.port_height =
|
||||
(self.draw_mode == 'small' && height > device.height) ? 1 :
|
||||
element_properties.port_height;
|
||||
device.port_margin =
|
||||
(self.draw_mode == 'small' && height > device.height) ?
|
||||
device.height/device.ports.length :
|
||||
element_properties.port_margin;
|
||||
self.network_height += device.height + element_properties.margin;
|
||||
});
|
||||
});
|
||||
$.each(model.networks, function(index, network) {
|
||||
network.devices = [];
|
||||
$.each([model.routers, model.servers],function(index, devices) {
|
||||
$.each(devices,function(index, device) {
|
||||
if(network.id == device.parent_network) {
|
||||
network.devices.push(device);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
self.network_height += element_properties.top_margin;
|
||||
self.network_height = (self.network_height > element_properties.network_min_height) ?
|
||||
self.network_height : element_properties.network_min_height;
|
||||
self.draw_topology();
|
||||
},
|
||||
draw_topology:function() {
|
||||
var self = this;
|
||||
$(self.svg_container).spin(false);
|
||||
$(self.svg_container).removeClass('noinfo');
|
||||
if (self.model.networks.length <= 0) {
|
||||
$('g.network').remove();
|
||||
$(self.svg_container).addClass('noinfo');
|
||||
return;
|
||||
}
|
||||
num_network ++;
|
||||
var hue = Math.floor(
|
||||
max_hue/num_network*(this.network_index(network_id) + 1));
|
||||
return this.hsv2rgb(
|
||||
hue, this.network_saturation, this.network_lightness);
|
||||
},
|
||||
//see http://en.wikipedia.org/wiki/HSL_and_HSV
|
||||
hsv2rgb:function (h, s, v) {
|
||||
var hi = Math.round(h/60) % 6;
|
||||
var f = h/60 - hi;
|
||||
var p = v*(1 - s);
|
||||
var q = v*(1 - f*s);
|
||||
var t = v*(1 - (1 - f)*s);
|
||||
switch(hi){
|
||||
case 0:
|
||||
r = v;
|
||||
g = t;
|
||||
b = p;
|
||||
break;
|
||||
case 1:
|
||||
r = q;
|
||||
g = v;
|
||||
b = p;
|
||||
break;
|
||||
case 2:
|
||||
r = p;
|
||||
g = v;
|
||||
b = t;
|
||||
break;
|
||||
case 3:
|
||||
r = p;
|
||||
g = q;
|
||||
b = v;
|
||||
break;
|
||||
case 4:
|
||||
r = t;
|
||||
g = p;
|
||||
b = v;
|
||||
break;
|
||||
case 5:
|
||||
r = v;
|
||||
g = p;
|
||||
b = q;
|
||||
break;
|
||||
}
|
||||
return "rgb(" + Math.round(r*255) + "," + Math.round(g*255) + "," + Math.round(b*255) + ")";
|
||||
},
|
||||
draw_networks: function(){
|
||||
var self = this;
|
||||
var networks = $("#topologyCanvas > .networks");
|
||||
$.each(self.model.networks, function(index, network){
|
||||
var label = (network.name != "")? network.name : network.id;
|
||||
if(network['router:external']){
|
||||
label += " (external) ";
|
||||
}
|
||||
self.network_index[network.id] = index;
|
||||
var network_html = $("<div class='network' />").attr("id", network.id);
|
||||
var nicname_html = $("<div class='nicname'><h3>" + label +
|
||||
"</h3><span class='ip'>" + self.select_cidr(network.id) + "</span></div>");
|
||||
if (network.url == undefined) {
|
||||
nicname_html.addClass("nourl");
|
||||
} else {
|
||||
nicname_html.click(function (){
|
||||
window.location.href = network.url;
|
||||
});
|
||||
}
|
||||
nicname_html
|
||||
.css (
|
||||
{'background-color':self.network_color(network.id)})
|
||||
.appendTo(network_html);
|
||||
networks.append(network_html);
|
||||
});
|
||||
return self.model.networks.length;
|
||||
},
|
||||
select_cidr:function(network_id){
|
||||
var cidr = [];
|
||||
$.each(this.model.subnets, function(index, subnet){
|
||||
if(subnet.network_id != network_id){
|
||||
return;
|
||||
var svg = d3.select(self.svg);
|
||||
var element_properties = self.element_properties[self.draw_mode];
|
||||
svg
|
||||
.attr('width',self.model.networks.length*element_properties.network_width)
|
||||
.attr('height',self.network_height);
|
||||
|
||||
var network = svg.selectAll('g.network')
|
||||
.data(self.model.networks);
|
||||
|
||||
var network_enter = network.enter()
|
||||
.append('g')
|
||||
.attr('class','network')
|
||||
.each(function(d,i){
|
||||
this.appendChild(d3.select(self.network_tmpl[self.draw_mode]).node().cloneNode(true));
|
||||
var $this = d3.select(this).select('.network-rect');
|
||||
if (d.url) {
|
||||
var $this = d3.select(this).select('.network-rect');
|
||||
$this
|
||||
.on('mouseover',function(){
|
||||
$this.transition().style('fill',
|
||||
function() { return d3.rgb(self.network_color(d.id)).brighter(0.5)});
|
||||
})
|
||||
.on('mouseout',function(){
|
||||
$this.transition().style('fill',
|
||||
function() { return self.network_color(d.id)});
|
||||
})
|
||||
.on('click',function(){
|
||||
window.location.href = d.url;
|
||||
});
|
||||
} else {
|
||||
$this.classed('nourl', true);
|
||||
}
|
||||
cidr.push(subnet.cidr);
|
||||
});
|
||||
return cidr.join(', ');
|
||||
},
|
||||
draw_devices: function(type){
|
||||
var self = this;
|
||||
$.each(self.model[type + 's'], function(index, device){
|
||||
var id = device.id;
|
||||
var name = (device.name != "")? device.name : device.id;
|
||||
var ports = self.select_port(id);
|
||||
if(ports.length <= 0){
|
||||
return;
|
||||
}
|
||||
var main_port = self.select_main_port(ports);
|
||||
var parent_network = main_port.network_id;
|
||||
var device_html = $("<div class='" + type + "'></div>");
|
||||
device_html
|
||||
.attr('id', device.id)
|
||||
.css({top: self.device_last_position, position: 'absolute'})
|
||||
.append($("<span class='devicename'><i></i>" + type + "</span>"))
|
||||
.click(function (e){
|
||||
e.stopPropagation();
|
||||
window.location.href = device.url;
|
||||
});
|
||||
|
||||
network
|
||||
.attr('id',function(d) { return 'id_' + d.id; })
|
||||
.attr('transform',function(d,i){
|
||||
return 'translate(' + element_properties.network_width * i + ',' + 0 + ')'})
|
||||
.select('.network-rect')
|
||||
.attr('height', function(d) { return self.network_height})
|
||||
.style('fill', function(d) { return self.network_color(d.id)});
|
||||
network
|
||||
.select('.network-name')
|
||||
.attr('x', function(d) { return self.network_height/2 })
|
||||
.text(function(d) { return d.name; });
|
||||
network
|
||||
.select('.network-cidr')
|
||||
.attr('x', function(d) { return self.network_height - self.element_properties.cidr_margin })
|
||||
.text(function(d) {
|
||||
var cidr = $.map(d.subnets,function(n, i){
|
||||
return n.cidr;
|
||||
});
|
||||
var name_html = $("<span class='name'></span>")
|
||||
.html(device.name)
|
||||
.attr('title', device.name)
|
||||
.appendTo(device_html);
|
||||
var port_position = self.port_initial_position;
|
||||
$.each(ports, function(){
|
||||
var port = this;
|
||||
var port_html = self.port_html(port);
|
||||
port_position += self.port_margin;
|
||||
self.port_css(port_html, port_position, parent_network, port.network_id);
|
||||
device_html.append(port_html);
|
||||
return cidr.join(', ');
|
||||
});
|
||||
|
||||
network.exit().remove();
|
||||
|
||||
var device = network.selectAll('g.device')
|
||||
.data(function(d) { return d.devices; });
|
||||
|
||||
var device_enter = device.enter()
|
||||
.append("g")
|
||||
.attr('class','device')
|
||||
.each(function(d,i){
|
||||
var device_template = self[d.type + '_tmpl'][self.draw_mode];
|
||||
this.appendChild(d3.select(device_template).node().cloneNode(true));
|
||||
});
|
||||
port_position += self.port_margin;
|
||||
device_html.css(
|
||||
{height: Math.max(self.device_min_height, port_position) + "px"});
|
||||
self.device_last_position += device_html.height() + self.device_margin;
|
||||
$("#" + parent_network).append(device_html);
|
||||
$('div.port span.ip').each(function(i, ip){
|
||||
$(ip).css('top', '-'+$(ip).height()+'px');
|
||||
|
||||
device_enter.on('mouseenter',function(d){
|
||||
var $this = $(this);
|
||||
self.show_balloon(d,$this);
|
||||
})
|
||||
.on('click',function(){
|
||||
d3.event.stopPropagation();
|
||||
});
|
||||
|
||||
device
|
||||
.attr('id',function(d) { return 'id_' + d.id; })
|
||||
.attr('transform',function(d,i){
|
||||
return 'translate(' + element_properties.device_x + ',' + d.pos_y + ')';
|
||||
})
|
||||
.select('.frame')
|
||||
.attr('height',function(d) { return d.height; });
|
||||
device
|
||||
.select('.texts_bg')
|
||||
.attr('y',function(d) {
|
||||
return element_properties.texts_bg_y + d.height - element_properties.default_height;
|
||||
});
|
||||
device
|
||||
.select('.type')
|
||||
.attr('y',function(d) {
|
||||
return element_properties.type_y + d.height - element_properties.default_height;
|
||||
});
|
||||
device
|
||||
.select('.name')
|
||||
.text(function(d) { return self.string_truncate(d.name); });
|
||||
device.each(function(d) {
|
||||
if (d.status == 'BUILD') {
|
||||
d3.select(this).classed('loading',true);
|
||||
} else if (d.task == 'deleting') {
|
||||
d3.select(this).classed('loading',true);
|
||||
if ('bl_' + d.id == self.balloon_id) {
|
||||
self.delete_balloon();
|
||||
}
|
||||
} else {
|
||||
d3.select(this).classed('loading',false);
|
||||
if ('bl_' + d.id == self.balloon_id) {
|
||||
var $this = $(this);
|
||||
self.show_balloon(d,$this);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
device.exit().each(function(d){
|
||||
if ('bl_' + d.id == self.balloon_id) {
|
||||
self.delete_balloon();
|
||||
}
|
||||
}).remove();
|
||||
|
||||
var port = device.select('g.ports')
|
||||
.selectAll('g.port')
|
||||
.data(function(d) { return d.ports; });
|
||||
|
||||
var port_enter = port.enter()
|
||||
.append('g')
|
||||
.attr('class','port')
|
||||
.attr('id',function(d) { return 'id_' + d.id; });
|
||||
|
||||
port_enter
|
||||
.append('line')
|
||||
.attr('class','port_line');
|
||||
|
||||
port_enter
|
||||
.append('text')
|
||||
.attr('class','port_text');
|
||||
|
||||
device.select('g.ports').each(function(d,i){
|
||||
this._portdata = {};
|
||||
this._portdata.ports_length = d.ports.length;
|
||||
this._portdata.parent_network = d.parent_network;
|
||||
this._portdata.device_height = d.height;
|
||||
this._portdata.port_height = d.port_height;
|
||||
this._portdata.port_margin = d.port_margin;
|
||||
this._portdata.left = 0;
|
||||
this._portdata.right = 0;
|
||||
$(this).mouseenter(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
return self.model[type + 's'].length;
|
||||
|
||||
port.each(function(d,i){
|
||||
var index_diff = self.network_index(this.parentNode._portdata.parent_network) -
|
||||
self.network_index(d.network_id);
|
||||
this._index_diff = index_diff = (index_diff >= 0)? ++index_diff : index_diff;
|
||||
this._direction = (this._index_diff < 0)? 'right' : 'left';
|
||||
this._index = this.parentNode._portdata[this._direction] ++;
|
||||
|
||||
});
|
||||
|
||||
port.attr('transform',function(d,i){
|
||||
var x = (this._direction == 'left') ? 0 : element_properties.device_width;
|
||||
var ports_length = this.parentNode._portdata[this._direction];
|
||||
var distance = this.parentNode._portdata.port_margin;
|
||||
var y = (this.parentNode._portdata.device_height -
|
||||
(ports_length -1)*distance)/2 + this._index*distance;
|
||||
return 'translate(' + x + ',' + y + ')';
|
||||
});
|
||||
|
||||
port
|
||||
.select('.port_line')
|
||||
.attr('stroke-width',function(d,i) {
|
||||
return this.parentNode.parentNode._portdata.port_height;
|
||||
})
|
||||
.attr('stroke',function(d,i) {return self.network_color(d.network_id)})
|
||||
.attr('x1',0).attr('y1',0).attr('y2',0)
|
||||
.attr('x2',function(d,i) {
|
||||
var parent = this.parentNode;
|
||||
var width = (Math.abs(parent._index_diff) - 1)*element_properties.network_width +
|
||||
element_properties.port_width;
|
||||
return (parent._direction == 'left') ? -1*width : width;
|
||||
});
|
||||
|
||||
port
|
||||
.select('.port_text')
|
||||
.attr('x',function(d) {
|
||||
var parent = this.parentNode;
|
||||
if (parent._direction == 'left') {
|
||||
d3.select(this).classed('left',true);
|
||||
return element_properties.port_text_margin.x*-1;
|
||||
} else {
|
||||
d3.select(this).classed('left',false);
|
||||
return element_properties.port_text_margin.x;
|
||||
}
|
||||
})
|
||||
.attr('y',function(d) { return element_properties.port_text_margin.y })
|
||||
.text(function(d) {
|
||||
var ip_label = [];
|
||||
$.each(d.fixed_ips, function() {
|
||||
ip_label.push(this.ip_address);
|
||||
});
|
||||
return ip_label.join(',');
|
||||
});
|
||||
|
||||
port.exit().remove();
|
||||
},
|
||||
network_color: function(network_id) {
|
||||
return this.color(this.network_index(network_id));
|
||||
},
|
||||
network_index: function(network_id) {
|
||||
return this.network_index[network_id];
|
||||
},
|
||||
select_port: function(device_id){
|
||||
return $.map(this.model.ports,function(port, index){
|
||||
if (port.device_id == device_id) {
|
||||
return port;
|
||||
}
|
||||
});
|
||||
},
|
||||
select_main_port: function(ports){
|
||||
var _self = this;
|
||||
var main_port_index = 0;
|
||||
var MAX_INT = 4294967295;
|
||||
var min_port_length = MAX_INT;
|
||||
$.each(ports, function(index, port){
|
||||
var port_length = _self.sum_port_length(port.network_id, ports);
|
||||
if(port_length < min_port_length){
|
||||
min_port_length = port_length;
|
||||
main_port_index = index;
|
||||
}
|
||||
});
|
||||
return ports[main_port_index];
|
||||
},
|
||||
sum_port_length: function(network_id, ports){
|
||||
var self = this;
|
||||
|
|
@ -206,75 +452,152 @@ horizon.network_topology = {
|
|||
});
|
||||
return sum_port_length;
|
||||
},
|
||||
select_main_port: function(ports){
|
||||
var main_port_index = 0;
|
||||
var MAX_INT = 4294967295;
|
||||
var min_port_length = MAX_INT;
|
||||
$.each(ports, function(index, port){
|
||||
port_length = horizon.network_topology.sum_port_length(port.network_id, ports)
|
||||
if(port_length < min_port_length){
|
||||
min_port_length = port_length;
|
||||
main_port_index = index;
|
||||
string_truncate: function(string) {
|
||||
var self = this;
|
||||
var str = string;
|
||||
var max_size = self.element_properties.device_name_max_size;
|
||||
var suffix = self.element_properties.device_name_suffix;
|
||||
var bytes = 0;
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
bytes += str.charCodeAt(i) <= 255 ? 1 : 2;
|
||||
if (bytes > max_size) {
|
||||
str = str.substr(0, i) + suffix;
|
||||
break;
|
||||
}
|
||||
})
|
||||
return ports[main_port_index];
|
||||
}
|
||||
return str;
|
||||
},
|
||||
draw_routers: function(){
|
||||
return this.draw_devices('router');
|
||||
},
|
||||
draw_servers: function(){
|
||||
return this.draw_devices('server');
|
||||
},
|
||||
select_port: function(device_id){
|
||||
return $.map(this.model.ports,function(port, index){
|
||||
if (port.device_id == device_id) {
|
||||
return port;
|
||||
}
|
||||
});
|
||||
},
|
||||
port_html: function(port){
|
||||
delete_device: function(type, device_id) {
|
||||
var self = this;
|
||||
var port_html = $('<div class="port"><div class="dot"></div></div>');
|
||||
var ip_label = "";
|
||||
$.each(port.fixed_ips, function(){
|
||||
ip_label += this.ip_address + "<br />";
|
||||
})
|
||||
var ip_html = $('<span class="ip" />').html(ip_label);
|
||||
port_html
|
||||
.append(ip_html)
|
||||
.css({'background-color':self.network_color(port.network_id)})
|
||||
.click(function (e) {
|
||||
e.stopPropagation();
|
||||
if(port.url != undefined) {
|
||||
window.location.href = port.url;
|
||||
}
|
||||
var message = {id:device_id};
|
||||
self.post_message(device_id,type,message);
|
||||
},
|
||||
delete_port: function(router_id, port_id) {
|
||||
var self = this;
|
||||
var message = {id:port_id};
|
||||
self.post_message(port_id, 'router/' + router_id + '/', message);
|
||||
},
|
||||
show_balloon:function(d,element) {
|
||||
var self = this;
|
||||
var element_properties = self.element_properties[self.draw_mode];
|
||||
if (self.balloon_id) {
|
||||
self.delete_balloon();
|
||||
}
|
||||
var balloon_tmpl = self.balloon_tmpl;
|
||||
var device_tmpl = self.balloon_device_tmpl;
|
||||
var port_tmpl = self.balloon_port_tmpl;
|
||||
var balloon_id = 'bl_' + d.id;
|
||||
var ports = [];
|
||||
$.each(d.ports,function(i, port){
|
||||
var object = {};
|
||||
object.id = port.id;
|
||||
object.router_id = port.device_id;
|
||||
object.url = port.url;
|
||||
object.port_status = port.status;
|
||||
object.port_status_css = (port.status == "ACTIVE")? 'active' : 'down';
|
||||
var ip_address = '';
|
||||
try {
|
||||
ip_address = port.fixed_ips[0].ip_address;
|
||||
}catch(e){
|
||||
ip_address = 'no info';
|
||||
}
|
||||
var device_owner = '';
|
||||
try {
|
||||
device_owner = port.device_owner.replace('network:','');
|
||||
}catch(e){
|
||||
device_owner = 'no info';
|
||||
}
|
||||
object.ip_address = ip_address;
|
||||
object.device_owner = device_owner;
|
||||
object.is_interface = (device_owner == 'router_interface') ? true : false;
|
||||
ports.push(object);
|
||||
});
|
||||
var html_data = {
|
||||
balloon_id:balloon_id,
|
||||
id:d.id,
|
||||
url:d.url,
|
||||
name:d.name,
|
||||
type:d.type,
|
||||
type_capital:d.type.replace(/^\w/, function($0) {return $0.toUpperCase()}),
|
||||
id:d.id,
|
||||
status:d.status,
|
||||
status_class:(d.status == "ACTIVE")? 'active' : 'down'
|
||||
};
|
||||
if (d.type == 'router') {
|
||||
html_data.port = ports;
|
||||
html = balloon_tmpl.render(html_data,{
|
||||
table1:device_tmpl,
|
||||
table2:port_tmpl
|
||||
});
|
||||
if(port.url == undefined) {
|
||||
port_html.addClass("nourl");
|
||||
} else if (d.type == 'instance') {
|
||||
html_data.console_id = d.id;
|
||||
html = balloon_tmpl.render(html_data,{
|
||||
table1:device_tmpl
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
return port_html;
|
||||
$(self.svg_container).append(html);
|
||||
var device_position = element.find('.frame');
|
||||
var x = device_position.position().left +
|
||||
element_properties.device_width +
|
||||
element_properties.balloon_margin.x;
|
||||
var y = device_position.position().top +
|
||||
element_properties.balloon_margin.y;
|
||||
$('#' + balloon_id).css({
|
||||
'left': x + 'px',
|
||||
'top': y + 'px'
|
||||
})
|
||||
.show();
|
||||
var $balloon = $('#' + balloon_id);
|
||||
if ($balloon.offset().left + $balloon.outerWidth() > $(window).outerWidth()) {
|
||||
$balloon
|
||||
.css({
|
||||
'left': 0 + 'px'
|
||||
})
|
||||
.css({
|
||||
'left': device_position.position().left
|
||||
- $balloon.outerWidth()
|
||||
- element_properties.balloon_margin.x + 'px'
|
||||
})
|
||||
.addClass('leftPosition');
|
||||
}
|
||||
$balloon.find('.delete-device').click(function(e){
|
||||
var $this = $(this);
|
||||
$this.addClass('deleting');
|
||||
d3.select('#id_' + $this.data('device-id')).classed('loading',true);
|
||||
self.delete_device($this.data('type'),$this.data('device-id'));
|
||||
});
|
||||
$balloon.find('.delete-port').click(function(e){
|
||||
var $this = $(this);
|
||||
self.delete_port($this.data('router-id'),$this.data('port-id'));
|
||||
});
|
||||
self.balloon_id = balloon_id;
|
||||
},
|
||||
port_css: function(port_html, position, network_a, network_b){
|
||||
delete_balloon:function() {
|
||||
var self = this;
|
||||
var index_diff = self.network_index(network_a) - self.network_index(network_b);
|
||||
var width = self.network_margin * index_diff;
|
||||
var direction = "left";
|
||||
if(width < 0){
|
||||
direction = "right";
|
||||
width += self.network_margin;
|
||||
if(self.balloon_id) {
|
||||
$('#' + self.balloon_id).remove()
|
||||
self.balloon_id = null;
|
||||
}
|
||||
width = Math.abs(width) + self.device_left_position;
|
||||
var port_css = {};
|
||||
port_css['width'] = width + "px";
|
||||
port_css['top'] = position + "px";
|
||||
port_css[direction] = (-width -3) + "px";
|
||||
port_html.addClass(direction).css(port_css);
|
||||
},
|
||||
network_index: function(network_id){
|
||||
return horizon.network_topology.network_index[network_id];
|
||||
post_message: function(id,url,message) {
|
||||
var self = this;
|
||||
var iframe_id = 'ifr_' + id;
|
||||
var iframe = $('<iframe width="500" height="300" />')
|
||||
.attr('id',iframe_id)
|
||||
.attr('src',url)
|
||||
.appendTo(self.post_messages);
|
||||
iframe.on('load',function() {
|
||||
$(this).get(0).contentWindow.postMessage(
|
||||
JSON.stringify(message, null, 2), '*');
|
||||
});
|
||||
},
|
||||
delete_post_message: function(id) {
|
||||
$('#' + id).remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
horizon.addInitFunction(function () {
|
||||
horizon.network_topology.init();
|
||||
horizon.network_topology.init();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import os
|
||||
import sys
|
||||
|
||||
from django.core.management import execute_from_command_line
|
||||
from django.core.management import execute_from_command_line # noqa
|
||||
|
||||
if __name__ == "__main__":
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
# vim: tabstop=4 shiftwidth=4 softtabstop=4
|
||||
|
||||
# Copyright 2013 NTT Innovation Institute Inc.
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||
# not use this file except in compliance with the License. You may obtain
|
||||
# a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
# License for the specific language governing permissions and limitations
|
||||
# under the License.
|
||||
|
||||
from django.utils.translation import ugettext_lazy as _ # noqa
|
||||
from openstack_dashboard.dashboards.project.instances import tables as i_tables
|
||||
|
||||
|
||||
class InstancesTable(i_tables.InstancesTable):
|
||||
class Meta:
|
||||
name = "instances"
|
||||
verbose_name = _("NT_Instances")
|
||||
row_actions = (i_tables.TerminateInstance,)
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
# vim: tabstop=4 shiftwidth=4 softtabstop=4
|
||||
|
||||
# Copyright 2013 NTT Innovation Institute Inc.
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||
# not use this file except in compliance with the License. You may obtain
|
||||
# a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
# License for the specific language governing permissions and limitations
|
||||
# under the License.
|
||||
|
||||
|
||||
from django.utils.translation import ugettext_lazy as _ # noqa
|
||||
from openstack_dashboard.dashboards.project.routers.ports import\
|
||||
tables as p_tables
|
||||
|
||||
|
||||
class RemoveInterface(p_tables.RemoveInterface):
|
||||
failure_url = 'horizon:project:network_topology:router'
|
||||
|
||||
|
||||
class PortsTable(p_tables.PortsTable):
|
||||
class Meta:
|
||||
name = "interfaces"
|
||||
verbose_name = _("NT_Interfaces")
|
||||
row_actions = (RemoveInterface, )
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
# vim: tabstop=4 shiftwidth=4 softtabstop=4
|
||||
|
||||
# Copyright 2013 NTT Innovation Institute Inc.
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||
# not use this file except in compliance with the License. You may obtain
|
||||
# a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
# License for the specific language governing permissions and limitations
|
||||
# under the License.
|
||||
|
||||
from django.utils.translation import ugettext_lazy as _ # noqa
|
||||
from openstack_dashboard.dashboards.project.routers import\
|
||||
tables as r_tables
|
||||
|
||||
#LOG = logging.getLogger(__name__)
|
||||
|
||||
|
||||
class DeleteRouter(r_tables.DeleteRouter):
|
||||
redirect_url = "horizon:project:network_topology:router"
|
||||
|
||||
|
||||
class RoutersTable(r_tables.RoutersTable):
|
||||
class Meta:
|
||||
name = "Routers"
|
||||
verbose_name = _("NT_Routers")
|
||||
status_columns = ["status"]
|
||||
row_actions = (DeleteRouter,)
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{% extends "horizon/common/_modal_form.html" %}
|
||||
{% load i18n horizon humanize %}
|
||||
|
||||
{% block form_id %}{% endblock %}
|
||||
{% block form_action %}{% url horizon:project:network_topology:createrouter %}?{{ request.GET.urlencode }}{% endblock %}
|
||||
|
||||
{% block modal_id %}create_router_modal{% endblock %}
|
||||
{% block modal-header %}{% trans "Create router" %}{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
<div class="left">
|
||||
<fieldset>
|
||||
{% include "horizon/common/_form_fields.html" %}
|
||||
</fieldset>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<input class="btn btn-primary pull-right" type="submit" value="{% trans "Create router" %}" />
|
||||
<a href="{% url horizon:project:network_topology:index %}" class="btn secondary cancel close">{% trans "Cancel" %}</a>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script type='text/javascript'>
|
||||
(function(){
|
||||
$(window).on('message',function(e){
|
||||
var message = JSON.parse(e.originalEvent.data);
|
||||
var id = message.id;
|
||||
$('button[id*="' + id + '"]').click();
|
||||
});
|
||||
|
||||
$('.messages .alert').each(function(){
|
||||
var $this = $(this);
|
||||
var message = {};
|
||||
message.action = "alert";
|
||||
message.iframe_id = $(window.frameElement).attr('id');
|
||||
message.type =
|
||||
($this.hasClass('alert-info')) ? 'info' :
|
||||
($this.hasClass('alert-warning')) ? 'warning' :
|
||||
($this.hasClass('alert-success')) ? 'success' :
|
||||
($this.hasClass('alert-error')) ? 'error' :
|
||||
null;
|
||||
message.message = $this.children('p')
|
||||
.html()
|
||||
.replace(/<strong>(.*?)<\/strong>/g,'');
|
||||
var target = (parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined));
|
||||
target.postMessage(JSON.stringify(message, null, 2), '*');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
<style type="text/css">
|
||||
svg#topology_canvas {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
svg#topology_canvas .network-rect {
|
||||
cursor: pointer;
|
||||
}
|
||||
svg#topology_canvas .network-rect.nourl {
|
||||
cursor: auto;
|
||||
}
|
||||
svg#topology_canvas .network-name {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
fill: #fff;
|
||||
text-anchor: middle;
|
||||
}
|
||||
svg#topology_canvas .network-cidr {
|
||||
font-size: 11px;
|
||||
text-anchor: end;
|
||||
}
|
||||
svg#topology_canvas .port_text {
|
||||
font-size: 9px;
|
||||
fill: #666;
|
||||
}
|
||||
svg#topology_canvas .port_text.left {
|
||||
text-anchor: end;
|
||||
}
|
||||
svg#topology_canvas .base_bg_normal {
|
||||
fill: #333;
|
||||
}
|
||||
svg#topology_canvas .loading_bg_normal {
|
||||
fill: #555;
|
||||
}
|
||||
svg#topology_canvas .base_bg_small,
|
||||
svg#topology_canvas .loading_bg_small {
|
||||
fill: #fff;
|
||||
}
|
||||
svg#topology_canvas .active {
|
||||
fill: #45B035;
|
||||
}
|
||||
svg#topology_canvas .icon polygon {
|
||||
fill: #333;
|
||||
}
|
||||
svg#topology_canvas .instance_small .frame,
|
||||
svg#topology_canvas .router_small .frame {
|
||||
fill: url(#device_small_bg);
|
||||
stroke: #333;
|
||||
stroke-width: 3;
|
||||
}
|
||||
svg#topology_canvas .instance_small .port_text,
|
||||
svg#topology_canvas .router_small .port_text {
|
||||
display: none;
|
||||
}
|
||||
svg#topology_canvas .router_normal .frame,
|
||||
svg#topology_canvas .instance_normal .frame {
|
||||
fill: #fff;
|
||||
stroke: #333;
|
||||
stroke-width: 4;
|
||||
}
|
||||
svg#topology_canvas .router_normal .icon_bg,
|
||||
svg#topology_canvas .instance_normal .icon_bg {
|
||||
fill: #fff;
|
||||
stroke: #333;
|
||||
stroke-width: 4;
|
||||
}
|
||||
svg#topology_canvas .router_normal .texts_bg,
|
||||
svg#topology_canvas .instance_normal .texts_bg {
|
||||
fill: url('#device_normal_bg');
|
||||
}
|
||||
svg#topology_canvas .router_normal .texts .name,
|
||||
svg#topology_canvas .instance_normal .texts .name {
|
||||
text-anchor: middle;
|
||||
fill: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
svg#topology_canvas .router_normal .texts .type,
|
||||
svg#topology_canvas .instance_normal .texts .type {
|
||||
text-anchor: middle;
|
||||
fill: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
svg#topology_canvas .router_normal .instance_bg,
|
||||
svg#topology_canvas .instance_normal .instance_bg {
|
||||
fill: #333;
|
||||
}
|
||||
svg#topology_canvas g.loading .active {
|
||||
fill: #555;
|
||||
}
|
||||
svg#topology_canvas g.loading .icon polygon {
|
||||
fill: #555;
|
||||
}
|
||||
svg#topology_canvas g.loading .instance_bg {
|
||||
fill: #555;
|
||||
}
|
||||
svg#topology_canvas g.loading .instance_small .frame,
|
||||
svg#topology_canvas g.loading .router_small .frame {
|
||||
stroke: #555;
|
||||
fill: url(#device_small_bg_loading);
|
||||
}
|
||||
svg#topology_canvas g.loading .router_normal .frame,
|
||||
svg#topology_canvas g.loading .instance_normal .frame {
|
||||
stroke: #555;
|
||||
}
|
||||
svg#topology_canvas g.loading .router_normal .name,
|
||||
svg#topology_canvas g.loading .instance_normal .name {
|
||||
fill: #999;
|
||||
}
|
||||
svg#topology_canvas g.loading .router_normal .texts_bg,
|
||||
svg#topology_canvas g.loading .instance_normal .texts_bg {
|
||||
fill: url(#device_normal_bg_loading);
|
||||
}
|
||||
svg#topology_canvas g.loading .router_normal .icon_bg,
|
||||
svg#topology_canvas g.loading .instance_normal .icon_bg {
|
||||
stroke: #555;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svg width="400" height="400" id="topology_canvas">
|
||||
<defs>
|
||||
<pattern id="device_normal_bg" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<g>
|
||||
<rect width="20" height="20" class="base_bg_normal"></rect>
|
||||
</g>
|
||||
</pattern>
|
||||
<pattern id="device_normal_bg_loading" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<g>
|
||||
<rect width="20" height="20" class="loading_bg_normal"></rect>
|
||||
<path d='M0 20L20 0ZM22 18L18 22ZM-2 2L2 -2Z' stroke-linecap="square" stroke='rgba(0, 0, 0, 0.3)' stroke-width="7"></path>
|
||||
</g>
|
||||
<animate attributeName="x" attributeType="XML" begin="0s" dur="0.5s" from="0" to="-20" repeatCount="indefinite"></animate>
|
||||
</pattern>
|
||||
<pattern id="device_small_bg" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||
<g>
|
||||
<rect width="20" height="20" class="base_bg_small"></rect>
|
||||
</g>
|
||||
</pattern>
|
||||
<pattern id="device_small_bg_loading" patternUnits="userSpaceOnUse" x="0" y="0" width="5" height="5">
|
||||
<g>
|
||||
<rect width="5" height="5" class="loading_bg_small"></rect>
|
||||
<path d='M0 5L5 0ZM6 4L4 6ZM-1 1L1 -1Z' stroke-linecap="square" stroke='rgba(0, 0, 0, 0.4)' stroke-width="1.5"></path>
|
||||
</g>
|
||||
<animate attributeName="x" attributeType="XML" begin="0s" dur="0.5s" from="0" to="-5" repeatCount="indefinite"></animate>
|
||||
</pattern>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg id="topology_template" display="none">
|
||||
<g class="router_small device_body">
|
||||
<g class="ports" pointer-events="none"></g>
|
||||
<rect rx="3" ry="3" width="20" height="20" class="frame"></rect>
|
||||
<g transform="translate(3.5,3)" class="icon">
|
||||
<polygon points="12.51,4.23 12.51,0.49 8.77,0.49 9.68,1.4 6.92,4.16 8.84,6.08 11.6,3.32 "></polygon>
|
||||
<polygon points="0.49,8.77 0.49,12.51 4.23,12.51 3.32,11.6 6.08,8.83 4.17,6.92 1.4,9.68 "></polygon>
|
||||
<polygon points="1.85,5.59 5.59,5.59 5.59,1.85 4.68,2.76 1.92,0 0,1.92 2.76,4.68 "></polygon>
|
||||
<polygon points="11.15,7.41 7.41,7.41 7.41,11.15 8.32,10.24 11.08,13 13,11.08 10.24,8.32 "></polygon>
|
||||
</g>
|
||||
</g>
|
||||
<g class="instance_small device_body">
|
||||
<g class="ports" pointer-events="none"></g>
|
||||
<rect rx="3" ry="3" width="20" height="20" class="frame"></rect>
|
||||
<g transform="translate(5,3)" class="icon">
|
||||
<rect class="instance_bg" width="10" height="13"></rect>
|
||||
<rect x="2" y="1" fill="#FFFFFF" width="6" height="2"></rect>
|
||||
<rect x="2" y="4" fill="#FFFFFF" width="6" height="2"></rect>
|
||||
<circle class="active" cx="3" cy="10" r="1.3"></circle>
|
||||
</g>
|
||||
</g>
|
||||
<g class="network_container_small">
|
||||
<rect rx="7" ry="7" width="15" height="200" style="fill: #8541B5;" class="network-rect"></rect>
|
||||
<text x="250" y="-3" class="network-name" transform="rotate(90 0 0)" pointer-events="none">Network</text>
|
||||
<text x="0" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
|
||||
</g>
|
||||
<g class="router_normal device_body">
|
||||
<g class="ports" pointer-events="none"></g>
|
||||
<rect class="frame" x="0" y="0" rx="6" ry="6" width="90" height="50"></rect>
|
||||
<g class="texts" pointer-events="none">
|
||||
<rect class="texts_bg" x="1.5" y="32" width="87" height="17"></rect>
|
||||
<text x="45" y="46" class="type">Router</text>
|
||||
<text x="45" y="22" class="name">router</text>
|
||||
</g>
|
||||
<g class="icon" transform="translate(6,6)" pointer-events="none">
|
||||
<circle class="icon_bg" cx="0" cy="0" r="12"></circle>
|
||||
<g transform="translate(-6.5,-6.5)">
|
||||
<polygon points="12.51,4.23 12.51,0.49 8.77,0.49 9.68,1.4 6.92,4.16 8.84,6.08 11.6,3.32 "></polygon>
|
||||
<polygon points="0.49,8.77 0.49,12.51 4.23,12.51 3.32,11.6 6.08,8.83 4.17,6.92 1.4,9.68 "></polygon>
|
||||
<polygon points="1.85,5.59 5.59,5.59 5.59,1.85 4.68,2.76 1.92,0 0,1.92 2.76,4.68 "></polygon>
|
||||
<polygon points="11.15,7.41 7.41,7.41 7.41,11.15 8.32,10.24 11.08,13 13,11.08 10.24,8.32 "></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="instance_normal device_body">
|
||||
<g class="ports" pointer-events="none"></g>
|
||||
<rect class="frame" x="0" y="0" rx="6" ry="6" width="90" height="50"></rect>
|
||||
<g class="texts">
|
||||
<rect class="texts_bg" x="1.5" y="32" width="87" height="17"></rect>
|
||||
<text x="45" y="46" class="type">Instance</text>
|
||||
<text x="45" y="22" class="name">instance</text>
|
||||
</g>
|
||||
<g class="icon" transform="translate(6,6)">
|
||||
<circle class="icon_bg" cx="0" cy="0" r="12"></circle>
|
||||
<g transform="translate(-5,-6.5)">
|
||||
<rect class="instance_bg" width="10" height="13"></rect>
|
||||
<rect x="2" y="1" fill="#FFFFFF" width="6" height="2"></rect>
|
||||
<rect x="2" y="4" fill="#FFFFFF" width="6" height="2"></rect>
|
||||
<circle class="active" cx="3" cy="10" r="1.3"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="network_container_normal">
|
||||
<rect rx="9" ry="9" width="17" height="500" style="fill: #8541B5;" class="network-rect"></rect>
|
||||
<text x="250" y="-4" class="network-name" transform="rotate(90 0 0)" pointer-events="none">Network</text>
|
||||
<text x="490" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{% extends "horizon/client_side/template.html" %}
|
||||
{% load horizon %}
|
||||
|
||||
{% block id %}balloon_container{% endblock %}
|
||||
|
||||
{% block template %}
|
||||
{% jstemplate %}
|
||||
<div class="topologyBalloon" id="[[balloon_id]]">
|
||||
<a href="#close" class="closeTopologyBalloon">×</a>
|
||||
<div class="contentBody">
|
||||
[[> table1]]
|
||||
[[> table2]]
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footerInner">
|
||||
<div class="cell link">
|
||||
<a href="[[url]]">» view [[type]] details</a>
|
||||
[[#console_id]]
|
||||
<a href="/project/instances/[[console_id]]/vnc" class="vnc_window">» open console</a>
|
||||
[[/console_id]]
|
||||
</div>
|
||||
<div class="cell delete">
|
||||
<button class="delete-device btn btn-danger btn-mini [[type]]" data-type="[[type]]" data-device-id="[[id]]">[[type_capital]]</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endjstemplate %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{% extends "horizon/client_side/template.html" %}
|
||||
{% load horizon %}
|
||||
|
||||
{% block id %}balloon_device{% endblock %}
|
||||
|
||||
{% block template %}
|
||||
{% jstemplate %}
|
||||
<table class="detaiInfoTable">
|
||||
<caption>[[name]]</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="device">ID</th>
|
||||
<td>[[id]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="device">STATUS</th>
|
||||
<td>
|
||||
<span class="[[status_class]]">[[status]]</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endjstemplate %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{% extends "horizon/client_side/template.html" %}
|
||||
{% load horizon %}
|
||||
|
||||
{% block id %}balloon_port{% endblock %}
|
||||
|
||||
{% block template %}
|
||||
{% jstemplate %}
|
||||
<table class="detaiInfoTable">
|
||||
<caption>Interfaces</caption>
|
||||
<tbody>
|
||||
[[#port]]
|
||||
<tr>
|
||||
<th>
|
||||
<span title="[[id]]">
|
||||
<a href="[[url]]">[[id]]</a>
|
||||
</span>
|
||||
</th>
|
||||
<td>[[ip_address]]</td>
|
||||
<td>[[device_owner]]</td>
|
||||
<td>
|
||||
<span class="[[port_status_class]]">[[port_status]]</span>
|
||||
</td>
|
||||
<td class="delete">
|
||||
[[#is_interface]]
|
||||
<button class="delete-port btn btn-danger btn-mini" data-router-id="[[router_id]]" data-port-id="[[id]]">Interface</button>
|
||||
[[/is_interface]]
|
||||
</td>
|
||||
</tr>
|
||||
[[/port]]
|
||||
</tbody>
|
||||
</table>
|
||||
{% endjstemplate %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{% extends 'base.html' %}
|
||||
{% load i18n %}
|
||||
{% block title %}{% trans "Create Router" %}{% endblock %}
|
||||
|
||||
{% block page_header %}
|
||||
{% include "horizon/common/_page_header.html" with title=_("Create a Router") %}
|
||||
{% endblock page_header %}
|
||||
|
||||
{% block main %}
|
||||
{% include 'project/network_topology/_create_router.html' %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
|
||||
<script src='{{ STATIC_URL }}horizon/lib/jquery/jquery.min.js' type='text/javascript' charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% include "horizon/_messages.html" %}
|
||||
{% firstof table.render interfaces_table.render %}
|
||||
{% include "project/network_topology/_post_massage.html" %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,30 +8,32 @@
|
|||
{% endblock page_header %}
|
||||
|
||||
{% block main %}
|
||||
<style>
|
||||
/* TODO(nati): The following styles are not work with compress, so put it here tempolary */
|
||||
div.network .router:hover div.port,
|
||||
div.network .server:hover div.port,
|
||||
div.network .device:hover div.port {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(0, 0, 0, 0.25)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(0, 0, 0, 0.25)), color-stop(0.75, rgba(0, 0, 0, 0.25)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
|
||||
}
|
||||
</style>
|
||||
|
||||
<noscript>
|
||||
{% trans "This pane needs javascript support." %}
|
||||
</noscript>
|
||||
<div class="launchButtons">
|
||||
<a href="{% url 'horizon:project:instances:launch' %}" id="instances__action_launch" class="btn btn-small btn-launch ajax-modal">{%trans "Launch Instance" %}</a>
|
||||
<a href="{% url 'horizon:project:networks:create' %}" id="networks__action_create" class="btn btn-small ajax-modal btn-create">{%trans "Create Network" %}</a>
|
||||
<a href="{% url 'horizon:project:routers:create' %}" id="Routers__action_create" class="btn btn-small ajax-modal btn-create">{%trans "Create Router" %}</a>
|
||||
|
||||
{% include "project/network_topology/client_side/_balloon_container.html" %}
|
||||
{% include "project/network_topology/client_side/_balloon_device.html" %}
|
||||
{% include "project/network_topology/client_side/_balloon_port.html" %}
|
||||
|
||||
<div class="topologyNavi">
|
||||
<div class="toggleView btn-group" data-toggle="buttons-radio">
|
||||
<button type="button" class="btn small" data-value="small"><i class="icon-th"></i>{%trans "Small" %}</button>
|
||||
<button type="button" class="btn normal" data-value="normal"><i class="icon-th-large"></i>{%trans "Normal" %}</button>
|
||||
</div>
|
||||
|
||||
<div class="launchButtons">
|
||||
<a href="{% url 'horizon:project:network_topology:launchinstance' %}" id="instances__action_launch" class="btn btn-small btn-launch ajax-modal">{%trans "Launch Instance" %}</a>
|
||||
<a href="{% url 'horizon:project:network_topology:createnetwork' %}" id="networks__action_create" class="btn btn-small ajax-modal btn-create">{%trans "Create Network" %}</a>
|
||||
<a href="{% url 'horizon:project:network_topology:createrouter' %}" id="Routers__action_create" class="btn btn-small ajax-modal btn-create">{%trans "Create Router" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="topologyCanvas">
|
||||
<div class="networks"></div>
|
||||
<div class="nodata">{% blocktrans %}There are no networks, routers, or connected instances to display. {% endblocktrans %}</div>
|
||||
<div id="topologyCanvasContainer">
|
||||
<div class="nodata">{% blocktrans %}There are no networks, routers, or connected instances to display.{% endblocktrans %}</div>
|
||||
{% include "project/network_topology/_svg_element.html" %}
|
||||
</div>
|
||||
<span data-networktopology="{% url 'horizon:project:network_topology:json' %}" id="networktopology"></span>
|
||||
<div id="topologyMessages"></div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -22,11 +22,36 @@
|
|||
from django.conf.urls.defaults import patterns # noqa
|
||||
from django.conf.urls.defaults import url # noqa
|
||||
|
||||
from openstack_dashboard.dashboards.project.network_topology import views
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
InstanceView # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
JSONView # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
NetworkTopologyView # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
NTCreateNetworkView # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
NTCreateRouterView # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
NTLaunchInstanceView # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
RouterDetailView # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.views import\
|
||||
RouterView # noqa
|
||||
|
||||
|
||||
urlpatterns = patterns(
|
||||
'openstack_dashboard.dashboards.project.network_topology.views',
|
||||
url(r'^$', views.NetworkTopology.as_view(), name='index'),
|
||||
url(r'^json$', views.JSONView.as_view(), name='json'),
|
||||
url(r'^$', NetworkTopologyView.as_view(), name='index'),
|
||||
url(r'^router$', RouterView.as_view(), name='router'),
|
||||
url(r'^instance$', InstanceView.as_view(), name='instance'),
|
||||
url(r'^router/(?P<router_id>[^/]+)/$', RouterDetailView.as_view(),
|
||||
name='detail'),
|
||||
url(r'^json$', JSONView.as_view(), name='json'),
|
||||
url(r'^launchinstance$', NTLaunchInstanceView.as_view(),
|
||||
name='launchinstance'),
|
||||
url(r'^createnetwork$', NTCreateNetworkView.as_view(),
|
||||
name='createnetwork'),
|
||||
url(r'^createrouter$', NTCreateRouterView.as_view(),
|
||||
name='createrouter'),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -21,14 +21,73 @@
|
|||
import json
|
||||
|
||||
from django.core.urlresolvers import reverse # noqa
|
||||
from django.core.urlresolvers import reverse_lazy # noqa
|
||||
from django.http import HttpResponse # noqa
|
||||
from django.views.generic import TemplateView # noqa
|
||||
from django.views.generic import View # noqa
|
||||
|
||||
from openstack_dashboard import api
|
||||
|
||||
from openstack_dashboard.dashboards.project.network_topology.instances.tables\
|
||||
import InstancesTable # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.ports.tables\
|
||||
import PortsTable # noqa
|
||||
from openstack_dashboard.dashboards.project.network_topology.routers.tables\
|
||||
import RoutersTable # noqa
|
||||
|
||||
class NetworkTopology(TemplateView):
|
||||
from openstack_dashboard.dashboards.project.instances import\
|
||||
views as i_views
|
||||
from openstack_dashboard.dashboards.project.instances.workflows import\
|
||||
create_instance as i_workflows
|
||||
from openstack_dashboard.dashboards.project.networks import\
|
||||
views as n_views
|
||||
from openstack_dashboard.dashboards.project.networks import\
|
||||
workflows as n_workflows
|
||||
from openstack_dashboard.dashboards.project.routers import\
|
||||
views as r_views
|
||||
|
||||
|
||||
class NTCreateRouterView (r_views.CreateView):
|
||||
template_name = 'project/network_topology/create_router.html'
|
||||
success_url = reverse_lazy("horizon:project:network_topology:index")
|
||||
|
||||
|
||||
class NTCreateNetwork (n_workflows.CreateNetwork):
|
||||
def get_success_url(self):
|
||||
return reverse("horizon:project:network_topology:index")
|
||||
|
||||
def get_failure_url(self):
|
||||
return reverse("horizon:project:network_topology:index")
|
||||
|
||||
|
||||
class NTCreateNetworkView (n_views.CreateView):
|
||||
workflow_class = NTCreateNetwork
|
||||
|
||||
|
||||
class NTLaunchInstance (i_workflows.LaunchInstance):
|
||||
success_url = "horizon:project:network_topology:index"
|
||||
|
||||
|
||||
class NTLaunchInstanceView (i_views.LaunchInstanceView):
|
||||
workflow_class = NTLaunchInstance
|
||||
|
||||
|
||||
class InstanceView (i_views.IndexView):
|
||||
table_class = InstancesTable
|
||||
template_name = 'project/network_topology/iframe.html'
|
||||
|
||||
|
||||
class RouterView (r_views.IndexView):
|
||||
table_class = RoutersTable
|
||||
template_name = 'project/network_topology/iframe.html'
|
||||
|
||||
|
||||
class RouterDetailView (r_views.DetailView):
|
||||
table_classes = (PortsTable, )
|
||||
template_name = 'project/network_topology/iframe.html'
|
||||
|
||||
|
||||
class NetworkTopologyView (TemplateView):
|
||||
template_name = 'project/network_topology/index.html'
|
||||
|
||||
|
||||
|
|
@ -57,33 +116,39 @@ class JSONView(View):
|
|||
servers = []
|
||||
data['servers'] = [{'name': server.name,
|
||||
'status': server.status,
|
||||
'task': getattr(server, 'OS-EXT-STS:task_state'),
|
||||
'id': server.id} for server in servers]
|
||||
self.add_resource_url('horizon:project:instances:detail',
|
||||
data['servers'])
|
||||
|
||||
# Get neutron data
|
||||
# if we didn't specify tenant_id, all networks shown as admin user.
|
||||
# so it is need to specify the networks. However there is no need to
|
||||
# specify tenant_id for subnet. The subnet which belongs to the public
|
||||
# network is needed to draw subnet information on public network.
|
||||
try:
|
||||
neutron_public_networks = api.neutron.network_list(request,
|
||||
**{'router:external': True})
|
||||
neutron_networks = api.neutron.network_list_for_tenant(request,
|
||||
request.user.tenant_id)
|
||||
neutron_subnets = api.neutron.subnet_list(request,
|
||||
tenant_id=request.user.tenant_id)
|
||||
neutron_ports = api.neutron.port_list(request,
|
||||
tenant_id=request.user.tenant_id)
|
||||
neutron_routers = api.neutron.router_list(request,
|
||||
tenant_id=request.user.tenant_id)
|
||||
neutron_public_networks = api.neutron.network_list(
|
||||
request,
|
||||
**{'router:external': True})
|
||||
neutron_networks = api.neutron.network_list_for_tenant(
|
||||
request,
|
||||
request.user.tenant_id)
|
||||
neutron_ports = api.neutron.port_list(request)
|
||||
neutron_routers = api.neutron.router_list(
|
||||
request,
|
||||
tenant_id=request.user.tenant_id)
|
||||
except Exception:
|
||||
neutron_public_networks = []
|
||||
neutron_networks = []
|
||||
neutron_subnets = []
|
||||
neutron_ports = []
|
||||
neutron_routers = []
|
||||
|
||||
networks = [{'name': network.name,
|
||||
'id': network.id,
|
||||
'router:external': network['router:external']}
|
||||
for network in neutron_networks]
|
||||
'id': network.id,
|
||||
'subnets': [{'cidr': subnet.cidr}
|
||||
for subnet in network.subnets],
|
||||
'router:external': network['router:external']}
|
||||
for network in neutron_networks]
|
||||
self.add_resource_url('horizon:project:networks:detail',
|
||||
networks)
|
||||
# Add public networks to the networks list
|
||||
|
|
@ -93,29 +158,37 @@ class JSONView(View):
|
|||
if publicnet.id == network['id']:
|
||||
found = True
|
||||
if not found:
|
||||
networks.append({'name': publicnet.name,
|
||||
'id': publicnet.id,
|
||||
'router:external': publicnet['router:external']})
|
||||
try:
|
||||
subnets = [{'cidr': subnet.cidr}
|
||||
for subnet in publicnet.subnets]
|
||||
except Exception:
|
||||
subnets = []
|
||||
networks.append({
|
||||
'name': publicnet.name,
|
||||
'id': publicnet.id,
|
||||
'subnets': subnets,
|
||||
'router:external': publicnet['router:external']})
|
||||
data['networks'] = sorted(networks,
|
||||
key=lambda x: x.get('router:external'),
|
||||
reverse=True)
|
||||
|
||||
data['subnets'] = [{'id': subnet.id,
|
||||
'cidr': subnet.cidr,
|
||||
'network_id': subnet.network_id}
|
||||
for subnet in neutron_subnets]
|
||||
|
||||
data['ports'] = [{'id': port.id,
|
||||
'network_id': port.network_id,
|
||||
'device_id': port.device_id,
|
||||
'fixed_ips': port.fixed_ips} for port in neutron_ports]
|
||||
'network_id': port.network_id,
|
||||
'device_id': port.device_id,
|
||||
'fixed_ips': port.fixed_ips,
|
||||
'device_owner': port.device_owner,
|
||||
'status': port.status
|
||||
}
|
||||
for port in neutron_ports]
|
||||
self.add_resource_url('horizon:project:networks:ports:detail',
|
||||
data['ports'])
|
||||
|
||||
data['routers'] = [{'id': router.id,
|
||||
'name': router.name,
|
||||
'external_gateway_info': router.external_gateway_info}
|
||||
for router in neutron_routers]
|
||||
data['routers'] = [{
|
||||
'id': router.id,
|
||||
'name': router.name,
|
||||
'status': router.status,
|
||||
'external_gateway_info': router.external_gateway_info}
|
||||
for router in neutron_routers]
|
||||
|
||||
# user can't see port on external network. so we are
|
||||
# adding fake port based on router information
|
||||
|
|
|
|||
|
|
@ -1701,9 +1701,7 @@ label.log-length {
|
|||
border: 1px solid #ccc;
|
||||
min-height: 2em;
|
||||
width: auto !important;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.box-sizing(border-box);
|
||||
li {
|
||||
width: 226px;
|
||||
list-style-type: none;
|
||||
|
|
@ -1728,16 +1726,13 @@ label.log-length {
|
|||
vertical-align: middle;
|
||||
}
|
||||
a.btn {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.box-sizing(border-box);
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
padding: 2px 5px 3px;
|
||||
margin-right: 1px;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
//position: absolute;
|
||||
right:5px;
|
||||
vertical-align: middle;
|
||||
float: right;
|
||||
|
|
@ -1804,302 +1799,236 @@ label.log-length {
|
|||
|
||||
}
|
||||
|
||||
/* Styling for network topology */
|
||||
.box-sizing(@box: border-box) {
|
||||
-webkit-box-sizing: @box;
|
||||
-moz-box-sizing: @box;
|
||||
-ms-box-sizing: @box;
|
||||
-o-box-sizing: @box;
|
||||
box-sizing: @box;
|
||||
}
|
||||
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 20px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 20px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 20px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 20px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
#topologyCanvas {
|
||||
.box-sizing();
|
||||
/**** Network Topology CSS ****/
|
||||
#topologyCanvasContainer {
|
||||
.box-sizing(border-box);
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: auto;
|
||||
padding: 25px;
|
||||
padding-left: 50px;
|
||||
background: #efefef;
|
||||
min-height: 400px;
|
||||
div.nodata {
|
||||
font-size: 150%;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding-top: 200px;
|
||||
padding-top: 150px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
div.networks {
|
||||
height: 100%;
|
||||
}
|
||||
div.network {
|
||||
.box-sizing();
|
||||
float: left;
|
||||
width: 270px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.nicname {
|
||||
.box-sizing();
|
||||
height: 100%;
|
||||
width: 17px;
|
||||
border-radius: 17px;
|
||||
z-index: 200;
|
||||
color:#fff;
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 0px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
||||
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
||||
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
||||
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
&.nourl {
|
||||
cursor: auto;
|
||||
&:hover {
|
||||
background-image:none;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
top:55%;
|
||||
color:#fff;
|
||||
left:-1px;
|
||||
letter-spacing: 0.2em;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
|
||||
white-space: nowrap;
|
||||
text-shadow: 0px 0px 5px #000;
|
||||
}
|
||||
span.ip {
|
||||
position: absolute;
|
||||
bottom:-10px;
|
||||
left:20px;
|
||||
color: #000;
|
||||
&.noinfo {
|
||||
div.nodata {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 90%;
|
||||
letter-spacing: 0.2em;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-o-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0px 0px 2px #fff,0px 0px 2px #fff;
|
||||
|
||||
}
|
||||
}
|
||||
.router, .server, .device {
|
||||
.box-sizing();
|
||||
cursor: pointer;
|
||||
width: 90px;
|
||||
border: 3px solid #444;
|
||||
position: absolute;
|
||||
top:30px;
|
||||
left:90px;
|
||||
color:#fff;
|
||||
padding: 0 3px;
|
||||
background: #666;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
&:before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #444;
|
||||
line-height: 1.2;
|
||||
position: absolute;
|
||||
border-radius: 20px;
|
||||
top:-10px;
|
||||
left:-10px;
|
||||
background:#fff url(/static/dashboard/img/router.png) no-repeat center center;
|
||||
background-size: 16px 16px;
|
||||
#topology_canvas {
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
line-height: 1.2;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
height: 1.5em;
|
||||
bottom:0px;
|
||||
left: 0px;
|
||||
}
|
||||
span.devicename {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
bottom: 0px;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index:300;
|
||||
left:-2px;
|
||||
}
|
||||
span.name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
font-size : 12px;
|
||||
position: relative;
|
||||
z-index:10;
|
||||
text-align: center;
|
||||
top:4px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
div.port {
|
||||
text-align: right;
|
||||
min-width: 90px;
|
||||
height: 10px;
|
||||
font:0px/0px sans-serif;
|
||||
position: absolute;
|
||||
left:-91px;
|
||||
top:8px;
|
||||
background-color: #37a9e3;
|
||||
background-image: none;
|
||||
-webkit-background-size: 20px 20px;
|
||||
-moz-background-size: 20px 20px;
|
||||
-o-background-size: 20px 20px;
|
||||
background-size: 20px 20px;
|
||||
z-index:100;
|
||||
span.ip {
|
||||
.box-sizing();
|
||||
color: #333;
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
text-shadow: 0px -1px #fff;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
display: inline-block;
|
||||
padding-right:8px;
|
||||
padding-left: 8px;
|
||||
word-wrap:break-word;
|
||||
word-break:break-all;
|
||||
}
|
||||
&.right {
|
||||
left:auto;
|
||||
right:-92px;
|
||||
width: 92px;
|
||||
text-align: left;
|
||||
span.ip {
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
div.port {
|
||||
cursor:pointer;
|
||||
background-color: #2688c0;
|
||||
-webkit-animation: progress-bar-stripes 1s linear infinite;
|
||||
-moz-animation: progress-bar-stripes 1s linear infinite;
|
||||
-ms-animation: progress-bar-stripes 1s linear infinite;
|
||||
-o-animation: progress-bar-stripes 1s linear infinite;
|
||||
animation: progress-bar-stripes 1s linear infinite;
|
||||
&:hover {
|
||||
-webkit-animation: progress-bar-stripes 0.3s linear infinite;
|
||||
-moz-animation: progress-bar-stripes 0.3s linear infinite;
|
||||
-ms-animation: progress-bar-stripes 0.3s linear infinite;
|
||||
-o-animation: progress-bar-stripes 0.3s linear infinite;
|
||||
animation: progress-bar-stripes 0.3s linear infinite;
|
||||
}
|
||||
&.nourl {
|
||||
cursor: auto;
|
||||
background-image:none;
|
||||
&:hover {
|
||||
background-image:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-color: #222;
|
||||
&:after {
|
||||
background-color: #222;
|
||||
border-color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
.device {
|
||||
border:none;
|
||||
background: transparent;
|
||||
}
|
||||
.server {
|
||||
&:before {
|
||||
background:#fff url(/static/dashboard/img/server.png) no-repeat center center;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
background: #fff;
|
||||
color:#333;
|
||||
}
|
||||
}
|
||||
|
||||
.launchButtons {
|
||||
text-align: right;
|
||||
margin: 10px 0px 15px 10px;
|
||||
a.btn {
|
||||
.topologyNavi {
|
||||
overflow: hidden;
|
||||
i {margin-right: 3px;}
|
||||
margin: 10px 0 20px;
|
||||
.toggleView {
|
||||
float: left;
|
||||
}
|
||||
.launchButtons {
|
||||
float: right;
|
||||
text-align: right;
|
||||
a.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topologyBalloon {
|
||||
display: none;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left:100px;
|
||||
top:20px;
|
||||
z-index: 600;
|
||||
border-radius: 5px;
|
||||
color:#333;
|
||||
min-width: 200px;
|
||||
&.on {
|
||||
display: block;
|
||||
}
|
||||
line-height: 1.2;
|
||||
.vnc_window {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.closeTopologyBalloon {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
right: 6px;
|
||||
top: 0px;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
color:#aaa;
|
||||
&:hover {
|
||||
color:#777;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.contentBody {
|
||||
padding: 8px 8px 0;
|
||||
}
|
||||
span.active, span.down {
|
||||
&:before {
|
||||
content: "";
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
display: inline-block;
|
||||
background: #0d925b;
|
||||
margin-right: 3px;
|
||||
border-radius: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
span.down {
|
||||
&:before {
|
||||
background: #e64b41;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background: #efefef;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
padding: 8px;
|
||||
border-radius: 0px 0px 7px 7px;
|
||||
.footerInner {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.cell {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
}
|
||||
.delete {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
.btn {
|
||||
&:before {
|
||||
content:"Delete ";
|
||||
}
|
||||
&.deleting:before {
|
||||
content:"Deleting ";
|
||||
}
|
||||
}
|
||||
.btn.instance {
|
||||
&:before {
|
||||
content:"Terminate ";
|
||||
}
|
||||
&.deleting:before {
|
||||
content:"Terminating ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
table.detaiInfoTable {
|
||||
margin-bottom: 5px;
|
||||
caption {
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
th,td {
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
th {
|
||||
color:#999;
|
||||
padding-right: 8px;
|
||||
width: 80px;
|
||||
span {
|
||||
vertical-align: middle;
|
||||
width:80px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
&.device {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td.delete {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.btn {
|
||||
line-height: 1.4;
|
||||
}
|
||||
.btn:before {
|
||||
content:"Delete ";
|
||||
}
|
||||
.btn.deleting:before {
|
||||
content:"Deleting ";
|
||||
}
|
||||
}
|
||||
font-size: 11px;
|
||||
.box-shadow(0px 1px 6px #777);
|
||||
&:before {
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 9px solid #bbb;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -9px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 8px solid #fff;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
left: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.leftPosition {
|
||||
&:before {
|
||||
border-right: none;
|
||||
border-left: 9px solid #bbb;
|
||||
right: -9px;
|
||||
top: 30px;
|
||||
left:auto;
|
||||
}
|
||||
&:after {
|
||||
border-right: none;
|
||||
border-left: 8px solid #fff;
|
||||
right: -8px;
|
||||
top: 31px;
|
||||
left:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topologyMessages {
|
||||
width:1px;
|
||||
height:1px;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
}
|
||||
|
||||
/**** Resource Topology CSS ****/
|
||||
|
|
|
|||
Loading…
Reference in New Issue