shell tab

packages/web/src/query/RunnerOutputFiles/CopyLink.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import getElectron from '../../utility/getElectron';
+
+  const electron = getElectron();
+  export let row;
+</script>
+
+<a
+  href="#"
+  on:click={() => {
+    const file = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {});
+    if (file) {
+      const fs = window.require('fs');
+      fs.copyFile(row.path, file, () => {});
+    }
+  }}
+>
+  save
+</a>

packages/web/src/query/RunnerOutputFiles/DownloadLink.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import resolveApi from '../../utility/resolveApi';
+
+  export let runnerId;
+  export let row;
+</script>
+
+<a href={`${resolveApi()}/runners/data/${runnerId}/${row.name}`} target="_blank" rel="noopener noreferrer">
+  download
+</a>

packages/web/src/query/RunnerOutputFiles/RunnerOutputFiles.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import ErrorInfo from '../../elements/ErrorInfo.svelte';
+  import TableControl from '../../elements/TableControl.svelte';
+
+  import axiosInstance from '../../utility/axiosInstance';
+  import formatFileSize from '../../utility/formatFileSize';
+  import getElectron from '../../utility/getElectron';
+  import socket from '../../utility/socket';
+  import useEffect from '../../utility/useEffect';
+  import CopyLink from './CopyLink.svelte';
+  import DownloadLink from './DownloadLink.svelte';
+  import ShowLink from './ShowLink.svelte';
+
+  export let runnerId;
+  export let executeNumber;
+
+  let files = [];
+
+  $: if (executeNumber >= 0) files = [];
+
+  $: effect = useEffect(() => registerRunnerDone(runnerId));
+
+  const electron = getElectron();
+
+  function registerRunnerDone(rid) {
+    if (rid) {
+      socket.on(`runner-done-${rid}`, handleRunnerDone);
+      return () => {
+        socket.off(`runner-done-${rid}`, handleRunnerDone);
+      };
+    } else {
+      return () => {};
+    }
+  }
+
+  $: $effect;
+
+  const handleRunnerDone = async () => {
+    const resp = await axiosInstance.get(`runners/files?runid=${runnerId}`);
+    files = resp.data;
+  };
+</script>
+
+{#if !files || files.length == 0}
+  <ErrorInfo message="No output files" icon="img alert" />
+{/if}
+
+<TableControl
+  rows={files}
+  columns={[
+    { fieldName: 'name', header: 'Name' },
+    { fieldName: 'size', header: 'Size', formatter: row => formatFileSize(row.size) },
+    !electron && {
+      fieldName: 'download',
+      header: 'Download',
+      component: DownloadLink,
+      getProps: row => ({
+        row,
+        runnerId,
+      }),
+    },
+    !electron && {
+      fieldName: 'copy',
+      header: 'Copy',
+      component: CopyLink,
+      getProps: row => ({
+        row,
+        runnerId,
+      }),
+    },
+    !electron && {
+      fieldName: 'show',
+      header: 'Show',
+      component: ShowLink,
+      getProps: row => ({
+        row,
+        runnerId,
+      }),
+    },
+  ]}
+/>

packages/web/src/query/RunnerOutputFiles/ShowLink.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import getElectron from '../../utility/getElectron';
+
+  const electron = getElectron();
+  export let row;
+</script>
+
+<a
+  href="#"
+  on:click={() => {
+    electron.remote.shell.showItemInFolder(row.path);
+  }}
+>
+  show
+</a>

packages/web/src/query/RunnerOutputFiles/index.js

@@ -0,0 +1 @@
+export { default } from './RunnerOutputFiles.svelte';

packages/web/src/query/RunnerOutputPane.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
+  import WidgetTitle from '../widgets/WidgetTitle.svelte';
+  import RunnerOutputFiles from './RunnerOutputFiles';
+  import SocketMessageView from './SocketMessageView.svelte';
+
+  export let runnerId;
+  export let executeNumber;
+</script>
+
+<HorizontalSplitter>
+  <div class="container">
+    <WidgetTitle>Messages</WidgetTitle>
+    <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
+  </div>
+  <div class="container">
+    <WidgetTitle>Output files</WidgetTitle>
+    <RunnerOutputFiles {runnerId} {executeNumber} />
+  </div>
+</HorizontalSplitter>
+
+<style>
+  div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+</style>