Add badge to show diagnostics issues count on workflow page (#975)

adhityamamallan · web-flow · commit 01b41cf82e9e · 2025-08-05T11:53:58.000+02:00
* Add Workflow Page Diagnostics Badge that displays diagnostics issues count on diagnostics tab
* Add new hook that calls useDiagnoseWorkflow to compute count of diagnostics issues
* Explicitly pass only domain, cluster, workflowId and runId to useDiagnoseWorkflow to correctly cache queries across sessions
diff --git a/src/views/shared/hooks/__tests__/use-workflow-diagnostics-issues-count.test.ts b/src/views/shared/hooks/__tests__/use-workflow-diagnostics-issues-count.test.ts
@@ -0,0 +1,198 @@
+import { createElement, Suspense } from 'react';
+
+import { HttpResponse } from 'msw';
+import { ZodError } from 'zod';
+
+import { renderHook, waitFor } from '@/test-utils/rtl';
+
+import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
+import { mockWorkflowDiagnosticsResult } from '@/route-handlers/diagnose-workflow/__fixtures__/mock-workflow-diagnostics-result';
+import { type DiagnoseWorkflowResponse } from '@/route-handlers/diagnose-workflow/diagnose-workflow.types';
+import { mockDescribeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
+
+import useWorkflowDiagnosticsIssuesCount from '../use-workflow-diagnostics-issues-count';
+
+describe(useWorkflowDiagnosticsIssuesCount.name, () => {
+  it('should return total issues count when diagnostics is enabled and workflow is closed', async () => {
+    const { result } = setup();
+
+    await waitFor(() => {
+      expect(result.current).toBe(5); // 5 issues from mockWorkflowDiagnosticsResult
+    });
+  });
+
+  it('should return undefined when diagnostics is disabled', async () => {
+    const { result } = setup({ isDiagnosticsEnabled: false });
+
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('should return undefined when workflow is not closed', async () => {
+    const { result } = setup({ isWorkflowClosed: false });
+
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('should return undefined when diagnostics has parsing error', async () => {
+    const { result } = setup({
+      diagnosticsResponse: {
+        result: mockWorkflowDiagnosticsResult,
+        parsingError: new ZodError([]),
+      },
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('should return undefined when diagnostics data is undefined', async () => {
+    const { result } = setup({ diagnosticsResponse: undefined });
+
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('should return 0 when diagnostics result has no issues', async () => {
+    const { result } = setup({
+      diagnosticsResponse: {
+        result: {
+          result: {
+            Timeouts: null,
+            Failures: null,
+            Retries: null,
+          },
+          completed: true,
+        },
+        parsingError: null,
+      },
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(0);
+    });
+  });
+
+  it('should handle config API errors gracefully', async () => {
+    const { result } = setup({ configError: true });
+
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('should handle describe workflow API errors gracefully', async () => {
+    const { result } = setup({ describeWorkflowError: true });
+
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('should handle diagnostics API errors gracefully', async () => {
+    const { result } = setup({ diagnosticsError: true });
+
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+});
+
+function setup({
+  isDiagnosticsEnabled = true,
+  isWorkflowClosed = true,
+  diagnosticsResponse = {
+    result: mockWorkflowDiagnosticsResult,
+    parsingError: null,
+  },
+  configError = false,
+  describeWorkflowError = false,
+  diagnosticsError = false,
+}: {
+  isDiagnosticsEnabled?: boolean;
+  isWorkflowClosed?: boolean;
+  diagnosticsResponse?: DiagnoseWorkflowResponse;
+  configError?: boolean;
+  describeWorkflowError?: boolean;
+  diagnosticsError?: boolean;
+} = {}) {
+  return renderHook(
+    () =>
+      useWorkflowDiagnosticsIssuesCount({
+        domain: 'test-domain',
+        cluster: 'test-cluster',
+        workflowId: 'test-workflow-id',
+        runId: 'test-run-id',
+      }),
+    {
+      endpointsMocks: [
+        {
+          path: '/api/config',
+          httpMethod: 'GET',
+          mockOnce: false,
+          httpResolver: async () => {
+            if (configError) {
+              return HttpResponse.json(
+                { message: 'Failed to fetch config' },
+                { status: 500 }
+              );
+            }
+            return HttpResponse.json(isDiagnosticsEnabled);
+          },
+        },
+        {
+          path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId',
+          httpMethod: 'GET',
+          mockOnce: false,
+          httpResolver: async () => {
+            if (describeWorkflowError) {
+              return HttpResponse.json(
+                { message: 'Failed to fetch workflow' },
+                { status: 500 }
+              );
+            }
+            return HttpResponse.json({
+              ...mockDescribeWorkflowResponse,
+              workflowExecutionInfo: {
+                ...mockDescribeWorkflowResponse.workflowExecutionInfo,
+                ...(isWorkflowClosed
+                  ? { closeStatus: 'WORKFLOW_EXECUTION_CLOSE_STATUS_FAILED' }
+                  : {
+                      closeStatus: 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID',
+                      closeEvent: null,
+                    }),
+              },
+            } satisfies DescribeWorkflowResponse);
+          },
+        },
+        ...(isDiagnosticsEnabled
+          ? [
+              {
+                path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId/diagnose',
+                httpMethod: 'GET' as const,
+                mockOnce: false,
+                httpResolver: async () => {
+                  if (diagnosticsError) {
+                    return HttpResponse.json(
+                      { message: 'Failed to fetch diagnostics' },
+                      { status: 500 }
+                    );
+                  }
+                  return HttpResponse.json(diagnosticsResponse);
+                },
+              },
+            ]
+          : []),
+      ],
+    },
+    {
+      wrapper: ({ children }) =>
+        createElement(Suspense, { fallback: 'Loading' }, children),
+    }
+  );
+}
diff --git a/src/views/shared/hooks/use-workflow-diagnostics-issues-count.ts b/src/views/shared/hooks/use-workflow-diagnostics-issues-count.ts
@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+
+import { useQuery } from '@tanstack/react-query';
+
+import useDiagnoseWorkflow from '@/views/workflow-diagnostics/hooks/use-diagnose-workflow/use-diagnose-workflow';
+import { type UseDiagnoseWorkflowParams } from '@/views/workflow-diagnostics/hooks/use-diagnose-workflow/use-diagnose-workflow.types';
+import { useDescribeWorkflow } from '@/views/workflow-page/hooks/use-describe-workflow';
+import getIsWorkflowDiagnosticsEnabledQueryOptions from '@/views/workflow-page/hooks/use-is-workflow-diagnostics-enabled/get-is-workflow-diagnostics-enabled-query-options';
+
+export default function useWorkflowDiagnosticsIssuesCount(
+  params: UseDiagnoseWorkflowParams
+): number | undefined {
+  const { data: isWorkflowDiagnosticsEnabled } = useQuery(
+    getIsWorkflowDiagnosticsEnabledQueryOptions()
+  );
+
+  const { data: describeWorkflowResponse } = useDescribeWorkflow(params);
+
+  const isWorkflowClosed = Boolean(
+    describeWorkflowResponse?.workflowExecutionInfo &&
+      describeWorkflowResponse.workflowExecutionInfo?.closeStatus &&
+      describeWorkflowResponse.workflowExecutionInfo.closeStatus !==
+        'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'
+  );
+
+  const { data: diagnoseWorkflowResponse } = useDiagnoseWorkflow(params, {
+    enabled: isWorkflowDiagnosticsEnabled && isWorkflowClosed,
+  });
+
+  const totalIssuesCount = useMemo(() => {
+    if (
+      !isWorkflowDiagnosticsEnabled ||
+      !describeWorkflowResponse ||
+      !isWorkflowClosed ||
+      !diagnoseWorkflowResponse ||
+      diagnoseWorkflowResponse?.parsingError
+    )
+      return undefined;
+
+    return Object.values(diagnoseWorkflowResponse.result.result).reduce(
+      (numIssuesSoFar, issuesGroup) => {
+        if (issuesGroup === null) return numIssuesSoFar;
+        return numIssuesSoFar + issuesGroup.issues.length;
+      },
+      0
+    );
+  }, [
+    describeWorkflowResponse,
+    isWorkflowDiagnosticsEnabled,
+    isWorkflowClosed,
+    diagnoseWorkflowResponse,
+  ]);
+
+  return totalIssuesCount;
+}
diff --git a/src/views/workflow-diagnostics/workflow-diagnostics.tsx b/src/views/workflow-diagnostics/workflow-diagnostics.tsx
@@ -17,25 +17,28 @@ import {
 } from './workflow-diagnostics.constants';
 
 export default function WorkflowDiagnostics({
-  params,
+  params: { domain, cluster, workflowId, runId },
 }: WorkflowPageTabContentProps) {
   const { data: isWorkflowDiagnosticsEnabled } =
     useSuspenseIsWorkflowDiagnosticsEnabled();
 
   const {
     data: { workflowExecutionInfo },
-  } = useSuspenseDescribeWorkflow(params);
+  } = useSuspenseDescribeWorkflow({ domain, cluster, workflowId, runId });
 
   const isWorkflowClosed = Boolean(
     workflowExecutionInfo?.closeStatus &&
       workflowExecutionInfo.closeStatus !==
         'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'
   );
 
-  const { data, status } = useDiagnoseWorkflow(params, {
-    enabled: isWorkflowDiagnosticsEnabled && isWorkflowClosed,
-    throwOnError: true,
-  });
+  const { data, status } = useDiagnoseWorkflow(
+    { domain, cluster, workflowId, runId },
+    {
+      enabled: isWorkflowDiagnosticsEnabled && isWorkflowClosed,
+      throwOnError: true,
+    }
+  );
 
   if (!isWorkflowDiagnosticsEnabled) {
     throw new Error(DIAGNOSTICS_CONFIG_DISABLED_ERROR_MSG);
@@ -56,8 +59,18 @@ export default function WorkflowDiagnostics({
   }
 
   return data.parsingError ? (
-    <WorkflowDiagnosticsFallback {...params} diagnosticsResult={data.result} />
+    <WorkflowDiagnosticsFallback
+      workflowId={workflowId}
+      runId={runId}
+      diagnosticsResult={data.result}
+    />
   ) : (
-    <WorkflowDiagnosticsContent {...params} diagnosticsResult={data.result} />
+    <WorkflowDiagnosticsContent
+      domain={domain}
+      cluster={cluster}
+      workflowId={workflowId}
+      runId={runId}
+      diagnosticsResult={data.result}
+    />
   );
 }
diff --git a/src/views/workflow-page/config/workflow-page-tabs.config.ts b/src/views/workflow-page/config/workflow-page-tabs.config.ts
@@ -14,6 +14,7 @@ import WorkflowStackTrace from '@/views/workflow-stack-trace/workflow-stack-trac
 import WorkflowSummaryTab from '@/views/workflow-summary-tab/workflow-summary-tab';
 
 import getWorkflowPageErrorConfig from '../helpers/get-workflow-page-error-config';
+import WorkflowPageDiagnosticsBadge from '../workflow-page-diagnostics-badge/workflow-page-diagnostics-badge';
 import WorkflowPagePendingEventsBadge from '../workflow-page-pending-events-badge/workflow-page-pending-events-badge';
 import type { WorkflowPageTabsConfig } from '../workflow-page-tabs/workflow-page-tabs.types';
 
@@ -45,6 +46,7 @@ const workflowPageTabsConfig: WorkflowPageTabsConfig<
   },
   diagnostics: {
     title: 'Diagnostics',
+    endEnhancer: WorkflowPageDiagnosticsBadge,
     artwork: RiStethoscopeLine,
     content: WorkflowDiagnostics,
     getErrorConfig: getWorkflowDiagnosticsErrorConfig,
diff --git a/src/views/workflow-page/workflow-page-diagnostics-badge/__tests__/workflow-page-diagnostics-badge.test.tsx b/src/views/workflow-page/workflow-page-diagnostics-badge/__tests__/workflow-page-diagnostics-badge.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import * as useWorkflowDiagnosticsIssuesCountModule from '@/views/shared/hooks/use-workflow-diagnostics-issues-count';
+
+import WorkflowPageDiagnosticsBadge from '../workflow-page-diagnostics-badge';
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useParams: () => ({
+    domain: 'mock-domain',
+    cluster: 'cluster_1',
+    workflowId: 'mock-workflow-id',
+    runId: 'mock-run-id',
+  }),
+}));
+
+jest.mock('@/views/shared/hooks/use-workflow-diagnostics-issues-count', () =>
+  jest.fn(() => undefined)
+);
+
+describe(WorkflowPageDiagnosticsBadge.name, () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render badge with singular issue text when count is 1', () => {
+    jest
+      .spyOn(useWorkflowDiagnosticsIssuesCountModule, 'default')
+      .mockReturnValue(1);
+
+    render(<WorkflowPageDiagnosticsBadge />);
+
+    expect(screen.getByText('1 issue')).toBeInTheDocument();
+  });
+
+  it('should render badge with plural issues text when count is greater than 1', () => {
+    jest
+      .spyOn(useWorkflowDiagnosticsIssuesCountModule, 'default')
+      .mockReturnValue(5);
+
+    render(<WorkflowPageDiagnosticsBadge />);
+
+    expect(screen.getByText('5 issues')).toBeInTheDocument();
+  });
+
+  it('should not render anything when issues count is undefined', () => {
+    jest
+      .spyOn(useWorkflowDiagnosticsIssuesCountModule, 'default')
+      .mockReturnValue(undefined);
+
+    const { container } = render(<WorkflowPageDiagnosticsBadge />);
+
+    expect(container.firstChild?.firstChild).toBeNull();
+  });
+
+  it('should not render anything when there are 0 issues', () => {
+    jest
+      .spyOn(useWorkflowDiagnosticsIssuesCountModule, 'default')
+      .mockReturnValue(0);
+
+    const { container } = render(<WorkflowPageDiagnosticsBadge />);
+
+    expect(container.firstChild?.firstChild).toBeNull();
+  });
+});
diff --git a/src/views/workflow-page/workflow-page-diagnostics-badge/workflow-page-diagnostics-badge.styles.ts b/src/views/workflow-page/workflow-page-diagnostics-badge/workflow-page-diagnostics-badge.styles.ts
diff --git a/src/views/workflow-page/workflow-page-diagnostics-badge/workflow-page-diagnostics-badge.tsx b/src/views/workflow-page/workflow-page-diagnostics-badge/workflow-page-diagnostics-badge.tsx
