json view in redis

packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+  import { safeJsonParse } from 'dbgate-tools';
+
   import _ from 'lodash';
+  import SelectField from '../forms/SelectField.svelte';
+  import JsonTree from '../jsontree/JSONTree.svelte';
 
   import AceEditor from '../query/AceEditor.svelte';
 
+  let display = 'text';
+
   export let dbKeyFields;
   export let item;
   export let onChangeItem = null;
@@ -10,21 +16,39 @@
 
 <div class="props">
   {#each dbKeyFields as column}
-    <div class="colname">{_.startCase(column.name)}</div>
-    <div class="colvalue">
-      <AceEditor
-        readOnly={!onChangeItem}
-        value={item && item[column.name]}
-        on:input={e => {
-          if (onChangeItem) {
-            onChangeItem({
-              ...item,
-              [column.name]: e.detail,
-            });
-          }
+    <div class="colnamewrap">
+      <div class="colname">{_.startCase(column.name)}</div>
+      <SelectField
+        isNative
+        value={display}
+        on:change={e => {
+          display = e.detail;
         }}
+        options={[
+          { label: 'Text', value: 'text' },
+          { label: 'JSON view', value: 'json' },
+        ]}
       />
     </div>
+    <div class="colvalue">
+      {#if display == 'text'}
+        <AceEditor
+          readOnly={!onChangeItem}
+          value={item && item[column.name]}
+          on:input={e => {
+            if (onChangeItem) {
+              onChangeItem({
+                ...item,
+                [column.name]: e.detail,
+              });
+            }
+          }}
+        />
+      {/if}
+      {#if display == 'json'}
+        <JsonTree value={safeJsonParse(item[column.name]) || { error: 'Not valid JSON' }} expanded />
+      {/if}
+    </div>
   {/each}
 </div>
 
@@ -36,7 +60,6 @@
   }
 
   .colname {
-    margin-top: 20px;
     color: var(--theme-font-3);
   }
 
@@ -44,4 +67,10 @@
     position: relative;
     flex: 1;
   }
+
+  .colnamewrap {
+    display: flex;
+    margin: 20px 5px 5px 5px;
+    justify-content: space-between;
+  }
 </style>