3 files changed, 134 insertions, 2 deletions
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
new file mode 100644
index 00000000..883b55cb
--- /dev/null
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -0,0 +1,131 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col class="text-right">
+        <table-filter :filters="tableFilters" @filterChange="onFilterChange" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-table
+          :fields="fields"
+          :items="filteredLogs"
+          sort-icon-left
+          no-sort-reset
+          sort-desc
+          show-empty
+          sort-by="date"
+          :sort-compare="onSortCompare"
+          :empty-text="$t('pageEventLogs.table.emptyMessage')"
+        >
+          <template v-slot:cell(severity)="{ value }">
+            <status-icon :status="getStatus(value)" />
+            {{ value }}
+          </template>
+          <template v-slot:cell(date)="{ value }">
+            {{ value | formatDate }} {{ value | formatTime }}
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import StatusIcon from '@/components/Global/StatusIcon';
+import TableFilter from '@/components/Global/TableFilter';
+
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+
+const SEVERITY = ['OK', 'Warning', 'Critical'];
+
+export default {
+  components: { PageTitle, StatusIcon, TableFilter },
+  mixins: [LoadingBarMixin, TableFilterMixin],
+  data() {
+    return {
+      fields: [
+        {
+          key: 'id',
+          label: this.$t('pageEventLogs.table.id'),
+          sortable: true
+        },
+        {
+          key: 'severity',
+          label: this.$t('pageEventLogs.table.severity'),
+          sortable: true
+        },
+        {
+          key: 'type',
+          label: this.$t('pageEventLogs.table.type'),
+          sortable: true
+        },
+        {
+          key: 'date',
+          label: this.$t('pageEventLogs.table.date'),
+          sortable: true
+        },
+        {
+          key: 'description',
+          label: this.$t('pageEventLogs.table.description')
+        }
+      ],
+      tableFilters: [
+        {
+          label: this.$t('pageEventLogs.table.severity'),
+          values: SEVERITY
+        }
+      ],
+      activeFilters: []
+    };
+  },
+  computed: {
+    allLogs() {
+      return this.$store.getters['eventLog/allEvents'];
+    },
+    filteredLogs: {
+      get: function() {
+        return this.getFilteredTableData(this.allLogs, this.activeFilters);
+      },
+      set: function(newVal) {
+        return newVal;
+      }
+    }
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('eventLog/getEventLogData')
+      .finally(() => this.endLoader());
+  },
+  methods: {
+    getStatus(serverity) {
+      switch (serverity) {
+        case SEVERITY[2]:
+          return 'danger';
+        case SEVERITY[1]:
+          return 'warning';
+        case SEVERITY[0]:
+          return 'success';
+        default:
+          return '';
+      }
+    },
+    onFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+      this.filteredLogs = this.getFilteredTableData(
+        this.allLogs,
+        activeFilters
+      );
+    },
+    onSortCompare(a, b, key) {
+      if (key === 'severity') {
+        return SEVERITY.indexOf(a.status) - SEVERITY.indexOf(b.status);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/views/Health/EventLogs/index.js b/src/views/Health/EventLogs/index.js
new file mode 100644
index 00000000..521efde4
--- /dev/null
+++ b/src/views/Health/EventLogs/index.js
@@ -0,0 +1,2 @@
+import EventLogs from './EventLogs.vue';
+export default EventLogs;
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 64ba7fc6..5a950485 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -4,8 +4,7 @@
       {{ $t('pageOverview.events.noHighEventsMsg') }}
     </div>
     <div v-else>
-      <!-- TODO: link to event log -->
-      <b-button variant="link" href="#" class="float-right">
+      <b-button variant="link" to="/health/event-logs" class="float-right">
         {{ $t('pageOverview.events.viewAllButton') }}
       </b-button>
       <b-table