Workflow stack trace (#689)

* workflow stack trace

* Add more unit tests

* remove console.log

* fix typecheck

Author: Assem-Hafez

src/components/page-section/page-section.styles.ts

@@ -4,12 +4,15 @@ import { getMediaQueryMargins } from '@/utils/media-query/get-media-queries-marg
 
 export const styled = {
   PageSection: createStyled('section', ({ $theme }: { $theme: Theme }) => ({
+    width: '100%',
+    margin: '0 auto',
+    paddingLeft: $theme.sizing.scale600,
+    paddingRight: $theme.sizing.scale600,
+    // override default styles by media query specific styles
     ...getMediaQueryMargins($theme, (margin) => ({
       maxWidth: `${$theme.grid.maxWidth + 2 * margin}px`,
       paddingRight: `${margin}px`,
       paddingLeft: `${margin}px`,
-      width: '100%',
-      margin: '0 auto',
     })),
   })),
 };

src/utils/grpc/grpc-error.ts

@@ -37,7 +37,7 @@ export type GRPCInputError = Error & {
 
 export function getHTTPStatusCode(error: unknown) {
   if (error instanceof GRPCError) {
-    return error.httpStatusCode;
+    return error.httpStatusCode || 500;
   }
   return 500;
 }

src/views/workflow-page/config/workflow-page-tabs-contents-map.config.ts

@@ -1,5 +1,6 @@
 import WorkflowHistory from '@/views/workflow-history/workflow-history';
 import WorkflowQueries from '@/views/workflow-queries/workflow-queries';
+import WorkflowStackTrace from '@/views/workflow-stack-trace/workflow-stack-trace';
 import WorkflowSummaryTab from '@/views/workflow-summary-tab/workflow-summary-tab';
 
 import type { WorkflowPageTabsContentsMap } from '../workflow-page-tab-content/workflow-page-tab-content.types';
@@ -8,6 +9,7 @@ const workflowPageTabsContentsMapConfig = {
   summary: WorkflowSummaryTab,
   history: WorkflowHistory,
   queries: WorkflowQueries,
+  stackTrace: WorkflowStackTrace,
 } as const satisfies WorkflowPageTabsContentsMap;
 
 export default workflowPageTabsContentsMapConfig;

src/views/workflow-page/config/workflow-page-tabs-error.config.ts

@@ -8,6 +8,8 @@ const workflowPageTabsErrorConfig: WorkflowPageTabsErrorConfig = {
     getWorkflowPageErrorConfig(err, 'Failed to load workflow history'),
   queries: (err) =>
     getWorkflowPageErrorConfig(err, 'Failed to load workflow queries'),
+  stackTrace: (err) =>
+    getWorkflowPageErrorConfig(err, 'Failed to load workflow stack trace'),
 } as const;
 
 export default workflowPageTabsErrorConfig;

src/views/workflow-page/config/workflow-page-tabs.config.ts

@@ -2,6 +2,7 @@ import {
   MdListAlt,
   MdOutlineHistory,
   MdOutlineManageSearch,
+  MdOutlineTerminal,
 } from 'react-icons/md';
 
 import type { WorkflowPageTabs } from '../workflow-page-tabs/workflow-page-tabs.types';
@@ -22,6 +23,11 @@ const workflowPageTabsConfig = [
     title: 'Queries',
     artwork: MdOutlineManageSearch,
   },
+  {
+    key: 'stackTrace',
+    title: 'Stack Trace',
+    artwork: MdOutlineTerminal,
+  },
 ] as const satisfies WorkflowPageTabs;
 
 export default workflowPageTabsConfig;

src/views/workflow-page/workflow-page-tabs-error/__tests__/workflow-page-tabs-error.test.tsx

@@ -33,6 +33,9 @@ jest.mock(
       queries: () => ({
         message: 'queries error',
       }),
+      stackTrace: () => ({
+        message: 'stackTrace error',
+      }),
     }) as const satisfies WorkflowPageTabsErrorConfig
 );
 

src/views/workflow-stack-trace/__tests__/workflow-stack-trace.test.tsx

@@ -0,0 +1,179 @@
+import { Suspense } from 'react';
+
+import { HttpResponse } from 'msw';
+
+import {
+  render,
+  screen,
+  userEvent,
+  waitForElementToBeRemoved,
+} from '@/test-utils/rtl';
+
+import { type QueryWorkflowResponse } from '@/route-handlers/query-workflow/query-workflow.types';
+
+import WorkflowStackTrace from '../workflow-stack-trace';
+
+jest.mock('@/components/error-panel/error-panel', () =>
+  jest.fn(() => <div>Error Panel</div>)
+);
+
+jest.mock('baseui/skeleton', () => ({
+  Skeleton: jest.fn(() => <div>Loading Skeleton</div>),
+}));
+jest.mock('baseui/spinner', () => ({
+  Spinner: jest.fn(() => <div data-testid="spinner"></div>),
+}));
+
+describe('WorkflowStackTrace', () => {
+  it('should render correctly with no fetching or error', async () => {
+    await setup({ resultStackTrace: 'result stack trace' });
+    expect(screen.getByText(/Last updated/)).toBeInTheDocument();
+    expect(screen.getByText('result stack trace')).toBeInTheDocument();
+    expect(screen.queryByText('Error Panel')).not.toBeInTheDocument();
+    expect(screen.queryByText('Loading Skeleton')).not.toBeInTheDocument();
+  });
+
+  it('should show loading state on refetch', async () => {
+    const { getRequestResolver } = await setup({
+      resolveRefreshManually: true,
+    });
+
+    const button = await screen.findByRole('button', { name: /Refresh/i });
+    await userEvent.click(button);
+    expect(screen.getByText('Loading Skeleton')).toBeInTheDocument();
+    expect(screen.queryByText('Error Panel')).not.toBeInTheDocument();
+    expect(screen.queryByText('test stack trace')).not.toBeInTheDocument();
+
+    const refetchResolver = getRequestResolver();
+    refetchResolver();
+    expect(await screen.findByText('test stack trace')).toBeInTheDocument();
+    expect(screen.queryByText('Loading Skeleton')).not.toBeInTheDocument();
+    expect(screen.queryByText('Error Panel')).not.toBeInTheDocument();
+  });
+
+  it('should disable the refresh button when refetching', async () => {
+    await setup({
+      resolveRefreshManually: true,
+    });
+
+    const refreshButton = await screen.findByRole('button', {
+      name: /Refresh/i,
+    });
+    await userEvent.click(refreshButton);
+
+    expect(refreshButton).toBeDisabled();
+  });
+
+  it('should show error state when refetch fails', async () => {
+    const { getRequestRejector } = await setup({
+      resolveRefreshManually: true,
+    });
+    const button = await screen.findByRole('button', { name: /Refresh/i });
+    await userEvent.click(button);
+    const refetchRejector = getRequestRejector();
+    refetchRejector();
+
+    expect(await screen.findByText('Error Panel')).toBeInTheDocument();
+    expect(screen.queryByText('Loading Skeleton')).not.toBeInTheDocument();
+  });
+  it('should display no stack trace when data.result is null or empty', async () => {
+    await setup({
+      resultStackTrace: '',
+    });
+    expect(screen.getByText('No stack trace...')).toBeInTheDocument();
+  });
+
+  it('should show spinner on refresh button when fetching', async () => {
+    await setup({
+      resolveRefreshManually: true,
+    });
+
+    const refreshButton = await screen.findByRole('button', {
+      name: /Refresh/i,
+    });
+    await userEvent.click(refreshButton);
+
+    expect(screen.getByTestId('spinner')).toBeInTheDocument();
+  });
+});
+
+async function setup({
+  initReqError,
+  resolveRefreshManually,
+  resultStackTrace = 'test stack trace',
+}: {
+  initReqError?: boolean;
+  resolveRefreshManually?: boolean;
+  resultStackTrace?: string;
+}) {
+  let requestResolver = () => {};
+  let requestRejector = () => {};
+  const getRequestResolver = () => requestResolver;
+  const getRequestRejector = () => requestRejector;
+  let requestIndex = -1;
+  render(
+    <Suspense fallback="Suspense placeholder">
+      <WorkflowStackTrace
+        params={{
+          domain: 'test-domain',
+          cluster: 'test-cluster',
+          runId: 'test-runid',
+          workflowId: 'test-workflowId',
+          workflowTab: 'stackTrace',
+        }}
+      />
+    </Suspense>,
+    {
+      endpointsMocks: [
+        {
+          path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId/query/__stack_trace',
+          httpMethod: 'POST',
+          mockOnce: false,
+          httpResolver: async () => {
+            requestIndex = requestIndex + 1;
+            if (requestIndex === 0 && initReqError)
+              return HttpResponse.json(
+                { message: 'Failed to fetch workflow stack trace' },
+                { status: 500 }
+              );
+
+            if (requestIndex > 0 && resolveRefreshManually) {
+              await new Promise((resolve, reject) => {
+                requestResolver = () =>
+                  resolve(
+                    HttpResponse.json(
+                      {
+                        rejected: null,
+                        result: resultStackTrace,
+                      } satisfies QueryWorkflowResponse,
+                      { status: 200 }
+                    )
+                  );
+                requestRejector = () =>
+                  reject(
+                    HttpResponse.json(
+                      { message: 'Failed to fetch workflow stack trace' },
+                      { status: 500 }
+                    )
+                  );
+              });
+            }
+            return HttpResponse.json(
+              {
+                rejected: null,
+                result: resultStackTrace,
+              } satisfies QueryWorkflowResponse,
+              { status: 200 }
+            );
+          },
+        },
+      ],
+    }
+  );
+
+  await waitForElementToBeRemoved(() =>
+    screen.queryAllByText('Suspense placeholder')
+  );
+
+  return { getRequestResolver, getRequestRejector };
+}

src/views/workflow-stack-trace/workflow-stack-trace.styles.ts

@@ -0,0 +1,46 @@
+import { type Theme } from 'baseui';
+import { type SkeletonOverrides } from 'baseui/skeleton/types';
+import { type StyleObject } from 'styletron-react';
+
+import type {
+  StyletronCSSObject,
+  StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+export const overrides = {
+  loadingSkeleton: {
+    Root: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        borderRadius: $theme.borders.radius300,
+        marginTop: $theme.sizing.scale600,
+        height: '100%',
+      }),
+    },
+  } satisfies SkeletonOverrides,
+};
+
+const cssStylesObj = {
+  pageContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  pageHeader: (theme) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    gap: theme.sizing.scale500,
+  }),
+  stackTrace: (theme) => ({
+    backgroundColor: theme.colors.backgroundSecondary,
+    padding: theme.sizing.scale800,
+    borderRadius: theme.borders.radius300,
+    marginTop: theme.sizing.scale600,
+    color: theme.colors.contentSecondary,
+    flex: 1,
+  }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+  cssStylesObj;

src/views/workflow-stack-trace/workflow-stack-trace.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Button } from 'baseui/button';
+import { Skeleton } from 'baseui/skeleton';
+import { Spinner } from 'baseui/spinner';
+import { LabelSmall } from 'baseui/typography';
+import { MdRefresh } from 'react-icons/md';
+
+import ErrorPanel from '@/components/error-panel/error-panel';
+import PageSection from '@/components/page-section/page-section';
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+import { type QueryWorkflowResponse } from '@/route-handlers/query-workflow/query-workflow.types';
+import formatDate from '@/utils/data-formatters/format-date';
+import request from '@/utils/request';
+import { type RequestError } from '@/utils/request/request-error';
+import { type WorkflowPageTabContentProps } from '@/views/workflow-page/workflow-page-tab-content/workflow-page-tab-content.types';
+
+import { cssStyles, overrides } from './workflow-stack-trace.styles';
+
+export default function WorkflowStackTrace(props: WorkflowPageTabContentProps) {
+  const { domain, cluster, workflowId, runId } = props.params;
+
+  const { data, refetch, isFetching, dataUpdatedAt, isError, isSuccess } =
+    useSuspenseQuery<
+      QueryWorkflowResponse,
+      RequestError,
+      QueryWorkflowResponse,
+      [
+        string,
+        Pick<
+          WorkflowPageTabContentProps['params'],
+          'cluster' | 'domain' | 'runId' | 'workflowId'
+        >,
+      ]
+    >({
+      queryKey: [
+        'workflow_stack_trace',
+        { domain, cluster, workflowId, runId },
+      ] as const,
+      queryFn: () => {
+        return request(
+          `/api/domains/${domain}/${cluster}/workflows/${workflowId}/${runId}/query/__stack_trace`,
+          {
+            method: 'POST',
+          }
+        ).then((res) => res.json());
+      },
+    });
+
+  const { cls } = useStyletronClasses(cssStyles);
+  return (
+    <PageSection className={cls.pageContainer}>
+      <div className={cls.pageHeader}>
+        {Boolean(dataUpdatedAt) && (
+          <LabelSmall suppressHydrationWarning>
+            Last updated {formatDate(dataUpdatedAt)}
+          </LabelSmall>
+        )}
+        <Button
+          shape="pill"
+          size="mini"
+          kind="secondary"
+          startEnhancer={<MdRefresh size={12} />}
+          endEnhancer={isFetching && <Spinner $size={12} />}
+          disabled={isFetching}
+          onClick={() => refetch()}
+        >
+          Refresh
+        </Button>
+      </div>
+      {isFetching && (
+        <Skeleton overrides={overrides.loadingSkeleton} animation />
+      )}
+      {!isFetching && isError && (
+        <ErrorPanel message="Failed to load stack trace" />
+      )}
+      {!isFetching && isSuccess && (
+        <div className={cls.stackTrace}>
+          <pre>{String(data.result) || 'No stack trace...'}</pre>
+        </div>
+      )}
+    </PageSection>
+  );
+}