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 | |
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')
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 4 | ||||
-rw-r--r-- | src/locales/en-US.json | 14 | ||||
-rw-r--r-- | src/router/index.js | 8 | ||||
-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 |
6 files changed, 156 insertions, 6 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 2081609a..b7a3e071 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -15,8 +15,8 @@ <icon-expand class="icon-expand" /> </b-button> <b-collapse id="health-menu" tag="ul" class="nav-item__nav"> - <b-nav-item href="javascript:void(0)"> - {{ $t('appNavigation.eventLog') }} + <b-nav-item to="/health/event-logs"> + {{ $t('appNavigation.eventLogs') }} </b-nav-item> <b-nav-item href="javascript:void(0)"> {{ $t('appNavigation.hardwareStatus') }} diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 2ff98418..9f74ca00 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -58,7 +58,7 @@ "accessControl": "Access Control", "configuration": "Configuration", "control": "Control", - "eventLog": "@:appPageTitle.eventLog", + "eventLogs": "@:appPageTitle.eventLogs", "firmware": "@:appPageTitle.firmware", "hardwareStatus": "@:appPageTitle.hardwareStatus", "health": "Health", @@ -76,7 +76,7 @@ "sslCertificates": "@:appPageTitle.sslCertificates" }, "appPageTitle": { - "eventLog": "Event log", + "eventLogs": "Event logs", "firmware": "Firmware", "hardwareStatus": "Hardware status", "ldap": "LDAP", @@ -93,6 +93,16 @@ "sslCertificates": "SSL Certificates", "unauthorized": "Unauthorized" }, + "pageEventLogs": { + "table": { + "date": "Date", + "description": "Description", + "emptyMessage": "There are no logs to show", + "id": "ID", + "severity": "Severity", + "type": "Type" + } + }, "pageLdap": { "pageDescription": "Configure LDAP settings and manage role groups", "roleGroups": "Role groups", diff --git a/src/router/index.js b/src/router/index.js index fc361019..30532a5f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -24,6 +24,14 @@ const routes = [ } }, { + path: '/health/event-logs', + name: 'event-logs', + component: () => import('@/views/Health/EventLogs'), + meta: { + title: 'appPageTitle.eventLogs' + } + }, + { path: '/health/sensors', name: 'sensors', component: () => import('@/views/Health/Sensors'), 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 |