Update overview events table and overview network layout
- Convert events list group to bootstrap table
- Add ethernet interfaces to overview using redfish
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I633f03ba4a65358861664a869b35adf5358c45e6
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index a08fb54..b85142b 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -1,30 +1,55 @@
<template>
<div>
- <b-list-group v-for="logData in eventLogData" :key="logData.id">
- <b-list-group-item href="#" class="flex-column align-items-start">
- {{ '#' + logData.logId }}
- <b-badge variant="danger">{{ logData.priority }}</b-badge>
- <div class="d-flex w-100 justify-content-between">
- <small>{{
- logData.Timestamp | date('MMM DD YYYY HH:MM:SS A ZZ')
- }}</small>
- <chevron-right16 />
- </div>
- <p class="mb-1">{{ logData.eventID }}: {{ logData.description }}</p>
- </b-list-group-item>
- </b-list-group>
- <b-list-group v-if="eventLogData.length === 0">
+ <div v-if="eventLogData.length == 0">
{{ $t('overview.events.noHighEventsMsg') }}
- </b-list-group>
+ </div>
+ <div v-else>
+ <!-- TODO: link to event log -->
+ <b-button variant="link" href="#">
+ {{ $t('overview.events.viewAllButton') }}
+ </b-button>
+ <b-table
+ head-variant="dark"
+ per-page="5"
+ sort-by="logId"
+ sort-desc
+ stacked="sm"
+ :items="eventLogData"
+ :fields="fields"
+ >
+ <template v-slot:cell(timestamp)="data">
+ {{ data.value | date('hh:MM:SS A') }} <br />
+ {{ data.value | date('dddd, MMM DD, YYYY') }}
+ </template>
+ </b-table>
+ </div>
</div>
</template>
<script>
-import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
export default {
name: 'Events',
- components: {
- ChevronRight16
+ data() {
+ return {
+ fields: [
+ {
+ key: 'logId',
+ label: this.$t('overview.events.id')
+ },
+ {
+ key: 'eventID',
+ label: this.$t('overview.events.refCode')
+ },
+ {
+ key: 'timestamp',
+ label: this.$t('overview.events.date')
+ },
+ {
+ key: 'description',
+ label: this.$t('overview.events.description')
+ }
+ ]
+ };
},
computed: {
eventLogData() {
@@ -41,3 +66,9 @@
}
};
</script>
+
+<style lang="scss" scoped>
+.btn {
+ @include float-right;
+}
+</style>