group updates

frontend/src/assets/scss/base.scss

@@ -168,6 +168,22 @@ HTML,BODY {
     background-color: #efefef;
 }
 
+.service_day {
+  height: 20px;
+  margin-right: 2px;
+  border-radius: 4px;
+  max-width: 25px;
+}
+
+.service_day SPAN {
+  font-size: 6pt;
+  color: white;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+}
+
   .service_scale {
     width: 60pt;
     float: left !important;

frontend/src/components/Index/GroupServiceFailures.vue

@@ -1,7 +1,9 @@
 <template>
     <div>
         <div class="d-flex mt-3 mb-2">
-            <div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'mini_error': d.amount > 0, 'mini_success': d.amount === 0}"></div>
+            <div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'mini_error': d.amount > 0, 'mini_success': d.amount === 0}">
+                <span v-if="d.amount != 0" class="small">{{d.amount}}</span>
+            </div>
         </div>
         <div class="row mt-2">
             <div class="col-4 text-left font-2 text-muted">30 Days Ago</div>
@@ -23,7 +25,7 @@ export default {
   },
     data() {
         return {
-            failureData: null,
+            failureData: [],
         }
     },
   props: {
@@ -50,7 +52,11 @@ export default {
     methods: {
       async lastDaysFailures() {
         const start = this.nowSubtract(86400 * 30)
-        this.failureData = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(this.now()), "24h")
+        const data = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(this.startToday()), "24h")
+        data.forEach((d) => {
+          let date = this.parseISO(d.timeframe)
+          this.failureData.push({month: 1, day: date.getDate(), amount: d.amount})
+        })
       }
     }
 }
@@ -58,63 +64,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-    .service_day {
-        height: 20px;
-        margin-right: 2px;
-        border-radius: 4px;
-    }
-
-    @keyframes pulse_animation {
-        0% { transform: scale(1); }
-        30% { transform: scale(1); }
-        40% { transform: scale(1.02); }
-        50% { transform: scale(1); }
-        60% { transform: scale(1); }
-        70% { transform: scale(1.05); }
-        80% { transform: scale(1); }
-        100% { transform: scale(1); }
-    }
-
-    .pulse {
-        animation-name: pulse_animation;
-        animation-duration: 1500ms;
-        transform-origin:70% 70%;
-        animation-iteration-count: infinite;
-        animation-timing-function: linear;
-    }
-
-
-    @keyframes glow-grow {
-        0% {
-            opacity: 0;
-            transform: scale(1);
-        }
-        80% {
-            opacity: 1;
-        }
-        100% {
-            transform: scale(2);
-            opacity: 0;
-        }
-    }
-    .pulse-glow {
-        animation-name: glow-grown;
-        animation-duration: 100ms;
-        transform-origin: 70% 30%;
-        animation-iteration-count: infinite;
-        animation-timing-function: linear;
-    }
-
-    .pulse-glow:before,
-    .pulse-glow:after {
-        position: absolute;
-        content: "";
-        height: 0.4rem;
-        width: 1.7rem;
-        top: 1.3rem;
-        right: 2.15rem;
-        border-radius: 0;
-        box-shadow: 0 0 6px #47d337;
-        animation: glow-grow 2s ease-out infinite;
-    }
 </style>

frontend/src/mixin.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-const { zonedTimeToUtc, utcToZonedTime, lastDayOfMonth, subSeconds, parse, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance } = require('date-fns')
+const { zonedTimeToUtc, utcToZonedTime, startOfToday, lastDayOfMonth, subSeconds, parse, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance } = require('date-fns')
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import format from 'date-fns/format'
 import parseISO from 'date-fns/parseISO'
@@ -15,6 +15,9 @@ export default Vue.mixin({
     },
     current() {
       return parseISO(new Date())
+    },
+    startToday() {
+      return startOfToday()
     },
       secondsHumanize (val) {
         const t2 = addSeconds(new Date(0), val)