Show executed query on log #1236

packages/web/src/query/MessageView.svelte

@@ -12,6 +12,7 @@
   export let startLine = 0;
   export let onMessageClick = null;
   export let onExplainError = null;
+  export let engine = null;
 
   export let filter = '';
 
@@ -92,6 +93,7 @@
           previousRow={index > 0 ? items[index - 1] : null}
           {onMessageClick}
           {onExplainError}
+          {engine}
         />
       {/each}
     </table>

packages/web/src/query/MessageViewRow.svelte

@@ -17,6 +17,9 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
   import InlineButton from '../buttons/InlineButton.svelte';
+  import SqlHighlighter from '../elements/SqlHighlighter.svelte';
+  import { showModal } from '../modals/modalTools';
+  import ShowSqlModal from '../modals/ShowSqlModal.svelte';
 
   export let row;
   export let index;
@@ -29,6 +32,7 @@
   export let previousRow = null;
   export let onMessageClick = null;
   export let onExplainError = null;
+  export let engine = null;
 
   let isExpanded = false;
 </script>
@@ -55,10 +59,22 @@
         }}><FontIcon icon="img ai" /> Explain</InlineButton
       >
     {/if}
+    {#if row.sql}
+      <SqlHighlighter
+        code={row.sql.substring(0, 100) + (row.sql.length > 100 ? '...' : '')}
+        inline
+        onClick={() => {
+          showModal(ShowSqlModal, {
+            sql: row.sql,
+            engine,
+          });
+        }}
+      />
+    {/if}
   </td>
   <td>{moment(row.time).format('HH:mm:ss')}</td>
   <td>{formatDuration(new Date(row.time).getTime() - time0)}</td>
-  <td> {previousRow ? formatDuration(new Date(row.time).getTime() - new Date(previousRow.time).getTime()) : 'n/a'}</td>
+  <td>{previousRow ? formatDuration(new Date(row.time).getTime() - new Date(previousRow.time).getTime()) : 'n/a'}</td>
   {#if showProcedure}
     <td>{row.procedure || ''}</td>
   {/if}

packages/web/src/query/SocketMessageView.svelte

@@ -18,6 +18,7 @@
   export let onChangeErrors = null;
   export let onMessageClick = null;
   export let onExplainError = null;
+  export let engine = null;
 
   const cachedMessagesRef = createRef([]);
   const lastErrorMessageCountRef = createRef(0);
@@ -79,5 +80,6 @@
     {showCaller}
     {startLine}
     {onExplainError}
+    {engine}
   />
 {/if}