HAWKULAR 427: Update chart loading feedback

hawkular · Jul 3, 2015 · aa1380a · aa1380a
1 parent 6c89289
commit aa1380a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/response-time.html b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/response-time.html
@@ -65,8 +65,9 @@ <h3 class="pull-left">Metrics</h3>
     <div class="panel panel-default hk-graph" ng-if="vm.average >= 0">
       <h2>Response Time</h2>
 
-      <p class="label label-info waiting-label" ng-hide="vm.chartData.dataPoints.length > 0" >We are
-        collecting your initial data. Please be patient(could be up to a minute)...</p>
+      <div class="text-center hk-spinner-container" ng-hide="vm.chartData.dataPoints.length > 0">
+        <div class="spinner spinner-lg"></div>
+      </div>
 
       <div class="metrics-chart">
         <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->

diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/less/metrics-main.less b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/less/metrics-main.less
@@ -27,6 +27,7 @@
 
 body {
   line-height: 1.4;
+  padding-bottom: @grid-gutter-width/2;
 }
 
 .container {
@@ -159,8 +160,10 @@ a:hover .fa-spinner {
   padding: 2px 4px;
 }
 
-.help-block {
-
+.hk-spinner-legend-below {
+  color: @gray-light;
+  font-size: ceil(@font-size-base + 2);
+  margin-top: @grid-gutter-width/8;
 }
 
 // tables
@@ -315,12 +318,6 @@ a:hover .fa-spinner {
     margin-top: @grid-gutter-width*5.5;
   }
 
-  .hk-spinner-legend-below {
-    color: @gray-light;
-    font-size: ceil(@font-size-base + 2);
-    margin-top: @grid-gutter-width/4;
-  }
-
   h1 + .fa {
     color: @gray-light;
     font-size: ceil(@font-size-base * 4);
@@ -844,6 +841,11 @@ a:hover .fa-spinner {
     margin-bottom: 5px;
   }
 
+  .hk-spinner-container {
+    margin-bottom: @grid-gutter-width/4*5;
+    margin-top: @grid-gutter-width*1.5;
+  }
+
   .hk-legend {
     font-size: ceil(@font-size-base - 1);
     margin-left: 38px;