Link failed benchmark workflows to their run details

Refactor failedWorkflowNames (string[]) to failedWorkflows
(FailedWorkflow[]) to carry runId alongside displayName, enabling
direct navigation to failure details from the succeeded_with_failures
phase.

Made-with: Cursor

Author: cezudas

packages/react-ui/src/app/features/benchmark/components/benchmark-wizard.tsx

@@ -87,7 +87,7 @@ export const BenchmarkWizard = ({
   const {
     runPhase,
     runningProgress,
-    failedWorkflowNames,
+    failedWorkflows,
     isRunPending,
     handleRunBenchmark,
     handleResetRun,
@@ -175,7 +175,7 @@ export const BenchmarkWizard = ({
                     result={benchmarkCreateResult}
                     runPhase={runPhase}
                     runningProgress={runningProgress ?? undefined}
-                    failedWorkflowNames={failedWorkflowNames}
+                    failedWorkflows={failedWorkflows}
                   />
                 )}
               </WizardStep>

packages/react-ui/src/app/features/benchmark/tests/use-benchmark-run.test.ts

@@ -137,12 +137,12 @@ describe('useBenchmarkRun', () => {
       expect(result.current.isRunPending).toBe(false);
     });
 
-    it('should start with empty failedWorkflowNames', () => {
+    it('should start with empty failedWorkflows', () => {
       const { result } = renderHook(() =>
         useBenchmarkRun(buildBenchmarkCreationResult()),
       );
 
-      expect(result.current.failedWorkflowNames).toEqual([]);
+      expect(result.current.failedWorkflows).toEqual([]);
     });
   });
 
@@ -263,7 +263,7 @@ describe('useBenchmarkRun', () => {
       });
 
       expect(result.current.runPhase).toBe('succeeded');
-      expect(result.current.failedWorkflowNames).toEqual([]);
+      expect(result.current.failedWorkflows).toEqual([]);
     });
 
     it('should transition to succeeded_with_failures when some sub-workflows failed', async () => {
@@ -302,7 +302,9 @@ describe('useBenchmarkRun', () => {
       });
 
       expect(result.current.runPhase).toBe('succeeded_with_failures');
-      expect(result.current.failedWorkflowNames).toEqual(['Sub']);
+      expect(result.current.failedWorkflows).toEqual([
+        { displayName: 'Sub', runId: 'run-2' },
+      ]);
     });
 
     it('should transition to failed when status is FAILED', async () => {

packages/react-ui/src/app/features/benchmark/use-benchmark-run.ts

@@ -15,10 +15,15 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { benchmarkApi } from './benchmark-api';
 
+export type FailedWorkflow = {
+  displayName: string;
+  runId?: string;
+};
+
 export type UseBenchmarkRunResult = {
   runPhase: BenchmarkRunPhase;
   runningProgress: { completed: number; total: number } | null;
-  failedWorkflowNames: string[];
+  failedWorkflows: FailedWorkflow[];
   isRunPending: boolean;
   handleRunBenchmark: () => Promise<void>;
   handleResetRun: () => void;
@@ -44,23 +49,25 @@ function mapStatusToRunPhase(
   }
 }
 
-function getFailedSubWorkflowNames(data: BenchmarkStatusResponse): string[] {
+function getFailedSubWorkflows(
+  data: BenchmarkStatusResponse,
+): FailedWorkflow[] {
   return data.workflows
     .filter(
       (w) =>
         !w.isOrchestrator &&
         !w.isCleanup &&
         w.runStatus === BenchmarkStatus.FAILED,
     )
-    .map((w) => w.displayName);
+    .map((w) => ({ displayName: w.displayName, runId: w.runId }));
 }
 
 export const useBenchmarkRun = (
   benchmarkCreateResult: BenchmarkCreationResult | null,
 ): UseBenchmarkRunResult => {
   const [runPhase, setRunPhase] = useState<BenchmarkRunPhase>('idle');
   const [lastRunId, setLastRunId] = useState<string | undefined>();
-  const [failedWorkflowNames, setFailedWorkflowNames] = useState<string[]>([]);
+  const [failedWorkflows, setFailedWorkflows] = useState<FailedWorkflow[]>([]);
   const [runCount, setRunCount] = useState(0);
 
   const benchmarkId = benchmarkCreateResult?.benchmarkId ?? null;
@@ -94,7 +101,7 @@ export const useBenchmarkRun = (
     }
     const newPhase = mapStatusToRunPhase(statusData);
     if (newPhase === 'succeeded_with_failures') {
-      setFailedWorkflowNames(getFailedSubWorkflowNames(statusData));
+      setFailedWorkflows(getFailedSubWorkflows(statusData));
     }
     if (newPhase !== null) {
       setRunPhase(newPhase);
@@ -138,7 +145,7 @@ export const useBenchmarkRun = (
   const handleResetRun = () => {
     setRunPhase('idle');
     setLastRunId(undefined);
-    setFailedWorkflowNames([]);
+    setFailedWorkflows([]);
   };
 
   const runningProgress = useMemo(() => {
@@ -165,7 +172,7 @@ export const useBenchmarkRun = (
   return {
     runPhase,
     runningProgress,
-    failedWorkflowNames,
+    failedWorkflows,
     isRunPending,
     handleRunBenchmark,
     handleResetRun,

packages/ui-components/src/components/benchmark/benchmark-ready-step.tsx

@@ -1,22 +1,46 @@
 import { BenchmarkRunPhase } from '@/lib/types';
 import { BenchmarkCreationResult } from '@openops/shared';
 import { t } from 'i18next';
+import { Link } from 'react-router-dom';
 import { StepDescription } from '../../ui/wizard/wizard-step';
 import { BenchmarkAnalyticsPhase } from './benchmark-analytics-phase';
 import { BenchmarkFailedPhase } from './benchmark-failed-phase';
 import { BenchmarkRunningPhase } from './benchmark-running-phase';
 import { BenchmarkWorkflowList } from './benchmark-workflow-list';
 
-const FailedWorkflowsList = ({ names }: { names: string[] }) => (
+export type FailedWorkflow = {
+  displayName: string;
+  runId?: string;
+};
+
+const FailedWorkflowsList = ({
+  workflows,
+}: {
+  workflows: FailedWorkflow[];
+}) => (
   <div className="flex flex-col gap-1 py-2">
     <p className="text-sm dark:text-muted-foreground font-medium">
       {t('The following workflows failed:')}
     </p>
     <ul className="list-disc pl-5 text-sm dark:text-muted-foreground">
-      {names.map((name) => (
-        <li key={name}>{name}</li>
+      {workflows.map((workflow) => (
+        <li key={workflow.displayName}>
+          {workflow.runId ? (
+            <Link
+              to={`/runs/${workflow.runId}`}
+              className="text-primary hover:underline"
+            >
+              {workflow.displayName}
+            </Link>
+          ) : (
+            workflow.displayName
+          )}
+        </li>
       ))}
     </ul>
+    <p className="text-sm dark:text-muted-foreground mt-1">
+      {t('Click on a workflow name to review failure details.')}
+    </p>
   </div>
 );
 
@@ -25,15 +49,15 @@ interface BenchmarkReadyStepProps {
   result: BenchmarkCreationResult;
   runPhase: BenchmarkRunPhase;
   runningProgress?: { completed: number; total: number };
-  failedWorkflowNames?: string[];
+  failedWorkflows?: FailedWorkflow[];
 }
 
 export const BenchmarkReadyStep = ({
   providerName,
   result,
   runPhase,
   runningProgress,
-  failedWorkflowNames,
+  failedWorkflows,
 }: BenchmarkReadyStepProps) => {
   const subWorkflows = result.workflows.filter(
     (w) => !w.isOrchestrator && !w.isCleanup,
@@ -71,11 +95,11 @@ export const BenchmarkReadyStep = ({
           <BenchmarkAnalyticsPhase
             provider={providerName}
             message={t(
-              "You can review your Benchmark Report here (it's not final since there are some failed workflows)",
+              'You can access the Benchmark Report here. Note: results only cover services from workflows that ran successfully.',
             )}
           />
-          {failedWorkflowNames && failedWorkflowNames.length > 0 && (
-            <FailedWorkflowsList names={failedWorkflowNames} />
+          {failedWorkflows && failedWorkflows.length > 0 && (
+            <FailedWorkflowsList workflows={failedWorkflows} />
           )}
         </>
       )}

packages/ui-components/src/stories/benchmark/benchmark-ready-step.stories.tsx

@@ -69,9 +69,15 @@ export const Failed: ReadyStepStory = { args: { runPhase: 'failed' } };
 export const SucceededWithFailures: ReadyStepStory = {
   args: {
     runPhase: 'succeeded_with_failures',
-    failedWorkflowNames: [
-      'EC2 Reserved Instances Analysis',
-      'S3 Storage Optimization',
+    failedWorkflows: [
+      {
+        displayName: 'EC2 Reserved Instances Analysis',
+        runId: 'run-001',
+      },
+      {
+        displayName: 'S3 Storage Optimization',
+        runId: 'run-002',
+      },
     ],
   },
 };