diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2021-09-02 23:26:58 +0300 |
---|---|---|
committer | Dixsie Wolmers <dixsiew@gmail.com> | 2021-09-24 16:38:17 +0300 |
commit | 6a192d526c9efebf7a614a9aa473eee62e555fc5 (patch) | |
tree | 536b96e6aab65f05aa2b1ca5d35f3c21fd31186b /src/views/Overview/OverviewEvents.vue | |
parent | 348cbfd987a05326f086b713e7f5af93974d74aa (diff) | |
download | webui-vue-6a192d526c9efebf7a614a9aa473eee62e555fc5.tar.xz |
Update overview layout
Layout updates uses bootstrap vue cards to display
general information. View more links and download
or export ability has been added to the overview page.
Network settings displays the hostname and the first IP
address for the first ethernet interface. Link status
was also added.
TODO: Add idle power and power mode properties in seperate
commit for each story.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Iaf0720d76b2a9416f068a1e779ede59bffda9727
Diffstat (limited to 'src/views/Overview/OverviewEvents.vue')
-rw-r--r-- | src/views/Overview/OverviewEvents.vue | 125 |
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> |