feat(UI) : Working UI.

chore(Build) : Add Babel for build.
chore(Babel) : Add babel configuration.
style(Code) : Enhance code style.

webui/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

webui/conf/webpack-dist.conf.js

@@ -32,6 +32,7 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         loaders: [
+          'babel-loader',
           'ng-annotate'
         ]
       },

webui/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "angular": "^1.4.2",
     "angular-animate": "^1.5.8",
-    "animate.css": "^3.4.0",
     "angular-aria": "^1.5.8",
     "angular-cookies": "^1.5.8",
     "angular-messages": "^1.5.8",
@@ -20,6 +19,7 @@
     "angular-sanitize": "^1.5.8",
     "angular-ui-bootstrap": "^2.0.0",
     "angular-ui-router": "^0.3.1",
+    "animate.css": "^3.4.0",
     "bootstrap": "^3.3.6",
     "moment": "^2.14.1",
     "nvd3": "^1.8.4"
@@ -27,7 +27,9 @@
   "devDependencies": {
     "angular-mocks": "^1.4.2",
     "autoprefixer": "^6.2.2",
-    "babel-loader": "^6.2.0",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
     "browser-sync": "^2.9.11",
     "browser-sync-spa": "^1.0.3",
     "css-loader": "^0.23.1",

webui/src/app/core/providers.resource.js

@@ -9,20 +9,19 @@ angular
   .factory('Providers', Providers);
 
 /** @ngInject */
-function Providers($resource) {
+function Providers($resource, $q) {
   const resourceProvider = $resource('../api/providers');
   return {
     get: function() {
-      const rawProviders = resourceProvider.get();
+      return $q((resolve, reject) => {
-
+        resourceProvider.get().$promise.then((rawProviders) => {
           for (let providerName in rawProviders) {
             if (rawProviders.hasOwnProperty(providerName)) {
-
+              if (!providerName.startsWith('$')) {
                 // BackEnds mapping
                 let bckends = rawProviders[providerName].backends;
 
-          rawProviders[providerName].backends = Object.keys(bckends)
+                rawProviders[providerName].backends = Object.keys(bckends).map(key => {
-            .map(key => {
                   const goodBackend = bckends[key];
                   goodBackend.backendId = key;
                   return goodBackend;
@@ -31,17 +30,17 @@ function Providers($resource) {
                 // FrontEnds mapping
                 let frtends = rawProviders[providerName].frontends;
 
-          rawProviders[providerName].frontends = Object.keys(frtends)
+                rawProviders[providerName].frontends = Object.keys(frtends).map(key => {
-            .map(key => {
                   const goodFrontend = frtends[key];
                   goodFrontend.frontendId = key;
                   return goodFrontend;
                 });
-
               }
             }
-
+          }
-      return rawProviders;
+          resolve(rawProviders);
+        }).catch(reject);
+      });
     }
   };
 }

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

@@ -4,17 +4,19 @@
 function ProvidersController($scope, $interval, $log, Providers) {
   const vm = this;
 
-  vm.providers = Providers.get();
+  function loadProviders() {
-
+    Providers
-  const intervalId = $interval(function () {
+      .get()
-    Providers.get(function (providers) {
+      .then(providers => vm.providers = providers)
-      vm.providers = providers;
+      .catch(error => {
-    }, function (error) {
         vm.providers = {};
         $log.error(error);
       });
+  }
 
-  }, 2000);
+  loadProviders();
+
+  const intervalId = $interval(loadProviders, 2000);
 
   $scope.$on('$destroy', function () {
     $interval.cancel(intervalId);