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>

1 files changed, 50 insertions, 0 deletions

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: [
         {