openstack/horizon
Code Issues Proposed changes

Merge "Fixes toggle behavior in Network Topology graphs"

Browse Source
This commit is contained in:
Zuul 2017-10-21 05:46:15 +00:00 committed by Gerrit Code Review
commit cb6fcc1d7a
2 changed files with 58 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,13 +7,15 @@
{% endblocktrans %}
</div>
<div class="topology-navi">
<div class="toggle-view btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default" id="toggle_labels">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" id="toggle_labels_label">
<input type="checkbox" autocomplete="off" id="toggle_labels">
<span class="fa fa-th-large"></span> {% trans "Toggle Labels" %}
</button>
<button type="button" class="btn btn-default" id="toggle_networks">
<span class="fa fa-th"></span> {% trans "Toggle Network Collapse" %}
</button>
</label>
<label class="btn btn-default" id="toggle_networks_label">
<input type="checkbox" autocomplete="off" id="toggle_networks">
<span class="fa fa-th"></span> {% trans "Toggle Network Collapse" %}
</label>
</div>
</div>
<div id="topologyCanvasContainer" class="d3-container">

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

@ -127,34 +127,19 @@ horizon.network_topology = {
})
.on('click', 'a.vnc_window', function(e) {
e.preventDefault();
var vncWindow = window.open(angular.element(this).attr('href'), vncWindow,
'width=760,height=560');
var vncWindow = window.open(angular.element(this).attr('href'), vncWindow, 'width=760,height=560');
self.delete_balloon();
});
angular.element('#toggle_labels').click(function() {
if (angular.element('.nodeLabel').css('display') == 'none') {
angular.element('.nodeLabel').show();
horizon.cookies.put('show_labels', true);
} else {
angular.element('.nodeLabel').hide();
horizon.cookies.put('show_labels', false);
}
angular.element('#toggle_labels').change(function() {
horizon.cookies.put('show_labels', this.checked);
self.refresh_labels();
});
angular.element('#toggle_networks').click(function() {
for (var n in self.nodes) {
if ({}.hasOwnProperty.call(self.nodes, n)) {
if (self.nodes[n].data instanceof Network || self.nodes[n].data instanceof ExternalNetwork) {
self.collapse_network(self.nodes[n]);
}
if (horizon.cookies.get('show_labels')) {
angular.element('.nodeLabel').show();
}
}
}
var current = horizon.cookies.get('are_networks_collapsed');
horizon.cookies.put('are_networks_collapsed', !current);
angular.element('#toggle_networks').change(function() {
horizon.cookies.put('are_networks_collapsed', this.checked);
self.refresh_networks();
self.refresh_labels();
});
// set up loader first thing
@ -177,7 +162,48 @@ horizon.network_topology = {
});
// register for message notifications
horizon.networktopologymessager.addMessageHandler(this.handleMessage, this);
horizon.networktopologymessager.addMessageHandler(
this.handleMessage, this
);
},
// Shows/Hides graph labels
refresh_labels: function() {
var show_labels = horizon.cookies.get('show_labels') == 'true';
angular.element('.nodeLabel').toggle(show_labels);
},
// Collapses/Uncollapses networks in the graph
refresh_networks: function() {
var self = this;
var are_collapsed = horizon.cookies.get('are_networks_collapsed') == 'true';
for (var n in self.nodes) {
if ({}.hasOwnProperty.call(self.nodes, n)) {
if (self.nodes[n].data instanceof Network || self.nodes[n].data instanceof ExternalNetwork) {
self.collapse_network(self.nodes[n], are_collapsed);
}
}
}
},
// Load config from cookie
load_config: function() {
var self = this;
var labels = horizon.cookies.get('show_labels') == 'true';
var networks = horizon.cookies.get('are_networks_collapsed') == 'true';
if(networks) {
angular.element('#toggle_networks_label').addClass('active');
angular.element('#toggle_networks').prop('checked', networks);
self.refresh_networks();
}
if(labels) {
angular.element('#toggle_labels_label').addClass('active');
angular.element('#toggle_labels').prop('checked', labels);
self.refresh_labels();
}
},
handleMessage:function(message) {
@ -203,24 +229,6 @@ horizon.network_topology = {
}
},
// Load config from cookie
load_config: function() {
var labels = horizon.cookies.get('show_labels');
var networks = horizon.cookies.get('are_networks_collapsed');
if (labels) {
angular.element('.nodeLabel').show();
angular.element('#toggle_labels').addClass('active');
}
if (networks) {
for (var n in this.nodes) {
if ({}.hasOwnProperty.call(this.nodes, n)) {
this.collapse_network(this.nodes[n], true);
}
}
angular.element('#toggle_networks').addClass('active');
}
},
getScreenCoords: function(x, y) {
var self = this;
if (self.translate) {