Merge pull request #587 from kvpt/announcement

Fix announcement display

frontend/src/components/Index/MessageBlock.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="alert alert-primary pb-4 pt-3 mt-5 mb-5" role="alert">
+    <div class="alert alert-warning pb-4 pt-3 mt-5 mb-5" role="alert">
         <h3 class="mb-3">{{message.title}}</h3>
         <span class="mb-3">{{message.description}}</span>
         <div class="row d-block mt-3">
             <span class="col-12 col-md-6 text-left small">
-               Started {{niceDate(message.start_on)}} ({{ago(parseISO(message.start_on))}} ago)
+                Started {{niceDate(message.start_on)}} ({{ago(message.start_on)}} ago)
             </span>
             <span class="col-12 col-md-6 text-right float-right small">
-                Ends on {{niceDate(message.end_on)}} (in {{ago(parseISO(message.end_on))}})</span>
+                Ends on {{niceDate(message.end_on)}} (in {{ago(message.end_on)}})</span>
         </div>
     </div>
 </template>

frontend/src/mixin.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-const { zonedTimeToUtc, utcToZonedTime, startOfToday, lastDayOfMonth, subSeconds, parse, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance } = require('date-fns')
+const { startOfToday, lastDayOfMonth, subSeconds, getUnixTime, fromUnixTime, formatDistance, isWithinInterval } = require('date-fns')
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import format from 'date-fns/format'
 import parseISO from 'date-fns/parseISO'
@@ -28,9 +28,9 @@ export default Vue.mixin({
     ago(t1) {
       return formatDistanceToNow(parseISO(t1))
     },
-      daysInMonth(t1) {
-          return lastDayOfMonth(t1)
-      },
+    daysInMonth(t1) {
+        return lastDayOfMonth(t1)
+    },
     nowSubtract(seconds) {
       return subSeconds(new Date(), seconds)
     },
@@ -70,8 +70,8 @@ export default Vue.mixin({
     fromUnix(val) {
       return fromUnixTime(val)
     },
-    isBetween(t1, t2) {
-      return differenceInSeconds(parseISO(t1), parseISO(t2)) >= 0
+    isBetween(t, start, end) {
+      return isWithinInterval(t, {start: parseISO(start), end: parseISO(end)})
     },
     hour() {
       return 3600
@@ -79,6 +79,9 @@ export default Vue.mixin({
     day() {
       return 3600 * 24
     },
+    maxDate() {
+      return new Date(8640000000000000)
+    },
     copy(txt) {
       this.$copyText(txt).then(function (e) {
         alert('Copied: \n'+txt)
@@ -159,12 +162,12 @@ export default Vue.mixin({
       })
       return {data: newSet}
     },
-      humanTime(val) {
-        if (val >= 10000) {
-            return Math.floor(val / 10000) + "ms"
-        }
-          return Math.floor(val / 1000) + "μs"
-      },
+    humanTime(val) {
+      if (val >= 10000) {
+          return Math.floor(val / 10000) + "ms"
+      }
+        return Math.floor(val / 1000) + "μs"
+    },
     lastDayOfMonth(month) {
       return new Date(Date.UTC(new Date().getUTCFullYear(), month + 1, 0))
     },

frontend/src/pages/Index.vue

@@ -3,8 +3,8 @@
 
         <Header/>
 
-        <div v-for="(service, i) in services_no_group" class="col-12 full-col-12">
-            <div class="list-group online_list mb-4">
+        <div class="col-12 full-col-12">
+            <div v-for="service in services_no_group" v-bind:key="service.id" 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>
                     <span class="badge float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">{{service.online ? "ONLINE" : "OFFLINE"}}</span>
@@ -16,16 +16,16 @@
             </div>
         </div>
 
-        <div v-for="(group, index) in groups" v-bind:key="index">
-            <Group :group=group />
-        </div>
-
-        <div v-for="(message, index) in messages" v-bind:key="index" v-if="inRange(message) && message.service === 0">
-            <MessageBlock :message="message"/>
+        <div>
+            <Group v-for="group in groups" v-bind:key="group.id" :group=group />
         </div>
 
         <div class="col-12 full-col-12">
-            <div v-for="(service, index) in services" :ref="service.id" v-bind:key="index">
+            <MessageBlock v-for="message in messages" v-bind:key="message.id" :message="message" />
+        </div>
+
+        <div class="col-12 full-col-12">
+            <div v-for="service in services" :ref="service.id" v-bind:key="service.id">
                 <ServiceBlock :in_service=service />
             </div>
         </div>
@@ -60,7 +60,7 @@ export default {
     },
     computed: {
         messages() {
-            return this.$store.getters.messages
+            return this.$store.getters.messages.filter(m => this.inRange(m) && m.service === 0)
         },
         groups() {
             return this.$store.getters.groupsInOrder
@@ -80,9 +80,7 @@ export default {
     },
     methods: {
         inRange(message) {
-            const start = this.isBetween(new Date(), message.start_on)
-            const end = this.isBetween(message.end_on, new Date())
-            return start && end
+            return this.isBetween(this.now(), message.start_on, message.start_on === message.end_on ? this.maxDate().toISOString() : message.end_on)
         }
     }
 }

frontend/src/pages/Service.vue

@@ -16,8 +16,8 @@
 
             <ServiceTopStats :service="service"/>
 
-            <div v-for="(message, index) in $store.getters.serviceMessages(service.id)" v-if="messageInRange(message)">
-                <MessageBlock :message="message"/>
+            <div>
+                <MessageBlock v-for="message in messagesInRange" v-bind:key="message.id" :message="message"/>
             </div>
 
             <div class="row mt-5 mb-4">
@@ -348,7 +348,10 @@ export default {
           name: this.service.name,
           ...this.convertToChartData(this.data)
         }]
-      }
+      },
+      messagesInRange() {
+        return this.$store.getters.serviceMessages(this.service.id).filter(m => this.inRange(m))
+      },
     },
     watch: {
       service: function(n, o) {
@@ -412,11 +415,9 @@ export default {
         }
         return [{data: arr}]
       },
-        messageInRange(message) {
-            const start = this.isBetween(new Date(), message.start_on)
-            const end = this.isBetween(message.end_on, new Date())
-            return start && end
-        },
+      inRange(message) {
+        return this.isBetween(this.now(), message.start_on, message.start_on === message.end_on ? this.maxDate().toISOString() : message.end_on)
+      },
         async getService() {
             await this.chartHits()
             await this.serviceFailures()