Merge pull request #1277 from himdel/topology-not-found

Topology - indicate no results when searching
ManageIQ · May 9, 2017 · 9c1c972 · 9c1c972
2 parents 4c43f8e + 203fddc
commit 9c1c972
Show file tree

Hide file tree

Showing 15 changed files with 82 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
     }
 
@@ -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;
+        return d.item.name.indexOf(query) === -1;
       });
       selected.style("opacity", "0.2");
+
       var links = svg.selectAll("line");
       links.style("opacity", "0.2");
+
+      if (nodes.size() === selected.size()) {
+        found = false;
+      }
     }
+
+    return found;
   };
 
   this.resetSearch = function(d3) {
@@ -196,4 +206,30 @@ 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.searching = false;
+    $scope.notFound = false;
+
+    $scope.searchNode = function() {
+      var svg = topologyService.getSVG($scope.d3);
+      var query = $('input#search_topology')[0].value;
+
+      $scope.searching = true;
+      $scope.notFound = ! topologyService.searchNode(svg, query);
+    };
+
+    $scope.resetSearch = function() {
+      topologyService.resetSearch($scope.d3);
+
+      // Reset the search term in search input
+      $('input#search_topology')[0].value = "";
+
+      $scope.searching = false;
+      $scope.notFound = false;
+    };
+  };
 });
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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")