openstack/horizon
Code Issues Proposed changes

Merge "Add a graphical distinction for external networks at Topology page"

Browse Source
This commit is contained in:
Jenkins 2014-12-30 18:41:19 +00:00 committed by Gerrit Code Review
commit cdfc621c9b
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
horizon/static/horizon/js/horizon.networktopology.js
View File

@ -2,6 +2,8 @@
horizon.network_topology = { horizon.network_topology = {
model: null, model: null,
fa_globe_glyph: '\uf0ac',
fa_globe_glyph_width: 15,
svg:'#topology_canvas', svg:'#topology_canvas',
svg_container:'#topologyCanvasContainer', svg_container:'#topologyCanvasContainer',
post_messages:'#topologyMessages', post_messages:'#topologyMessages',
@ -261,7 +263,9 @@ horizon.network_topology = {
network network
.select('.network-cidr') .select('.network-cidr')
.attr('x', function(d) { .attr('x', function(d) {
return self.network_height - self.element_properties.cidr_margin; var padding = isExternalNetwork(d) ? self.fa_globe_glyph_width : 0;
return self.network_height - self.element_properties.cidr_margin -
padding;
}) })
.text(function(d) { .text(function(d) {
var cidr = $.map(d.subnets,function(n, i){ var cidr = $.map(d.subnets,function(n, i){
@ -269,6 +273,19 @@ horizon.network_topology = {
}); });
return cidr.join(', '); return cidr.join(', ');
}); });
function isExternalNetwork(d) {
return d['router:external'];
}
network
.select('.network-type')
.text(function(d) {
return isExternalNetwork(d) ? self.fa_globe_glyph : '';
})
.attr('x', function(d) {
return self.network_height - self.element_properties.cidr_margin;
});
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
network.exit().remove(); network.exit().remove();

8
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_svg_element.html
View File

@ -19,6 +19,10 @@ svg#topology_canvas .network-cidr {
font-size: 11px; font-size: 11px;
text-anchor: end; text-anchor: end;
} }
svg#topology_canvas text.network-type {
font-family: FontAwesome;
text-anchor: end;
}
svg#topology_canvas .port_text { svg#topology_canvas .port_text {
font-size: 9px; font-size: 9px;
fill: #666; fill: #666;
@ -169,6 +173,8 @@ svg#topology_canvas g.loading .instance_normal .icon_bg {
<rect rx="7" ry="7" width="15" height="200" style="fill: #8541B5;" class="network-rect"></rect> <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="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> <text x="0" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
<text x="0" y="-20" class="network-type" transform="rotate(90 0 0)"
data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></text>
</g> </g>
<g class="router_normal device_body"> <g class="router_normal device_body">
<g class="ports" pointer-events="none"></g> <g class="ports" pointer-events="none"></g>
@ -210,5 +216,7 @@ svg#topology_canvas g.loading .instance_normal .icon_bg {
<rect rx="9" ry="9" width="17" height="500" style="fill: #8541B5;" class="network-rect"></rect> <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="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> <text x="490" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
<text x="490" y="-20" class="network-type" transform="rotate(90 0 0)"
data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></text>
</g> </g>
</svg> </svg>