openstack
/
horizon
Code Issues Proposed changes

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
This commit is contained in:
Itxaka Serrano Garcia 2016-02-23 18:18:00 +01:00 committed by Ameed Ashour
parent 3a461ef1f1
commit 666762956a
4 changed files with 56 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html
View File

@ -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 %}

17
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/index.html
View File

@ -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>

6
openstack_dashboard/static/dashboard/scss/components/_network_topology.scss
View File

@ -225,3 +225,9 @@
position: absolute;
top: -100px;
}
/* reset topology button */
#center_topology {
margin-left: $padding-xs-horizontal;
margin-right: $padding-xs-horizontal;
}

30
openstack_dashboard/static/js/horizon.networktopology.js
View File

@ -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();