redis: reload keys

packages/web/src/utility/metadataLoaders.ts

@@ -78,11 +78,11 @@ const databaseListLoader = ({ conid }) => ({
   },
 });
 
-const databaseKeysLoader = ({ conid, database, root }) => ({
-  url: 'database-connections/load-keys',
-  params: { conid, database, root },
-  reloadTrigger: `database-keys-changed-${conid}-${database}`,
-});
+// const databaseKeysLoader = ({ conid, database, root }) => ({
+//   url: 'database-connections/load-keys',
+//   params: { conid, database, root },
+//   reloadTrigger: `database-keys-changed-${conid}-${database}`,
+// });
 
 const serverVersionLoader = ({ conid }) => ({
   url: 'server-connections/version',
@@ -436,9 +436,9 @@ export function useAuthTypes(args) {
   return useCore(authTypesLoader, args);
 }
 
-export function getDatabaseKeys(args) {
-  return getCore(databaseKeysLoader, args);
-}
-export function useDatabaseKeys(args) {
-  return useCore(databaseKeysLoader, args);
-}
+// export function getDatabaseKeys(args) {
+//   return getCore(databaseKeysLoader, args);
+// }
+// export function useDatabaseKeys(args) {
+//   return useCore(databaseKeysLoader, args);
+// }

packages/web/src/widgets/DbKeysSubTree.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import { apiCall } from '../utility/api';
 
   const SHOW_INCREMENT = 500;
 
@@ -12,23 +14,29 @@
   export let root;
   export let indentLevel = 0;
 
+  export let reloadToken = 0;
+
   let maxShowCount = SHOW_INCREMENT;
 
-  $: items = useDatabaseKeys({ conid, database, root });
+  // $: items = useDatabaseKeys({ conid, database, root, reloadToken });
 </script>
 
-{#each ($items || []).slice(0, maxShowCount) as item}
-  <DbKeysTreeNode {conid} {database} {root} {item} {indentLevel} />
-{/each}
+{#await apiCall('database-connections/load-keys', { conid, database, root, reloadToken })}
+  <LoadingInfo message="Loading key list" wrapper />
+{:then items}
+  {#each (items || []).slice(0, maxShowCount) as item}
+    <DbKeysTreeNode {conid} {database} {root} {item} {indentLevel} />
+  {/each}
 
-{#if ($items || []).length > maxShowCount}
-  <AppObjectCore
-    {indentLevel}
-    title="Show more..."
-    icon="icon dots-horizontal"
-    expandIcon="icon invisible-box"
-    on:click={() => {
-      maxShowCount += SHOW_INCREMENT;
-    }}
-  />
-{/if}
+  {#if (items || []).length > maxShowCount}
+    <AppObjectCore
+      {indentLevel}
+      title="Show more..."
+      icon="icon dots-horizontal"
+      expandIcon="icon invisible-box"
+      on:click={() => {
+        maxShowCount += SHOW_INCREMENT;
+      }}
+    />
+  {/if}
+{/await}

packages/web/src/widgets/DbKeysTree.svelte

@@ -14,8 +14,11 @@
   export let database;
 
   let filter;
+  let reloadToken = 0;
 
-  function handleRefreshDatabase() {}
+  function handleRefreshDatabase() {
+    reloadToken += 1;
+  }
 </script>
 
 <SearchBoxWrapper>
@@ -29,5 +32,5 @@
   </InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
-  <DbKeysSubTree {conid} {database} root="" />
+  <DbKeysSubTree {conid} {database} root="" {reloadToken} />
 </WidgetsInnerContainer>

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -21,6 +21,7 @@
   export let indentLevel = 0;
 
   let isExpanded;
+  let reloadToken = 0;
 
   // $: console.log(item.text, indentLevel);
   function createMenu() {
@@ -41,6 +42,12 @@
           });
         },
       },
+      item.type == 'dir' && {
+        label: 'Reload',
+        onClick: () => {
+          reloadToken += 1;
+        },
+      },
     ];
   }
 </script>
@@ -83,5 +90,5 @@
 </div> -->
 
 {#if isExpanded}
-  <DbKeysSubTree {conid} {database} root={item.root} indentLevel={indentLevel + 1} />
+  <DbKeysSubTree {conid} {database} root={item.root} indentLevel={indentLevel + 1} {reloadToken} />
 {/if}