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          <ChevronRight16 />
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">
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  created() {
30    this.getEventLogData();
31  },
32  computed: {
33    eventLogData() {
34      return this.$store.getters["eventLog/eventLogData"];
35    }
36  },
37  methods: {
38    getEventLogData() {
39      this.$store.dispatch("eventLog/getEventLogData");
40    }
41  }
42};
43</script>
44