1<template>
2  <div>
3    <div v-if="eventLogData.length == 0">
4      {{ $t('pageOverview.events.noHighEventsMsg') }}
5    </div>
6    <div v-else>
7      <b-button
8        variant="link"
9        to="/health/event-logs"
10        data-test-id="overviewEvents-button-eventLogs"
11        class="float-md-right"
12      >
13        {{ $t('pageOverview.events.viewAllButton') }}
14      </b-button>
15      <b-table
16        per-page="5"
17        sort-by="date"
18        sort-desc
19        responsive="md"
20        :items="eventLogData"
21        :fields="fields"
22      >
23        <template v-slot:cell(severity)="{ value }">
24          <status-icon status="danger" />
25          {{ value }}
26        </template>
27        <template v-slot:cell(date)="{ value }">
28          {{ value | formatDate }} {{ value | formatTime }}
29        </template>
30      </b-table>
31    </div>
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