style changes + dashboard now async ajax calls

js/apps/system/aardvark/frontend/html/body.html.part

@@ -5,6 +5,7 @@
       <div class="navlogo">
         <a class="logo" href="#"><img src="img/logo_arangodb_white.png"/></a>
       </div>
+      <div id="progressPlaceholderIcon"></div>
         <div class="statmenu" id="statisticBar">
         </div>
         <div class="usermenu" id="userBar" style="float:right;">

js/apps/system/aardvark/frontend/js/views/dashboardView.js

@@ -407,7 +407,7 @@
                          cuts[counter] : cuts[counter - 1] + " - " + cuts[counter];
     },
 
-    getStatistics: function () {
+    getStatistics: function (callback) {
       var self = this;
       var url = "/_db/_system/_admin/aardvark/statistics/short";
       var urlParams = "?start=";
@@ -430,13 +430,20 @@
 
       $.ajax(
         url + urlParams,
-        {async: false}
+        {async: true}
       ).done(
         function (d) {
           if (d.times.length > 0) {
             self.isUpdating = true;
             self.mergeHistory(d);
           }
+          if (self.isUpdating === false) {
+            return;
+          }
+          if (callback) {
+            callback();
+          }
+          self.updateCharts();
         }
       );
     },
@@ -459,7 +466,7 @@
 
       $.ajax(
         url + urlParams,
-        {async: false}
+        {async: true}
       ).done(
         function (d) {
           var i;
@@ -664,10 +671,6 @@
       }
       self.timer = window.setInterval(function () {
         self.getStatistics();
-        if (self.isUpdating === false) {
-          return;
-        }
-        self.updateCharts();
       },
       self.interval
     );
@@ -697,7 +700,7 @@
     if (!modalView)  {
       $(this.el).html(this.template.render());
     }
-    this.getStatistics();
+    var callback = function() {
       this.prepareDygraphs();
       if (this.isUpdating) {
         this.prepareD3Charts();
@@ -705,6 +708,11 @@
         this.updateTendencies();
       }
       this.startUpdating();
+    }.bind(this);
+    this.getStatistics(callback);
+
+
+
   }
 });
 }());

js/apps/system/aardvark/frontend/js/views/progressView.js

@@ -8,8 +8,11 @@
   window.ProgressView = Backbone.View.extend({
 
     template: templateEngine.createTemplate("progressBase.ejs"),
+
     el: "#progressPlaceholder",
 
+    el2: "#progressPlaceholderIcon",
+
     initialize: function() {
     },
 
@@ -17,10 +20,12 @@
       $(this.el).html(this.template.render({}));
       $(".progress-message").text(msg);
       $(this.el).show();
+      $(this.el2).html('<i class="fa fa-spinner fa-spin"></i>');
     },
 
     hide: function() {
-      $(this.el).fadeOut();
+      $(this.el).hide();
+      $(this.el2).html('');
     }
 
   });

js/apps/system/aardvark/frontend/scss/_progressView.scss

@@ -8,7 +8,8 @@
 }
 
 .progress-view {
-  background-color: rgba(0, 0, 0, .1);
+  opacity: 0;
+  background-color: rgba(0, 0, 0, .0);
   border-radius: 5px;
   color: $c-nav-bg;
   height: 180px;
@@ -16,13 +17,16 @@
   margin: -100px 0 0 -150px;
   position: absolute;
   top: 50%;
+  opacity: 0;
   width: 300px;
 
   .progress-content {
     margin-left: 90px;
     margin-top: 10px;
+    opacity: 0;
 
     .fa-spinner {
+      opacity: 0;
       font-size: 100pt;
     }
 
@@ -37,5 +41,14 @@
     height: 25px;
     padding-top: 3px;
     text-align: center;
+    opacity: 0;
   }
 }
+
+#progressPlaceholderIcon {
+  color: $c-positive;
+  float: left;
+  font-size: 22px;
+  margin-left: 10px;
+  margin-top: 6px;
+}

js/apps/system/aardvark/frontend/scss/generated.css

@@ -5852,7 +5852,8 @@ input.gv-radio-button {
   z-index: 9999; }
 
 .progress-view {
-  background-color: rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  background-color: transparent;
   border-radius: 5px;
   color: #333232;
   height: 180px;
@@ -5860,11 +5861,14 @@ input.gv-radio-button {
   margin: -100px 0 0 -150px;
   position: absolute;
   top: 50%;
+  opacity: 0;
   width: 300px; }
   .progress-view .progress-content {
     margin-left: 90px;
-    margin-top: 10px; }
+    margin-top: 10px;
+    opacity: 0; }
     .progress-view .progress-content .fa-spinner {
+      opacity: 0;
       font-size: 100pt; }
   .progress-view .progress-message {
     background-color: #333232;
@@ -5874,7 +5878,15 @@ input.gv-radio-button {
     font-weight: 200;
     height: 25px;
     padding-top: 3px;
-    text-align: center; }
+    text-align: center;
+    opacity: 0; }
+
+#progressPlaceholderIcon {
+  color: #8aa051;
+  float: left;
+  font-size: 22px;
+  margin-left: 10px;
+  margin-top: 6px; }
 
 .hotkeysList .hotkeysLabel {
   clear: both;