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