diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-05-05 19:45:39 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-05-21 16:55:29 +0300 |
commit | 6f102346cbeaff7bc2e1f6ae46a67316ca90b5cd (patch) | |
tree | e7bee4356ddea604a1d86655f72ee4376b945d51 /src/views | |
parent | 85358ed1b6d725a2090e82d82757fbd3d7dbc706 (diff) | |
download | webui-vue-6f102346cbeaff7bc2e1f6ae46a67316ca90b5cd.tar.xz |
Add Event log page
Add basic event log table with the ability to sort by column
(ID, Severity, Type, Date) and filter by severity.
- Updated existing translation for eventLog to eventLogs
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic233593cc8804d9dcefb2b5740dfac3d52899b02
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/Health/EventLogs/EventLogs.vue | 131 | ||||
-rw-r--r-- | src/views/Health/EventLogs/index.js | 2 | ||||
-rw-r--r-- | src/views/Overview/OverviewEvents.vue | 3 |
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 |