runner messages dialog

packages/web/src/modals/RunScriptModal.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import SocketMessageView from '../query/SocketMessageView.svelte';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let script;
+  export let header;
+
+  let isRunning;
+  let runid;
+  let isCanceled;
+
+  let executeNumber = 0;
+
+  const handleStop = async () => {
+    closeCurrentModal();
+    apiCall('runners/cancel', { runid });
+  };
+
+  const handleClose = () => {
+    closeCurrentModal();
+  };
+
+  const initialize = async () => {
+    await tick();
+    const resp = await apiCall('runners/start', { script });
+    runid = resp.runid;
+    let isCanceled = false;
+
+    function handleRunnerDone() {
+      isRunning = false;
+      apiOff(`runner-done-${runid}`, handleRunnerDone);
+      //   if (isCanceled) {
+      //     showSnackbarError(canceledMessage);
+      //   } else {
+      //     showSnackbarInfo(finishedMessage);
+      //     if (afterFinish) afterFinish();
+      //   }
+    }
+
+    apiOn(`runner-done-${runid}`, handleRunnerDone);
+  };
+
+  onMount(() => {
+    initialize();
+  });
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">
+      {header}
+    </svelte:fragment>
+
+    <div class="messages">
+      <SocketMessageView eventName={runid ? `runner-info-${runid}` : null} {executeNumber} showNoMessagesAlert />
+    </div>
+
+    <svelte:fragment slot="footer">
+      {#if isRunning}
+        <FormStyledButton value="Stop" on:click={handleStop} />
+      {:else}
+        <FormStyledButton value="Close" on:click={handleClose} />
+      {/if}
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .messages {
+    height: 30vh;
+    display: flex;
+  }
+</style>

packages/web/src/utility/exportFileTools.ts

@@ -5,6 +5,8 @@ import resolveApi from './resolveApi';
 import { apiCall, apiOff, apiOn } from './api';
 import { normalizeExportColumnMap } from '../impexp/createImpExpScript';
 import { getCurrentConfig } from '../stores';
+import { showModal } from '../modals/modalTools';
+import RunScriptModal from '../modals/RunScriptModal.svelte';
 
 export async function importSqlDump(inputFile, connection) {
   const script = getCurrentConfig().allowShellScripting ? new ScriptWriter() : new ScriptWriterJson();
@@ -14,12 +16,14 @@ export async function importSqlDump(inputFile, connection) {
     connection,
   });
 
-  await runImportExportScript({
-    script: script.getScript(),
-    runningMessage: 'Importing database',
-    canceledMessage: 'Database import canceled',
-    finishedMessage: 'Database import finished',
-  });
+  showModal(RunScriptModal, { script: script.getScript(), header: 'Importing database' });
+
+  // await runImportExportScript({
+  //   script: script.getScript(),
+  //   runningMessage: 'Importing database',
+  //   canceledMessage: 'Database import canceled',
+  //   finishedMessage: 'Database import finished',
+  // });
 }
 
 async function runImportExportScript({ script, runningMessage, canceledMessage, finishedMessage, afterFinish = null }) {