summaryrefslogtreecommitdiff
path: root/src/views/Overview/OverviewEvents.vue
blob: 391fb05567ed907d418a2671a8a2146d1b5ce59c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
  <div>
    <b-button
      variant="link"
      to="/health/event-logs"
      data-test-id="overviewEvents-button-eventLogs"
      class="float-md-right"
    >
      {{ $t('pageOverview.events.viewAllButton') }}
    </b-button>
    <b-table
      per-page="5"
      sort-by="date"
      sort-desc
      responsive="md"
      show-empty
      :items="eventLogData"
      :fields="fields"
      :empty-text="$t('pageOverview.events.noHighEventsMsg')"
    >
      <template v-slot:cell(severity)="{ value }">
        <status-icon status="danger" />
        {{ value }}
      </template>
      <template v-slot:cell(date)="{ value }">
        {{ value | formatDate }} {{ value | formatTime }}
      </template>
    </b-table>
  </div>
</template>

<script>
import StatusIcon from '@/components/Global/StatusIcon';

export default {
  name: 'Events',
  components: { StatusIcon },
  data() {
    return {
      fields: [
        {
          key: 'id',
          label: this.$t('pageOverview.events.id')
        },
        {
          key: 'severity',
          label: this.$t('pageOverview.events.severity')
        },
        {
          key: 'type',
          label: this.$t('pageOverview.events.type')
        },
        {
          key: 'date',
          label: this.$t('pageOverview.events.date')
        },
        {
          key: 'description',
          label: this.$t('pageOverview.events.description')
        }
      ]
    };
  },
  computed: {
    eventLogData() {
      return this.$store.getters['eventLog/highPriorityEvents'];
    }
  },
  created() {
    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
      this.$root.$emit('overview::events::complete');
    });
  }
};
</script>