diff options
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> |