Use Vuetify dialog for seeing log content

frontend/src/components/LogViewer.vue

@@ -9,9 +9,46 @@
       :pagination="true"
       :paginationAutoPageSize=true
       :row-data="null"
+      row-selection="single"
+      :onSelectionChanged="openExamineLog"
       :supress-horisontal-scroll="true"
       :enable-scrolling="true"
     ></ag-grid-vue>
+    <v-dialog
+        v-model="examineLog"
+        activator="parent"
+    >
+      <v-card>
+        <v-card-text>
+          <v-table>
+            <thead>
+            <tr>
+              <th class="text-left">
+                Key
+              </th>
+              <th class="text-left">
+                Value
+              </th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr
+                v-for="item in examineLogContent"
+                :key="item.name"
+            >
+              <td>{{ item.key }}</td>
+              <td>
+                <span> {{ item.value }} </span>
+              </td>
+            </tr>
+            </tbody>
+          </v-table>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" block @click="examineLog = null">Close Dialog</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -20,14 +57,27 @@ import { AgGridVue } from "ag-grid-vue3";
 import "ag-grid-community/styles//ag-grid.css";
 import "ag-grid-community/styles//ag-theme-material.css";
 import ScreenshotCell from "./ScreenshotCell.js";
+import { VCard, VCardText, VCardActions } from 'vuetify/components/VCard'
+import { VDialog } from 'vuetify/components/VDialog'
+import { VBtn } from 'vuetify/components/VBtn'
+import { VTable } from 'vuetify/components/VTable'
 
 export default {
   components: {
     AgGridVue,
+    VCard,
+    VCardText,
+    VCardActions,
+    VBtn,
+    VDialog,
+    VTable,
     ScreenshotCell: ScreenshotCell
   },
   data() {
     return {
+      examineLog: null,
+      examineLogContent: null,
+      copied: false,
       gridApi: null,
       gridColumnApi: null,
       rowData: [],
@@ -115,7 +165,35 @@ export default {
         console.error(e, eventData)
       }
     },
-  }
+    openExamineLog () {
+      const selectedRow = this.gridApi.getSelectedRows()[0];
+      this.examineLog = true
+      const flattened = flattenObj(selectedRow)
+      const pairs = [];
+      Object.keys(flattened).map((key) => {
+        pairs.push({
+          key: key,
+          value: flattened[key]
+        })
+      })
+      this.examineLogContent = pairs
+    }
+  },
 }
 
+const flattenObj = (ob) => {
+  let result = {};
+  for (const i in ob) {
+    if ((typeof ob[i]) === 'object' && !Array.isArray(ob[i])) {
+      const temp = flattenObj(ob[i]);
+      for (const j in temp) {
+        result[i + '.' + j] = temp[j];
+      }
+    }
+    else {
+      result[i] = ob[i];
+    }
+  }
+  return result;
+};
 </script>