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,39 +9,38 @@ angular
   .factory('Providers', Providers);
 
 /** @ngInject */
-function Providers($resource) {
+function Providers($resource, $q) {
   const resourceProvider = $resource('../api/providers');
   return {
-    get: function () {
+    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;
 
-      for (let providerName in rawProviders) {
+                rawProviders[providerName].backends = Object.keys(bckends).map(key => {
-        if (rawProviders.hasOwnProperty(providerName)) {
+                  const goodBackend = bckends[key];
+                  goodBackend.backendId = key;
+                  return goodBackend;
+                });
 
-          // BackEnds mapping
+                // FrontEnds mapping
-          let bckends = rawProviders[providerName].backends;
+                let frtends = rawProviders[providerName].frontends;
 
-          rawProviders[providerName].backends = Object.keys(bckends)
+                rawProviders[providerName].frontends = Object.keys(frtends).map(key => {
-            .map(key => {
+                  const goodFrontend = frtends[key];
-              const goodBackend = bckends[key];
+                  goodFrontend.frontendId = key;
-              goodBackend.backendId = key;
+                  return goodFrontend;
-              return goodBackend;
+                });
-            });
+              }
-
+            }
-          // FrontEnds mapping
+          }
-          let frtends = rawProviders[providerName].frontends;
+          resolve(rawProviders);
-
+        }).catch(reject);
-          rawProviders[providerName].frontends = Object.keys(frtends)
+      });
-            .map(key => {
-              const goodFrontend = frtends[key];
-              goodFrontend.frontendId = key;
-              return goodFrontend;
-            });
-
-        }
-      }
-
-      return rawProviders;
     }
   };
 }

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
+      .get()
+      .then(providers => vm.providers = providers)
+      .catch(error => {
+        vm.providers = {};
+        $log.error(error);
+      });
+  }
 
-  const intervalId = $interval(function () {
+  loadProviders();
-    Providers.get(function (providers) {
-      vm.providers = providers;
-    }, function (error) {
-      vm.providers = {};
-      $log.error(error);
-    });
 
-  }, 2000);
+  const intervalId = $interval(loadProviders, 2000);
 
   $scope.$on('$destroy', function () {
     $interval.cancel(intervalId);