Merge "Fixes toggle behavior in Network Topology graphs"

openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html

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

openstack_dashboard/static/js/horizon.networktopology.js

@@ -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,
+        var vncWindow = window.open(angular.element(this).attr('href'), vncWindow, 'width=760,height=560');
-                                     'width=760,height=560');
         self.delete_balloon();
       });
 
-    angular.element('#toggle_labels').click(function() {
+    angular.element('#toggle_labels').change(function() {
-      if (angular.element('.nodeLabel').css('display') == 'none') {
+      horizon.cookies.put('show_labels', this.checked);
-        angular.element('.nodeLabel').show();
+      self.refresh_labels();
-        horizon.cookies.put('show_labels', true);
-      } else {
-        angular.element('.nodeLabel').hide();
-        horizon.cookies.put('show_labels', false);
-      }
     });
 
-    angular.element('#toggle_networks').click(function() {
+    angular.element('#toggle_networks').change(function() {
-      for (var n in self.nodes) {
+      horizon.cookies.put('are_networks_collapsed', this.checked);
-        if ({}.hasOwnProperty.call(self.nodes, n)) {
+      self.refresh_networks();
-          if (self.nodes[n].data instanceof Network || self.nodes[n].data instanceof ExternalNetwork) {
+      self.refresh_labels();
-            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);
     });
 
     // 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) {