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/core/providers.resource.js

@@ -8,7 +8,40 @@ angular
   .module(traefikCoreProvider, ['ngResource'])
   .factory('Providers', Providers);
 
-  /** @ngInject */
+/** @ngInject */
-  function Providers($resource) {
+function Providers($resource) {
-    return $resource('../api/providers');
+  const resourceProvider = $resource('../api/providers');
-  }
+  return {
+    get: function () {
+      const rawProviders = resourceProvider.get();
+
+      for (let providerName in rawProviders) {
+        if (rawProviders.hasOwnProperty(providerName)) {
+
+          // BackEnds mapping
+          let bckends = rawProviders[providerName].backends;
+
+          rawProviders[providerName].backends = Object.keys(bckends)
+            .map(key => {
+              const goodBackend = bckends[key];
+              goodBackend.backendId = key;
+              return goodBackend;
+            });
+
+          // FrontEnds mapping
+          let frtends = rawProviders[providerName].frontends;
+
+          rawProviders[providerName].frontends = Object.keys(frtends)
+            .map(key => {
+              const goodFrontend = frtends[key];
+              goodFrontend.frontendId = key;
+              return goodFrontend;
+            });
+
+        }
+      }
+
+      return rawProviders;
+    }
+  };
+}

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

@@ -8,8 +8,7 @@ function backendMonitor() {
     controllerAs: 'backendCtrl',
     bindToController: true,
     scope: {
-      backend: '=',
+      backend: '='
-      backendId: '='
     }
   };
 }
@@ -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: '=',
+      frontend: '='
-      frontendId: '='
     }
   };
 }

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">
+          <div data-ng-repeat="frontend in provider.frontends | filter: providersCtrl.providerFilter ">
-            <frontend-monitor data-provider-id="providerId" data-frontend-id="frontendId" data-frontend="frontend"></frontend-monitor>
+            <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">
+          <div data-ng-repeat="backend in provider.backends | filter: providersCtrl.providerFilter">
-            <backend-monitor data-provider-id="providerId" data-backend-id="backendId" data-backend="backend"></backend-monitor>
+            <backend-monitor data-provider-id="providerId" data-backend="backend"></backend-monitor>
           </div>
         </div>
       </div>

webui/src/app/version/version.controller.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /** @ngInject */
-function VersionController($scope, $interval, $log, Version) {
+function VersionController($scope, Version) {
   Version.get(function (version) {
     $scope.version = version;
   });