1 files changed, 66 insertions, 59 deletions
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index b8f876ac..84eadd1b 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -1,72 +1,61 @@
 <template>
-  <div>
-    <b-button
-      variant="link"
-      to="/logs/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="id"
-      sort-desc
-      hover
-      responsive="md"
-      stacked="sm"
-      show-empty
-      :items="eventLogData"
-      :fields="fields"
-      :empty-text="$t('pageOverview.events.noHighEventsMsg')"
-    >
-      <template #cell(severity)="{ value }">
-        <status-icon status="danger" />
-        {{ value }}
-      </template>
-      <template #cell(date)="{ value }">
-        <p class="mb-0">{{ value | formatDate }}</p>
-        <p class="mb-0">{{ value | formatTime }}</p>
-      </template>
-    </b-table>
-  </div>
+  <overview-card
+    :data="eventLogData"
+    :disabled="eventLogData.length === 0"
+    :export-button="true"
+    :file-name="exportFileNameByDate()"
+    :title="$t('pageOverview.eventLogs')"
+    :to="`/logs/event-logs`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.criticalEvents') }}</dt>
+          <dd class="h3">
+            {{ tableFormatter(criticalEvents.length) }}
+            <status-icon status="danger" />
+          </dd>
+        </dl>
+      </b-col>
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.warningEvents') }}</dt>
+          <dd class="h3">
+            {{ tableFormatter(warningEvents.length) }}
+            <status-icon status="warning" />
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
 </template>
 
 <script>
+import OverviewCard from './OverviewCard';
 import StatusIcon from '@/components/Global/StatusIcon';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 
 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'),
-        },
-      ],
-    };
-  },
+  components: { OverviewCard, StatusIcon },
+  mixins: [TableDataFormatterMixin],
   computed: {
     eventLogData() {
-      return this.$store.getters['eventLog/highPriorityEvents'];
+      return this.$store.getters['eventLog/allEvents'];
+    },
+    criticalEvents() {
+      return this.eventLogData
+        .filter((log) => log.severity === 'Critical')
+        .map((log) => {
+          return log;
+        });
+    },
+    warningEvents() {
+      return this.eventLogData
+        .filter((log) => log.severity === 'Warning')
+        .map((log) => {
+          return log;
+        });
     },
   },
   created() {
@@ -74,5 +63,23 @@ export default {
       this.$root.$emit('overview-events-complete');
     });
   },
+  methods: {
+    exportFileNameByDate() {
+      // Create export file name based on date
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName = 'all_event_logs_';
+      return fileName + date;
+    },
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+.status-icon {
+  vertical-align: text-top;
+}
+</style>