feat(webui): Add dashboard filter.

- Convert Object properties to and array for backends and frondends for each providers.
- Remove unused parameters.
- Add filter.

webui/src/app/sections/providers/backend-monitor/backend-monitor.directive.js

@@ -8,8 +8,7 @@ function backendMonitor() {
     controllerAs: 'backendCtrl',
     bindToController: true,
     scope: {
-      backend: '=',
-      backendId: '='
+      backend: '='
     }
   };
 }
@@ -18,4 +17,4 @@ function BackendMonitorController() {
   // Nothing
 }
 
-module.exports = backendMonitor;
+module.exports = backendMonitor;

webui/src/app/sections/providers/backend-monitor/backend-monitor.html

@@ -1,6 +1,6 @@
 <div class="panel panel-success">
   <div class="panel-heading">
-    <strong><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> {{backendCtrl.backendId}}</strong>
+    <strong><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> {{backendCtrl.backend.backendId}}</strong>
   </div>
   <div class="panel-body">
     <table class="panel-table__servers table table-striped table-hover">

webui/src/app/sections/providers/frontend-monitor/frontend-monitor.directive.js

@@ -8,8 +8,7 @@ function frontendMonitor() {
     controllerAs: 'frontendCtrl',
     bindToController: true,
     scope: {
-      frontend: '=',
-      frontendId: '='
+      frontend: '='
     }
   };
 }

webui/src/app/sections/providers/frontend-monitor/frontend-monitor.html

@@ -1,6 +1,6 @@
 <div class="panel panel-warning">
   <div class="panel-heading">
-    <strong><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> {{frontendCtrl.frontendId}}</strong>
+    <strong><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> {{frontendCtrl.frontend.frontendId}}</strong>
   </div>
   <div class="panel-body">
     <table class="panel-table__routes table table-striped table-hover">

webui/src/app/sections/providers/providers.controller.js

@@ -2,17 +2,18 @@
 
 /** @ngInject */
 function ProvidersController($scope, $interval, $log, Providers) {
-  var vm = this;
+  const vm = this;
 
   vm.providers = Providers.get();
 
-  var intervalId = $interval(function () {
+  const intervalId = $interval(function () {
     Providers.get(function (providers) {
       vm.providers = providers;
     }, function (error) {
       vm.providers = {};
       $log.error(error);
     });
+
   }, 2000);
 
   $scope.$on('$destroy', function () {
@@ -20,4 +21,4 @@ function ProvidersController($scope, $interval, $log, Providers) {
   });
 }
 
-module.exports = ProvidersController;
+module.exports = ProvidersController;

webui/src/app/sections/providers/providers.html

@@ -1,16 +1,18 @@
 <div>
+  <div><input type="text" data-ng-model="providersCtrl.providerFilter" placeholder="Filter" class="form-control"></div>
+  <br>
   <uib-tabset>
     <uib-tab data-ng-repeat="(providerId, provider) in providersCtrl.providers" heading="{{providerId}}">
 
       <div class="row tabset-row__providers">
         <div class="col-md-6">
-          <div data-ng-repeat="(frontendId, frontend) in provider.frontends">
-            <frontend-monitor data-provider-id="providerId" data-frontend-id="frontendId" data-frontend="frontend"></frontend-monitor>
+          <div data-ng-repeat="frontend in provider.frontends | filter: providersCtrl.providerFilter ">
+            <frontend-monitor data-provider-id="providerId" data-frontend="frontend"></frontend-monitor>
           </div>
         </div>
         <div class="col-md-6">
-          <div data-ng-repeat="(backendId, backend) in provider.backends">
-            <backend-monitor data-provider-id="providerId" data-backend-id="backendId" data-backend="backend"></backend-monitor>
+          <div data-ng-repeat="backend in provider.backends | filter: providersCtrl.providerFilter">
+            <backend-monitor data-provider-id="providerId" data-backend="backend"></backend-monitor>
           </div>
         </div>
       </div>