openstack
/
horizon
Code Issues Proposed changes

Merge "Provide a button to center the network topology"

This commit is contained in:
Zuul 2018-03-18 09:11:43 +00:00 committed by Gerrit Code Review
parent 67df90820c 666762956a
commit b38570244e
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();