From 62cc304bfee5c01b52f12a8af7220d800039845b Mon Sep 17 00:00:00 2001
From: Bret Davis <bret.davis@intel.com>
Date: Fri, 3 Feb 2023 21:53:24 +0000
Subject: [PATCH] Add Notification Icon to status page for service
 announcements

Adds a calendar icon next to service name on status
page to indicate number of announcements currently
active for that service.
---
 frontend/src/assets/scss/base.scss            |  7 +++++
 frontend/src/components/Index/Group.vue       |  9 ++++--
 .../src/components/Index/MessagesIcon.vue     | 28 +++++++++++++++++++
 frontend/src/icons.js                         |  4 ++-
 frontend/src/pages/Index.vue                  |  7 ++++-
 5 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Index/MessagesIcon.vue

diff --git a/frontend/src/assets/scss/base.scss b/frontend/src/assets/scss/base.scss
index 2a74d6ac..04e30a0a 100644
--- a/frontend/src/assets/scss/base.scss
+++ b/frontend/src/assets/scss/base.scss
@@ -307,6 +307,13 @@
     color: #a0a0a0;
   }
 
+  .icon-text {
+    color: white;
+    margin-top: .25em;
+    font-size: 7pt;
+    font-weight: bold;
+  }
+
   .json-field {
     font-size: 10pt;
   }
diff --git a/frontend/src/components/Index/Group.vue b/frontend/src/components/Index/Group.vue
index c5be25c2..a36934ba 100644
--- a/frontend/src/components/Index/Group.vue
+++ b/frontend/src/components/Index/Group.vue
@@ -4,7 +4,10 @@
         <div class="list-group online_list mb-4">
 
             <div v-for="(service, index) in services" v-bind:key="index" class="list-group-item list-group-item-action">
-                <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
+                <router-link class="no-decoration font-3" :to="serviceLink(service)">
+                  {{service.name}}
+                  <MessagesIcon :messages="service.messages"/>
+                </router-link>
                 <span class="badge text-uppercase float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">
                     {{service.online ? $t('online') : $t('offline')}}
                 </span>
@@ -22,12 +25,14 @@
 <script>
     const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ './GroupServiceFailures');
     const IncidentsBlock = () => import(/* webpackChunkName: "index" */ './IncidentsBlock');
+    const MessagesIcon = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessagesIcon')
 
 export default {
   name: 'Group',
   components: {
       IncidentsBlock,
-      GroupServiceFailures
+      GroupServiceFailures,
+      MessagesIcon
   },
   props: {
     group: {
diff --git a/frontend/src/components/Index/MessagesIcon.vue b/frontend/src/components/Index/MessagesIcon.vue
new file mode 100644
index 00000000..5f3ec081
--- /dev/null
+++ b/frontend/src/components/Index/MessagesIcon.vue
@@ -0,0 +1,28 @@
+<template>
+    <font-awesome-layers v-if="activeMessages(messages) > 0">
+        <font-awesome-icon icon="calendar" style="color:dodgerblue"/>
+        <font-awesome-layers-text class="icon-text" :value="activeMessages(messages)" />
+    </font-awesome-layers>
+</template>
+
+<script>
+export default {
+  name: 'MessagesIcon',
+    props: {
+        messages: {
+            type: Object,
+            required: true,
+        }
+    },
+    methods: {
+        activeMessages(msgs) {
+            return msgs.filter(m => this.isAfter(this.now(), m.start_on) && this.isBefore(this.now(), m.end_on)).length
+        }
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/icons.js b/frontend/src/icons.js
index 91e7c3bc..dbef9d4e 100644
--- a/frontend/src/icons.js
+++ b/frontend/src/icons.js
@@ -1,9 +1,11 @@
 import {library} from '@fortawesome/fontawesome-svg-core'
 import {fas} from '@fortawesome/fontawesome-free-solid';
 import {fab} from '@fortawesome/free-brands-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+import {FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText} from '@fortawesome/vue-fontawesome'
 import Vue from "vue";
 
 library.add(fas, fab)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('font-awesome-layers', FontAwesomeLayers)
+Vue.component('font-awesome-layers-text', FontAwesomeLayersText)
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
index 9f3a2b42..7b143d45 100644
--- a/frontend/src/pages/Index.vue
+++ b/frontend/src/pages/Index.vue
@@ -19,7 +19,10 @@
       <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">
               <div class="list-group-item list-group-item-action">
-                  <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
+                  <router-link class="no-decoration font-3" :to="serviceLink(service)">
+                    {{service.name}}
+                    <MessagesIcon :messages="service.messages"/>
+                  </router-link>
                   <span class="badge float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">{{service.online ? "ONLINE" : "OFFLINE"}}</span>
                   <GroupServiceFailures :service="service"/>
                   <IncidentsBlock :service="service"/>
@@ -47,6 +50,7 @@ const MessageBlock = () => import(/* webpackChunkName: "index" */ '@/components/
 const ServiceBlock = () => import(/* webpackChunkName: "index" */ '@/components/Service/ServiceBlock')
 const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ '@/components/Index/GroupServiceFailures')
 const IncidentsBlock = () => import(/* webpackChunkName: "index" */ '@/components/Index/IncidentsBlock')
+const MessagesIcon = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessagesIcon')
 
 export default {
     name: 'Index',
@@ -55,6 +59,7 @@ export default {
       GroupServiceFailures,
       ServiceBlock,
       MessageBlock,
+      MessagesIcon,
       Group,
       Header
     },