Merge "Add loading alert"

app/js/directives/chart-bar.js

@@ -10,6 +10,14 @@ var nv = require('nvd3');
  */
 function chartBar() {
   var link = function(scope, el, attrs) {
+    scope.$on("loading-started", function() {
+      el.css({"display" : "none"});
+    });
+
+    scope.$on("loading-complete", function() {
+      el.css({"display" : "block"});
+    });
+
     var chart = null;
 
     var svg = d3.select(el[0]).append('svg')

app/js/directives/chart-gauge.js

@@ -10,6 +10,14 @@ var nv = require('nvd3');
  */
 function chartGauge() {
   var link = function(scope, el, attrs) {
+    scope.$on("loading-started", function() {
+      el.css({"display" : "none"});
+    });
+
+    scope.$on("loading-complete", function() {
+      el.css({"display" : "block"});
+    });
+
     var chart = null;
 
     var svg = d3.select(el[0]).append('svg')

app/js/directives/chart-line.js

@@ -10,11 +10,19 @@ var nv = require('nvd3');
  */
 function chartLine() {
   var link = function(scope, el, attrs) {
+    scope.$on("loading-started", function() {
+      el.css({"display" : "none"});
+    });
+
+    scope.$on("loading-complete", function() {
+      el.css({"display" : "block"});
+    });
+
     var chart = null;
 
     var svg = d3.select(el[0]).append('svg')
-        .attr('width', attrs.width)
-        .attr('height', attrs.height);
+    .attr('width', attrs.width)
+    .attr('height', attrs.height);
 
     var update = function(data) {
       if (typeof data === "undefined") {
@@ -22,8 +30,8 @@ function chartLine() {
       }
 
       chart = nv.models.lineChart()
-          .margin({ left: 50, right: 50 })
-          .useInteractiveGuideline(true);
+      .margin({ left: 50, right: 50 })
+      .useInteractiveGuideline(true);
 
       chart.tooltip.gravity('s').chartContainer(el[0]);
 

app/js/directives/loading-indicator.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var directivesModule = require('./_index.js');
+/**
+ * @ngInject
+ */
+function loadingIndicator() {
+  return {
+    restrict : "EA",
+    template: "<div class='alert alert-info' role='alert'>" +
+"<i class='fa fa-spinner fa-pulse fa-1x'></i> <strong>Loading...</strong>" +
+"</div>",
+    link : function(scope, element) {
+      scope.$on("loading-started", function() {
+        element.css({"display" : ""});
+      });
+
+      scope.$on("loading-complete", function() {
+        element.css({"display" : "none"});
+      });
+    }
+  };
+}
+
+directivesModule.directive('loadingIndicator', loadingIndicator);

app/js/services/health-api.js

@@ -4,6 +4,23 @@ var angular = require('angular');
 
 var servicesModule = require('./_index.js');
 
+function httpProviderInterceptor($httpProvider) {
+  $httpProvider.interceptors.push(function($q, $rootScope) {
+    return {
+      'request': function(config) {
+        $rootScope.$broadcast('loading-started');
+        return config || $q.when(config);
+      },
+      'response': function(response) {
+        $rootScope.$broadcast('loading-complete');
+        return response || $q.when(response);
+      }
+    };
+  });
+}
+
+servicesModule.config(httpProviderInterceptor);
+
 function HealthService($http, config) {
   var service = {};
 

app/views/home.html

@@ -5,6 +5,11 @@
 </header>
 
 <div class="container">
+    <div class="row">
+        <div class="col-lg-12">
+            <loading-indicator></loading-indicator>
+        </div>
+    </div>
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">

app/views/project.html

@@ -5,6 +5,11 @@
 </header>
 
 <div class="container">
+    <div class="row">
+        <div class="col-lg-12">
+            <loading-indicator></loading-indicator>
+        </div>
+    </div>
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">

app/views/tests.html

@@ -5,6 +5,11 @@
 </header>
 
 <div class="container">
+    <div class="row">
+        <div class="col-lg-12">
+            <loading-indicator></loading-indicator>
+        </div>
+    </div>
     <div class="row">
         <div class="col-lg-12">
         <accordion close-others="false">