vue updates

frontend/src/App.vue

@@ -22,31 +22,32 @@
         app: null
     }
   },
+      computed: {
+          core() {
+            return this.$store.getters.core
+          }
+      },
   async created() {
       this.app = await this.$store.dispatch('loadRequired')
 
       this.app = {...this.$store.state}
 
-    if (this.$store.getters.core.logged_in) {
+    if (this.core.logged_in) {
       await this.$store.dispatch('loadAdmin')
     }
       this.loaded = true
-      if (!this.$store.getters.core.setup) {
+      if (!this.core.setup) {
         this.$router.push('/setup')
       }
-      window.console.log('finished loadRequired')
   },
     async mounted() {
           if (this.$route.path !== '/setup') {
               const tk = localStorage.getItem("statping_user")
-              if (this.$store.getters.core.logged_in) {
+              if (this.core.logged_in) {
                 this.logged_in = true
                   await this.$store.dispatch('loadAdmin')
               }
           }
-    },
-    methods: {
-
     }
 }
 </script>

frontend/src/components/Dashboard/DashboardIndex.vue

@@ -16,7 +16,7 @@
             </div>
         </div>
 
-        <div v-for="(service, index) in $store.getters.services" class="service_block" v-bind:key="index">
+        <div v-for="(service, index) in services" class="service_block" v-bind:key="index">
             <ServiceInfo :service=service />
         </div>
     </div>
@@ -30,10 +30,15 @@
       components: {
           ServiceInfo
       },
+      computed: {
+          services() {
+              return this.$store.getters.services
+          }
+      },
       methods: {
           failuresLast24Hours() {
               let total = 0;
-              this.$store.getters.services.map((s) => {
+              this.services.map((s) => {
                   total += s.failures_24_hours
               })
               return total

frontend/src/components/Dashboard/DashboardServices.vue

@@ -24,7 +24,7 @@
             </thead>
 
             <draggable tag="tbody" v-model="groupsList" class="sortable_groups" handle=".drag_icon">
-            <tr v-for="(group, index) in $store.getters.groupsCleanInOrder" v-bind:key="group.id">
+            <tr v-for="(group, index) in groupsList" v-bind:key="group.id">
                 <td><span class="drag_icon d-none d-md-inline">
                     <font-awesome-icon icon="bars" class="mr-3" /></span> {{group.name}}
                 </td>
@@ -49,7 +49,6 @@
             </div>
         </div>
 
-
         <FormGroup v-if="$store.state.admin" :edit="editChange" :in_group="group"/>
 
     </div>
@@ -92,9 +91,6 @@
                   this.$store.commit('setGroups', groups)
               }
           }
-      },
-      beforeMount() {
-
       },
       methods: {
           editChange(v) {
@@ -105,13 +101,6 @@
               this.group = g
               this.edit = !mode
           },
-          reordered_services() {
-
-          },
-          saveUpdatedOrder: function (e) {
-              window.console.log("saving...");
-              window.console.log(this.myViews.array()); // this.myViews.array is not a function
-          },
           async deleteGroup(g) {
               let c = confirm(`Are you sure you want to delete '${g.name}'?`)
               if (c) {

frontend/src/components/Dashboard/DashboardUsers.vue

@@ -14,7 +14,7 @@
             </thead>
             <tbody id="users_table">
 
-            <tr v-for="(user, index) in $store.getters.users" v-bind:key="index" >
+            <tr v-for="(user, index) in users" v-bind:key="index" >
                 <td>{{user.username}}</td>
                 <td v-if="user.admin"><span class="badge badge-danger">ADMIN</span></td>
                 <td v-if="!user.admin"><span class="badge badge-primary">USER</span></td>
@@ -49,6 +49,11 @@
       user: {}
     }
   },
+      computed: {
+        users() {
+            return this.$store.getters.users
+        }
+      },
   methods: {
     editChange(v) {
       this.user = {}

frontend/src/components/Dashboard/ServicesList.vue

@@ -64,28 +64,20 @@ export default {
             }
         }
     },
-      data() {
-          return {
-
-          }
-      },
       methods: {
           async updateOrder(value) {
               let data = [];
               value.forEach((s, k) => {
                   data.push({ service: s.id, order: k + 1 })
               });
-              const reorder = await Api.services_reorder(data)
+              await Api.services_reorder(data)
-              window.console.log('reorder', reorder)
+              await this.update()
-              const services = await Api.services()
-              this.$store.commit('setServices', services)
           },
           async deleteService(s) {
               let c = confirm(`Are you sure you want to delete '${s.name}'?`)
               if (c) {
                   await Api.service_delete(s.id)
-                  const services = await Api.services()
+                  await this.update()
-                  this.$store.commit('setServices', services)
               }
           },
           serviceGroup(s) {
@@ -95,6 +87,10 @@ export default {
               }
               return ""
           },
+          async update() {
+              const services = await Api.services()
+              this.$store.commit('setServices', services)
+          }
       }
   }
 </script>

frontend/src/components/Dashboard/ThemeEditor.vue

@@ -59,10 +59,9 @@
       components: {
           codemirror
       },
-      props: {
+      computed: {
-          core: {
+          core() {
-              type: Object,
+              return this.$store.getters.core
-              required: true
           }
       },
       data () {
@@ -86,11 +85,6 @@
               }
           }
       },
-      computed: {
-          codemirror () {
-
-          }
-      },
       async mounted () {
           await this.fetchTheme()
           this.changeTab('vars')

frontend/src/components/Dashboard/TopNav.vue

@@ -51,7 +51,7 @@
           this.$store.commit('setHasAllData', false)
           this.$store.commit('setToken', null)
           this.$store.commit('setAdmin', false)
-          await this.$router.push('/')
+          await this.$router.push('/logout')
         }
     }
 }

frontend/src/components/Index/Footer.vue

@@ -1,12 +1,12 @@
 <template>
     <footer>
-        <div v-if="!$store.getters.core.footer" class="footer text-center mb-4 p-2">
+        <div v-if="!core.footer" class="footer text-center mb-4 p-2">
             <a href="https://github.com/statping/statping" target="_blank">
-                Statping {{$store.getters.core.version}} made with <font-awesome-icon style="color: #d40d0d" icon="heart"/>
+                Statping {{core.version}} made with <font-awesome-icon icon="heart"/>
             </a> |
-            <router-link :to="$store.getters.core.logged_in ? '/dashboard' : '/login'">Dashboard</router-link>
+            <router-link :to="core.logged_in ? '/dashboard' : '/login'">Dashboard</router-link>
         </div>
-        <div v-else class="footer text-center mb-4 p-2" v-html="$store.getters.core.footer"></div>
+        <div v-else class="footer text-center mb-4 p-2" v-html="core.footer"></div>
     </footer>
 </template>
 
@@ -22,11 +22,11 @@
     version: String,
     logged_in: Boolean
   },
-      watch: {
+  computed: {
-          logged_in() {
+      core() {
-
+        return this.$store.getters.core
-          }
       }
+  }
 }
 </script>
 

frontend/src/components/Index/Group.vue

@@ -26,7 +26,6 @@ export default {
   components: {
       IncidentsBlock,
       GroupServiceFailures
-
   },
   props: {
     group: Object

frontend/src/components/Index/GroupServiceFailures.vue

@@ -34,7 +34,7 @@ export default {
     },
     methods: {
       async lastDaysFailures() {
-          const start = this.nowSubtract(86400 * 30)
+        const start = this.nowSubtract(86400 * 30)
         this.failureData = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(this.now()), "24h")
       }
     }

frontend/src/components/Index/Header.vue

@@ -1,13 +1,18 @@
 <template>
     <div>
-        <h1 id="title" class="col-12 text-center pt-4 mt-4 mb-3 header-title font-6">{{$store.getters.core.name}}</h1>
+        <h1 id="title" class="col-12 text-center pt-4 mt-4 mb-3 header-title font-6">{{core.name}}</h1>
-        <h5 id="description" class="col-12 text-center mb-5 header-desc font-3">{{$store.getters.core.description}}</h5>
+        <h5 id="description" class="col-12 text-center mb-5 header-desc font-3">{{core.description}}</h5>
     </div>
 </template>
 
 <script>
 export default {
   name: 'Header',
+    computed: {
+      core() {
+          return this.$store.getters.core
+      }
+    }
 }
 </script>
 

frontend/src/components/Service/Analytics.vue

@@ -35,10 +35,12 @@
         }
       },
       async mounted() {
-          this.value = this.func.value;
+            if (this.func) {
-          this.title = this.func.title;
+                this.value = this.func.value;
-          this.subtitle = this.func.subtitle;
+                this.title = this.func.title;
-          this.chart = this.convertToChartData(this.func.chart);
+                this.subtitle = this.func.subtitle;
+                this.chart = this.convertToChartData(this.func.chart);
+            }
       },
       async latencyYesterday() {
         const todayTime = await Api.service_hits(this.service.id, this.toUnix(this.nowSubtract(86400)), this.toUnix(new Date()), this.group, false)

frontend/src/forms/CoreSettings.vue

@@ -41,24 +41,17 @@
 
   export default {
       name: 'CoreSettings',
-        props: {
+      computed: {
-          in_core: {
+          core() {
-            type: Object,
+              return this.$store.getters.core
-            required: true,
           }
-        },
+      },
-    data() {
-      return {
-        core: this.in_core
-      }
-    },
       methods: {
           async saveSettings() {
               const c = this.core
               await Api.core_save(c)
               const core = await Api.core()
               this.$store.commit('setCore', core)
-              this.core = core
           },
           selectAll() {
               this.$refs.input.select();

frontend/src/forms/GithubAuth.vue

@@ -1,80 +0,0 @@
-<template>
-    <form @submit="updateCore">
-        <div class="form-group row">
-            <label class="col-sm-4 col-form-label">Github Client ID</label>
-            <div class="col-sm-8">
-                <input v-model="clientId" type="text" class="form-control" placeholder="" required>
-            </div>
-        </div>
-        <div class="form-group row">
-            <label class="col-sm-4 col-form-label">Github Client Secret</label>
-            <div class="col-sm-8">
-                <input v-model="clientSecret" type="text" class="form-control" placeholder="" required>
-            </div>
-        </div>
-        <div class="form-group row">
-            <label for="switch-group-public" class="col-sm-4 col-form-label">Enabled</label>
-            <div class="col-md-8 col-xs-12 mt-1">
-            <span @click="enabled = !!enabled" class="switch float-left">
-                <input v-model="enabled" type="checkbox" class="switch" id="switch-group-public" :checked="enabled">
-                <label for="switch-group-public">Enabled Github Auth</label>
-            </span>
-            </div>
-        </div>
-        <div class="form-group row">
-            <div class="col-sm-12">
-                <button @click="updateCore" type="submit" :disabled="loading || group.name === ''" class="btn btn-block" :class="{'btn-primary': !group.id, 'btn-secondary': group.id}">
-                    {{loading ? "Loading..." : group.id ? "Update Group" : "Create Group"}}
-                </button>
-            </div>
-        </div>
-        <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
-    </form>
-</template>
-
-<script>
-  import Api from "../API";
-
-  export default {
-      name: 'FormGroup',
-      props: {
-          in_group: {
-              type: Object
-          },
-          edit: {
-              type: Function
-          }
-      },
-      data() {
-          return {
-              loading: false,
-              clientId: "",
-              clientSecret: "",
-              enabled: true,
-          }
-      },
-      watch: {
-          in_group() {
-              this.group = this.in_group
-          }
-      },
-      methods: {
-          removeEdit() {
-              this.group = {}
-              this.edit(false)
-          },
-          async updateCore() {
-              const g = this.group
-              const data = {id: g.id, name: g.name, public: g.public}
-              await Api.core_save(data)
-              const groups = await Api.groups()
-              this.$store.commit('setGroups', groups)
-              this.edit(false)
-          }
-      }
-  }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/forms/Group.vue

@@ -80,17 +80,19 @@
               const g = this.group
               const data = {name: g.name, public: g.public}
               await Api.group_create(data)
-              const groups = await Api.groups()
+              await this.update()
-              this.$store.commit('setGroups', groups)
               this.group = {}
           },
           async updateGroup() {
               const g = this.group
               const data = {id: g.id, name: g.name, public: g.public}
               await Api.group_update(data)
+              await this.update()
+              this.edit(false)
+          },
+          async update() {
               const groups = await Api.groups()
               this.$store.commit('setGroups', groups)
-              this.edit(false)
           }
       }
   }

frontend/src/forms/Incident.vue

@@ -93,9 +93,9 @@
           await Api.incident_update_delete(update)
           this.incidents = await Api.incidents_service(this.service)
         },
-            async loadIncidents() {
+        async loadIncidents() {
-              this.incidents = await Api.incidents_service(this.service)
+          this.incidents = await Api.incidents_service(this.service)
-            },
+        },
           async createIncident() {
             await Api.incident_create(this.service, this.incident)
             await this.loadIncidents()
@@ -105,13 +105,13 @@
                 service: this.service.id,
             }
           },
-          async deleteIncident(incident) {
+      async deleteIncident(incident) {
-              let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
+          let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
-              if (c) {
+          if (c) {
-                  await Api.incident_delete(incident)
+              await Api.incident_delete(incident)
-                await this.loadIncidents()
+            await this.loadIncidents()
-              }
           }
+      }
   }
 }
 </script>

frontend/src/forms/Login.vue

@@ -35,11 +35,11 @@
 
   export default {
       name: 'FormLogin',
-    props: {
+      computed: {
-        oauth: {
+          oauth() {
-          type: Object
+              return this.$store.getters.core.oauth
-        }
+          }
-    },
+      },
       data() {
           return {
               username: "",

frontend/src/pages/Dashboard.vue

@@ -20,13 +20,9 @@
       }
   },
   async mounted() {
-        const core = await Api.core()
+      const core = await Api.core()
       this.$store.commit('setAdmin', core.admin)
-    this.$store.commit('setCore', core)
+      this.$store.commit('setCore', core)
-  },
-  async created() {
-    const core = await Api.core()
-    this.$store.commit('setCore', core)
   }
 }
 </script>

frontend/src/pages/Index.vue

@@ -3,7 +3,7 @@
 
         <Header/>
 
-        <div v-for="(service, i) in $store.getters.servicesNoGroup" class="col-12 full-col-12">
+        <div v-for="(service, i) in services_no_group" class="col-12 full-col-12">
             <div class="list-group online_list mb-4">
                 <a class="service_li list-group-item list-group-item-action">
                     <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
@@ -16,16 +16,16 @@
             </div>
         </div>
 
-        <div v-for="(group, index) in $store.getters.groupsInOrder" v-bind:key="index">
+        <div v-for="(group, index) in groups" v-bind:key="index">
             <Group :group=group />
         </div>
 
-        <div v-for="(message, index) in $store.getters.messages" v-bind:key="index" v-if="inRange(message) && message.service === 0">
+        <div v-for="(message, index) in messages" v-bind:key="index" v-if="inRange(message) && message.service === 0">
             <MessageBlock :message="message"/>
         </div>
 
         <div class="col-12 full-col-12">
-            <div v-for="(service, index) in $store.getters.servicesInOrder" :ref="service.id" v-bind:key="index">
+            <div v-for="(service, index) in services" :ref="service.id" v-bind:key="index">
                 <ServiceBlock :service=service />
             </div>
         </div>
@@ -58,6 +58,20 @@ export default {
             logged_in: false
         }
     },
+    computed: {
+        messages() {
+            return this.$store.getters.messages
+        },
+        groups() {
+            return this.$store.getters.groupsInOrder
+        },
+        services() {
+            return this.$store.getters.servicesInOrder
+        },
+        services_no_group() {
+            return this.$store.getters.servicesNoGroup
+        }
+    },
     async created() {
         this.logged_in = this.loggedIn()
     },
@@ -69,11 +83,6 @@ export default {
             const start = this.isBetween(new Date(), message.start_on)
             const end = this.isBetween(message.end_on, new Date())
             return start && end
-        },
-        clickService(s) {
-            this.$nextTick(() => {
-                this.$refs.s.scrollTop = 0;
-            });
         }
     }
 }

frontend/src/pages/Login.vue

@@ -5,7 +5,7 @@
                 <img alt="Statping Login" class="col-12 mt-5 mt-md-0" style="max-width:680px" src="banner.png">
             </div>
 
-            <FormLogin :oauth="$store.getters.core.oauth"/>
+            <FormLogin/>
 
         </div>
     </div>

frontend/src/pages/Logs.vue

@@ -12,7 +12,6 @@ import Api from "../API";
 
 export default {
     name: 'Logs',
-    components: {},
     data() {
         return {
             logs: [],

frontend/src/pages/Settings.vue

@@ -60,11 +60,10 @@
                         <div class="card text-black-50 bg-white">
                             <div class="card-header">Statping Settings</div>
                             <div class="card-body">
-                                <CoreSettings :in_core="core"/>
+                                <CoreSettings/>
                             </div>
                         </div>
 
-
                         <div class="card text-black-50 bg-white mt-3">
                             <div class="card-header">API Settings</div>
                             <div class="card-body">
@@ -112,7 +111,7 @@
                         <div class="card text-black-50 bg-white mb-5">
                             <div class="card-header">Theme Editor</div>
                             <div class="card-body">
-                                <ThemeEditor :core="core"/>
+                                <ThemeEditor/>
                             </div>
                         </div>
                     </div>
@@ -167,20 +166,21 @@
               tab: "v-pills-home-tab",
               qrcode: "",
               qrurl: "",
-              core: this.$store.getters.core
+          }
+      },
+      computed: {
+          core() {
+              return this.$store.getters.core
           }
       },
       async mounted() {
           this.cache = await Api.cache()
       },
       async created() {
-          const c = this.$store.state.core
+          const c = this.core
           this.qrurl = `statping://setup?domain=${c.domain}&api=${c.api_secret}`
           this.qrcode = "https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=" + encodeURI(this.qrurl)
       },
-      async beforeMount() {
-        this.core = await Api.core()
-      },
       methods: {
           changeTab(e) {
               this.tab = e.target.id

handlers/cache.go

@@ -88,6 +88,8 @@ func (s Storage) List() map[string]Item {
 
 //Get a cached content by key
 func (s Storage) Get(key string) []byte {
+	s.mu.Lock()
+	defer s.mu.Unlock()
 	item := s.items[key]
 	if item.Expired() {
 		CacheStorage.Delete(key)