@orchestrator-ui/orchestrator-ui-components 0.2.6 → 0.3.0

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,
@@ -89,8 +94,81 @@ export const WfoProcessDetail = ({
     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 +185,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>

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -42,7 +42,7 @@ export const WfoProcessDetailPage = ({
     );
 
     useEffect(() => {
-        const lastStatus = data?.processes.page[0].lastStatus;
+        const lastStatus = data?.processes?.page[0]?.lastStatus;
         const isInProgress = !(
             lastStatus && ProcessDoneStatuses.includes(lastStatus)
         );
@@ -56,7 +56,7 @@ export const WfoProcessDetailPage = ({
 
     const productNames = getProductNamesFromProcess(process);
     const pageTitle = process?.workflowName || '';
-
+    const isTask = process?.isTask ?? false;
     const groupedSteps: GroupedStep[] = convertStepsToGroupedSteps(steps);
     const timelineItems: TimelineItem[] =
         mapGroupedStepsToTimelineItems(groupedSteps);
@@ -80,9 +80,11 @@ export const WfoProcessDetailPage = ({
                         steps={groupedSteps.flatMap(
                             (groupedStep) => groupedStep.steps,
                         )}
+                        userInputForm={process.form}
                         startedAt={process.startedAt}
+                        isTask={isTask}
                     />
-                ))}
+                )) || <h1>Invalid processId</h1>}
         </WfoProcessDetail>
     );
 };

package/src/pages/{workflow/WfoStartWorkflowPage.tsx → processes/WfoStartProcessPage.tsx}

@@ -1,8 +1,9 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { JSONSchema6 } from 'json-schema';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
+import { ParsedUrlQuery } from 'querystring';
 
 import {
     EuiFlexGroup,
@@ -12,16 +13,24 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { TimelineItem, WfoLoading } from '../../components';
-import { PATH_PROCESSES } from '../../components';
+import { PATH_TASKS, TimelineItem, WfoLoading } from '@/components';
+import { PATH_WORKFLOWS } from '@/components';
+import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
+import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
+import { getStyles } from '@/components/WfoWorkflowSteps/styles';
+import { GET_PROCESS_STEPS_GRAPHQL_QUERY } from '@/graphqlQueries';
+import { useOrchestratorTheme, useQueryWithGraphql } from '@/hooks';
+import {
+    EngineStatus,
+    ProcessDetail,
+    ProcessStatus,
+    StartProcessStep,
+    StepStatus,
+} from '@/types';
+import { FormNotCompleteResponse } from '@/types/forms';
+
 import UserInputFormWizard from '../../components/WfoForms/UserInputFormWizard';
-import { useAxiosApiClient } from '../../components/WfoForms/useAxiosApiClient';
-import { WfoStepStatusIcon } from '../../components/WfoWorkflowSteps/WfoStepStatusIcon';
-import { getStyles } from '../../components/WfoWorkflowSteps/styles';
-import { EngineStatus, useOrchestratorTheme } from '../../hooks';
-import { ProcessDetail, ProcessStatus, StepStatus } from '../../types';
-import { FormNotCompleteResponse } from '../../types/forms';
-import { WfoProcessDetail } from '../processes/WfoProcessDetail';
+import { WfoProcessDetail } from './WfoProcessDetail';
 
 type StartCreateWorkflowPayload = {
     product: string;
@@ -34,9 +43,14 @@ type StartWorkflowPayload =
     | StartCreateWorkflowPayload
     | StartModifyWorkflowPayload;
 
-interface WfoStartWorkflowPageProps {
-    workflowName: string;
-    startWorkflowPayload?: StartWorkflowPayload;
+interface StartProcessPageQuery extends ParsedUrlQuery {
+    productId?: string;
+    subscriptionId?: string;
+}
+
+interface WfoStartProcessPageProps {
+    processName: string;
+    isTask?: boolean;
 }
 
 export interface UserInputForm {
@@ -44,26 +58,68 @@ export interface UserInputForm {
     hasNext?: boolean;
 }
 
-export const WfoStartWorkflowPage = ({
-    workflowName,
-    startWorkflowPayload,
-}: WfoStartWorkflowPageProps) => {
+const getInitialProcessPayload = ({
+    productId,
+    subscriptionId,
+}: StartProcessPageQuery): StartWorkflowPayload | undefined => {
+    if (productId) {
+        return {
+            product: productId,
+        };
+    }
+    if (subscriptionId) {
+        return {
+            subscription_id: subscriptionId,
+        };
+    }
+    return undefined;
+};
+
+export const WfoStartProcessPage = ({
+    processName,
+    isTask = false,
+}: WfoStartProcessPageProps) => {
     const apiClient = useAxiosApiClient();
     const t = useTranslations('processes.steps');
     const router = useRouter();
     const { theme } = useOrchestratorTheme();
     const [form, setForm] = useState<UserInputForm>({});
+    const { productId, subscriptionId } = router.query as StartProcessPageQuery;
+
+    const startProcessPayload = useMemo(
+        () => getInitialProcessPayload({ productId, subscriptionId }),
+        [productId, subscriptionId],
+    );
+
     const { stepUserInput, hasNext } = form;
     const { getStepHeaderStyle, stepListContentBoldTextStyle } =
         getStyles(theme);
 
+    const { data, isFetched } = useQueryWithGraphql(
+        GET_PROCESS_STEPS_GRAPHQL_QUERY,
+        {
+            processName,
+        },
+        `processSteps={processName}`,
+    );
+
+    const timeLineItems: TimelineItem[] =
+        data?.workflows?.page[0]?.steps && isFetched
+            ? data.workflows.page[0].steps.map(({ name }: StartProcessStep) => {
+                  return {
+                      processStepStatus: StepStatus.PENDING,
+                      stepDetail: name,
+                  };
+              })
+            : [];
+
     const submit = useCallback(
         (processInput: object[]) => {
-            const startWorkflowPromise = apiClient
+            const startProcessPromise = apiClient
                 .startProcess(
-                    workflowName,
-                    startWorkflowPayload
-                        ? [startWorkflowPayload, ...processInput]
+                    processName,
+                    startProcessPayload
+                        ? [startProcessPayload, ...processInput]
                         : [...processInput],
                 )
                 .then(
@@ -72,11 +128,15 @@ export const WfoStartWorkflowPage = ({
                         const process = result as { id: string };
                         // TODO: Use toast hook to display success message
                         if (process.id) {
+                            // eslint-disable-next-line no-console
                             console.log(
                                 'resolver successfullly!: ',
                                 process.id,
                             );
-                            router.push(`${PATH_PROCESSES}/${process.id}`);
+                            const basePath = isTask
+                                ? PATH_TASKS
+                                : PATH_WORKFLOWS;
+                            router.push(`${basePath}/${process.id}`);
                         }
                     },
                     // Reject handler
@@ -88,20 +148,20 @@ export const WfoStartWorkflowPage = ({
             // Catch a 503: Service unavailable error indicating the engine is down. This rethrows other errors
             // if it's not 503 so we can catch the special 510 error in the catchErrorStatus call in the useEffect hook
             return apiClient.catchErrorStatus<EngineStatus>(
-                startWorkflowPromise,
+                startProcessPromise,
                 503,
                 (json) => {
                     // TODO: Use the toastMessage hook to display an engine down error message
-                    console.log('engine down!!!', json);
-                    router.push(PATH_PROCESSES);
+                    console.error('engine down!!!', json);
+                    router.push(PATH_WORKFLOWS);
                 },
             );
         },
-        [apiClient, workflowName, startWorkflowPayload, router],
+        [apiClient, processName, startProcessPayload, isTask, router],
     );
 
     useEffect(() => {
-        if (workflowName) {
+        if (processName) {
             const clientResultCallback = (json: FormNotCompleteResponse) => {
                 setForm({
                     stepUserInput: json.form,
@@ -115,40 +175,22 @@ export const WfoStartWorkflowPage = ({
                 clientResultCallback,
             );
         }
-    }, [submit, workflowName, apiClient]);
+    }, [submit, processName, apiClient]);
 
     const processDetail: Partial<ProcessDetail> = {
         lastStatus: ProcessStatus.CREATE,
         lastStep: StepStatus.FORM,
-        workflowName: workflowName,
+        workflowName: processName,
         createdBy: '-',
     };
 
-    const fakeTimeLineItems: TimelineItem[] = [
-        {
-            processStepStatus: StepStatus.FORM,
-        },
-        {
-            processStepStatus: StepStatus.PENDING,
-        },
-        {
-            processStepStatus: StepStatus.PENDING,
-        },
-        {
-            processStepStatus: StepStatus.PENDING,
-        },
-        {
-            processStepStatus: StepStatus.PENDING,
-        },
-    ];
-
     return (
         <WfoProcessDetail
-            pageTitle={workflowName}
+            pageTitle={processName}
             productNames={''}
             buttonsAreDisabled={true}
             processDetail={processDetail}
-            timelineItems={fakeTimeLineItems}
+            timelineItems={timeLineItems}
         >
             <EuiPanel css={{ marginTop: theme.base * 3 }}>
                 <EuiFlexGroup css={getStepHeaderStyle(false)}>
@@ -158,7 +200,13 @@ export const WfoStartWorkflowPage = ({
                         <EuiText css={stepListContentBoldTextStyle}>
                             {t('userInput')}
                         </EuiText>
-                        <EuiText>{t('submitFormLabel')}</EuiText>
+                        <EuiText>
+                            {t(
+                                isTask
+                                    ? 'submitTaskFormLabel'
+                                    : 'submitWorkflowFormLabel',
+                            )}
+                        </EuiText>
                     </EuiFlexItem>
                 </EuiFlexGroup>
                 <EuiHorizontalRule />
@@ -166,8 +214,11 @@ export const WfoStartWorkflowPage = ({
                     <UserInputFormWizard
                         stepUserInput={stepUserInput}
                         validSubmit={submit}
-                        cancel={() => router.push(PATH_PROCESSES)}
+                        cancel={() =>
+                            router.push(isTask ? PATH_TASKS : PATH_WORKFLOWS)
+                        }
                         hasNext={hasNext}
+                        isTask={isTask}
                     />
                 )) || <WfoLoading />}
             </EuiPanel>

package/src/pages/processes/index.ts

@@ -1,5 +1,3 @@
-export * from './getProcessListTabTypeFromString';
-export * from './tabConfig';
-export * from './WfoProcessListPage';
 export * from './WfoProcessListSubscriptionsCell';
 export * from './WfoProcessDetailPage';
+export * from './WfoStartProcessPage';

package/src/pages/settings/WfoSettingsPage.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { WfoSettings } from '@/components';
+import { useEngineStatusMutation, useEngineStatusQuery } from '@/hooks';
+import { EngineStatus } from '@/types';
+
+export const WfoSettingsPage = () => {
+    const { data: engineStatus } = useEngineStatusQuery();
+    const { mutate, data: newEngineStatus } = useEngineStatusMutation();
+
+    const isRunning =
+        newEngineStatus?.global_status === EngineStatus.RUNNING ||
+        engineStatus?.global_status === EngineStatus.RUNNING;
+    const currentEngineStatus =
+        newEngineStatus?.global_status || engineStatus?.global_status;
+    const currentRunningProcesses =
+        newEngineStatus?.running_processes || engineStatus?.running_processes;
+
+    const changeEngineStatus = () => {
+        mutate({ global_lock: isRunning });
+    };
+
+    return (
+        <WfoSettings
+            currentEngineStatus={currentEngineStatus}
+            currentRunningProcesses={currentRunningProcesses}
+            changeEngineStatus={changeEngineStatus}
+        />
+    );
+};

package/src/pages/settings/index.ts

@@ -0,0 +1 @@
+export * from './WfoSettingsPage';

package/src/pages/tasks/WfoTaskListPage.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 
 import { EuiButton, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
 
@@ -9,25 +10,32 @@ import {
     FilterQuery,
     StoredTableConfig,
     TASK_LIST_TABLE_LOCAL_STORAGE_KEY,
+    WfoStartTaskButtonComboBox,
     WfoTableColumns,
-} from '../../components';
-import { WfoStartTaskButtonComboBox } from '../../components';
-import { WfoPageHeader } from '../../components/WfoPageHeader/WfoPageHeader';
+} from '@/components';
+import { PATH_TASKS } from '@/components';
+import { WfoPageHeader } from '@/components/WfoPageHeader/WfoPageHeader';
 import {
     ProcessListItem,
     WfoProcessList,
-} from '../../components/WfoProcessesList/WfoProcessList';
+} from '@/components/WfoProcessList/WfoProcessList';
+import { ConfirmationDialogContext } from '@/contexts';
 import {
+    useCheckEngineStatus,
     useDataDisplayParams,
+    useMutateProcess,
     useOrchestratorTheme,
     useStoredTableConfig,
-} from '../../hooks';
-import { WfoRefresh } from '../../icons';
-import { SortOrder } from '../../types';
+} from '@/hooks';
+import { WfoRefresh } from '@/icons';
+import { SortOrder } from '@/types';
 
 export const WfoTaskListPage = () => {
     const { theme } = useOrchestratorTheme();
     const t = useTranslations('tasks.page');
+    const { showConfirmDialog } = useContext(ConfirmationDialogContext);
+    const { retryAllProcesses } = useMutateProcess();
+    const { isEngineRunningNow } = useCheckEngineStatus();
 
     const [tableDefaults, setTableDefaults] =
         useState<StoredTableConfig<ProcessListItem>>();
@@ -73,7 +81,13 @@ export const WfoTaskListPage = () => {
     const handleOverrideTableColumns: (
         defaultTableColumns: WfoTableColumns<ProcessListItem>,
     ) => WfoTableColumns<ProcessListItem> = (defaultTableColumns) => ({
-        workflowName: defaultTableColumns.workflowName,
+        workflowName: {
+            field: 'workflowName',
+            name: t('taskName'),
+            render: (value, { processId }) => (
+                <Link href={`${PATH_TASKS}/${processId}`}>{value}</Link>
+            ),
+        },
         lastStep: defaultTableColumns.lastStep,
         lastStatus: defaultTableColumns.lastStatus,
         workflowTarget: defaultTableColumns.workflowTarget,
@@ -89,12 +103,24 @@ export const WfoTaskListPage = () => {
         lastModifiedAt: defaultTableColumns.lastModifiedAt,
     });
 
+    const handleRerunAllButtonClick = async () => {
+        if (await isEngineRunningNow()) {
+            showConfirmDialog({
+                question: t('rerunAllQuestion'),
+                confirmAction: () => {
+                    retryAllProcesses.mutate();
+                },
+            });
+        }
+    };
+
     return (
         <>
             <EuiSpacer />
 
             <WfoPageHeader pageTitle="Tasks">
                 <EuiButton
+                    onClick={handleRerunAllButtonClick}
                     iconType={() => (
                         <WfoRefresh color={theme.colors.primaryText} />
                     )}