export - output files

packages/web/src/query/MessagesView.js

@@ -51,7 +51,7 @@ function formatDuration(duration) {
   return `${Math.round(duration / 1000)} s`;
 }
 
-function MessagesView({ items, onMessageClick }) {
+function MessagesView({ items, onMessageClick, showProcedure = false, showLine = false }) {
   const handleClick = (row) => {
     if (onMessageClick) onMessageClick(row);
   };
@@ -76,8 +76,8 @@ function MessagesView({ items, onMessageClick }) {
           <StyledHeader>Time</StyledHeader>
           <StyledHeader>Delta</StyledHeader>
           <StyledHeader>Duration</StyledHeader>
-          <StyledHeader>Procedure</StyledHeader>
-          <StyledHeader>Line</StyledHeader>
+          {showProcedure && <StyledHeader>Procedure</StyledHeader>}
+          {showLine && <StyledHeader>Line</StyledHeader>}
         </tr>
         {items.map((row, index) => (
           // @ts-ignore
@@ -91,8 +91,8 @@ function MessagesView({ items, onMessageClick }) {
                 ? formatDuration(new Date(row.time).getTime() - new Date(items[index - 1].time).getTime())
                 : 'n/a'}
             </StyledCell>
-            <StyledCell>{row.procedure}</StyledCell>
-            <StyledCell>{row.line}</StyledCell>
+            {showProcedure && <StyledCell>{row.procedure}</StyledCell>}
+            {showLine && <StyledCell>{row.line}</StyledCell>}
           </StyledRow>
         ))}
       </StyledTable>
@@ -100,4 +100,4 @@ function MessagesView({ items, onMessageClick }) {
   );
 }
 
-export default React.memo(MessagesView);
+export default React.memo(MessagesView);

packages/web/src/query/RunnerOuputFiles.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import useSocket from '../utility/SocketProvider';
+import axios from '../utility/axios';
+import styled from 'styled-components';
+import TableControl, { TableColumn } from '../utility/TableControl';
+import formatFileSize from '../utility/formatFileSize';
+import resolveApi from '../utility/resolveApi';
+
+export default function RunnerOutputFiles({ runnerId, executeNumber }) {
+  const socket = useSocket();
+  const [files, setFiles] = React.useState([]);
+
+  const handleRunnerDone = React.useCallback(async () => {
+    const resp = await axios.get(`runners/files?runid=${runnerId}`);
+    setFiles(resp.data);
+  }, [runnerId]);
+
+  React.useEffect(() => {
+    if (runnerId && socket) {
+      socket.on(`runner-done-${runnerId}`, handleRunnerDone);
+      return () => {
+        socket.off(`runner-done-${runnerId}`, handleRunnerDone);
+      };
+    }
+  }, [runnerId, socket]);
+
+  React.useEffect(() => {
+    setFiles([]);
+  }, [executeNumber]);
+
+  return (
+    <TableControl rows={files}>
+      <TableColumn fieldName="name" header="Name" />
+      <TableColumn fieldName="size" header="Size" formatter={(row) => formatFileSize(row.size)} />
+      <TableColumn
+        fieldName="download"
+        header="Download"
+        formatter={(row) => (
+          <a href={`${resolveApi()}/runners/data/${runnerId}/${row.name}`} target="_blank" rel="noopener noreferrer">
+            download
+          </a>
+        )}
+      />
+    </TableControl>
+  );
+}

packages/web/src/query/RunnerOutputPane.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { HorizontalSplitter } from '../widgets/Splitter';
+import SocketMessagesView from './SocketMessagesView';
+import { WidgetTitle } from '../widgets/WidgetStyles';
+import RunnerOutputFiles from './RunnerOuputFiles';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function RunnerOutputPane({ runnerId, executeNumber }) {
+  return (
+    <HorizontalSplitter>
+      <Container>
+        <WidgetTitle>Messages</WidgetTitle>
+        <SocketMessagesView eventName={runnerId ? `runner-info-${runnerId}` : null} executeNumber={executeNumber} />
+      </Container>
+      <Container>
+        <WidgetTitle>Output files</WidgetTitle>
+        <RunnerOutputFiles runnerId={runnerId} executeNumber={executeNumber} />
+      </Container>
+    </HorizontalSplitter>
+  );
+}

packages/web/src/query/SocketMessagesView.js

@@ -3,7 +3,13 @@ import React from 'react';
 import MessagesView from './MessagesView';
 import useSocket from '../utility/SocketProvider';
 
-export default function SocketMessagesView({ eventName, onMessageClick = undefined, executeNumber }) {
+export default function SocketMessagesView({
+  eventName,
+  onMessageClick = undefined,
+  executeNumber,
+  showProcedure = false,
+  showLine = false,
+}) {
   const [displayedMessages, setDisplayedMessages] = React.useState([]);
   const cachedMessagesRef = React.useRef([]);
   const socket = useSocket();
@@ -35,5 +41,12 @@ export default function SocketMessagesView({ eventName, onMessageClick = undefin
     }
   }, [eventName, socket]);
 
-  return <MessagesView items={displayedMessages} onMessageClick={onMessageClick} />;
+  return (
+    <MessagesView
+      items={displayedMessages}
+      onMessageClick={onMessageClick}
+      showProcedure={showProcedure}
+      showLine={showLine}
+    />
+  );
 }