From 466adea82b4dcd762f84b3d8b51e6fdab04e9f34 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Mon, 2 Dec 2024 12:44:00 -0500
Subject: [PATCH] Display failed job error message, if available

---
 .../src/lib/components/BlastJobError.tsx      | 57 +++++++++++++++++++
 .../lib/components/BlastWorkspaceResult.tsx   | 19 +------
 2 files changed, 59 insertions(+), 17 deletions(-)
 create mode 100644 packages/libs/multi-blast/src/lib/components/BlastJobError.tsx

diff --git a/packages/libs/multi-blast/src/lib/components/BlastJobError.tsx b/packages/libs/multi-blast/src/lib/components/BlastJobError.tsx
new file mode 100644
index 0000000000..198ff2239f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/libs/multi-blast/src/lib/components/BlastWorkspaceResult.tsx b/packages/libs/multi-blast/src/lib/components/BlastWorkspaceResult.tsx
index 05f28e52ac..2667cf8bd9 100644
--- a/packages/libs/multi-blast/src/lib/components/BlastWorkspaceResult.tsx
+++ b/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-') ? (