redis: set ttl

packages/web/src/tabs/DbKeyDetailTab.svelte

@@ -19,6 +19,9 @@
   import { getIconForRedisType } from 'dbgate-tools';
   import TextField from '../forms/TextField.svelte';
   import DbKeyTableControl from '../datagrid/DbKeyTableControl.svelte';
+  import { showModal } from '../modals/modalTools';
+  import InputTextModal from '../modals/InputTextModal.svelte';
+  import _ from 'lodash';
 
   export let conid;
   export let database;
@@ -27,8 +30,43 @@
 
   export const activator = createActivator('DbKeyDetailTab', true);
 
+  let currentRow;
+
   $: key = $activeDbKeysStore[`${conid}:${database}`];
   let refreshToken = 0;
+
+  function handleChangeTtl(keyInfo) {
+    showModal(InputTextModal, {
+      value: keyInfo.ttl,
+      label: 'New TTL value (-1=key never expires)',
+      header: `Set TTL for key ${keyInfo.key}`,
+      onConfirm: async value => {
+        const ttl = parseInt(value);
+        if (_.isNumber(ttl)) {
+          if (ttl < 0) {
+            await apiCall('database-connections/call-method', {
+              conid,
+              database,
+              method: 'persist',
+              args: [keyInfo.key],
+            });
+          } else {
+            await apiCall('database-connections/call-method', {
+              conid,
+              database,
+              method: 'expire',
+              args: [keyInfo.key, ttl],
+            });
+          }
+          refresh();
+        }
+      },
+    });
+  }
+
+  function refresh() {
+    refreshToken += 1;
+  }
 </script>
 
 {#await apiCall('database-connections/load-key-info', { conid, database, key, refreshToken })}
@@ -36,28 +74,38 @@
 {:then keyInfo}
   <div class="container">
     <div class="top-panel">
-      <FontIcon icon={getIconForRedisType(keyInfo.type)} padRight />
       <div class="type">
+        <FontIcon icon={getIconForRedisType(keyInfo.type)} padRight />
         {keyInfo.type}
       </div>
-      <TextField value={key} readOnly />
-      {key}
-      TTL:{keyInfo.ttl}
-      <FormStyledButton
-        value="Refresh"
-        on:click={() => {
-          refreshToken += 1;
-        }}
-      />
+      <div class="key-name">
+        <TextField value={key} readOnly />
+      </div>
+      <FormStyledButton value={`TTL:${keyInfo.ttl}`} on:click={() => handleChangeTtl(keyInfo)} />
+      <FormStyledButton value="Refresh" on:click={refresh} />
     </div>
 
     <div class="content">
       {#if keyInfo.tableColumns}
         <VerticalSplitter>
           <svelte:fragment slot="1">
-            <DbKeyTableControl {conid} {database} {keyInfo} />
+            <DbKeyTableControl
+              {conid}
+              {database}
+              {keyInfo}
+              onChangeSelected={row => {
+                currentRow = row;
+              }}
+            />
           </svelte:fragment>
-          <svelte:fragment slot="2">PROPS</svelte:fragment>
+          <div slot="2" class="props">
+            {#each keyInfo.tableColumns as column}
+              <div class="colname">{column.name}</div>
+              <div class="colvalue">
+                <AceEditor readOnly value={currentRow && currentRow[column.name]} />
+              </div>
+            {/each}
+          </div>
         </VerticalSplitter>
       {:else}
         <AceEditor readOnly value={keyInfo.value} />
@@ -80,9 +128,36 @@
 
   .top-panel {
     display: flex;
+    background: var(--theme-bg-2);
   }
 
   .type {
     font-weight: bold;
+    margin-right: 10px;
+    align-self: center;
+  }
+
+  .props {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .colname {
+    margin: 10px;
+  }
+
+  .colvalue {
+    position: relative;
+    flex: 1;
+  }
+
+  .key-name {
+    flex-grow: 1;
+    display: flex;
+  }
+
+  .key-name :global(input) {
+    flex-grow: 1;
   }
 </style>