@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.5

package/src/pages/processes/timelineUtils.spec.ts

@@ -0,0 +1,202 @@
+import { Step, StepStatus } from '../../types';
+import { GroupedStep } from './WfoProcessDetailPage';
+import {
+    convertStepsToGroupedSteps,
+    getMostAccurateTimelineStatus,
+    mapGroupedStepsToTimelineItems,
+} from './timelineUtils';
+
+const baseStep: Step = {
+    executed: 'testExecuted',
+    name: 'tesName',
+    state: {
+        testKey: 'testValue',
+    },
+    stateDelta: {
+        testKey: 'testValue',
+    },
+    status: StepStatus.SUCCESS,
+    stepId: 'testStepId',
+};
+
+describe('getMostAccurateTimelineStatus()', () => {
+    it('returns previous step when current step has status PENDING', () => {
+        const previousStepStatus = StepStatus.COMPLETE;
+        const currentStepStatus = StepStatus.PENDING;
+
+        const result = getMostAccurateTimelineStatus(
+            previousStepStatus,
+            currentStepStatus,
+        );
+
+        expect(result).toEqual(previousStepStatus);
+    });
+
+    it('returns the current step when current step has a status other than PENDING', () => {
+        const previousStepStatus = StepStatus.FAILED;
+        const currentStepStatus = StepStatus.COMPLETE;
+
+        const result = getMostAccurateTimelineStatus(
+            previousStepStatus,
+            currentStepStatus,
+        );
+
+        expect(result).toEqual(currentStepStatus);
+    });
+});
+
+describe('convertStepsToGroupedSteps()', () => {
+    it('returns steps grouped by name', () => {
+        // Given
+        const testSteps: Step[] = [
+            {
+                ...baseStep,
+                name: 'testName1',
+                status: StepStatus.FAILED,
+            },
+            {
+                ...baseStep,
+                name: 'testName1',
+                status: StepStatus.SUCCESS,
+            },
+            {
+                ...baseStep,
+                name: 'testName2',
+                status: StepStatus.PENDING,
+            },
+        ];
+
+        // When
+        const result = convertStepsToGroupedSteps(testSteps);
+
+        // Then
+        expect(result.length).toEqual(2);
+
+        const { steps: firstGroupedStepSteps } = result[0];
+        expect(firstGroupedStepSteps.length).toEqual(2);
+        expect(firstGroupedStepSteps[0].name).toEqual('testName1');
+        expect(firstGroupedStepSteps[0].status).toEqual(StepStatus.FAILED);
+        expect(firstGroupedStepSteps[1].name).toEqual('testName1');
+        expect(firstGroupedStepSteps[1].status).toEqual(StepStatus.SUCCESS);
+
+        const { steps: secondGroupedStepSteps } = result[1];
+        expect(secondGroupedStepSteps.length).toEqual(1);
+        expect(secondGroupedStepSteps[0].name).toEqual('testName2');
+        expect(secondGroupedStepSteps[0].status).toEqual(StepStatus.PENDING);
+    });
+    it('returns an empty array if there are no steps', () => {
+        const result = convertStepsToGroupedSteps([]);
+
+        expect(result.length).toEqual(0);
+    });
+});
+
+describe('getMostAccurateTimelineStatus()', () => {
+    it('returns previous step when current step has status PENDING', () => {
+        const statusPreviousStep: StepStatus = StepStatus.FAILED;
+        const statusCurrentStep: StepStatus = StepStatus.PENDING;
+
+        const result = getMostAccurateTimelineStatus(
+            statusPreviousStep,
+            statusCurrentStep,
+        );
+
+        expect(result).toEqual(statusPreviousStep);
+    });
+    it('returns the current step when current step has a status other than PENDING', () => {
+        const statusPreviousStep: StepStatus = StepStatus.FAILED;
+        const statusCurrentStep: StepStatus = StepStatus.SUCCESS;
+
+        const result = getMostAccurateTimelineStatus(
+            statusPreviousStep,
+            statusCurrentStep,
+        );
+
+        expect(result).toEqual(statusCurrentStep);
+    });
+});
+
+describe('mapGroupedStepsToTimelineItems()', () => {
+    it('maps a grouped-step with a single step to a timeline item', () => {
+        // Given
+        const groupedSteps: GroupedStep[] = [
+            {
+                steps: [baseStep],
+            },
+        ];
+
+        // When
+        const result = mapGroupedStepsToTimelineItems(groupedSteps);
+
+        // Then
+        expect(result.length).toEqual(1);
+
+        const { processStepStatus, stepDetail, id, value } = result[0];
+        expect(processStepStatus).toEqual(baseStep.status);
+        expect(stepDetail).toEqual(baseStep.name);
+        expect(id).toEqual(baseStep.stepId);
+        expect(value).toBeUndefined();
+    });
+
+    it('maps a grouped-step with a multiple steps to a single timeline item', () => {
+        // Given
+        const testStep1: Step = {
+            ...baseStep,
+            status: StepStatus.FAILED,
+            stepId: '111',
+        };
+        const testStep2: Step = {
+            ...baseStep,
+            status: StepStatus.FAILED,
+            stepId: '222',
+        };
+        const testStep3: Step = {
+            ...baseStep,
+            status: StepStatus.SUCCESS,
+            stepId: '333',
+        };
+        const groupedSteps: GroupedStep[] = [
+            {
+                steps: [testStep1, testStep2, testStep3],
+            },
+        ];
+
+        // When
+        const result = mapGroupedStepsToTimelineItems(groupedSteps);
+
+        // Then
+        expect(result.length).toEqual(1);
+
+        const { processStepStatus, stepDetail, id, value } = result[0];
+        expect(processStepStatus).toEqual(StepStatus.SUCCESS);
+        expect(stepDetail).toEqual(testStep3.name);
+        expect(id).toEqual(testStep3.stepId);
+        expect(value).toEqual(2);
+    });
+
+    it('returns an timeline item with value undefined if there are multiple non-failed steps', () => {
+        // Given
+        const testStep1: Step = {
+            ...baseStep,
+            status: StepStatus.PENDING,
+            stepId: '111',
+        };
+        const testStep2: Step = {
+            ...baseStep,
+            status: StepStatus.SUCCESS,
+            stepId: '222',
+        };
+        const groupedSteps: GroupedStep[] = [
+            {
+                steps: [testStep1, testStep2],
+            },
+        ];
+
+        // When
+        const result = mapGroupedStepsToTimelineItems(groupedSteps);
+
+        // Then
+        expect(result.length).toEqual(1);
+        expect(result[0].value).toBeUndefined();
+    });
+});

package/src/pages/processes/timelineUtils.ts

@@ -0,0 +1,113 @@
+import { TimelineItem } from '../../components';
+import { Step, StepStatus } from '../../types';
+import { GroupedStep } from './WfoProcessDetailPage';
+
+export const getMostAccurateTimelineStatus = (
+    statusPreviousStep: StepStatus,
+    statusCurrentStep: StepStatus,
+): StepStatus =>
+    statusCurrentStep !== StepStatus.PENDING
+        ? statusCurrentStep
+        : statusPreviousStep;
+
+export const isNonRetryableState = (status: StepStatus): boolean => {
+    return (
+        status === StepStatus.COMPLETE ||
+        status === StepStatus.SUCCESS ||
+        status === StepStatus.SKIPPED
+    );
+};
+
+export const isFailedStep = (step: Step): boolean =>
+    step.status === StepStatus.FAILED;
+
+const stepsShouldBeMerged = (previousStep: Step, currentStep: Step) =>
+    !isNonRetryableState(previousStep.status) &&
+    previousStep.name === currentStep.name;
+
+export const convertStepsToGroupedSteps = (steps: Step[]): GroupedStep[] =>
+    steps.reduce<GroupedStep[]>(
+        (previousGroupedSteps: GroupedStep[], currentStep, index, allSteps) => {
+            const previousGroupedStep = previousGroupedSteps.slice(-1)[0];
+
+            if (
+                index > 0 &&
+                stepsShouldBeMerged(allSteps[index - 1], currentStep)
+            ) {
+                const allGroupedStepsExceptLast = previousGroupedSteps.slice(
+                    0,
+                    -1,
+                );
+
+                const updatedLastGroupedStep: GroupedStep = {
+                    steps: [...previousGroupedStep.steps, currentStep],
+                };
+
+                return [...allGroupedStepsExceptLast, updatedLastGroupedStep];
+            }
+
+            return [
+                ...previousGroupedSteps,
+                {
+                    steps: [currentStep],
+                },
+            ];
+        },
+        [],
+    );
+
+const mapStepToTimelineItem = (processDetailStep: Step): TimelineItem => {
+    return {
+        id: processDetailStep.stepId,
+        processStepStatus: processDetailStep.status,
+        stepDetail: processDetailStep.name,
+    };
+};
+
+export const mapGroupedStepToTimelineItem = (
+    groupedStep: GroupedStep,
+): TimelineItem => {
+    if (groupedStep.steps.length === 1) {
+        return mapStepToTimelineItem(groupedStep.steps[0]);
+    }
+
+    return groupedStep.steps.reduce<TimelineItem>(
+        (previousTimelineItem: TimelineItem, currentStep): TimelineItem => ({
+            ...previousTimelineItem,
+            id: currentStep.stepId ?? previousTimelineItem.id,
+            processStepStatus: getMostAccurateTimelineStatus(
+                previousTimelineItem.processStepStatus,
+                currentStep.status,
+            ),
+        }),
+        {
+            ...mapStepToTimelineItem(groupedStep.steps[0]),
+            value: groupedStep.steps.filter(isFailedStep).length || undefined,
+        },
+    );
+};
+
+export const mapGroupedStepsToTimelineItems = (
+    groupedSteps: GroupedStep[],
+): TimelineItem[] => groupedSteps.map(mapGroupedStepToTimelineItem);
+
+export const getIndexOfCurrentStep = (timelineItems: TimelineItem[]) => {
+    const reversedTimelineItems = [...timelineItems].reverse();
+    const reversedIndexOfCurrentStep = reversedTimelineItems.findIndex(
+        (timelineItem) => timelineItem.processStepStatus === StepStatus.RUNNING,
+    );
+
+    if (reversedIndexOfCurrentStep !== -1) {
+        return timelineItems.length - reversedIndexOfCurrentStep - 1;
+    }
+
+    const indexOfFirstPending = timelineItems.findIndex(
+        (timelineItem) => timelineItem.processStepStatus === StepStatus.PENDING,
+    );
+
+    if (indexOfFirstPending !== -1) {
+        return indexOfFirstPending - 1;
+    }
+
+    return timelineItems.length - 1;
+};

package/src/pages/subscriptions/WfoSubscriptionDetailPage.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { useRouter } from 'next/router';
+
+import { WfoSubscription } from '../../components';
+import { TreeProvider } from '../../contexts';
+
+export const WfoSubscriptionDetailPage = () => {
+    const router = useRouter();
+    const { subscriptionId } = router.query;
+
+    return (
+        (subscriptionId && (
+            <TreeProvider>
+                <WfoSubscription subscriptionId={subscriptionId as string} />
+            </TreeProvider>
+        )) || <></>
+    );
+};

package/src/pages/subscriptions/{WFOSubscriptionsListPage.tsx → WfoSubscriptionsListPage.tsx}

@@ -1,33 +1,52 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
 import { useRouter } from 'next/router';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+
 import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
-import { useDataDisplayParams } from '../../hooks';
+
+import { WfoFilterTabs } from '../../components';
 import {
+    WfoSubscriptionsList,
+    WfoSubscriptionsTabType,
     defaultSubscriptionsTabs,
     getSubscriptionsTabTypeFromString,
-    SubscriptionListItem,
-    WFOSubscriptionsList,
-    WFOSubscriptionsTabType,
-} from '../../components/WFOSubscriptionsList';
-import { SortOrder } from '../../types';
+} 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,
-    getTableConfigFromLocalStorage,
-    SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
-} from '../../components/WFOTable';
-import { WFOFilterTabs } from '../../components';
+} from '../../components/WfoTable';
+import { useDataDisplayParams, useStoredTableConfig } from '../../hooks';
+import { SortOrder } from '../../types';
 
-export const WFOSubscriptionsListPage = () => {
+export const WfoSubscriptionsListPage = () => {
     const router = useRouter();
 
-    const initialPageSize =
-        getTableConfigFromLocalStorage(SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY)
-            ?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+    const [tableDefaults, setTableDefaults] =
+        useState<StoredTableConfig<SubscriptionListItem>>();
+
+    const getStoredTableConfig = useStoredTableConfig<SubscriptionListItem>(
+        SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
+    );
+
+    useEffect(() => {
+        const storedConfig = getStoredTableConfig();
+
+        if (storedConfig) {
+            setTableDefaults(storedConfig);
+        }
+    }, [getStoredTableConfig]);
+
     const { dataDisplayParams, setDataDisplayParam } =
         useDataDisplayParams<SubscriptionListItem>({
-            pageSize: initialPageSize,
+            // TODO: Improvement: A default pageSize value is set to avoid a graphql error when the query is executed
+            // the fist time before the useEffect has populated the tableDefaults. Better is to create a way for
+            // the query to wait for the values to be available
+            // https://github.com/workfloworchestrator/orchestrator-ui/issues/261
+            pageSize: tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE,
             sortBy: {
                 field: 'startDate',
                 order: SortOrder.DESC,
@@ -36,7 +55,7 @@ export const WFOSubscriptionsListPage = () => {
 
     const [activeTab, setActiveTab] = useQueryParam(
         'activeTab',
-        withDefault(StringParam, WFOSubscriptionsTabType.ACTIVE),
+        withDefault(StringParam, WfoSubscriptionsTabType.ACTIVE),
     );
 
     const sortOrder = getSortDirectionFromString(
@@ -50,7 +69,7 @@ export const WFOSubscriptionsListPage = () => {
     }
 
     const handleChangeSubscriptionsTab = (
-        updatedSubscriptionsTab: WFOSubscriptionsTabType,
+        updatedSubscriptionsTab: WfoSubscriptionsTabType,
     ) => {
         setActiveTab(updatedSubscriptionsTab);
         setDataDisplayParam('pageIndex', 0);
@@ -67,7 +86,7 @@ export const WFOSubscriptionsListPage = () => {
             <EuiPageHeader pageTitle="Subscriptions" />
             <EuiSpacer size="m" />
 
-            <WFOFilterTabs
+            <WfoFilterTabs
                 tabs={defaultSubscriptionsTabs}
                 selectedTab={selectedSubscriptionsTab}
                 translationNamespace="subscriptions.tabs"
@@ -75,7 +94,8 @@ export const WFOSubscriptionsListPage = () => {
             />
             <EuiSpacer size="xxl" />
 
-            <WFOSubscriptionsList
+            <WfoSubscriptionsList
+                hiddenColumns={tableDefaults?.hiddenColumns}
                 dataDisplayParams={dataDisplayParams}
                 setDataDisplayParam={setDataDisplayParam}
                 alwaysOnFilters={alwaysOnFilters}

package/src/pages/subscriptions/index.ts

@@ -1 +1,2 @@
-export * from './WFOSubscriptionsListPage';
+export * from './WfoSubscriptionDetailPage';
+export * from './WfoSubscriptionsListPage';

package/src/pages/tasks/WfoTaskListPage.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButton, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+
+import {
+    DEFAULT_PAGE_SIZE,
+    FilterQuery,
+    StoredTableConfig,
+    TASK_LIST_TABLE_LOCAL_STORAGE_KEY,
+    WfoTableColumns,
+} from '../../components';
+import { WfoStartTaskButtonComboBox } from '../../components';
+import { WfoPageHeader } from '../../components/WfoPageHeader/WfoPageHeader';
+import {
+    ProcessListItem,
+    WfoProcessList,
+} from '../../components/WfoProcessesList/WfoProcessList';
+import {
+    useDataDisplayParams,
+    useOrchestratorTheme,
+    useStoredTableConfig,
+} from '../../hooks';
+import { WfoRefresh } from '../../icons';
+import { SortOrder } from '../../types';
+
+export const WfoTaskListPage = () => {
+    const { theme } = useOrchestratorTheme();
+    const t = useTranslations('tasks.page');
+
+    const [tableDefaults, setTableDefaults] =
+        useState<StoredTableConfig<ProcessListItem>>();
+
+    const getStoredTableConfig = useStoredTableConfig<ProcessListItem>(
+        TASK_LIST_TABLE_LOCAL_STORAGE_KEY,
+    );
+
+    useEffect(() => {
+        const storedConfig = getStoredTableConfig();
+
+        if (storedConfig) {
+            setTableDefaults(storedConfig);
+        }
+    }, [getStoredTableConfig]);
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<ProcessListItem>({
+            pageSize: tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE,
+            sortBy: {
+                field: 'lastModifiedAt',
+                order: SortOrder.DESC,
+            },
+        });
+
+    const alwaysOnFilters: FilterQuery<ProcessListItem>[] = [
+        {
+            // 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: 'running-failed-api_unavailable-inconsistent_data',
+        },
+    ];
+
+    // Changing the order of the keys, resulting in an updated column order in the table
+    const handleOverrideTableColumns: (
+        defaultTableColumns: WfoTableColumns<ProcessListItem>,
+    ) => WfoTableColumns<ProcessListItem> = (defaultTableColumns) => ({
+        workflowName: defaultTableColumns.workflowName,
+        lastStep: defaultTableColumns.lastStep,
+        lastStatus: defaultTableColumns.lastStatus,
+        workflowTarget: defaultTableColumns.workflowTarget,
+        productTag: defaultTableColumns.productTag,
+        productName: defaultTableColumns.productName,
+        customer: defaultTableColumns.customer,
+        customerAbbreviation: defaultTableColumns.customerAbbreviation,
+        subscriptions: defaultTableColumns.subscriptions,
+        createdBy: defaultTableColumns.createdBy,
+        assignee: defaultTableColumns.assignee,
+        processId: defaultTableColumns.processId,
+        startedAt: defaultTableColumns.startedAt,
+        lastModifiedAt: defaultTableColumns.lastModifiedAt,
+    });
+
+    return (
+        <>
+            <EuiSpacer />
+
+            <WfoPageHeader pageTitle="Tasks">
+                <EuiButton
+                    iconType={() => (
+                        <WfoRefresh color={theme.colors.primaryText} />
+                    )}
+                >
+                    {t('rerunAll')}
+                </EuiButton>
+                <WfoStartTaskButtonComboBox />
+            </WfoPageHeader>
+            <EuiHorizontalRule />
+
+            <EuiSpacer size="xxl" />
+
+            <WfoProcessList
+                defaultHiddenColumns={tableDefaults?.hiddenColumns}
+                localStorageKey={TASK_LIST_TABLE_LOCAL_STORAGE_KEY}
+                dataDisplayParams={dataDisplayParams}
+                setDataDisplayParam={setDataDisplayParam}
+                overrideDefaultTableColumns={handleOverrideTableColumns}
+                alwaysOnFilters={alwaysOnFilters}
+            />
+        </>
+    );
+};

package/src/pages/tasks/index.ts

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