1<template> 2 <div> 3 <b-list-group v-for="logData in eventLogData" :key="logData.id"> 4 <b-list-group-item href="#" class="flex-column align-items-start"> 5 {{ '#' + logData.logId }} 6 <b-badge variant="danger">{{ logData.priority }}</b-badge> 7 <div class="d-flex w-100 justify-content-between"> 8 <small>{{ 9 logData.Timestamp | date('MMM DD YYYY HH:MM:SS A ZZ') 10 }}</small> 11 <chevron-right16 /> 12 </div> 13 <p class="mb-1">{{ logData.eventID }}: {{ logData.description }}</p> 14 </b-list-group-item> 15 </b-list-group> 16 <b-list-group v-if="eventLogData.length === 0"> 17 There are no high priority events to display at this time. 18 </b-list-group> 19 </div> 20</template> 21 22<script> 23import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16'; 24export default { 25 name: 'Events', 26 components: { 27 ChevronRight16 28 }, 29 computed: { 30 eventLogData() { 31 return this.$store.getters['eventLog/highPriorityEvents']; 32 } 33 }, 34 created() { 35 this.getEventLogData(); 36 }, 37 methods: { 38 getEventLogData() { 39 this.$store.dispatch('eventLog/getEventLogData'); 40 } 41 } 42}; 43</script> 44