Merge pull request #1263 from apinf/feature/finalize-admin-view-for-dashboard

Feature/finalize admin view for dashboard

Author: brylie

apis/client/delete/deleteApiBackendConfirmation.js

@@ -22,7 +22,7 @@ Template.deleteApiBackendConfirmation.helpers({
     return instance.backendName;
   },
 
-  /* this helper is needed to display a spinner on the template 
+  /* this helper is needed to display a spinner on the template
      after the user has pressed Delete. The instance.restCallStarted
      instance variable is set to True when the button
      is pressed. The spinner starts and continues until the call returns.*/

apis/client/view/details/details.js

@@ -5,8 +5,8 @@ Template.viewApiBackendDetails.events({
   "click #deleteModal": function() {
     var apiBackendId = this.apiBackend;
     /* As information to the delete modal, pass in the API backend document.
-    This is needed so that the API name can be shown in the dialog, 
-    as well for other information needed for API removal, such as ID*/ 
+    This is needed so that the API name can be shown in the dialog,
+    as well for other information needed for API removal, such as ID*/
     Modal.show('deleteApiBackendConfirmation', function() {
         return ApiBackends.findOne(apiBackendId);
     });

client/views/dashboard/charts/bar/bar.html

@@ -1,3 +1,3 @@
 <template name="loading">
 <!-- Blank -->
-</template>
+</template>

client/views/dashboard/charts/line/line.html

@@ -0,0 +1,16 @@
+<template name="statusCodeCountsChart">
+  <h4 class="dashboard-block-title">
+    {{ _ "statusCodeCountsChart_title" }}
+  </h4>
+  <a
+     tabindex="0"
+     class="dashboard-block-help"
+     role="button"
+     data-toggle="popover"
+     data-placement="right"
+     data-trigger="focus"
+     data-content="{{ _ 'statusCodeCountsChart_help_text' }}">
+    <i class="fa fa-question-circle" aria-hidden="true"></i>
+  </a>
+  <div id="statusCodeCounts-chart"></div>
+</template>

client/views/dashboard/charts/row/row.html

@@ -1,25 +1,23 @@
 <template name="chartsLayout">
   <div class="row">
-    <div class="col-md-12">
-      <div>
-        {{ > requestsOverTimeChart }}
-      </div>
-      <div>
+    <div class="col-lg-12">
+      {{ > requestsOverTimeChart }}
+      <div class="overviewchart-chart">
         {{ > overviewChartChart }}
       </div>
     </div>
   </div>
   <div class="row">
-    <div class="col-md-6">
+    <div class="col-lg-6 col-md-6 col-xs-12">
       {{ > statusCodeCountsChart }}
     </div>
-    <div class="col-md-6">
+    <div class="col-lg-6 col-md-6 col-xs-12">
       {{ > responseTimeDistributionChart }}
     </div>
   </div>
   <div class="row">
-    <div class="row padding-sides">
-      {{ > dataTable tableDataSet=tableDataSet }}
+    <div class="padding-sides">
+      {{ > dashboardDataTable tableDataSet=tableDataSet }}
     </div>
   </div>
 </template>

core/client/shared/loading.html

@@ -34,7 +34,7 @@ Template.chartsLayout.onCreated(function () {
         }
       },
       sort : [
-          { request_at : { order : 'desc' }},
+        { request_at : { order : 'desc' }},
       ],
       fields: [
         'request_at',
@@ -177,6 +177,7 @@ Template.chartsLayout.onCreated(function () {
       .renderArea(true)
       .transitionDuration(300)
       .margins({top: 5, right: 20, bottom: 25, left: 40})
+      .ordinalColors(['#2fa4e7'])
       .x(timeScaleForLineChart)
       .dimension(timeStampDimension)
       .group(timeStampGroup)
@@ -194,6 +195,7 @@ Template.chartsLayout.onCreated(function () {
       .centerBar(true)
       .gap(1)
       .margins({top: 5, right: 20, bottom: 25, left: 40})
+      .ordinalColors(['#2fa4e7'])
       .x(timeScaleForRangeChart)
       .alwaysUseRounding(true)
       .elasticY(true)
@@ -204,7 +206,7 @@ Template.chartsLayout.onCreated(function () {
       .transitionDuration(300)
       .dimension(statusCodeDimension)
       .group(statusCodeGroup)
-      .ordinalColors(['#31bd47', '#e4dd38', '#f2ac11', '#ed1f1f',])
+      .ordinalColors(['#28ae4f', '#ffc107', '#e15400', '#cc1410']) // Correspond to bootstrap color classes
       .elasticX(true)
       .xAxis().ticks(5);
 
@@ -216,6 +218,7 @@ Template.chartsLayout.onCreated(function () {
       .centerBar(true)
       .xUnits(dc.units.fp.precision(binwidth))
       .margins({top: 5, right: 20, bottom: 25, left: 45})
+      .ordinalColors(['#2fa4e7'])
       .brushOn(true)
       .x(xScaleForBar)
       .renderHorizontalGridLines(true)
@@ -314,6 +317,8 @@ Template.chartsLayout.onRendered(function () {
       chartElemets.removeClass('loader'); // Unset loader
     }
   });
+
+  $('[data-toggle="popover"]').popover();
 });
 
 Template.chartsLayout.helpers({
@@ -328,4 +333,4 @@ Template.chartsLayout.helpers({
       totalItemsCount: instance.totalItemsCount.get()
     }
   }
-})
+});

dashboard/client/charts/bar/bar.html

@@ -1,7 +1,9 @@
 #requestsOverTime-chart, #overviewChart-chart, #statusCodeCounts-chart, #responseTimeDistribution-chart {
-  width:100%;
+  width: 100%;
   border: 1px solid #eee;
-  margin: 5px 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 1em;
 }
 
 #requestsOverTime-chart {
@@ -24,3 +26,18 @@
 .dc-chart g.row text{
   fill: #333;
 }
+
+.dashboard-block-title {
+  display: inline-block;
+}
+
+.dashboard-block-help {
+  margin-top: 0.62em
+}
+
+.dashboard-records-number {
+  margin-top: 0.62em;
+  margin-bottom: 0.62em;
+  color: #777;
+  font-size: small;
+}