From 666762956ad8668196091998ca8a278cc16eee5e Mon Sep 17 00:00:00 2001
From: Itxaka Serrano Garcia <igarcia@suse.com>
Date: Tue, 23 Feb 2016 18:18:00 +0100
Subject: [PATCH] Provide a button to center the network topology

In some cases by moving the network topology svg around and
playing with the zoom, you can lose track of it as it goes
out of view. Provide a button that resets the visualization
so it gets in the center and removes zoom.

Co-Authored-By: Ameed Ashour <Ameed.Ashour.ext@nokia.com>
Co-Authored-By: Paul Karikh <pkarikh@mirantis.com>
Change-Id: Ide5e10ec82972890fe20d68c4aa1d367df9863f6
Closes-Bug: #1540484
---
 .../network_topology/_graph_view.html         |  3 ++
 .../templates/network_topology/index.html     | 17 +++++++++++
 .../scss/components/_network_topology.scss    |  6 ++++
 .../static/js/horizon.networktopology.js      | 30 +++++++++++++++++++
 4 files changed, 56 insertions(+)

diff --git a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html b/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html
index c5664c3e7b..da1b2527d8 100644
--- a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html
+++ b/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html
@@ -17,6 +17,9 @@
       <span class="fa fa-th"></span>  {% trans "Toggle Network Collapse" %}
     </label>
   </div>
+    <button type="button" class="btn btn-default" id="center_topology">
+      <span class="fa fa-refresh"></span> {%trans "Center Topology" %}
+    </button>
 </div>
 <div id="topologyCanvasContainer" class="d3-container">
   <div class="nodata">{% blocktrans trimmed %}
diff --git a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/index.html b/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/index.html
index ae27698e0e..176cfd35ca 100644
--- a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/index.html
+++ b/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/index.html
@@ -18,6 +18,23 @@
 <div class="row">
   <div class="col-sm-12">
     {{ tab_group.render }}
+<div class="topologyNavi">
+  <div class="launchButtons">
+  {% if launch_instance_allowed %}
+  {% if show_ng_launch %}
+  {% url 'horizon:project:network_topology:index' as networkUrl %}
+  <a href="javascript:void(0);" ng-controller="LaunchInstanceModalController as modal" ng-click="modal.openLaunchInstanceWizard({successUrl: '{{networkUrl}}'})" id="instances__action_launch-ng" class="btn btn-default btn-sm btn-launch {% if instance_quota_exceeded %}disabled{% endif %}"><span class="fa fa-cloud-upload"></span> {% if instance_quota_exceeded %}{% trans "Launch Instance (Quota exceeded)"%}{% else %}{% trans "Launch Instance"%}{% endif %}</a>
+  {% endif %}
+  {% if show_legacy_launch %}
+  <a href="{% url 'horizon:project:network_topology:launchinstance' %}" id="instances__action_launch" class="btn btn-default btn-sm btn-launch ajax-modal {% if instance_quota_exceeded %}disabled{% endif %}"><span class="fa fa-cloud-upload"></span> {% if instance_quota_exceeded %}{% trans "Launch Instance (Quota exceeded)"%}{% else %}{% trans "Launch Instance"%}{% endif %}</a>
+  {% endif %}
+  {% endif %}
+  {% if create_network_allowed %}
+      <a href="{% url 'horizon:project:network_topology:createnetwork' %}" id="networks__action_create" class="btn btn-default btn-sm ajax-modal {% if network_quota_exceeded %}disabled{% endif %}"><span class="fa fa-plus"></span> {% if network_quota_exceeded %}{% trans "Create Network (Quota exceeded)"%}{% else %}{% trans "Create Network"%}{% endif %}</a>
+  {% endif %}
+  {% if create_router_allowed %}
+      <a href="{% url 'horizon:project:network_topology:createrouter' %}" id="Routers__action_create" class="btn btn-default btn-sm ajax-modal {% if router_quota_exceeded %}disabled{% endif %}"><span class="fa fa-plus"></span> {% if router_quota_exceeded %}{% trans "Create Router (Quota exceeded)"%}{% else %}{% trans "Create Router"%}{% endif %}</a>
+  {% endif %}
   </div>
 </div>
 
diff --git a/openstack_dashboard/static/dashboard/scss/components/_network_topology.scss b/openstack_dashboard/static/dashboard/scss/components/_network_topology.scss
index 7d9406fe3b..d4e13d3268 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_network_topology.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_network_topology.scss
@@ -225,3 +225,9 @@
   position: absolute;
   top: -100px;
 }
+
+/* reset topology button */
+#center_topology {
+  margin-left: $padding-xs-horizontal;
+  margin-right: $padding-xs-horizontal;
+}
\ No newline at end of file
diff --git a/openstack_dashboard/static/js/horizon.networktopology.js b/openstack_dashboard/static/js/horizon.networktopology.js
index f8d97ff749..08d3cf42eb 100644
--- a/openstack_dashboard/static/js/horizon.networktopology.js
+++ b/openstack_dashboard/static/js/horizon.networktopology.js
@@ -142,6 +142,36 @@ horizon.network_topology = {
       self.refresh_labels();
     });
 
+    angular.element('#center_topology').click(function() {
+     this.blur(); // remove btn focus after click
+     self.delete_balloon();
+      // move visualization to the center and reset scale
+      self.vis.transition()
+        .duration(1500)
+        .attr('transform', 'translate(0,0)scale(1)');
+
+      // reset internal zoom translate and scale parameters so on next
+      // move the objects do not jump to the old position
+      self.zoom.translate([0,0]);
+      self.zoom.scale(1);
+      self.translate = null;
+    });
+    angular.element(window).on('message', function(e) {
+        var message = angular.element.parseJSON(e.originalEvent.data);
+        if (self.previous_message !== message.message) {
+          horizon.alert(message.type, message.message);
+          self.previous_message = message.message;
+          self.delete_post_message(message.iframe_id);
+          if (message.type == 'success' && self.deleting_device) {
+            self.remove_node_on_delete();
+          }
+          self.retrieve_network_info();
+          setTimeout(function() {
+            self.previous_message = null;
+          },10000);
+        }
+      });
+
     // set up loader first thing
     self.$loading_template.show();