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,8 +16,22 @@
 
 <div class="props">
   {#each dbKeyFields as column}
+    <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]}
@@ -24,6 +44,10 @@
             }
           }}
         />
+      {/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>