vue

frontend/src/components/Dashboard/ServiceInfo.vue

@@ -7,17 +7,11 @@
                 </span>
             </h5>
             <div class="row">
-                <div class="col-md-3 col-sm-6">
-                    <ServiceSparkLine title="here" subtitle="Failures in 7 Days" :series="first"/>
+                <div class="col-6">
+                    <ServiceSparkLine :title="calc(set1)" subtitle="Last Day Latency" :series="set1"/>
                 </div>
-                <div class="col-md-3 col-sm-6">
-                    <ServiceSparkLine title="here" subtitle="Failures Last Month" :series="second"/>
-                </div>
-                <div class="col-md-3 col-sm-6">
-                    <ServiceSparkLine title="here" subtitle="Average Response" :series="third"/>
-                </div>
-                <div class="col-md-3 col-sm-6">
-                    <ServiceSparkLine title="here" subtitle="Ping Time" :series="fourth"/>
+                <div class="col-6">
+                    <ServiceSparkLine :title="calc(set2)" subtitle="Last 7 Days Latency" :series="set2"/>
                 </div>
             </div>
         </div>
@@ -41,28 +35,31 @@
   },
   data() {
     return {
-        first: [],
-        second: [],
-        third: [],
-        fourth: []
+        set1: [],
+        set2: []
     }
   },
   async created() {
-    this.first = await this.getFailures(7, "hour")
-    this.second = await this.getFailures(30, "hour")
-    this.third = await this.getHits(7, "hour")
-    this.fourth = await this.getHits(30, "hour")
+    this.set1 = await this.getHits(24, "hour")
+    this.set2 = await this.getHits(24 * 7, "day")
   },
   methods: {
-    async getHits(days, group) {
-      const start = this.ago(3600 * 24)
+    async getHits(hours, group) {
+      const start = this.ago(3600 * hours)
       const data = await Api.service_hits(this.service.id, start, this.now(), group)
-      return [data]
+      if (!data) {
+          return [{name: "None", data: []}]
+      }
+        return [{name: "Latency", data: data.data}]
     },
-    async getFailures(days, group) {
-      const start = this.ago(3600 * 24)
-      const data = await Api.service_failures(this.service.id, start, this.now())
-      return [data]
+    calc (s) {
+        let data = s[0].data
+        let total = 0
+        data.forEach((f) => {
+            total += f.y
+        });
+        total = total / data.length
+        return total.toFixed(0) + "ms Average"
     }
   }
 }

frontend/src/components/Dashboard/ServiceSparkLine.vue

@@ -17,6 +17,14 @@ export default {
       type: String,
     }
   },
+    watch: {
+        title () {
+
+        },
+        subtitle () {
+
+        }
+    },
   data() {
     return {
       chartOpts: {
@@ -41,7 +49,7 @@ export default {
           enabled: false
         },
         title: {
-          text: "title",
+          text: this.title,
           offsetX: 0,
           style: {
             fontSize: '28px',
@@ -49,7 +57,7 @@ export default {
           }
         },
         subtitle: {
-          text: "subtitle",
+          text: this.subtitle,
           offsetX: 0,
           style: {
             fontSize: '14px',

frontend/src/forms/Integration.vue

@@ -43,14 +43,12 @@
                         <td><input v-model="service.check_interval" type="number" style="width: 35pt"></td>
                         <td><input v-model="service.timeout" type="number" style="width: 35pt"></td>
                         <td>{{service.type}}</td>
-                        <td><button @click.prevent="addService(service)" v-bind:disabled="service.added" class="btn btn-sm btn-outline-primary">Add</button></td>
+                        <td><button @click.prevent="addService(service)" v-bind:disabled="service.added" :disabled="service.added" class="btn btn-sm btn-outline-primary">Add</button></td>
                     </tr>
                     </tbody>
                 </table>
             </div>
 
-            {{out}}
-
             <div class="col-12">
                 <button @click.prevent="updateIntegration" type="submit" class="btn btn-block btn-info">Fetch Services</button>
             </div>
@@ -83,18 +81,18 @@
       async addService(s) {
         const data = {name: s.name, type: s.type, domain: s.domain, port: s.port, check_interval: s.check_interval, timeout: s.timeout}
           const out = await Api.service_create(data)
-          window.console.log(out)
+          const services = await Api.services()
+          this.$store.commit('setServices', services)
           s.added = true
       },
     async updateIntegration() {
         const i = this.integration
         const data = {name: i.name, enabled: i.enabled, fields: i.fields}
         this.out = data
-     const out = await Api.integration_save(data)
+        const out = await Api.integration_save(data)
         if (out != null) {
             this.services = out
         }
-        window.console.log(out)
       const integrations = await Api.integrations()
       this.$store.commit('setIntegrations', integrations)
     }

frontend/src/forms/User.vue

@@ -3,7 +3,7 @@
         <h1 class="text-black-50 mt-5">
             {{user.id ? `Update ${user.username}` : "Create User"}}
 
-        <button @click="removeEdit" v-if="user.id" class="mt-3 btn float-right btn-danger btn-sm">Close</button></h1>
+        <button @click.prevent="removeEdit" v-if="user.id" class="mt-3 btn float-right btn-danger btn-sm">Close</button></h1>
 
         <div class="card">
             <div class="card-body">
@@ -69,7 +69,7 @@
   },
   data () {
     return {
-        loading: false,
+      loading: false,
       user: {
         username: "",
         admin: false,
@@ -81,7 +81,9 @@
   },
   watch: {
     in_user() {
-        this.user = this.in_user
+        const u = this.in_user
+        delete u.password
+        this.user = u
     }
   },
   methods: {