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