From 5a994811483601dec8cbb1c347789d04951f0d17 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Thu, 4 May 2017 16:08:42 +0000
Subject: [PATCH 1/5] Topology - shared/topology/not_found - a partial to show
 when search matches 0 items

included in all the topologies and styled so that it overlays the content

https://bugzilla.redhat.com/show_bug.cgi?id=1445857
---
 app/assets/stylesheets/topology.css              | 10 ++++++++++
 app/views/cloud_topology/show.html.haml          |  3 +++
 app/views/container_topology/show.html.haml      |  3 +++
 app/views/infra_topology/show.html.haml          |  3 +++
 app/views/middleware_topology/show.html.haml     |  3 +++
 app/views/network_topology/show.html.haml        |  3 +++
 app/views/physical_infra_topology/show.html.haml |  3 +++
 app/views/shared/topology/_not_found.html.haml   |  5 +++++
 8 files changed, 33 insertions(+)
 create mode 100644 app/views/shared/topology/_not_found.html.haml

diff --git a/app/assets/stylesheets/topology.css b/app/assets/stylesheets/topology.css
index a89a3d1ca81..7917d005324 100644
--- a/app/assets/stylesheets/topology.css
+++ b/app/assets/stylesheets/topology.css
@@ -112,3 +112,13 @@ _:-ms-lang(x), _:-webkit-full-screen, kubernetes-topology-icon svg /* Edge hack
 .topology label.checkbox-inline {
   font-size:14px;
 }
+
+.floating-not-found {
+  width: 100%;
+  text-align: center;
+  font-size: large;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 24px;
+  z-index: 100;
+}
diff --git a/app/views/cloud_topology/show.html.haml b/app/views/cloud_topology/show.html.haml
index 544d99a970c..d6d5dc7ff77 100644
--- a/app/views/cloud_topology/show.html.haml
+++ b/app/views/cloud_topology/show.html.haml
@@ -42,6 +42,9 @@
     %span.pficon.pficon-info
     %strong
       = _("Click on the legend to show/hide entities, and double click/right click the entities in the graph to navigate to their summary pages.")
+
+  = render :partial => "shared/topology/not_found"
+
   %kubernetes-topology-graph{:items => "items", :relations => "relations", :kinds => "kinds"}
 
 :javascript
diff --git a/app/views/container_topology/show.html.haml b/app/views/container_topology/show.html.haml
index 13bc21064ce..4b42faee859 100644
--- a/app/views/container_topology/show.html.haml
+++ b/app/views/container_topology/show.html.haml
@@ -74,6 +74,9 @@
     %span.pficon.pficon-info
     %strong
       = _("Click on the legend to show/hide entities, and double click/right click the entities in the graph to navigate to their summary pages.")
+
+  = render :partial => "shared/topology/not_found"
+
   %kubernetes-topology-graph{:items => "items", :relations => "relations", :kinds => "kinds"}
 
 :javascript
diff --git a/app/views/infra_topology/show.html.haml b/app/views/infra_topology/show.html.haml
index b6ac30b808b..14d55c72eb5 100644
--- a/app/views/infra_topology/show.html.haml
+++ b/app/views/infra_topology/show.html.haml
@@ -42,6 +42,9 @@
     %span.pficon.pficon-info
     %strong
       = _("Click on the legend to show/hide entities, and double click/right click the entities in the graph to navigate to their summary pages.")
+
+  = render :partial => "shared/topology/not_found"
+
   %kubernetes-topology-graph{:items => "items", :relations => "relations", :kinds => "kinds"}
 
 :javascript
diff --git a/app/views/middleware_topology/show.html.haml b/app/views/middleware_topology/show.html.haml
index 12d28a272dc..59eaae30f49 100644
--- a/app/views/middleware_topology/show.html.haml
+++ b/app/views/middleware_topology/show.html.haml
@@ -70,6 +70,9 @@
     %span.pficon.pficon-info
     %strong
       = _("Click on the legend to show/hide entities, and double click on the entities in the graph to navigate to their summary pages.")
+
+  = render :partial => "shared/topology/not_found"
+
   %kubernetes-topology-graph.middleware{:items => "items", :relations => "relations", :kinds => "kinds"}
 
 :javascript
diff --git a/app/views/network_topology/show.html.haml b/app/views/network_topology/show.html.haml
index 2ad38ee065c..f032bab29c1 100644
--- a/app/views/network_topology/show.html.haml
+++ b/app/views/network_topology/show.html.haml
@@ -90,6 +90,9 @@
     %span.pficon.pficon-info
     %strong
       = _("Click on the legend to show/hide entities, and double click/right click the entities in the graph to navigate to their summary pages.")
+
+  = render :partial => "shared/topology/not_found"
+
   %kubernetes-topology-graph{:items => "items", :relations => "relations", :kinds => "kinds"}
 
 :javascript
diff --git a/app/views/physical_infra_topology/show.html.haml b/app/views/physical_infra_topology/show.html.haml
index 05b22eae7a6..93d60c544bb 100644
--- a/app/views/physical_infra_topology/show.html.haml
+++ b/app/views/physical_infra_topology/show.html.haml
@@ -18,6 +18,9 @@
     %span.pficon.pficon-info
     %strong
       = _("Click on the legend to show/hide entities, and double click/right click the entities in the graph to navigate to their summary pages.")
+
+  = render :partial => "shared/topology/not_found"
+
   %kubernetes-topology-graph{:items => "items", :relations => "relations", :kinds => "kinds"}
 
 :javascript
diff --git a/app/views/shared/topology/_not_found.html.haml b/app/views/shared/topology/_not_found.html.haml
new file mode 100644
index 00000000000..3c244d13a27
--- /dev/null
+++ b/app/views/shared/topology/_not_found.html.haml
@@ -0,0 +1,5 @@
+.floating-not-found{'ng-show' => 'searching && notFound'}
+  = _("No results match the search criteria")
+  %br
+  %a.btn.btn-link{:href => "", 'ng-click' => "resetSearch()"}
+    = _("Clear Search")

From f0eaf66e82f4c7f5029ac834b91410cbee860ef5 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Thu, 4 May 2017 16:10:10 +0000
Subject: [PATCH 2/5] topologyService.mixinSearch - mixin the search methods
 from common code instead of having N identical copies

this just moves searchNode and resetSearch to the service, under a `mixinSearch` method that adds these to the current scope when called
---
 .../topology/cloud_topology_controller.js     | 14 +-------------
 .../topology/container_topology_controller.js | 16 ++--------------
 .../topology/infra_topology_controller.js     | 16 ++--------------
 .../middleware_topology_controller.js         | 16 ++--------------
 .../topology/network_topology_controller.js   | 16 ++--------------
 .../physical_infra_topology_controller.js     | 16 ++--------------
 .../javascripts/services/topology_service.js  | 19 +++++++++++++++++++
 7 files changed, 30 insertions(+), 83 deletions(-)

diff --git a/app/assets/javascripts/controllers/topology/cloud_topology_controller.js b/app/assets/javascripts/controllers/topology/cloud_topology_controller.js
index 3b35511d74f..465fc9cfb43 100644
--- a/app/assets/javascripts/controllers/topology/cloud_topology_controller.js
+++ b/app/assets/javascripts/controllers/topology/cloud_topology_controller.js
@@ -193,17 +193,5 @@ function CloudTopologyCtrl($scope, $http, $interval, $location, topologyService,
     }
   };
 
-  $scope.searchNode = function() {
-    var svg = topologyService.getSVG($scope.d3);
-    var query = $('input#search_topology')[0].value;
-
-    topologyService.searchNode(svg, query);
-  };
-
-  $scope.resetSearch = function() {
-    topologyService.resetSearch($scope.d3);
-
-    // Reset the search term in search input
-    $('input#search_topology')[0].value = "";
-  };
+  topologyService.mixinSearch($scope);
 }
diff --git a/app/assets/javascripts/controllers/topology/container_topology_controller.js b/app/assets/javascripts/controllers/topology/container_topology_controller.js
index c9eef995ba2..b151aca5e47 100644
--- a/app/assets/javascripts/controllers/topology/container_topology_controller.js
+++ b/app/assets/javascripts/controllers/topology/container_topology_controller.js
@@ -209,20 +209,6 @@ function ContainerTopologyCtrl($scope, $http, $interval, topologyService, $windo
     }
   };
 
-  $scope.searchNode = function() {
-    var svg = topologyService.getSVG($scope.d3);
-    var query = $('input#search_topology')[0].value;
-
-    topologyService.searchNode(svg, query);
-  };
-
-  $scope.resetSearch = function() {
-    topologyService.resetSearch($scope.d3);
-
-    // Reset the search term in search input
-    $('input#search_topology')[0].value = "";
-  };
-
   function getContainerTopologyData(response) {
     var data = response.data;
 
@@ -249,4 +235,6 @@ function ContainerTopologyCtrl($scope, $http, $interval, topologyService, $windo
       $scope.kinds = topologyService.reduce_kinds($scope.items, $scope.kinds, size_limit, remove_hierarchy);
     }
   }
+
+  topologyService.mixinSearch($scope);
 }
diff --git a/app/assets/javascripts/controllers/topology/infra_topology_controller.js b/app/assets/javascripts/controllers/topology/infra_topology_controller.js
index a0f3b069742..54d5d1703aa 100644
--- a/app/assets/javascripts/controllers/topology/infra_topology_controller.js
+++ b/app/assets/javascripts/controllers/topology/infra_topology_controller.js
@@ -177,20 +177,6 @@ function InfraTopologyCtrl($scope, $http, $interval, $location, topologyService,
     }
   };
 
-  $scope.searchNode = function() {
-    var svg = topologyService.getSVG($scope.d3);
-    var query = $('input#search_topology')[0].value;
-
-    topologyService.searchNode(svg, query);
-  };
-
-  $scope.resetSearch = function() {
-    topologyService.resetSearch($scope.d3);
-
-    // Reset the search term in search input
-    $('input#search_topology')[0].value = "";
-  };
-
   function getInfraTopologyData(response) {
     var data = response.data;
 
@@ -205,4 +191,6 @@ function InfraTopologyCtrl($scope, $http, $interval, $location, topologyService,
       $scope.kinds = currentSelectedKinds;
     }
   }
+
+  topologyService.mixinSearch($scope);
 }
diff --git a/app/assets/javascripts/controllers/topology/middleware_topology_controller.js b/app/assets/javascripts/controllers/topology/middleware_topology_controller.js
index 72493bad672..36bdbcf1431 100644
--- a/app/assets/javascripts/controllers/topology/middleware_topology_controller.js
+++ b/app/assets/javascripts/controllers/topology/middleware_topology_controller.js
@@ -177,20 +177,6 @@ function MiddlewareTopologyCtrl($scope, $http, $interval, $location, topologySer
     }
   };
 
-  $scope.searchNode = function() {
-    var svg = topologyService.getSVG($scope.d3);
-    var query = $('input#search_topology')[0].value;
-
-    topologyService.searchNode(svg, query);
-  };
-
-  $scope.resetSearch = function() {
-    topologyService.resetSearch($scope.d3);
-
-    // Reset the search term in search input
-    $('input#search_topology')[0].value = '';
-  };
-
   function getMiddlewareTopologyData(response) {
     var data = response.data;
 
@@ -204,4 +190,6 @@ function MiddlewareTopologyCtrl($scope, $http, $interval, $location, topologySer
       $scope.kinds = currentSelectedKinds;
     }
   }
+
+  topologyService.mixinSearch($scope);
 }
diff --git a/app/assets/javascripts/controllers/topology/network_topology_controller.js b/app/assets/javascripts/controllers/topology/network_topology_controller.js
index 3094e597182..80f4ac7eb24 100644
--- a/app/assets/javascripts/controllers/topology/network_topology_controller.js
+++ b/app/assets/javascripts/controllers/topology/network_topology_controller.js
@@ -180,20 +180,6 @@ function NetworkTopologyCtrl($scope, $http, $interval, $location, topologyServic
     }
   };
 
-  $scope.searchNode = function() {
-    var svg = topologyService.getSVG($scope.d3);
-    var query = $('input#search_topology')[0].value;
-
-    topologyService.searchNode(svg, query);
-  };
-
-  $scope.resetSearch = function() {
-    topologyService.resetSearch($scope.d3);
-
-    // Reset the search term in search input
-    $('input#search_topology')[0].value = "";
-  };
-
   function getNetworkTopologyData(response) {
     var data = response.data;
 
@@ -207,4 +193,6 @@ function NetworkTopologyCtrl($scope, $http, $interval, $location, topologyServic
       $scope.kinds = currentSelectedKinds;
     }
   }
+
+  topologyService.mixinSearch($scope);
 }
diff --git a/app/assets/javascripts/controllers/topology/physical_infra_topology_controller.js b/app/assets/javascripts/controllers/topology/physical_infra_topology_controller.js
index ef77a9bbcaf..d1a613e53b8 100644
--- a/app/assets/javascripts/controllers/topology/physical_infra_topology_controller.js
+++ b/app/assets/javascripts/controllers/topology/physical_infra_topology_controller.js
@@ -177,20 +177,6 @@ function physicalInfraTopologyCtrl($scope, $http, $interval, $location, topology
     }
   };
 
-  $scope.searchNode = function() {
-    var svg = topologyService.getSVG($scope.d3);
-    var query = $('input#search_topology')[0].value;
-
-    topologyService.searchNode(svg, query);
-  };
-
-  $scope.resetSearch = function() {
-    topologyService.resetSearch($scope.d3);
-
-    // Reset the search term in search input
-    $('input#search_topology')[0].value = "";
-  };
-
   function getPhysicalInfraTopologyData(response) {
     var data = response.data;
 
@@ -205,4 +191,6 @@ function physicalInfraTopologyCtrl($scope, $http, $interval, $location, topology
       $scope.kinds = currentSelectedKinds;
     }
   }
+
+  topologyService.mixinSearch($scope);
 }
diff --git a/app/assets/javascripts/services/topology_service.js b/app/assets/javascripts/services/topology_service.js
index 40951f65bd0..9d3e7336cd7 100644
--- a/app/assets/javascripts/services/topology_service.js
+++ b/app/assets/javascripts/services/topology_service.js
@@ -196,4 +196,23 @@ ManageIQ.angular.app.service('topologyService', function() {
     }
     return kinds
   };
+
+  // this injects some common code in the controller - temporary pending a proper merge
+  this.mixinSearch = function($scope) {
+    var topologyService = this;
+
+    $scope.searchNode = function() {
+      var svg = topologyService.getSVG($scope.d3);
+      var query = $('input#search_topology')[0].value;
+
+      topologyService.searchNode(svg, query);
+    };
+
+    $scope.resetSearch = function() {
+      topologyService.resetSearch($scope.d3);
+
+      // Reset the search term in search input
+      $('input#search_topology')[0].value = "";
+    };
+  };
 });

From 3ca042b180b457f5d6413cdb94cbfdca3f7bc757 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Thu, 4 May 2017 16:11:17 +0000
Subject: [PATCH 3/5] TopologyService - set searching & notFound on scope when
 appropriate

so that we can show the not_found message when searching and notFound :)

https://bugzilla.redhat.com/show_bug.cgi?id=1445857
---
 .../javascripts/services/topology_service.js  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/services/topology_service.js b/app/assets/javascripts/services/topology_service.js
index 9d3e7336cd7..b1dd42fd9bd 100644
--- a/app/assets/javascripts/services/topology_service.js
+++ b/app/assets/javascripts/services/topology_service.js
@@ -100,14 +100,24 @@ ManageIQ.angular.app.service('topologyService', function() {
   this.searchNode = function(svg, query) {
     var nodes = svg.selectAll("g");
     nodes.style("opacity", "1");
+
+    var found = true;
+
     if (query != "") {
       var selected = nodes.filter(function (d) {
         return d.item.name.indexOf(query) == -1;
       });
       selected.style("opacity", "0.2");
+
       var links = svg.selectAll("line");
       links.style("opacity", "0.2");
+
+      if (nodes.length == selected.length) {
+        found = false;
+      }
     }
+
+    return found;
   };
 
   this.resetSearch = function(d3) {
@@ -201,11 +211,15 @@ ManageIQ.angular.app.service('topologyService', function() {
   this.mixinSearch = function($scope) {
     var topologyService = this;
 
+    $scope.searching = false;
+    $scope.notFound = false;
+
     $scope.searchNode = function() {
       var svg = topologyService.getSVG($scope.d3);
       var query = $('input#search_topology')[0].value;
 
-      topologyService.searchNode(svg, query);
+      $scope.searching = true;
+      $scope.notFound = ! topologyService.searchNode(svg, query);
     };
 
     $scope.resetSearch = function() {
@@ -213,6 +227,9 @@ ManageIQ.angular.app.service('topologyService', function() {
 
       // Reset the search term in search input
       $('input#search_topology')[0].value = "";
+
+      $scope.searching = false;
+      $scope.notFound = false;
     };
   };
 });

From 7785975f4094ddd5c78116bbf59f412ff8590740 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Fri, 5 May 2017 12:06:19 +0000
Subject: [PATCH 4/5] TopologyService (js) - use ===

---
 app/assets/javascripts/services/topology_service.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/services/topology_service.js b/app/assets/javascripts/services/topology_service.js
index b1dd42fd9bd..2b51842e5a2 100644
--- a/app/assets/javascripts/services/topology_service.js
+++ b/app/assets/javascripts/services/topology_service.js
@@ -6,7 +6,7 @@ ManageIQ.angular.app.service('topologyService', function() {
       __("Status: ") + d.item.status
     ];
 
-    if (d.item.kind == 'Host' || d.item.kind == 'Vm') {
+    if (d.item.kind === 'Host' || d.item.kind === 'Vm') {
       status.push(__("Provider: ") + d.item.provider);
     }
 
@@ -105,14 +105,14 @@ ManageIQ.angular.app.service('topologyService', function() {
 
     if (query != "") {
       var selected = nodes.filter(function (d) {
-        return d.item.name.indexOf(query) == -1;
+        return d.item.name.indexOf(query) === -1;
       });
       selected.style("opacity", "0.2");
 
       var links = svg.selectAll("line");
       links.style("opacity", "0.2");
 
-      if (nodes.length == selected.length) {
+      if (nodes.length === selected.length) {
         found = false;
       }
     }

From 203fddcded751e9567c638e83873424023ab758b Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Tue, 9 May 2017 12:20:28 +0000
Subject: [PATCH 5/5] TopologyService - use size() not lenght for d3 size
 comparison

because apparently length is always 0 or 1
---
 app/assets/javascripts/services/topology_service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/services/topology_service.js b/app/assets/javascripts/services/topology_service.js
index 2b51842e5a2..1c135a411d3 100644
--- a/app/assets/javascripts/services/topology_service.js
+++ b/app/assets/javascripts/services/topology_service.js
@@ -112,7 +112,7 @@ ManageIQ.angular.app.service('topologyService', function() {
       var links = svg.selectAll("line");
       links.style("opacity", "0.2");
 
-      if (nodes.length === selected.length) {
+      if (nodes.size() === selected.size()) {
         found = false;
       }
     }