openstack
/
horizon
Code Issues Proposed changes

Fixes toggle behavior in Network Topology graphs 

Changes the buttons (Toggle Labels and Toggle Network Collapse)
 in the network topology graph view into bootstrap styled checkboxes
(the buttons should now operate as on/off) and modifies the relevant
js code to prevent random un-toggeling on data loading. Additionally,
the states for each button should now be respected on page refresh.

Change-Id: I16c00786a2c7cd37a38ebecc9494861232d2f473
Closes-Bug: 1672723
This commit is contained in:
Marek Lycka 2017-09-19 17:04:45 +02:00
parent d6880a1a39
commit 0c8b0f3754
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) {