ui updates

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added Version and Github Commit hash to left navigation on Settings page
 - Added "reason" for failures (will be used for more custom notification messages) [regex, lookup, timeout, connection, close, status_code]
 - 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
 
 # 0.90.63 (08-17-2020)
 - Modified build process to use xgo for all arch builds

frontend/src/assets/scss/base.scss

@@ -103,11 +103,33 @@
     background-color: #efefef;
 }
 
+.divided {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.divider {
+  flex-grow: 1;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  margin: 0 20px 0 20px;
+}
+
+.daily-failures {
+  position: absolute;
+  padding-top: 3px;
+  top: 10px;
+  right: 100px;
+  width: 300px;
+  height: 25px;
+}
+
 .service_day {
   height: 20px;
   margin-right: 2px;
-  border-radius: 4px;
+  border-radius: 2px;
-  max-width: 25px;
+  max-width: 30px;
+  cursor: pointer;
 }
 
 .service_day SPAN {

frontend/src/assets/scss/layout.scss

@@ -131,3 +131,12 @@ A:HOVER {
 .footer A:HOVER {
   color: #6d6d6d;
 }
+
+.no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

frontend/src/assets/scss/variables.scss

@@ -15,7 +15,7 @@ $navbar-background: #ffffff;
 $input-background: #fdfdfd;
 $input-color: #4e4e4e;
 $input-border: 1px solid #c9c9c9;
-$day-success-background: #20ac13;
+$day-success-background: #e9e9e9;
 $day-error-background: #d50a0a;
 
 /*    Status Container   */

frontend/src/components/Index/Footer.vue

@@ -1,12 +1,14 @@
 <template>
     <footer>
         <div v-if="!core.footer" class="footer text-center mb-4 p-2">
-          <div class="d-block small text-dim">
+          <div class="d-block text-dim">
-          <div class="d-block">
+          <div class="mb-3">
-            <router-link :to="$store.state.admin ? '/dashboard' : '/login'">{{$t('top_nav.dashboard')}}</router-link>
+            <router-link :to="admin ? '/dashboard' : '/login'">{{$t('top_nav.dashboard')}}</router-link>
           </div>
-            <a class="mt-3" href="https://github.com/statping/statping" target="_blank">Statping</a> v{{core.version}}
+            <span class="text-muted font-1 mt-3">
-            made with <font-awesome-icon icon="heart" class="text-danger"/>
+            <a href="https://github.com/statping/statping" target="_blank">Statping v{{core.version}}
+              made with <font-awesome-icon icon="heart" class="font-1 text-danger"/></a>
+            </span>
           </div>
         </div>
         <div v-else class="footer text-center mb-4 p-2" v-html="core.footer"></div>
@@ -27,7 +29,10 @@
       },
     commit() {
       return this.$store.getters.core.commit.slice(0,8)
-    }
+    },
+    admin() {
+      return this.$store.getters.admin
+    },
   }
 }
 </script>

frontend/src/components/Index/GroupServiceFailures.vue

@@ -1,17 +1,22 @@
 <template>
     <div>
-        <div class="d-flex mt-3 mb-2">
+        <div class="d-flex mt-3">
-            <div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'day-error': d.amount > 0, 'day-success': d.amount === 0}">
+            <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">{{d.amount}}</span>
+                <span v-if="d.amount !== 0" class="d-none d-md-block text-center small"></span>
             </div>
         </div>
         <div class="row mt-2">
-            <div class="col-3 text-left font-2 text-muted">30 Days Ago</div>
+          <div class="col-12 no-select">
-            <div class="col-6 text-center font-2" :class="{'text-muted': service.online, 'text-danger': !service.online}">
+          <p class="divided">
-               {{service_txt}}
+            <span class="font-2 text-muted">90 Days Ago</span>
-            </div>
+            <span class="divider"></span>
-            <div class="col-3 text-right font-2 text-muted">Today</div>
+            <span class="text-center font-2" :class="{'text-muted': service.online, 'text-danger': !service.online}">{{service_txt}}</span>
+            <span class="divider"></span>
+            <span class="font-2 text-muted">Today</span>
+          </p>
+          </div>
         </div>
+      <div class="daily-failures small text-right text-dim">{{hover_text}}</div>
     </div>
 </template>
 
@@ -26,6 +31,7 @@ export default {
     data() {
         return {
             failureData: [],
+          hover_text: ""
         }
     },
   props: {
@@ -43,18 +49,24 @@ export default {
       this.lastDaysFailures()
     },
     methods: {
+      mouseout() {
+        this.hover_text = ""
+      },
+    mouseover(e) {
+      let txt = `${e.amount} Failures`
+      if (e.amount === 0) {
+        txt = `No Issues`
+      }
+      this.hover_text = `${e.date.toLocaleDateString()} - ${txt}`
+    },
       async lastDaysFailures() {
-        const start = this.nowSubtract(86400 * 30)
+        const start = this.nowSubtract(86400 * 90)
-        const data = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(this.startToday()), "24h")
+        const data = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(this.now()), "24h", true)
         data.forEach((d) => {
           let date = this.parseISO(d.timeframe)
-          this.failureData.push({month: 1, day: date.getDate(), amount: d.amount})
+          this.failureData.push({month: date.getMonth(), day: date.getDate(), date: date, amount: d.amount})
         })
       }
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/components/Index/IncidentsBlock.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="row">
-        <div v-for="(incident, i) in incidents" class="col-12">
+        <div v-for="(incident, i) in incidents" class="col-12 mt-2">
             <span class="braker mt-1 mb-3"></span>
             <h6>{{incident.title}}
                 <span class="font-2 float-right">{{niceDate(incident.created_at)}}</span>

frontend/src/store.js

@@ -36,6 +36,7 @@ export default new Vuex.Store({
   getters: {
     hasAllData: state => state.hasAllData,
     hasPublicData: state => state.hasPublicData,
+    admin: state => state.admin,
     core: state => state.core,
     oauth: state => state.oauth,
     token: state => state.token,