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

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -0,0 +1,251 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { AxiosError } from 'axios';
+import { JSONSchema6 } from 'json-schema';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+
+import {
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiHorizontalRule,
+    EuiPanel,
+    EuiText,
+} from '@elastic/eui';
+
+import { PATH_TASKS, TimelineItem, WfoError, 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 { WfoProcessDetail } from './WfoProcessDetail';
+
+type StartCreateWorkflowPayload = {
+    product: string;
+};
+type StartModifyWorkflowPayload = {
+    subscription_id: string;
+};
+
+type StartWorkflowPayload =
+    | StartCreateWorkflowPayload
+    | StartModifyWorkflowPayload;
+
+interface StartProcessPageQuery {
+    productId?: string;
+    subscriptionId?: string;
+}
+
+interface WfoStartProcessPageProps {
+    processName: string;
+    isTask?: boolean;
+}
+
+export interface UserInputForm {
+    stepUserInput?: JSONSchema6;
+    hasNext?: boolean;
+}
+
+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 [hasError, setHasError] = useState<boolean>(false);
+    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, isLoading, isError } = useQueryWithGraphql(
+        GET_PROCESS_STEPS_GRAPHQL_QUERY,
+        {
+            processName,
+        },
+        `processSteps={processName}`,
+    );
+
+    if (isError) {
+        if (!hasError) {
+            setHasError(true);
+        }
+    }
+
+    const timeLineItems: TimelineItem[] =
+        data?.workflows?.page[0]?.steps && !isLoading
+            ? data.workflows.page[0].steps.map(({ name }: StartProcessStep) => {
+                  return {
+                      processStepStatus: StepStatus.PENDING,
+                      stepDetail: name,
+                  };
+              })
+            : [];
+
+    const submit = useCallback(
+        (processInput: object[]) => {
+            const startProcessPromise = apiClient
+                .startProcess(
+                    processName,
+                    startProcessPayload
+                        ? [startProcessPayload, ...processInput]
+                        : [...processInput],
+                )
+                .then(
+                    // Resolve handler
+                    (result) => {
+                        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,
+                            );
+                            const basePath = isTask
+                                ? PATH_TASKS
+                                : PATH_WORKFLOWS;
+                            router.push(`${basePath}/${process.id}`);
+                        }
+                    },
+                    // Reject handler
+                    (e) => {
+                        throw e;
+                    },
+                )
+                .catch((error: AxiosError) => {
+                    if (error?.response?.status !== 510) {
+                        if (error?.response?.status === 400) {
+                            // Rethrow the error so userInputForm can catch it and display validation errors
+                            throw error;
+                        }
+
+                        console.error(error);
+                        setHasError(true);
+                    } else {
+                        throw error;
+                    }
+                });
+
+            // 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>(
+                startProcessPromise,
+                503,
+                (json) => {
+                    // TODO: Use the toastMessage hook to display an engine down error message
+                    console.error('engine down!!!', json);
+                    router.push(PATH_WORKFLOWS);
+                },
+            );
+        },
+        [apiClient, processName, startProcessPayload, isTask, router],
+    );
+
+    useEffect(() => {
+        if (processName) {
+            const clientResultCallback = (json: FormNotCompleteResponse) => {
+                setForm({
+                    stepUserInput: json.form,
+                    hasNext: json.hasNext ?? false,
+                });
+            };
+
+            apiClient.catchErrorStatus<FormNotCompleteResponse>(
+                submit([]),
+                510,
+                clientResultCallback,
+            );
+        }
+    }, [submit, processName, apiClient]);
+
+    const processDetail: Partial<ProcessDetail> = {
+        lastStatus: ProcessStatus.CREATE,
+        lastStep: StepStatus.FORM,
+        workflowName: processName,
+        createdBy: '-',
+    };
+
+    return (
+        <WfoProcessDetail
+            pageTitle={processName}
+            productNames={''}
+            buttonsAreDisabled={true}
+            processDetail={processDetail}
+            timelineItems={timeLineItems}
+        >
+            <EuiPanel css={{ marginTop: theme.base * 3 }}>
+                <EuiFlexGroup css={getStepHeaderStyle(false)}>
+                    <WfoStepStatusIcon stepStatus={StepStatus.FORM} />
+
+                    <EuiFlexItem grow={0}>
+                        <EuiText css={stepListContentBoldTextStyle}>
+                            {t('userInput')}
+                        </EuiText>
+                        <EuiText>
+                            {t(
+                                isTask
+                                    ? 'submitTaskFormLabel'
+                                    : 'submitWorkflowFormLabel',
+                            )}
+                        </EuiText>
+                    </EuiFlexItem>
+                </EuiFlexGroup>
+                <EuiHorizontalRule />
+                {(hasError && <WfoError />) ||
+                    (stepUserInput && (
+                        <UserInputFormWizard
+                            stepUserInput={stepUserInput}
+                            validSubmit={submit}
+                            cancel={() =>
+                                router.push(
+                                    isTask ? PATH_TASKS : PATH_WORKFLOWS,
+                                )
+                            }
+                            hasNext={hasNext}
+                            isTask={isTask}
+                        />
+                    )) || <WfoLoading />}
+            </EuiPanel>
+        </WfoProcessDetail>
+    );
+};

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/startPage/WfoStartPage.tsx

@@ -0,0 +1,239 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { PATH_SUBSCRIPTIONS, PATH_TASKS, PATH_WORKFLOWS } from '@/components';
+import {
+    SummaryCard,
+    SummaryCardStatus,
+    WfoSummaryCards,
+} from '@/components/WfoSummary/WfoSummaryCards';
+import {
+    getProductsSummaryQuery,
+    getSubscriptionsListSummaryGraphQlQuery,
+} from '@/graphqlQueries';
+import { getProcessListSummaryGraphQlQuery } from '@/graphqlQueries/processListQuery';
+import { useQueryWithGraphql } from '@/hooks';
+import {
+    GraphqlQueryVariables,
+    Process,
+    ProductDefinition,
+    SortOrder,
+    Subscription,
+} from '@/types';
+import { getFirstUuidPart } from '@/utils';
+
+export const WfoStartPage = () => {
+    const t = useTranslations('startPage');
+
+    const {
+        data: subscriptionsSummaryResult,
+        isLoading: subscriptionsSummaryIsFetching,
+    } = useQueryWithGraphql(
+        getSubscriptionsListSummaryGraphQlQuery(),
+        subscriptionsListSummaryQueryVariables,
+        ['subscriptions', 'startPage'],
+    );
+    const {
+        data: processesSummaryResult,
+        isLoading: processesSummaryIsFetching,
+    } = useQueryWithGraphql(
+        getProcessListSummaryGraphQlQuery(),
+        processListSummaryQueryVariables,
+        ['workflows', 'startPage'],
+    );
+    const {
+        data: failedTasksSummaryResult,
+        isLoading: failedTasksSummaryIsFetching,
+    } = useQueryWithGraphql(
+        getProcessListSummaryGraphQlQuery(),
+        taskListSummaryQueryVariables,
+        ['tasks', 'startPage'],
+    );
+    const {
+        data: productsSummaryResult,
+        isLoading: productsSummaryIsFetching,
+    } = useQueryWithGraphql(
+        getProductsSummaryQuery(),
+        productsSummaryQueryVariables,
+        'productSummary',
+    );
+
+    const latestActiveSubscriptionsSummaryCard: SummaryCard = {
+        headerTitle: t('activeSubscriptions.headerTitle'),
+        headerValue:
+            subscriptionsSummaryResult?.subscriptions.pageInfo.totalItems ?? 0,
+        headerStatus: SummaryCardStatus.Neutral,
+        listTitle: t('activeSubscriptions.listTitle'),
+        listItems:
+            subscriptionsSummaryResult?.subscriptions.page.map(
+                (subscription) => ({
+                    title: subscription.description,
+                    value: getFirstUuidPart(subscription.subscriptionId),
+                    url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
+                }),
+            ) ?? [],
+        button: {
+            name: t('activeSubscriptions.buttonText'),
+            url: PATH_SUBSCRIPTIONS,
+        },
+        isLoading: subscriptionsSummaryIsFetching,
+    };
+
+    const latestWorkflowsSummaryCard: SummaryCard = {
+        headerTitle: t('activeWorkflows.headerTitle'),
+        headerValue: processesSummaryResult?.processes.pageInfo.totalItems ?? 0,
+        headerStatus: SummaryCardStatus.Success,
+        listTitle: t('activeWorkflows.listTitle'),
+        listItems:
+            processesSummaryResult?.processes.page.map((workflow) => ({
+                title: workflow.workflowName,
+                value: workflow.startedAt,
+                url: `${PATH_WORKFLOWS}/${workflow.processId}`,
+            })) ?? [],
+        button: {
+            name: t('activeWorkflows.buttonText'),
+            url: PATH_WORKFLOWS,
+        },
+        isLoading: processesSummaryIsFetching,
+    };
+
+    const failedTasksSummaryCard: SummaryCard = {
+        headerTitle: t('failedTasks.headerTitle'),
+        headerValue:
+            failedTasksSummaryResult?.processes.pageInfo.totalItems ?? 0,
+        headerStatus: SummaryCardStatus.Error,
+        listTitle: t('failedTasks.listTitle'),
+        listItems:
+            failedTasksSummaryResult?.processes.page.map((task) => ({
+                title: task.workflowName,
+                value: task.startedAt,
+                url: `${PATH_TASKS}/${task.processId}`,
+            })) ?? [],
+        button: {
+            name: t('failedTasks.buttonText'),
+            url: PATH_TASKS,
+        },
+        isLoading: failedTasksSummaryIsFetching,
+    };
+
+    const productsSummaryCard: SummaryCard = {
+        headerTitle: t('products.headerTitle'),
+        headerValue: productsSummaryResult?.products.pageInfo.totalItems ?? 0,
+        headerStatus: SummaryCardStatus.Neutral,
+        listTitle: t('products.listTitle'),
+        listItems:
+            productsSummaryResult?.products.page
+                .sort(
+                    (left, right) =>
+                        (right.subscriptions.pageInfo.totalItems ?? 0) -
+                        (left.subscriptions.pageInfo.totalItems ?? 0),
+                )
+                .map((product) => ({
+                    title: '',
+                    value: (
+                        <div
+                            css={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                            }}
+                        >
+                            <div>{product.name}</div>
+                            <div>
+                                {product.subscriptions.pageInfo.totalItems || 0}
+                            </div>
+                        </div>
+                    ),
+                })) ?? [],
+        isLoading: productsSummaryIsFetching,
+    };
+
+    return (
+        <EuiFlexItem>
+            <WfoSummaryCards
+                summaryCards={[
+                    latestActiveSubscriptionsSummaryCard,
+                    latestWorkflowsSummaryCard,
+                    failedTasksSummaryCard,
+                    productsSummaryCard,
+                ]}
+            />
+        </EuiFlexItem>
+    );
+};
+
+const subscriptionsListSummaryQueryVariables: GraphqlQueryVariables<Subscription> =
+    {
+        first: 5,
+        after: 0,
+        sortBy: {
+            field: 'startDate',
+            order: SortOrder.DESC,
+        },
+        filterBy: [
+            {
+                field: 'status',
+                value: 'Active',
+            },
+        ],
+    };
+
+const processListSummaryQueryVariables: GraphqlQueryVariables<Process> = {
+    first: 5,
+    after: 0,
+    sortBy: {
+        field: 'startedAt',
+        order: SortOrder.DESC,
+    },
+    filterBy: [
+        {
+            // Todo: isTask is not a key of Process
+            // However, backend still supports it. Field should not be a keyof ProcessListItem (or process)
+            // https://github.com/workfloworchestrator/orchestrator-ui/issues/290
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore waiting for fix in backend
+            field: 'isTask',
+            value: 'false',
+        },
+        {
+            field: 'lastStatus',
+            value: 'created-running-suspended-waiting-failed-resumed-inconsistent_data-api_unavailable-awaiting_callback',
+        },
+    ],
+};
+
+const taskListSummaryQueryVariables: GraphqlQueryVariables<Process> = {
+    first: 5,
+    after: 0,
+    sortBy: {
+        field: 'startedAt',
+        order: SortOrder.DESC,
+    },
+    filterBy: [
+        {
+            // Todo: isTask is not a key of Process
+            // However, backend still supports it. Field should not be a keyof ProcessListItem (or process)
+            // https://github.com/workfloworchestrator/orchestrator-ui/issues/290
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore waiting for fix in backend
+            field: 'isTask',
+            value: 'true',
+        },
+        {
+            field: 'lastStatus',
+            value: 'failed-inconsistent_data-api_unavailable',
+        },
+    ],
+};
+
+const productsSummaryQueryVariables: GraphqlQueryVariables<ProductDefinition> =
+    {
+        first: 1000,
+        after: 0,
+        sortBy: {
+            field: 'name',
+            order: SortOrder.ASC,
+        },
+    };

package/src/pages/startPage/index.ts

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

package/src/pages/subscriptions/WfoSubscriptionsListPage.tsx

@@ -1,29 +1,28 @@
 import React, { useEffect, useState } from 'react';
 
-import { useRouter } from 'next/router';
+import { useTranslations } from 'next-intl';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
 import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
 
+import {
+    DEFAULT_PAGE_SIZE,
+    SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
+} from '@/components';
+
 import { WfoFilterTabs } from '../../components';
 import {
+    WfoSubscriptionListTab,
     WfoSubscriptionsList,
-    WfoSubscriptionsTabType,
-    defaultSubscriptionsTabs,
-    getSubscriptionsTabTypeFromString,
+    subscriptionListTabs,
 } from '../../components/WfoSubscriptionsList';
 import { SubscriptionListItem } from '../../components/WfoSubscriptionsList';
 import { StoredTableConfig } from '../../components/WfoTable';
-import { SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY } from '../../components/WfoTable';
-import {
-    DEFAULT_PAGE_SIZE,
-    getSortDirectionFromString,
-} from '../../components/WfoTable';
 import { useDataDisplayParams, useStoredTableConfig } from '../../hooks';
 import { SortOrder } from '../../types';
 
 export const WfoSubscriptionsListPage = () => {
-    const router = useRouter();
+    const t = useTranslations('subscriptions.detail');
 
     const [tableDefaults, setTableDefaults] =
         useState<StoredTableConfig<SubscriptionListItem>>();
@@ -55,40 +54,37 @@ export const WfoSubscriptionsListPage = () => {
 
     const [activeTab, setActiveTab] = useQueryParam(
         'activeTab',
-        withDefault(StringParam, WfoSubscriptionsTabType.ACTIVE),
+        withDefault(StringParam, WfoSubscriptionListTab.ACTIVE),
     );
 
-    const sortOrder = getSortDirectionFromString(
-        dataDisplayParams.sortBy?.order,
-    );
-    const selectedSubscriptionsTab =
-        getSubscriptionsTabTypeFromString(activeTab);
-    if (!sortOrder || !selectedSubscriptionsTab) {
-        router.replace('/subscriptions');
-        return null;
-    }
+    const selectedTab = ((): WfoSubscriptionListTab => {
+        return (
+            subscriptionListTabs.find(({ id }) => id === activeTab)?.id ||
+            WfoSubscriptionListTab.ACTIVE
+        );
+    })();
 
     const handleChangeSubscriptionsTab = (
-        updatedSubscriptionsTab: WfoSubscriptionsTabType,
+        updatedSubscriptionsTab: WfoSubscriptionListTab,
     ) => {
         setActiveTab(updatedSubscriptionsTab);
         setDataDisplayParam('pageIndex', 0);
     };
 
-    const alwaysOnFilters = defaultSubscriptionsTabs.find(
-        ({ id }) => id === selectedSubscriptionsTab,
+    const alwaysOnFilters = subscriptionListTabs.find(
+        ({ id }) => id === activeTab,
     )?.alwaysOnFilters;
 
     return (
         <>
             <EuiSpacer />
 
-            <EuiPageHeader pageTitle="Subscriptions" />
+            <EuiPageHeader pageTitle={t('title')} />
             <EuiSpacer size="m" />
 
             <WfoFilterTabs
-                tabs={defaultSubscriptionsTabs}
-                selectedTab={selectedSubscriptionsTab}
+                tabs={subscriptionListTabs}
+                selectedTab={selectedTab}
                 translationNamespace="subscriptions.tabs"
                 onChangeTab={handleChangeSubscriptionsTab}
             />