1<template>
2  <div>
3    <b-button
4      variant="link"
5      to="/health/event-logs"
6      data-test-id="overviewEvents-button-eventLogs"
7      class="float-md-right"
8    >
9      {{ $t('pageOverview.events.viewAllButton') }}
10    </b-button>
11    <b-table
12      per-page="5"
13      sort-by="id"
14      sort-desc
15      responsive="md"
16      show-empty
17      :items="eventLogData"
18      :fields="fields"
19      :empty-text="$t('pageOverview.events.noHighEventsMsg')"
20    >
21      <template v-slot:cell(severity)="{ value }">
22        <status-icon status="danger" />
23        {{ value }}
24      </template>
25      <template v-slot:cell(date)="{ value }">
26        <p class="mb-0">{{ value | formatDate }}</p>
27        <p class="mb-0">{{ value | formatTime }}</p>
28      </template>
29    </b-table>
30  </div>
31</template>
32
33<script>
34import StatusIcon from '@/components/Global/StatusIcon';
35
36export default {
37  name: 'Events',
38  components: { StatusIcon },
39  data() {
40    return {
41      fields: [
42        {
43          key: 'id',
44          label: this.$t('pageOverview.events.id')
45        },
46        {
47          key: 'severity',
48          label: this.$t('pageOverview.events.severity')
49        },
50        {
51          key: 'type',
52          label: this.$t('pageOverview.events.type')
53        },
54        {
55          key: 'date',
56          label: this.$t('pageOverview.events.date')
57        },
58        {
59          key: 'description',
60          label: this.$t('pageOverview.events.description')
61        }
62      ]
63    };
64  },
65  computed: {
66    eventLogData() {
67      return this.$store.getters['eventLog/highPriorityEvents'];
68    }
69  },
70  created() {
71    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
72      this.$root.$emit('overview::events::complete');
73    });
74  }
75};
76</script>
77