Multi blast job error

packages/libs/multi-blast/src/lib/components/BlastJobError.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import {
+  Error as ErrorPage,
+  Link,
+  Loading,
+} from '@veupathdb/wdk-client/lib/Components';
+import { LongJobResponse } from '../utils/ServiceTypes';
+import { useBlastApi } from '../hooks/api';
+import { usePromise } from '@veupathdb/wdk-client/lib/Hooks/PromiseHook';
+import Banner from '@veupathdb/coreui/lib/components/banners/Banner';
+
+interface Props {
+  job: LongJobResponse;
+}
+
+export function BlastJobError(props: Props) {
+  const { job } = props;
+  const blastApi = useBlastApi();
+  const jobErrorResult = usePromise(() => {
+    return blastApi.fetchJobError(job.id);
+  }, [blastApi, job]);
+
+  if (jobErrorResult.loading) {
+    return <Loading />;
+  }
+
+  return (
+    <ErrorPage>
+      <div style={{ fontSize: 'larger' }}>
+        {jobErrorResult.value && (
+          <Banner
+            banner={{
+              type: 'error',
+              message: jobErrorResult.value,
+            }}
+          />
+        )}
+        <p>
+          Your job did not run successfully. Please{' '}
+          <Link
+            target="_blank"
+            to={{
+              pathname: '/contact-us',
+              search: new URLSearchParams({
+                ctx: 'multi-blast job ' + job.id,
+              }).toString(),
+            }}
+          >
+            contact us
+          </Link>{' '}
+          for support.
+        </p>
+      </div>
+    </ErrorPage>
+  );
+}

packages/libs/multi-blast/src/lib/components/BlastWorkspaceResult.tsx

@@ -42,6 +42,7 @@ import { ResultContainer } from './ResultContainer';
 
 import './BlastWorkspaceResult.scss';
 import { DiamondResultContainer } from './DiamondResultContainer';
+import { BlastJobError } from './BlastJobError';
 
 interface Props {
   jobId: string;
@@ -82,23 +83,7 @@ export function BlastWorkspaceResult(props: Props) {
   ) : jobResult.value?.status === 'error' ? (
     <BlastRerunError {...props} />
   ) : jobResult.value?.status === 'queueing-error' ? (
-    <ErrorPage>
-      <div style={{ fontSize: 'larger' }}>
-        Your job did not run successfully. Please{' '}
-        <Link
-          target="_blank"
-          to={{
-            pathname: '/contact-us',
-            search: new URLSearchParams({
-              ctx: 'multi-blast job ' + jobResult.value.job.id,
-            }).toString(),
-          }}
-        >
-          contact us
-        </Link>{' '}
-        for support.
-      </div>
-    </ErrorPage>
+    <BlastJobError job={jobResult.value.job} />
   ) : queryResult.value?.status === 'error' ? (
     <BlastRequestError errorDetails={queryResult.value.details} />
   ) : jobResult.value.job.config.tool.startsWith('diamond-') ? (

packages/libs/multi-blast/src/lib/utils/api.ts

@@ -175,6 +175,14 @@ export class BlastApi extends FetchClientWithCredentials {
     });
   }
 
+  fetchJobError(jobId: string) {
+    return this.fetch({
+      path: `${JOBS_PATH}/${jobId}/error`,
+      method: 'GET',
+      transformResponse: ioTransformer(string),
+    });
+  }
+
   rerunJob(jobId: string) {
     return this.taggedFetch({
       path: `${JOBS_PATH}/${jobId}`,