From 0c8b0f3754884bb1c198b2a6877a53546dc64cd8 Mon Sep 17 00:00:00 2001
From: Marek Lycka <marek.lycka@ultimum.io>
Date: Tue, 19 Sep 2017 17:04:45 +0200
Subject: [PATCH] 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
---
 .../network_topology/_graph_view.html         | 14 +--
 .../static/js/horizon.networktopology.js      | 92 ++++++++++---------
 2 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html b/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html
index 6a00cd97ab..c5664c3e7b 100644
--- a/openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_graph_view.html
+++ b/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">
-    <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">
diff --git a/openstack_dashboard/static/js/horizon.networktopology.js b/openstack_dashboard/static/js/horizon.networktopology.js
index eb537eeb73..98a6d96312 100644
--- a/openstack_dashboard/static/js/horizon.networktopology.js
+++ b/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,
-                                     '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) {