execute query

packages/web/src/query/AceEditor.svelte

@@ -47,6 +47,10 @@
   let clientWidth;
   let clientHeight;
 
+  export function getEditor(): ace.Editor {
+    return editor;
+  }
+
   const requireEditorPlugins = () => {};
   requireEditorPlugins();
 

packages/web/src/query/MessageView.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" context="module">
+  function formatDuration(duration) {
+    if (duration == 0) return '0';
+    if (duration < 1000) {
+      return `${Math.round(duration)} ms`;
+    }
+    if (duration < 10000) {
+      return `${Math.round(duration / 100) / 10} s`;
+    }
+    return `${Math.round(duration / 1000)} s`;
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import moment from 'moment';
+
+  export let items: any[];
+  export let showProcedure = false;
+  export let showLine = false;
+
+  $: time0 = items[0] && new Date(items[0].time).getTime();
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="main">
+  <table>
+    <tr>
+      <td class="header">Number</td>
+      <td class="header">Message</td>
+      <td class="header">Time</td>
+      <td class="header">Delta</td>
+      <td class="header">Duration</td>
+      {#if showProcedure}
+        <td class="header">Procedure</td>
+      {/if}
+      {#if showLine}
+        <td class="header">Line</td>
+      {/if}
+    </tr>
+    {#each items as row, index}
+      <tr
+        class:isError={row.severity == 'error'}
+        class:isActive={row.line}
+        on:click={() => dispatch('messageclick', row)}
+      >
+        <td>{index + 1}</td>
+        <td>{row.message}</td>
+        <td>{moment(row.time).format('HH:mm:ss')}</td>
+        <td>{formatDuration(new Date(row.time).getTime() - time0)}</td>
+        <td>
+          {index > 0
+            ? formatDuration(new Date(row.time).getTime() - new Date(items[index - 1].time).getTime())
+            : 'n/a'}</td
+        >
+        {#if showProcedure}
+          <td>{row.procedure || ''}</td>
+        {/if}
+        {#if showLine}
+          <td>{row.line || ''}</td>
+        {/if}
+      </tr>
+    {/each}
+  </table>
+</div>
+
+<style>
+  .main {
+    flex: 1;
+    display: flex;
+    overflow-y: scroll;
+    background-color: var(--theme-bg-0);
+  }
+  table {
+    flex: 1;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+  td.header {
+    text-align: left;
+    border-bottom: 2px solid var(--theme-border);
+    background-color: var(--theme-bg-1);
+    padding: 5px;
+  }
+  td:not(.header) {
+    border-top: 1px solid var(--theme-border);
+    padding: 5px;
+  }
+  tr.isActive:hover {
+    background: var(--theme-bg-2);
+  }
+  tr.isError {
+    color: var(--theme-icon-red);
+  }
+</style>

packages/web/src/query/SocketMessageView.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
+
+  import socket from '../utility/socket';
+
+  import useEffect from '../utility/useEffect';
+
+  import MessageView from './MessageView.svelte';
+
+  export let showProcedure = false;
+  export let showLine = false;
+  export let eventName;
+  export let executeNumber;
+
+  const cachedMessagesRef = { current: [] };
+
+  let displayedMessages = [];
+
+  const displayCachedMessages = _.throttle(() => {
+    console.log('THROTTLE', cachedMessagesRef.current);
+    displayedMessages = [...cachedMessagesRef.current];
+  }, 500);
+
+  const handleInfo = info => {
+    console.log('ACCEPTED', info);
+    cachedMessagesRef.current.push(info);
+    displayCachedMessages();
+  };
+
+  $: effect = useEffect(() => {
+    if (eventName) {
+      socket.on(eventName, handleInfo);
+      return () => {
+        socket.off(eventName, handleInfo);
+      };
+    }
+    return () => {};
+  });
+
+  $: {
+    if (executeNumber >= 0) {
+      console.log('CLEAR');
+      displayedMessages = [];
+      cachedMessagesRef.current = [];
+    }
+  }
+
+  $: $effect;
+
+  $: console.log('displayedMessages', displayedMessages);
+</script>
+
+{#if !displayedMessages || displayedMessages.length == 0}
+  <ErrorInfo message="No messages" icon="img alert" />
+{:else}
+  <MessageView items={displayedMessages} on:messageclick {showProcedure} {showLine} />
+{/if}

packages/web/src/query/SqlEditor.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import AceEditor from './AceEditor.svelte';
+  import * as ace from 'ace-builds/src-noconflict/ace';
   export let engine;
   let domEditor;
 
@@ -18,9 +19,9 @@
     mode = engineToMode[match ? match[1] : engine] || 'sql';
   }
 
-  export function getSelectedText() {
-    return domEditor.getSelectedText()
+  export function getEditor(): ace.Editor {
+    return domEditor.getEditor();
   }
 </script>
 
-<AceEditor {mode} {...$$props} on:input on:focus on:blur bind:this={domEditor}/>
+<AceEditor {mode} {...$$props} on:input on:focus on:blur bind:this={domEditor} />