Update dashboard charts for more visibility

The connections data gets obscured in the requests chart soon after Kong starts because the requests is cummulative and the connections are a current status count. This change simply splits the data into two charts so you can see the connection status.
pantsel · Sep 19, 2017 · c353e7c · c353e7c
1 parent 07ab250
commit c353e7c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 15 deletions.
diff --git a/assets/js/app/dashboard/02_dashboard-controller.js b/assets/js/app/dashboard/02_dashboard-controller.js
@@ -49,12 +49,38 @@
                   server : {
                       labels : [
                           'Accepted',
-                          'Active',
                           'Handled',
+                          'Total Requests'
+                      ],
+                      options: {
+                          scales: {
+                              xAxes: [{
+                                  ticks: {
+                                      autoSkip: false,
+                                      maxRotation: 0,
+                                      minRotation: 0
+                                  }
+                              }],
+                              yAxes: [{
+                                  ticks: {
+                                      min: 0
+                                  }
+                              }]
+                          }
+                      },
+                      series : ['Connections'],
+                      data : [
+                          $scope.status.server.connections_accepted,
+                          $scope.status.server.connections_handled,
+                          $scope.status.server.total_requests
+                      ]
+                  },
+                  activity : {
+                      labels : [
+                          'Active',
                           'Reading',
                           'Waiting',
                           'Writing',
-                          'Total Requests'
                       ],
                       options: {
                           scales: {
@@ -64,30 +90,35 @@
                                       maxRotation: 0,
                                       minRotation: 0
                                   }
+                              }],
+                              yAxes: [{
+                                  ticks: {
+                                      min: 0
+                                  }
                               }]
                           }
                       },
                       series : ['Connections'],
                       data : [
-                          $scope.status.server.connections_accepted,
                           $scope.status.server.connections_active,
-                          $scope.status.server.connections_handled,
                           $scope.status.server.connections_reading,
                           $scope.status.server.connections_waiting,
-                          $scope.status.server.connections_writing,
-                          $scope.status.server.total_requests,
+                          $scope.status.server.connections_writing
                       ]
+
+
                   },
                   timers : {
                       labels : [
                           'Pending',
                           'Running'
                       ],
                       options : {
-                          //title: {
-                          //    display: true,
-                          //    text: 'timers'
-                          //},
+                          yAxes: [{
+                            ticks: {
+                              min: 0
+                          }
+                        }]
                       },
                       series : ['Timers'],
                       data : [

diff --git a/assets/js/app/dashboard/dashboard.html b/assets/js/app/dashboard/dashboard.html
@@ -32,18 +32,17 @@ <h2>
 
 <div data-ng-if="!loading && !error && info">
     <div class="row" vertilize-container>
-        <!-- CONNECTIONS -->
-        <div class="col-md-8">
+        <!-- REQUESTS -->
+        <div class="col-md-4">
             <div class="panel panel-default" vertilize>
                 <div class="panel-heading">
                     <div class="panel-title">
                         <i class="mdi mdi-cast-connected"></i>&nbsp;
-                        CONNECTIONS
+                        REQUESTS
                     </div>
                 </div>
                 <div class="panel-body">
                     <canvas id="server"
-                            height="75"
                             class="chart chart-bar"
                             chart-data="data.server.data"
                             chart-labels="data.server.labels"
@@ -53,8 +52,28 @@ <h2>
                 </div>
             </div>
         </div>
+        <!-- END REQUESTS -->
+        <!-- CONNECTIONS -->
+        <div class="col-md-4">
+            <div class="panel panel-default" vertilize>
+                <div class="panel-heading">
+                    <div class="panel-title">
+                        <i class="mdi mdi-cast-connected"></i>&nbsp;
+                        CONNECTIONS
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <canvas id="activity"
+                            class="chart chart-bar"
+                            chart-data="data.activity.data"
+                            chart-labels="data.activity.labels"
+                            chart-options="data.activity.options"
+                            chart-series="data.activity.series">
+                    </canvas>
+                </div>
+            </div>
+        </div>
         <!-- END CONNECTIONS -->
-
         <!-- TIMERS -->
         <div class="col-md-4">
             <div class="panel panel-default" vertilize>