Pel Info displayed in modal

- Event logs pel info displayed in modal.

Signed-off-by: Nikhil Ashoka <[email protected]>

src/views/Logs/EventLogs/EventLogs.vue

@@ -270,6 +270,8 @@
         />
       </b-col>
     </b-row>
+    <!-- Modals -->
+    <modal-pel-info :pel-data="pelData" />
   </b-container>
 </template>
 
@@ -310,6 +312,7 @@ import TableRowExpandMixin, {
 import SearchFilterMixin, {
   searchFilter,
 } from '@/components/Mixins/SearchFilterMixin';
+import ModalPelInfo from '../Modals/ModalPelInfo';
 
 export default {
   components: {
@@ -318,6 +321,7 @@ export default {
     IconChevron,
     IconDownload,
     InfoTooltip,
+    ModalPelInfo,
     PageTitle,
     Search,
     StatusIcon,
@@ -427,6 +431,7 @@ export default {
       selectedRows: selectedRows,
       tableHeaderCheckboxModel: tableHeaderCheckboxModel,
       tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+      pelData: [],
     };
   },
   computed: {
@@ -485,6 +490,8 @@ export default {
   },
   methods: {
     downloadFile(pelJsonInfo) {
+      this.pelData = pelJsonInfo;
+      this.$bvModal.show('modal-pel-info');
       let date = new Date();
       date =
         date.toISOString().slice(0, 10) +

src/views/Logs/Modals/ModalPelInfo.vue

@@ -0,0 +1,19 @@
+<template>
+  <b-modal id="modal-pel-info" scrollable size="lg" hide-footer>
+    <template #modal-title> PEL Information</template>
+    <pre>{{ pelData.toString() }}</pre>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    pelData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+};
+</script>