query history

packages/web/src/widgets/HistoryWidget.svelte

@@ -8,6 +8,7 @@
 
   import hasPermission from '../utility/hasPermission';
   import { useFavorites } from '../utility/metadataLoaders';
+  import QueryHistoryList from './QueryHistoryList.svelte';
 
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
@@ -29,4 +30,7 @@
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
+  <WidgetColumnBarItem title="Query history" name="queryHistory">
+    <QueryHistoryList />
+  </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/QueryHistoryList.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import useFetch from '../utility/useFetch';
+  import WidgetsInnerContainer from '../widgets/WidgetsInnerContainer.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { onMount } from 'svelte';
+  import socket from '../utility/socket';
+  import axiosInstance from '../utility/axiosInstance';
+
+  let filter = '';
+  let search = '';
+
+  let historyItems = [];
+
+  async function reloadItems() {
+    const resp = await axiosInstance.request({
+      method: 'get',
+      url: 'query-history/read',
+      params: {
+        filter: search,
+        limit: 100,
+      },
+    });
+    historyItems = resp.data;
+  }
+
+  $: {
+    search;
+    reloadItems();
+  }
+
+  const setDebouncedFilter = _.debounce(value => (search = value), 500);
+
+  $: setDebouncedFilter(filter);
+
+  onMount(() => {
+    socket.on('query-history-changed', reloadItems);
+    return () => {
+      socket.off('query-history-changed', reloadItems);
+    };
+  });
+
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search query history" {filter} bind:value={filter} />
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  {#each historyItems as item}
+    <div class="wrapper" title={item.sql}>
+      <div class="sql">
+        <FontIcon icon="icon sql-file" />
+        {item.sql}
+      </div>
+      <div class="info">
+        <FontIcon icon="icon database" />
+        {item.database}
+      </div>
+    </div>
+  {/each}
+</WidgetsInnerContainer>
+
+<style>
+  .wrapper {
+    padding: 5px;
+  }
+  .wrapper:hover {
+    background-color: var(--theme-bg-hover);
+  }
+  .info {
+    margin-left: 30px;
+    margin-top: 5px;
+    color: var(--theme-font-3);
+  }
+  .sql {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+</style>