better loading, updated service chart

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added Help page that is generated from Statping's Wiki repo on build
 - Modified Service Group failures on index page to show 90 days of failures
 - Modified Service view page, updated Latency and Ping charts, added failures below
+- Modified Service chart on index page to show ping data along with latency
 
 # 0.90.63 (08-17-2020)
 - Modified build process to use xgo for all arch builds

database/grouping.go

@@ -87,6 +87,9 @@ func (g *GroupQuery) GraphData(by By) ([]*TimeValue, error) {
 	return caller.ToValues()
 }
 
+// ToTimeValue will format the SQL rows into a JSON format for the API.
+// [{"timestamp": "2006-01-02T15:04:05Z", "amount": 468293}]
+// TODO redo this entire function, use better SQL query to group by time
 func (g *GroupQuery) ToTimeValue() (*TimeVar, error) {
 	rows, err := g.db.Rows()
 	if err != nil {

database/time.go

@@ -19,17 +19,17 @@ func (it *Db) ParseTime(t string) (time.Time, error) {
 	}
 }
 
+// FormatTime returns the timestamp in the same format as the DATETIME column in database
 func (it *Db) FormatTime(t time.Time) string {
 	switch it.Type {
-	case "mysql":
-		return t.Format("2006-01-02 15:04:05")
 	case "postgres":
 		return t.Format("2006-01-02 15:04:05.999999999")
 	default:
 		return t.Format("2006-01-02 15:04:05")
 	}
 }
 
+// SelectByTime returns an SQL query that will group "created_at" column by x seconds and returns as "timeframe"
 func (it *Db) SelectByTime(increment time.Duration) string {
 	seconds := int64(increment.Seconds())
 	switch it.Type {
@@ -41,33 +41,3 @@ func (it *Db) SelectByTime(increment time.Duration) string {
 		return fmt.Sprintf("datetime((strftime('%%s', created_at) / %d) * %d, 'unixepoch') as timeframe", seconds, seconds)
 	}
 }
-
-func (it *Db) correctTimestamp(increment string) string {
-	var timestamper string
-	switch increment {
-	case "second":
-		timestamper = "%Y-%m-%d %H:%M:%S"
-	case "minute":
-		timestamper = "%Y-%m-%d %H:%M:00"
-	case "hour":
-		timestamper = "%Y-%m-%d %H:00:00"
-	case "day":
-		timestamper = "%Y-%m-%d 00:00:00"
-	case "month":
-		timestamper = "%Y-%m-01 00:00:00"
-	case "year":
-		timestamper = "%Y-01-01 00:00:00"
-	default:
-		timestamper = "%Y-%m-%d 00:00:00"
-	}
-
-	switch it.Type {
-	case "mysql":
-	case "second":
-		timestamper = "%Y-%m-%d %H:%i:%S"
-	case "minute":
-		timestamper = "%Y-%m-%d %H:%i:00"
-	}
-
-	return timestamper
-}

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view :loaded="loaded"/>
+    <router-view/>
     <Footer v-if="$route.path !== '/setup'"/>
   </div>
 </template>

frontend/src/components/Dashboard/TopNav.vue

@@ -65,7 +65,3 @@
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/components/Index/Group.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="col-12 full-col-12">
+    <div v-if="services.length > 0" class="col-12 full-col-12">
         <h4 v-if="group.name !== 'Empty Group'" class="group_header mb-3 mt-4">{{group.name}}</h4>
         <div class="list-group online_list mb-4">
 
-            <div v-for="(service, index) in $store.getters.servicesInGroup(group.id)" v-bind:key="index" class="service_li list-group-item list-group-item-action">
+            <div v-for="(service, index) in services" v-bind:key="index" class="service_li list-group-item list-group-item-action">
                 <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
                 <span class="badge text-uppercase float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">
                     {{service.online ? $t('online') : $t('offline')}}
@@ -30,11 +30,15 @@ export default {
       GroupServiceFailures
   },
   props: {
-    group: Object
+    group: {
+      type: Object,
+      required: true,
+    }
   },
+  computed: {
+    services() {
+      return this.$store.getters.servicesInGroup(this.group.id)
+    }
+  }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/components/Index/GroupServiceFailures.vue

@@ -1,5 +1,12 @@
 <template>
     <div>
+      <div v-observe-visibility="{callback: visibleChart, once: true}" v-if="!loaded" class="row">
+        <div class="col-12 text-center mt-3">
+          <font-awesome-icon icon="circle-notch" class="text-dim" size="1x" spin/>
+        </div>
+      </div>
+      <transition name="fade">
+        <div v-if="loaded">
         <div class="d-flex mt-3">
             <div class="flex-fill service_day" v-for="(d, index) in failureData" @mouseover="mouseover(d)" @mouseout="mouseout" :class="{'day-error': d.amount > 0, 'day-success': d.amount === 0}">
                 <span v-if="d.amount !== 0" class="d-none d-md-block text-center small"></span>
@@ -17,6 +24,8 @@
           </div>
         </div>
       <div class="daily-failures small text-right text-dim">{{hover_text}}</div>
+      </div>
+  </transition>
     </div>
 </template>
 
@@ -31,7 +40,9 @@ export default {
     data() {
         return {
             failureData: [],
-          hover_text: ""
+          hover_text: "",
+          loaded: false,
+          visible: false,
         }
     },
   props: {
@@ -45,10 +56,16 @@ export default {
       return this.smallText(this.service)
     }
   },
-    mounted () {
-      this.lastDaysFailures()
+  mounted () {
+
     },
     methods: {
+      visibleChart(isVisible, entry) {
+        if (isVisible && !this.visible) {
+          this.visible = true
+          this.lastDaysFailures().then(() =>  this.loaded = true)
+        }
+      },
       mouseout() {
         this.hover_text = ""
       },

frontend/src/components/Index/Header.vue

@@ -15,7 +15,3 @@ export default {
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/components/Service/ServiceBlock.vue

@@ -13,7 +13,7 @@
                 </div>
             </div>
 
-            <div v-show="!expanded" v-observe-visibility="visibleChart" class="chart-container">
+            <div v-show="!expanded" v-observe-visibility="{callback: visibleChart, throttle: 200}" class="chart-container">
                 <ServiceChart :service="service" :visible="visible" :chart_timeframe="chartTimeframe"/>
             </div>
 
@@ -67,18 +67,12 @@ export default {
     name: 'ServiceBlock',
     components: { Analytics, ServiceTopStats, ServiceChart},
     props: {
-        in_service: {
+        service: {
             type: Object,
             required: true
         },
     },
-  watch: {
-
-  },
   computed: {
-    service() {
-      return this.track_service
-    },
     timeframepick() {
       return this.timeframes.find(s => s.value === this.timeframe_val)
     },
@@ -124,7 +118,7 @@ export default {
             {value: "4320m", text: "3/day", set: 10 },
             {value: "10080m", text: "7/day", set: 11 },
           ],
-            stats: {
+          stats: {
                 total_failures: {
                     title: "Total Failures",
                     subtitle: "Last 7 Days",
@@ -151,14 +145,13 @@ export default {
                     value: 0,
                 }
             },
-            track_service: null,
         }
     },
   beforeDestroy() {
     // clearInterval(this.timer_func)
   },
-  async created() {
-      this.track_service = this.in_service
+  created() {
+
   },
     methods: {
       disabled_interval(interval) {
@@ -189,30 +182,8 @@ export default {
       },
       async setService() {
         await this.$store.commit('setService', this.service)
-        this.$router.push('/service/'+this.service.id, {props: {in_service: this.service}})
+        this.$router.push('/service/'+this.service.id, {props: {service: this.service}})
       },
-        async showMoreStats() {
-            this.expanded = !this.expanded;
-
-            const failData = await Graphing.failures(this.service, 7)
-            this.stats.total_failures.chart = failData.data;
-            this.stats.total_failures.value = failData.total;
-
-            const hitsData = await Graphing.hits(this.service, 7)
-
-            this.stats.high_latency.chart = hitsData.chart;
-            this.stats.high_latency.value = this.humanTime(hitsData.high);
-
-            this.stats.lowest_latency.chart = hitsData.chart;
-            this.stats.lowest_latency.value = this.humanTime(hitsData.low);
-
-            const pingData = await Graphing.pings(this.service, 7)
-            this.stats.high_ping.chart = pingData.chart;
-            this.stats.high_ping.value = this.humanTime(pingData.high);
-
-            this.stats.low_ping.chart = pingData.chart;
-            this.stats.low_ping.value = this.humanTime(pingData.low);
-        },
         visibleChart(isVisible, entry) {
                 if (isVisible && !this.visible) {
                     this.visible = true
@@ -226,4 +197,4 @@ export default {
         }
     }
 }
-</script>
+</script>