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      stacked="sm"
17      show-empty
18      :items="eventLogData"
19      :fields="fields"
20      :empty-text="$t('pageOverview.events.noHighEventsMsg')"
21    >
22      <template v-slot:cell(severity)="{ value }">
23        <status-icon status="danger" />
24        {{ value }}
25      </template>
26      <template v-slot:cell(date)="{ value }">
27        <p class="mb-0">{{ value | formatDate }}</p>
28        <p class="mb-0">{{ value | formatTime }}</p>
29      </template>
30    </b-table>
31  </div>
32</template>
33
34<script>
35import StatusIcon from '@/components/Global/StatusIcon';
36
37export default {
38  name: 'Events',
39  components: { StatusIcon },
40  data() {
41    return {
42      fields: [
43        {
44          key: 'id',
45          label: this.$t('pageOverview.events.id')
46        },
47        {
48          key: 'severity',
49          label: this.$t('pageOverview.events.severity')
50        },
51        {
52          key: 'type',
53          label: this.$t('pageOverview.events.type')
54        },
55        {
56          key: 'date',
57          label: this.$t('pageOverview.events.date')
58        },
59        {
60          key: 'description',
61          label: this.$t('pageOverview.events.description')
62        }
63      ]
64    };
65  },
66  computed: {
67    eventLogData() {
68      return this.$store.getters['eventLog/highPriorityEvents'];
69    }
70  },
71  created() {
72    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
73      this.$root.$emit('overview::events::complete');
74    });
75  }
76};
77</script>
78