OverviewEvents.vue (598bf7e96704f54400ec1730255168dd4d274218) OverviewEvents.vue (ce9a3ef3036923cb4c0f28240c8bb37a6b4540fc)
1<template>
2 <div>
3 <div v-if="eventLogData.length == 0">
4 {{ $t('pageOverview.events.noHighEventsMsg') }}
5 </div>
6 <div v-else>
7 <!-- TODO: link to event log -->
8 <b-button variant="link" href="#" class="float-right">
9 {{ $t('pageOverview.events.viewAllButton') }}
10 </b-button>
11 <b-table
1<template>
2 <div>
3 <div v-if="eventLogData.length == 0">
4 {{ $t('pageOverview.events.noHighEventsMsg') }}
5 </div>
6 <div v-else>
7 <!-- TODO: link to event log -->
8 <b-button variant="link" href="#" class="float-right">
9 {{ $t('pageOverview.events.viewAllButton') }}
10 </b-button>
11 <b-table
12 head-variant="dark"
13 per-page="5"
12 per-page="5"
14 sort-by="logId"
13 sort-by="date"
15 sort-desc
16 stacked="sm"
17 :items="eventLogData"
18 :fields="fields"
19 >
14 sort-desc
15 stacked="sm"
16 :items="eventLogData"
17 :fields="fields"
18 >
20 <template v-slot:cell(timestamp)="data">
21 <div class="date-column">
22 {{ data.value | formatDate }} <br />
23 {{ data.value | formatTime }}
24 </div>
19 <template v-slot:cell(severity)="{ value }">
20 <status-icon status="danger" />
21 {{ value }}
25 </template>
22 </template>
23 <template v-slot:cell(date)="{ value }">
24 {{ value | formatDate }} {{ value | formatTime }}
25 </template>
26 </b-table>
27 </div>
28 </div>
29</template>
30
31<script>
26 </b-table>
27 </div>
28 </div>
29</template>
30
31<script>
32import StatusIcon from '@/components/Global/StatusIcon';
33
32export default {
33 name: 'Events',
34export default {
35 name: 'Events',
36 components: { StatusIcon },
34 data() {
35 return {
36 fields: [
37 {
37 data() {
38 return {
39 fields: [
40 {
38 key: 'logId',
41 key: 'id',
39 label: this.$t('pageOverview.events.id')
40 },
41 {
42 label: this.$t('pageOverview.events.id')
43 },
44 {
42 key: 'eventID',
43 label: this.$t('pageOverview.events.refCode')
45 key: 'severity',
46 label: this.$t('pageOverview.events.severity')
44 },
45 {
47 },
48 {
46 key: 'timestamp',
49 key: 'type',
50 label: this.$t('pageOverview.events.type')
51 },
52 {
53 key: 'date',
47 label: this.$t('pageOverview.events.date')
48 },
49 {
50 key: 'description',
51 label: this.$t('pageOverview.events.description')
52 }
53 ]
54 };

--- 5 unchanged lines hidden (view full) ---

60 },
61 created() {
62 this.$store.dispatch('eventLog/getEventLogData').finally(() => {
63 this.$root.$emit('overview::events::complete');
64 });
65 }
66};
67</script>
54 label: this.$t('pageOverview.events.date')
55 },
56 {
57 key: 'description',
58 label: this.$t('pageOverview.events.description')
59 }
60 ]
61 };

--- 5 unchanged lines hidden (view full) ---

67 },
68 created() {
69 this.$store.dispatch('eventLog/getEventLogData').finally(() => {
70 this.$root.$emit('overview::events::complete');
71 });
72 }
73};
74</script>
68
69<style lang="scss" scoped>
70.date-column {
71 min-width: 200px;
72}
73</style>