feat: vertical split for process operation

packages/web/src/widgets/SummaryProcesses.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
   import { DatabaseProcess } from 'dbgate-types';
+  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import TableControl from '../elements/TableControl.svelte';
   import { _t } from '../translations';
   import CtaButton from '../buttons/CtaButton.svelte';
@@ -9,6 +10,7 @@
   import { showSnackbarError, showSnackbarSuccess } from '../utility/snackbar';
   import { showModal } from '../modals/modalTools';
   import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import SqlEditor from '../query/SqlEditor.svelte';
 
   export let conid;
   export let isSummaryOpened: boolean = false;
@@ -16,6 +18,7 @@
   export let refreshInterval: number = 1000;
   export let tabVisible: boolean = false;
 
+  let selectedProcess: DatabaseProcess | null = null;
   const filters = writable({});
 
   let internalProcesses = [...processes];
@@ -81,7 +84,14 @@
 </script>
 
 <div class="wrapper">
+  <VerticalSplitter initialValue="70%" isSplitter={!!selectedProcess}>
+    <svelte:fragment slot="1">
+      <div>
         <TableControl
+          clickable
+          on:clickrow={e => {
+            selectedProcess = e.detail;
+          }}
           {filters}
           stickyHeader
           rows={internalProcesses}
@@ -159,6 +169,14 @@
             <span class:waiting={row.waitingFor}>{row.waitingFor ? 'Yes' : 'No'}</span>
           </svelte:fragment>
         </TableControl>
+      </div>
+    </svelte:fragment>
+    <svelte:fragment slot="2">
+      {#if !!selectedProcess}
+        <SqlEditor value={selectedProcess.operation} readOnly />
+      {/if}
+    </svelte:fragment>
+  </VerticalSplitter>
 </div>
 
 <style>