From 06fe25cba6997388cd74610744952c82597cf747 Mon Sep 17 00:00:00 2001
From: Timur Sufiev <tsufiev@mirantis.com>
Date: Thu, 11 Dec 2014 17:09:09 +0300
Subject: [PATCH] Add a graphical distinction for external networks at Topology
 page

Use font-awesome 'globe' glyph to indicate that network is
external. Also show a tooltip 'External Network' on hovering the
glyph.

Change-Id: I597e10a11e956a01874732bb0e9827262ebdad5d
Closes-Bug: #1381531
---
 .../horizon/js/horizon.networktopology.js     | 19 ++++++++++++++++++-
 .../network_topology/_svg_element.html        |  8 ++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/horizon/static/horizon/js/horizon.networktopology.js b/horizon/static/horizon/js/horizon.networktopology.js
index ef79fc7d3d..f5fd212ad9 100644
--- a/horizon/static/horizon/js/horizon.networktopology.js
+++ b/horizon/static/horizon/js/horizon.networktopology.js
@@ -2,6 +2,8 @@
 
 horizon.network_topology = {
   model: null,
+  fa_globe_glyph: '\uf0ac',
+  fa_globe_glyph_width: 15,
   svg:'#topology_canvas',
   svg_container:'#topologyCanvasContainer',
   post_messages:'#topologyMessages',
@@ -261,7 +263,9 @@ horizon.network_topology = {
     network
       .select('.network-cidr')
       .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) {
         var cidr = $.map(d.subnets,function(n, i){
@@ -269,6 +273,19 @@ horizon.network_topology = {
         });
         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();
 
diff --git a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_svg_element.html b/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_svg_element.html
index 638e118e51..f1c021010b 100644
--- a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_svg_element.html
+++ b/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_svg_element.html
@@ -19,6 +19,10 @@ svg#topology_canvas .network-cidr {
   font-size: 11px;
   text-anchor: end;
 }
+svg#topology_canvas text.network-type {
+  font-family: FontAwesome;
+  text-anchor: end;
+}
 svg#topology_canvas .port_text {
   font-size: 9px;
   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>
     <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-type" transform="rotate(90 0 0)"
+          data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></text>
   </g>
   <g class="router_normal device_body">
     <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>
     <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-type" transform="rotate(90 0 0)"
+          data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></text>
   </g>
 </svg>