Host charts

Author: Reto Lehmann

ui/src/main.js

@@ -10,13 +10,11 @@ Vue.use(VueNativeSock, 'ws://localhost:8089/ws', {store: store, format: 'json'})
 import Navbar from './shared/Nav.vue';
 import LineChart from './shared/LineChart.vue';
 import BarChart from './shared/BarChart.vue';
-import DognutChart from './shared/DougnutChart.vue';
 import Dashboard from './shared/Dashboard.vue';
 Vue.component('navbar', Navbar);
 Vue.component('dashboard', Dashboard);
 Vue.component('line-chart', LineChart);
 Vue.component('bar-chart', BarChart);
-Vue.component('dognut-chart', DognutChart);
 
 new Vue({
   el: '#app',

ui/src/parts/Host.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="panel">
+    <div class="panel-container flex25">
+      <line-chart :chart-data="connections" :height="200"></line-chart>
+    </div>
+    <div class="panel-container flex25">
+      <line-chart :chart-data="activeConnections" :height="200"></line-chart>
+    </div>
+    <div class="panel-container flex25">
+      <line-chart :chart-data="refusedConnections" :height="200"></line-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'host',
+    props: ['host'],
+    computed: {
+      connections() {
+        return {
+          labels: this.$store.state.stats.ticks,
+          datasets: [
+            {
+              label: `Total Conn: ${this.host.clusterKey}-${this.host.hostIP}`,
+              backgroundColor: '#e3a108',
+              data: this.host.stats.map(s => s.totalConnections)
+            }
+          ]
+        }
+      },
+      activeConnections() {
+        return {
+          labels: this.$store.state.stats.ticks,
+          datasets: [
+            {
+              label: `Active Conn: ${this.host.clusterKey}-${this.host.hostIP}`,
+              backgroundColor: '#5b9c1c',
+              data: this.host.stats.map(s => s.activeConnections)
+            }
+          ]
+        }
+      },
+      refusedConnections() {
+        return {
+          labels: this.$store.state.stats.ticks,
+          datasets: [
+            {
+              label: `Refused Conn: ${this.host.clusterKey}-${this.host.hostIP}`,
+              backgroundColor: '#df171b',
+              data: this.host.stats.map(s => s.refusedConnections)
+            }
+          ]
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .flex25 {
+    flex: 25%
+  }
+</style>
+
+

ui/src/parts/HostOverview.vue

@@ -1,5 +1,6 @@
 <template>
   <bar-chart :chart-data="hosts"
+             :height="300"
              :chart-options="options"></bar-chart>
 </template>
 

ui/src/parts/Overall.vue

@@ -1,5 +1,7 @@
 <template>
-  <line-chart :chart-data="connections"></line-chart>
+  <line-chart
+    :height="300"
+    :chart-data="connections"></line-chart>
 </template>
 
 <script>

ui/src/shared/BarChart.vue

@@ -14,6 +14,9 @@
             opts = this.chartOptions;
           }
 
+          opts.animation = {
+            duration: 400
+          };
           opts.responsive = true;
           opts.maintainAspectRatio = false;
           return opts;

ui/src/shared/Dashboard.vue

@@ -1,24 +1,38 @@
 <template>
-  <div class="panel">
-    <div class="panel-container flex50">
-      <overall></overall>
+  <div>
+    <div class="panel">
+      <div class="panel-container flex50">
+        <overall></overall>
+      </div>
+      <div class="panel-container flex50">
+        <host-overview></host-overview>
+      </div>
     </div>
-    <div class="panel-container flex50">
-      <host-overview></host-overview>
+
+    <!--Repeat a row for each host-->
+    <div v-for="host in hosts">
+        <host :host="host"></host>
     </div>
   </div>
 </template>
 
 <script>
   import Overall from "../parts/Overall.vue";
   import HostOverview from "../parts/HostOverview.vue";
+  import Host from "../parts/Host.vue";
 
   export default {
     components: {
       Overall,
-      HostOverview
+      HostOverview,
+      Host
     },
-    name: 'dashboard'
+    name: 'dashboard',
+    computed: {
+      hosts() {
+        return this.$store.state.stats.hosts;
+      }
+    }
   }
 </script>
 
@@ -33,15 +47,13 @@
   }
 
   .panel-container {
-    min-height: 250px;
+    min-height: 150px;
 
     background-color: #1f1d1d;
     position: relative;
     border: 1px solid #292929;
   }
 
-
-
   div {
     display: block;
   }

ui/src/shared/DougnutChart.vue

@@ -14,6 +14,9 @@
             opts = this.chartOptions;
           }
 
+          opts.animation = {
+            duration: 400
+          };
           opts.responsive = true;
           opts.maintainAspectRatio = false;
           return opts;