Add event log details
- Add ability to expand and collapse table rows to show event log entry
details
- Add the following properties to display in the UI, Name,
Modified date
Change-Id: I3c90ce301878947e402eb87ca135dba0c47e84d5
Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 6da7c3c..4536f6c 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -254,6 +254,8 @@
"date": "Date",
"description": "Description",
"id": "ID",
+ "modifiedDate": "Modified Date",
+ "name": "Name",
"searchLogs": "Search logs",
"severity": "Severity",
"type": "Type"
diff --git a/src/store/modules/Health/EventLogStore.js b/src/store/modules/Health/EventLogStore.js
index cdfb358..eaec749 100644
--- a/src/store/modules/Health/EventLogStore.js
+++ b/src/store/modules/Health/EventLogStore.js
@@ -43,13 +43,23 @@
.get('/redfish/v1/Systems/system/LogServices/EventLog/Entries')
.then(({ data: { Members = [] } = {} }) => {
const eventLogs = Members.map((log) => {
- const { Id, Severity, Created, EntryType, Message } = log;
+ const {
+ Id,
+ Severity,
+ Created,
+ EntryType,
+ Message,
+ Name,
+ Modified,
+ } = log;
return {
id: Id,
severity: Severity,
date: new Date(Created),
type: EntryType,
description: Message,
+ name: Name,
+ modifiedDate: new Date(Modified),
uri: log['@odata.id'],
};
});
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index a01f323..69545a5 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -85,6 +85,44 @@
</b-form-checkbox>
</template>
+ <!-- Expand chevron icon -->
+ <template #cell(expandRow)="row">
+ <b-button
+ variant="link"
+ :aria-label="expandRowLabel"
+ :title="expandRowLabel"
+ class="btn-icon-only"
+ @click="toggleRowDetails(row)"
+ >
+ <icon-chevron />
+ </b-button>
+ </template>
+
+ <template #row-details="{ item }">
+ <b-container fluid>
+ <b-row>
+ <b-col sm="6" xl="4">
+ <dl>
+ <!-- Name -->
+ <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
+ <dd>{{ tableFormatter(item.name) }}</dd>
+ </dl>
+ </b-col>
+ <b-col sm="6" xl="4">
+ <dl>
+ <!-- Modified date -->
+ <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
+ <dd v-if="item.modifiedDate">
+ {{ item.modifiedDate | formatDate }}
+ {{ item.modifiedDate | formatTime }}
+ </dd>
+ <dd v-else>--</dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </b-container>
+ </template>
+
<!-- Severity column -->
<template #cell(severity)="{ value }">
<status-icon v-if="value" :status="statusIcon(value)" />
@@ -151,6 +189,7 @@
<script>
import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
import IconExport from '@carbon/icons-vue/es/document--export/20';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
import { omit } from 'lodash';
import PageTitle from '@/components/Global/PageTitle';
@@ -178,6 +217,9 @@
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import TableRowExpandMixin, {
+ expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
import SearchFilterMixin, {
searchFilter,
} from '@/components/Mixins/SearchFilterMixin';
@@ -186,6 +228,7 @@
components: {
IconExport,
IconTrashcan,
+ IconChevron,
PageTitle,
Search,
StatusIcon,
@@ -204,6 +247,7 @@
TableFilterMixin,
TableDataFormatterMixin,
TableSortMixin,
+ TableRowExpandMixin,
SearchFilterMixin,
],
beforeRouteLeave(to, from, next) {
@@ -216,6 +260,11 @@
return {
fields: [
{
+ key: 'expandRow',
+ label: '',
+ tdClass: 'table-row-expand',
+ },
+ {
key: 'checkbox',
sortable: false,
},
@@ -258,6 +307,7 @@
values: ['OK', 'Warning', 'Critical'],
},
],
+ expandRowLabel,
activeFilters: [],
batchActions: [
{