1<template>
2  <overview-card
3    :data="eventLogData"
4    :disabled="eventLogData.length === 0"
5    :export-button="true"
6    :file-name="exportFileNameByDate()"
7    :title="$t('pageOverview.eventLogs')"
8    :to="`/logs/event-logs`"
9  >
10    <b-row class="mt-3">
11      <b-col sm="6">
12        <dl>
13          <dt>{{ $t('pageOverview.criticalEvents') }}</dt>
14          <dd class="h3">
15            {{ dataFormatter(criticalEvents.length) }}
16            <status-icon status="danger" />
17          </dd>
18        </dl>
19      </b-col>
20      <b-col sm="6">
21        <dl>
22          <dt>{{ $t('pageOverview.warningEvents') }}</dt>
23          <dd class="h3">
24            {{ dataFormatter(warningEvents.length) }}
25            <status-icon status="warning" />
26          </dd>
27        </dl>
28      </b-col>
29    </b-row>
30  </overview-card>
31</template>
32
33<script>
34import OverviewCard from './OverviewCard';
35import StatusIcon from '@/components/Global/StatusIcon';
36import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
37import { useI18n } from 'vue-i18n';
38
39export default {
40  name: 'Events',
41  components: { OverviewCard, StatusIcon },
42  mixins: [DataFormatterMixin],
43  data() {
44    return {
45      $t: useI18n().t,
46    };
47  },
48  computed: {
49    eventLogData() {
50      return this.$store.getters['eventLog/allEvents'];
51    },
52    criticalEvents() {
53      return this.eventLogData
54        .filter(
55          (log) =>
56            log.severity === 'Critical' && log.filterByStatus === 'Unresolved',
57        )
58        .map((log) => {
59          return log;
60        });
61    },
62    warningEvents() {
63      return this.eventLogData
64        .filter(
65          (log) =>
66            log.severity === 'Warning' && log.filterByStatus === 'Unresolved',
67        )
68        .map((log) => {
69          return log;
70        });
71    },
72  },
73  created() {
74    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
75      this.$root.$emit('overview-events-complete');
76    });
77  },
78  methods: {
79    exportFileNameByDate() {
80      // Create export file name based on date
81      let date = new Date();
82      date =
83        date.toISOString().slice(0, 10) +
84        '_' +
85        date.toString().split(':').join('-').split(' ')[4];
86      let fileName = 'all_event_logs_';
87      return fileName + date;
88    },
89  },
90};
91</script>
92
93<style lang="scss" scoped>
94@import '@/assets/styles/bmc/helpers/_index.scss';
95@import '@/assets/styles/bootstrap/_helpers.scss';
96
97.status-icon {
98  vertical-align: text-top;
99}
100</style>
101