Merge pull request #336 from pqv199x/fix-errors

fix cpu chart does not reload when search new address
BuildOnViction · Nov 26, 2018 · 0a66f55 · 0a66f55
2 parents e0b4860 + b080096
commit 0a66f55
Showing 1 changed file with 33 additions and 20 deletions.
diff --git a/app/components/Chart.vue b/app/components/Chart.vue
@@ -117,11 +117,20 @@ export default {
         },
         series (newValue) {
             this.chartOptions.series = newValue
+        },
+        host: async function (newValue, oldValue) {
+            this.host = newValue
+            // rebuild CPUs
+            let query = this.buildQuery()
+
+            let data = await this.fetchData('telegraf', query, 'ms')
+            this.series = this.bindDataToChart(data, this.colors, this.fillColor)
         }
     },
     mounted: async function () {
+        // console.log(this.host)
         this.config = await this.appConfig()
-        let colors = [
+        this.colors = [
             {
                 linearGradient: {
                     x1: '50%',
@@ -150,7 +159,7 @@ export default {
             }
         ]
 
-        let fillColor = {
+        this.fillColor = {
             linearGradient: {
                 x1: '50%',
                 y1: '100%',
@@ -163,26 +172,10 @@ export default {
         }
 
         // CPUs
-        let host = this.host
-        let alias = []
-        let query = ''
-
-        if (this.dataType === 'cpu') {
-            alias = [ `${host}_cpu_user`, `${host}_cpu_idle` ]
-            // eslint-disable-next-line max-len
-            query = `SELECT mean("usage_user") AS "${alias[0]}" FROM "cpu" WHERE ("cpu" = 'cpu-total' AND "host" = '${host}') AND time >= now() - 6h GROUP BY time(60s) fill(null);SELECT mean("usage_idle") AS "${alias[1]}"  FROM "cpu" WHERE ("cpu" = 'cpu-total' AND "host" = '${host}') AND time >= now() - 6h GROUP BY time(60s) fill(null)`
-            query = encodeURI(query).replace('=', '%3D').replace(';', '%3B')
-        }
-
-        if (this.dataType === 'memory') {
-            alias = `${host}_memory_usage`
-            // eslint-disable-next-line max-len
-            query = `SELECT mean("used_percent") AS "${alias}" FROM "mem" WHERE ("host" = '${host}') AND time >= now() - 6h GROUP BY time(60s) fill(null)`
-            query = encodeURI(query).replace('=', '%3D').replace(';', '%3B')
-        }
+        let query = this.buildQuery()
 
         let data = await this.fetchData('telegraf', query, 'ms')
-        this.series = this.bindDataToChart(data, colors, fillColor)
+        this.series = this.bindDataToChart(data, this.colors, this.fillColor)
     },
     methods: {
         fetchData: async function (db, query, epoch) {
@@ -232,6 +225,26 @@ export default {
             }
 
             return chartSeries
+        },
+        buildQuery () {
+            let host = this.host
+            let alias = []
+            let query = ''
+
+            if (this.dataType === 'cpu') {
+                alias = [ `${host}_cpu_user`, `${host}_cpu_idle` ]
+                // eslint-disable-next-line max-len
+                query = `SELECT mean("usage_user") AS "${alias[0]}" FROM "cpu" WHERE ("cpu" = 'cpu-total' AND "host" = '${host}') AND time >= now() - 6h GROUP BY time(60s) fill(null);SELECT mean("usage_idle") AS "${alias[1]}"  FROM "cpu" WHERE ("cpu" = 'cpu-total' AND "host" = '${host}') AND time >= now() - 6h GROUP BY time(60s) fill(null)`
+                query = encodeURI(query).replace('=', '%3D').replace(';', '%3B')
+            }
+
+            if (this.dataType === 'memory') {
+                alias = `${host}_memory_usage`
+                // eslint-disable-next-line max-len
+                query = `SELECT mean("used_percent") AS "${alias}" FROM "mem" WHERE ("host" = '${host}') AND time >= now() - 6h GROUP BY time(60s) fill(null)`
+                query = encodeURI(query).replace('=', '%3D').replace(';', '%3B')
+            }
+            return query
         }
     }
 }