Pretty print params

dejan · Apr 27, 2024 · b86c102 · b86c102
1 parent 076f173
commit b86c102
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/extension/package-lock.json b/extension/package-lock.json
diff --git a/extension/package.json b/extension/package.json
@@ -14,6 +14,7 @@
     "ansi-to-html": "^0.7.2",
     "highlight.js": "^11.9.0",
     "pinia": "^2.1.7",
+    "pretty-print-json": "^3.0.0",
     "primeicons": "^7.0.0",
     "primevue": "^3.49.1",
     "vue": "^3.4.19"

diff --git a/extension/src/components/ActionParams.vue b/extension/src/components/ActionParams.vue
@@ -1,14 +1,37 @@
 <template>
-<DetailsTable :value="store.selectedParams">
-  <Column field="name" header="Name" />
-  <Column field="value" header="Value" />    
-</DetailsTable>
+  <DetailsTable :value="store.selectedParams">
+    <Column field="name" header="Name" class="font-bold"/>
+      <Column field="value" header="Value">
+        <template #body="slotProps">
+          <pre v-html="pretty(slotProps.data.value)" class="whitespace-pre-wrap"></pre>
+        </template>
+    </Column>
+  </DetailsTable>
 </template>
 
 <script setup>
 import { useEventsStore } from '../stores/events';
 import Column from 'primevue/column';
 import DetailsTable from './wrappers/DetailsTable.vue';
+import { prettyPrintJson } from 'pretty-print-json';
 
 const store = useEventsStore()
+
+const prettyOptions = {
+  indent: 2,
+  quoteKeys: true,
+  quoteStyle: 'double',
+  trailingCommas: false,
+  linkUrls: false,
+};
+
+function pretty(obj) {
+  try {
+    return prettyPrintJson.toHtml(obj, prettyOptions);
+  } catch (e) {
+    console.log(e);
+    return obj;
+  }
+}
+
 </script>
diff --git a/extension/src/components/ActiveRecordQueries.vue b/extension/src/components/ActiveRecordQueries.vue
@@ -9,7 +9,7 @@
     <Column field="type" header="Type" class="whitespace-nowrap"/>
     <Column field="query" header="Query">
       <template #body="slotProps">
-        <div v-html="hljs.highlight(slotProps.data.query, { language: 'sql' }).value" class="font-mono"></div>
+        <pre v-html="hljs.highlight(slotProps.data.query, { language: 'sql' }).value" class="font-mono whitespace-pre-wrap"></pre>
       </template>
     </Column>
     <Column field="binds" header="Binds"> 

diff --git a/extension/src/style.css b/extension/src/style.css
@@ -33,8 +33,3 @@
     --primary-950: 69 10 10;  
 
 }
-
-/* custom scrollbar */
-/* ::-webkit-scrollbar {
-  width: 0px;
-} */