query history

packages/api/src/controllers/queryHistory.js

@@ -4,12 +4,15 @@ const path = require('path');
 const { datadir } = require('../utility/directories');
 const _ = require('lodash');
 const { filterName } = require('dbgate-tools');
+const socket = require('../utility/socket');
 
 function readCore(reader, skip, limit, filter) {
-  return new Promise(resolve => {
+  return new Promise((resolve, reject) => {
     const res = [];
     let readed = 0;
     reader.on('data', line => {
+      if (!line && !line.trim()) return;
+      try {
         const json = JSON.parse(line);
         if (filterName(filter, json.sql)) {
           if (!skip || readed >= skip) {
@@ -21,6 +24,10 @@ function readCore(reader, skip, limit, filter) {
             resolve(res);
           }
         }
+      } catch (err) {
+        reader.destroy();
+        reject(err);
+      }
     });
     reader.on('end', () => resolve(res));
   });
@@ -41,5 +48,7 @@ module.exports = {
   async write({ data }) {
     const fileName = path.join(datadir(), 'query-history.jsonl');
     await fs.appendFile(fileName, JSON.stringify(data) + '\n');
+    socket.emitChanged('query-history-changed');
+    return 'OK';
   },
 };

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>