@orchestrator-ui/orchestrator-ui-components 0.2.7 → 0.3.1

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -9,14 +9,13 @@ import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
-    WfoLoading,
     WfoProductBlockBadge,
 } from '../../components';
 import { WfoTableWithFilter } from '../../components';
 import {
     getDataSortHandler,
-    getEsQueryStringHandler,
     getPageChangeHandler,
+    getQueryStringHandler,
 } from '../../components';
 import type { WfoDataSorting, WfoTableColumns } from '../../components';
 import { StoredTableConfig } from '../../components';
@@ -136,30 +135,29 @@ export const WfoWorkflowsPage = () => {
         },
     };
 
-    const { data, isFetching } = useQueryWithGraphql(
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
+    const { data, isLoading, isError } = useQueryWithGraphql(
         GET_WORKFLOWS_GRAPHQL_QUERY,
         {
-            first: dataDisplayParams.pageSize,
-            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            sortBy: graphQlWorkflowListMapper(dataDisplayParams.sortBy),
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: graphQlWorkflowListMapper(sortBy),
+            query: queryString || undefined,
         },
         'workflows',
     );
 
-    if (!data) {
-        return <WfoLoading />;
-    }
-
     const dataSorting: WfoDataSorting<WorkflowListItem> = {
-        field: dataDisplayParams.sortBy?.field ?? 'name',
-        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+        field: sortBy?.field ?? 'name',
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
-    const { totalItems, sortFields, filterFields } = data.workflows.pageInfo;
+    const { totalItems, sortFields, filterFields } =
+        data?.workflows?.pageInfo || {};
 
     const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
-        pageIndex: dataDisplayParams.pageIndex,
+        pageSize: pageSize,
+        pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
     };
@@ -167,7 +165,7 @@ export const WfoWorkflowsPage = () => {
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<WorkflowListItem>
-                data={mapWorkflowDefinitionToWorkflowListItem(data)}
+                data={data ? mapWorkflowDefinitionToWorkflowListItem(data) : []}
                 tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
@@ -181,12 +179,13 @@ export const WfoWorkflowsPage = () => {
                 onUpdatePage={getPageChangeHandler<WorkflowListItem>(
                     setDataDisplayParam,
                 )}
-                onUpdateEsQueryString={getEsQueryStringHandler<WorkflowListItem>(
+                onUpdateQueryString={getQueryStringHandler<WorkflowListItem>(
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isFetching}
-                esQueryString={dataDisplayParams.esQueryString}
+                isLoading={isLoading}
+                hasError={isError}
+                queryString={queryString}
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}
             />
         </WfoMetadataPageLayout>

package/src/pages/processes/WfoProcessDetail.tsx

@@ -15,16 +15,21 @@ import {
 
 import {
     PATH_TASKS,
+    PATH_WORKFLOWS,
     TimelineItem,
     WfoLoading,
     WfoTimeline,
-} from '../../components';
-import ConfirmationDialogContext from '../../contexts/ConfirmationDialogProvider';
-import { useOrchestratorTheme } from '../../hooks';
-import { useDeleteProcess } from '../../hooks/ProcessesHooks/useDeleteProcess';
-import { WfoPlayFill, WfoRefresh, WfoXCircleFill } from '../../icons';
-import { ProcessDetail, ProcessStatus } from '../../types';
-import { parseDateRelativeToToday, parseIsoString } from '../../utils';
+} from '@/components';
+import { ConfirmationDialogContext } from '@/contexts';
+import {
+    useCheckEngineStatus,
+    useMutateProcess,
+    useOrchestratorTheme,
+} from '@/hooks';
+import { WfoRefresh, WfoXCircleFill } from '@/icons';
+import { ProcessDetail, ProcessStatus } from '@/types';
+import { parseDateRelativeToToday, parseIsoString } from '@/utils';
+
 import {
     RenderDirection,
     WfoProcessListSubscriptionsCell,
@@ -75,6 +80,8 @@ interface ProcessDetailProps {
     processDetail: Partial<ProcessDetail> | undefined;
     timelineItems: TimelineItem[];
     onTimelineItemClick?: (id: string) => void;
+    isLoading?: boolean;
+    hasError?: boolean;
 }
 
 export const WfoProcessDetail = ({
@@ -85,12 +92,87 @@ export const WfoProcessDetail = ({
     buttonsAreDisabled,
     timelineItems,
     onTimelineItemClick,
+    isLoading = false,
+    hasError = false,
 }: ProcessDetailProps) => {
     const t = useTranslations('processes.detail');
     const { theme } = useOrchestratorTheme();
     const { showConfirmDialog } = useContext(ConfirmationDialogContext);
-    const { mutate } = useDeleteProcess();
+    const { deleteProcess, abortProcess, retryProcess } = useMutateProcess();
     const router = useRouter();
+    const { isEngineRunningNow } = useCheckEngineStatus();
+
+    const listIncludesStatus = (
+        processStatusesForDisabledState: ProcessStatus[],
+        status?: string,
+    ): boolean =>
+        status
+            ? processStatusesForDisabledState
+                  .map((stat) => stat.toUpperCase())
+                  .includes(status)
+            : false;
+
+    const retryButtonIsDisabled =
+        buttonsAreDisabled ||
+        !listIncludesStatus([ProcessStatus.FAILED], processDetail?.lastStatus);
+    const abortButtonIsDisabled =
+        buttonsAreDisabled ||
+        listIncludesStatus(
+            [ProcessStatus.COMPLETED, ProcessStatus.ABORTED],
+            processDetail?.lastStatus,
+        );
+    const deleteButtonIsDisabled =
+        buttonsAreDisabled ||
+        listIncludesStatus([ProcessStatus.RUNNING], processDetail?.lastStatus);
+
+    const processIsTask = processDetail?.isTask === true;
+
+    const handleActionButtonClick = (action: () => void) => async () => {
+        if (await isEngineRunningNow()) {
+            action();
+        }
+    };
+
+    const retryAction = () =>
+        showConfirmDialog({
+            question: t(
+                processIsTask ? 'retryTaskQuestion' : 'retryWorkflowQuestion',
+                {
+                    workflowName: processDetail?.workflowName,
+                },
+            ),
+            confirmAction: () => {
+                processDetail?.processId &&
+                    retryProcess.mutate(processDetail.processId);
+            },
+        });
+
+    const abortAction = () =>
+        showConfirmDialog({
+            question: t(
+                processIsTask ? 'abortTaskQuestion' : 'abortWorkflowQuestion',
+                {
+                    workflowName: processDetail?.workflowName,
+                },
+            ),
+            confirmAction: () => {
+                processDetail?.processId &&
+                    abortProcess.mutate(processDetail.processId);
+                router.push(processIsTask ? PATH_TASKS : PATH_WORKFLOWS);
+            },
+        });
+
+    const deleteAction = () =>
+        showConfirmDialog({
+            question: t('deleteQuestion', {
+                workflowName: processDetail?.workflowName,
+            }),
+            confirmAction: () => {
+                processDetail?.processId &&
+                    deleteProcess.mutate(processDetail.processId);
+                router.push(PATH_TASKS);
+            },
+        });
 
     return (
         <>
@@ -107,111 +189,50 @@ export const WfoProcessDetail = ({
                     gutterSize="s"
                 >
                     <EuiButton
-                        onClick={(
-                            e: React.MouseEvent<
-                                HTMLButtonElement | HTMLElement,
-                                MouseEvent
-                            >,
-                        ) => {
-                            e.preventDefault();
-                            alert('TODO: Implement retry');
-                        }}
+                        onClick={handleActionButtonClick(retryAction)}
                         iconType={() => (
                             <WfoRefresh
                                 color={
-                                    buttonsAreDisabled
+                                    retryButtonIsDisabled
                                         ? theme.colors.subduedText
                                         : theme.colors.link
                                 }
                             />
                         )}
-                        isDisabled={buttonsAreDisabled}
+                        isDisabled={retryButtonIsDisabled}
                     >
                         {t('retry')}
                     </EuiButton>
                     <EuiButton
-                        onClick={(
-                            e: React.MouseEvent<
-                                HTMLButtonElement | HTMLElement,
-                                MouseEvent
-                            >,
-                        ) => {
-                            e.preventDefault();
-                            alert('TODO: Implement resume');
-                        }}
-                        iconType={() => (
-                            <WfoPlayFill
-                                color={
-                                    buttonsAreDisabled
-                                        ? theme.colors.subduedText
-                                        : theme.colors.link
-                                }
-                            />
-                        )}
-                        isDisabled={buttonsAreDisabled}
-                    >
-                        {t('resume')}
-                    </EuiButton>
-                    <EuiButton
-                        onClick={(
-                            e: React.MouseEvent<
-                                HTMLButtonElement | HTMLElement,
-                                MouseEvent
-                            >,
-                        ) => {
-                            e.preventDefault();
-                            alert('TODO: Implement abort');
-                        }}
+                        onClick={handleActionButtonClick(abortAction)}
                         iconType={() => (
                             <WfoXCircleFill
                                 color={
-                                    buttonsAreDisabled
+                                    abortButtonIsDisabled
                                         ? theme.colors.subduedText
                                         : theme.colors.danger
                                 }
                             />
                         )}
                         color="danger"
-                        isDisabled={buttonsAreDisabled}
+                        isDisabled={abortButtonIsDisabled}
                     >
                         {t('abort')}
                     </EuiButton>
-                    {processDetail && processDetail.isTask === true && (
+                    {processDetail && processIsTask && (
                         <EuiButton
-                            onClick={(
-                                e: React.MouseEvent<
-                                    HTMLButtonElement | HTMLElement,
-                                    MouseEvent
-                                >,
-                            ) => {
-                                e.preventDefault();
-                                showConfirmDialog({
-                                    question: t('deleteQuestion', {
-                                        workflowName:
-                                            processDetail?.workflowName,
-                                    }),
-                                    confirmAction: () => {
-                                        processDetail.processId &&
-                                            mutate(processDetail.processId);
-                                        router.push(PATH_TASKS);
-                                    },
-                                });
-                            }}
+                            onClick={handleActionButtonClick(deleteAction)}
                             iconType={() => (
                                 <WfoXCircleFill
                                     color={
-                                        buttonsAreDisabled
+                                        deleteButtonIsDisabled
                                             ? theme.colors.subduedText
                                             : theme.colors.danger
                                     }
                                 />
                             )}
                             color="danger"
-                            isDisabled={
-                                buttonsAreDisabled ||
-                                processDetail.lastStatus ===
-                                    ProcessStatus.RUNNING
-                            }
+                            isDisabled={deleteButtonIsDisabled}
                         >
                             {t('delete')}
                         </EuiButton>
@@ -226,7 +247,7 @@ export const WfoProcessDetail = ({
                 color="subdued"
                 element="div"
             >
-                {(processDetail === undefined && <WfoLoading />) ||
+                {(isLoading && !hasError && <WfoLoading />) ||
                     (processDetail !== undefined && (
                         <EuiFlexGroup direction="row" gutterSize="m">
                             <ProcessHeaderValue

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -1,14 +1,14 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { TimelineItem, WfoError, WfoLoading } from '@/components';
 
-import { TimelineItem, WfoLoading } from '../../components';
 import {
     WfoStepListRef,
     WfoWorkflowStepList,
 } from '../../components/WfoWorkflowSteps';
-import { OrchestratorConfigContext } from '../../contexts';
 import { GET_PROCESS_DETAIL_GRAPHQL_QUERY } from '../../graphqlQueries';
 import { useQueryWithGraphql } from '../../hooks';
-import { ProcessDoneStatuses, Step } from '../../types';
+import { ProcessDoneStatuses, ProcessStatus, Step } from '../../types';
 import { getProductNamesFromProcess } from '../../utils';
 import { WfoProcessDetail } from './WfoProcessDetail';
 import {
@@ -20,43 +20,56 @@ export type GroupedStep = {
     steps: Step[];
 };
 
+const PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL = 3000;
+
 interface WfoProcessDetailPageProps {
     processId: string;
+    processDetailRefetchInterval?: number;
 }
 
 export const WfoProcessDetailPage = ({
     processId,
+    processDetailRefetchInterval = PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL,
 }: WfoProcessDetailPageProps) => {
-    const { dataRefetchInterval } = useContext(OrchestratorConfigContext);
     const stepListRef = useRef<WfoStepListRef>(null);
-    const [fetchInterval, setFetchInterval] = useState<number | undefined>(
-        dataRefetchInterval.processDetail,
-    );
-    const { data, isFetching } = useQueryWithGraphql(
+    const [fetchInterval, setFetchInterval] = useState<number | undefined>();
+    const { data, isLoading, isError } = useQueryWithGraphql(
         GET_PROCESS_DETAIL_GRAPHQL_QUERY,
         {
             processId,
         },
         'processDetail',
-        fetchInterval,
+        { refetchInterval: fetchInterval, refetchOnWindowFocus: false },
     );
 
+    if (isError) {
+        if (fetchInterval) {
+            setFetchInterval(undefined);
+        }
+    }
+
     useEffect(() => {
-        const lastStatus = data?.processes.page[0].lastStatus;
+        const process = data?.processes.page[0];
+        // We need to cast here because the backend might return the string in upperCase and
+        // toLowerCase() will converts the value type to string
+        const lastStatus =
+            process?.lastStatus.toLocaleLowerCase() as ProcessStatus;
+
         const isInProgress = !(
             lastStatus && ProcessDoneStatuses.includes(lastStatus)
         );
+
         setFetchInterval(
-            isInProgress ? dataRefetchInterval.processDetail : undefined,
+            isInProgress ? processDetailRefetchInterval : undefined,
         );
-    }, [data, dataRefetchInterval.processDetail]);
+    }, [data, processDetailRefetchInterval]);
 
     const process = data?.processes.page[0];
     const steps = process?.steps ?? [];
 
     const productNames = getProductNamesFromProcess(process);
     const pageTitle = process?.workflowName || '';
-
+    const isTask = process?.isTask ?? false;
     const groupedSteps: GroupedStep[] = convertStepsToGroupedSteps(steps);
     const timelineItems: TimelineItem[] =
         mapGroupedStepsToTimelineItems(groupedSteps);
@@ -65,14 +78,17 @@ export const WfoProcessDetailPage = ({
         <WfoProcessDetail
             pageTitle={pageTitle}
             productNames={productNames}
-            buttonsAreDisabled={isFetching && !process}
+            buttonsAreDisabled={isLoading || isError}
             processDetail={process}
             timelineItems={timelineItems}
             onTimelineItemClick={(id: string) =>
                 stepListRef.current?.scrollToStep(id)
             }
+            isLoading={isLoading}
+            hasError={isError}
         >
-            {(isFetching && !process && <WfoLoading />) ||
+            {(isError && <WfoError />) ||
+                (isLoading && <WfoLoading />) ||
                 (process !== undefined && (
                     <WfoWorkflowStepList
                         ref={stepListRef}
@@ -80,9 +96,11 @@ export const WfoProcessDetailPage = ({
                         steps={groupedSteps.flatMap(
                             (groupedStep) => groupedStep.steps,
                         )}
+                        userInputForm={process.form}
                         startedAt={process.startedAt}
+                        isTask={isTask}
                     />
-                ))}
+                )) || <h1>Invalid processId</h1>}
         </WfoProcessDetail>
     );
 };