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>

3 files changed, 63 insertions, 1 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 6da7c3c5..4536f6ce 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 cdfb358a..eaec7490 100644
--- a/src/store/modules/Health/EventLogStore.js
+++ b/src/store/modules/Health/EventLogStore.js
@@ -43,13 +43,23 @@ const EventLogStore = {
         .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 a01f3237..69545a57 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 BVTableSelectableMixin, {
 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 @@ export default {
   components: {
     IconExport,
     IconTrashcan,
+    IconChevron,
     PageTitle,
     Search,
     StatusIcon,
@@ -204,6 +247,7 @@ export default {
     TableFilterMixin,
     TableDataFormatterMixin,
     TableSortMixin,
+    TableRowExpandMixin,
     SearchFilterMixin,
   ],
   beforeRouteLeave(to, from, next) {
@@ -216,6 +260,11 @@ export default {
     return {
       fields: [
         {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
           key: 'checkbox',
           sortable: false,
         },
@@ -258,6 +307,7 @@ export default {
           values: ['OK', 'Warning', 'Critical'],
         },
       ],
+      expandRowLabel,
       activeFilters: [],
       batchActions: [
         {