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

package/src/pages/settings/WfoSettingsPage.tsx

@@ -1,30 +1,21 @@
 import React from 'react';
 
-import { WfoSettings } from '@/components';
-import { useEngineStatusMutation, useEngineStatusQuery } from '@/hooks';
-import { EngineStatus } from '@/types';
+import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 
-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 });
-    };
+import { WfoFlushSettings, WfoModifySettings, WfoStatus } from '@/components';
 
+export const WfoSettingsPage = () => {
     return (
-        <WfoSettings
-            currentEngineStatus={currentEngineStatus}
-            currentRunningProcesses={currentRunningProcesses}
-            changeEngineStatus={changeEngineStatus}
-        />
+        <>
+            <EuiSpacer />
+
+            <EuiPageHeader pageTitle="Settings" />
+            <EuiHorizontalRule />
+            <WfoFlushSettings />
+            <EuiSpacer />
+            <WfoModifySettings />
+            <EuiSpacer />
+            <WfoStatus />
+        </>
     );
 };

package/src/rtk/api.ts

@@ -0,0 +1,40 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query';
+
+import type { RootState } from './store';
+
+export enum BaseQueryTypes {
+    fetch = 'fetch',
+    graphql = 'graphql',
+    custom = 'custom',
+}
+
+type ExtraOptions = {
+    baseQueryType?: BaseQueryTypes;
+};
+
+export const orchestratorApi = createApi({
+    reducerPath: 'orchestratorApi',
+    baseQuery: (args, api, extraOptions: ExtraOptions) => {
+        const { baseQueryType } = extraOptions || {};
+
+        const state = api.getState() as RootState;
+        const { orchestratorApiBaseUrl, graphqlEndpointCore } =
+            state.orchestratorConfig;
+
+        switch (baseQueryType) {
+            case BaseQueryTypes.fetch:
+                const fetchFn = fetchBaseQuery({
+                    baseUrl: orchestratorApiBaseUrl,
+                });
+                return fetchFn(args, api, {});
+            default:
+                const graphqlFn = graphqlRequestBaseQuery({
+                    url: graphqlEndpointCore,
+                });
+                return graphqlFn(args, api, {});
+        }
+    },
+    endpoints: () => ({}),
+    tagTypes: ['engineStatus'],
+});

package/src/rtk/endpoints/customers.ts

@@ -0,0 +1,27 @@
+import { Customer, CustomersResult } from '@/types';
+
+import { orchestratorApi } from '../api';
+
+const customersQuery = `query Customers {
+  customers(first: 1000000, after: 0) {
+      page {
+          fullname
+          identifier
+          shortcode
+      }:
+  }
+}`;
+
+const customersApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getCustomers: build.query<Customer[], void>({
+            query: () => ({ document: customersQuery }),
+            transformResponse: (response: CustomersResult): Customer[] => {
+                const customers = response?.customers?.page || [];
+                return customers;
+            },
+        }),
+    }),
+});
+
+export const { useGetCustomersQuery } = customersApi;

package/src/rtk/endpoints/index.ts

@@ -0,0 +1,3 @@
+export * from './customers';
+export * from './processList';
+export * from './settings';

package/src/rtk/endpoints/processList.ts

@@ -0,0 +1,89 @@
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    Process,
+    ProcessListResult,
+} from '@/types';
+
+import { orchestratorApi } from '../api';
+
+export const processListQuery = `
+    query ProcessList(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+        $filterBy: [GraphqlFilter!]
+        $query: String
+    ) {
+        processes(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            filterBy: $filterBy
+            query: $query
+        ) {
+            page {
+                workflowName
+                lastStep
+                lastStatus
+                workflowTarget
+                product {
+                    name
+                    tag
+                }
+                customer {
+                    fullname
+                    shortcode
+                }
+                createdBy
+                assignee
+                processId
+                startedAt
+                lastModifiedAt
+                isTask
+                subscriptions {
+                    page {
+                        subscriptionId
+                        description
+                    }
+                }
+            }
+            pageInfo {
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+                endCursor
+                sortFields
+                filterFields
+            }
+        }
+    }
+`;
+
+export type ProcessListResponse = {
+    processes: Process[];
+} & BaseGraphQlResult;
+
+const processApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getProcessList: build.query<
+            ProcessListResponse,
+            GraphqlQueryVariables<Process>
+        >({
+            query: (variables) => ({ document: processListQuery, variables }),
+            transformResponse: (
+                response: ProcessListResult,
+            ): ProcessListResponse => {
+                const processes = response?.processes?.page || [];
+
+                return {
+                    processes,
+                    pageInfo: response.processes?.pageInfo || {},
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetProcessListQuery } = processApi;

package/src/rtk/endpoints/settings.ts

@@ -0,0 +1,72 @@
+import { EngineStatus } from '@/types';
+
+import { BaseQueryTypes, orchestratorApi } from '../api';
+
+interface EngineStatusReturnValue {
+    engineStatus: EngineStatus;
+    runningProcesses: number;
+}
+
+const statusApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getEngineStatus: build.query<EngineStatusReturnValue, void>({
+            query: () => '/settings/status',
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+            transformResponse(data: {
+                global_status: string;
+                running_processes: number;
+            }) {
+                const engineStatus = (() => {
+                    switch (data?.global_status) {
+                        case 'RUNNING':
+                            return EngineStatus.RUNNING;
+                        case 'PAUSING':
+                            return EngineStatus.PAUSING;
+                        case 'PAUSED':
+                            return EngineStatus.PAUSED;
+                        default:
+                            return EngineStatus.UNKNOWN;
+                    }
+                })();
+                return {
+                    engineStatus,
+                    runningProcesses: data?.running_processes || 0,
+                };
+            },
+            providesTags: ['engineStatus'],
+        }),
+        clearCache: build.mutation<void, string>({
+            query: (settingName) => ({
+                url: `/settings/cache/${settingName}`,
+                method: 'DELETE',
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+        }),
+        setEngineStatus: build.mutation<EngineStatusReturnValue, boolean>({
+            query: (globalStatus) => ({
+                url: `/settings/status`,
+                method: 'PUT',
+                body: JSON.stringify({
+                    global_lock: globalStatus,
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+            invalidatesTags: ['engineStatus'],
+        }),
+    }),
+});
+
+export const {
+    useGetEngineStatusQuery,
+    useClearCacheMutation,
+    useSetEngineStatusMutation,
+} = statusApi;

package/src/rtk/hooks.ts

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/src/rtk/index.ts

@@ -0,0 +1,5 @@
+export * from './api';
+export * from './endpoints';
+export * from './store';
+export * from './slices';
+export * from './storeProvider';

package/src/rtk/slices/index.ts

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

package/src/rtk/slices/orchestratorConfig.ts

@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { Slice } from '@reduxjs/toolkit';
+
+import type { OrchestratorConfig } from '@/types';
+
+type OrchestratorConfigSlice = Slice<OrchestratorConfig>;
+
+export const getOrchestratorConfigSlice = (
+    config: OrchestratorConfig,
+): OrchestratorConfigSlice => {
+    return createSlice({
+        name: 'orchestrator',
+        initialState: config,
+        reducers: {},
+    });
+};

package/src/rtk/slices/toastMessages.ts

@@ -0,0 +1,56 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction, Reducer, Slice } from '@reduxjs/toolkit';
+
+import { Toast } from '@/types';
+
+export type ToastState = {
+    messages: Toast[];
+};
+
+const initialState: ToastState = {
+    messages: [],
+};
+
+type ToastMessagesSlice = Slice<
+    ToastState,
+    {
+        addToastMessage: (
+            state: ToastState,
+            action: PayloadAction<Toast>,
+        ) => ToastState;
+        removeToastMessage: (
+            state: ToastState,
+            action: PayloadAction<Toast['id']>,
+        ) => ToastState;
+    },
+    'toastMessages',
+    'toastMessages'
+>;
+
+export const toastMessagesSlice: ToastMessagesSlice = createSlice({
+    name: 'toastMessages',
+    initialState,
+    reducers: {
+        addToastMessage: (state, action: PayloadAction<Toast>) => {
+            return {
+                ...state,
+                messages: [...state.messages, action.payload],
+            };
+        },
+        removeToastMessage: (state, action: PayloadAction<Toast['id']>) => {
+            return {
+                ...state,
+                messages: state.messages.filter(
+                    (message) => message.id !== action.payload,
+                ),
+            };
+        },
+    },
+});
+
+// Action creators are generated for each case reducer function
+export const { addToastMessage, removeToastMessage } =
+    toastMessagesSlice.actions;
+
+export const toastMessagesReducer: Reducer<ToastState> =
+    toastMessagesSlice.reducer;

package/src/rtk/store.ts

@@ -0,0 +1,40 @@
+import { configureStore } from '@reduxjs/toolkit';
+import type { EnhancedStore } from '@reduxjs/toolkit';
+import type { Dispatch, UnknownAction } from '@reduxjs/toolkit';
+import { CombinedState } from '@reduxjs/toolkit/query';
+
+import type { OrchestratorConfig } from '@/types';
+
+import { orchestratorApi } from './api';
+import { getOrchestratorConfigSlice } from './slices/orchestratorConfig';
+import { toastMessagesReducer } from './slices/toastMessages';
+
+export type RootState = {
+    orchestratorApi: CombinedState<
+        Record<string, never>,
+        'engineStatus',
+        'orchestratorApi'
+    >;
+    toastMessages: ReturnType<typeof toastMessagesReducer>;
+    orchestratorConfig: OrchestratorConfig;
+};
+
+export const getOrchestratorStore = (
+    orchestratorConfig: OrchestratorConfig,
+): EnhancedStore<RootState> => {
+    const configSlice = getOrchestratorConfigSlice(orchestratorConfig);
+
+    const orchestratorStore = configureStore({
+        reducer: {
+            [orchestratorApi.reducerPath]: orchestratorApi.reducer,
+            toastMessages: toastMessagesReducer,
+            orchestratorConfig: configSlice.reducer,
+        },
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware().concat(orchestratorApi.middleware),
+    });
+
+    return orchestratorStore;
+};
+
+export type AppDispatch = Dispatch<UnknownAction>;

package/src/rtk/storeProvider.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+
+import { useOrchestratorConfig } from '@/hooks';
+import type { OrchestratorConfig } from '@/types';
+
+import { getOrchestratorStore } from './store';
+
+export type StoreProviderProps = {
+    initialOrchestratorConfig: OrchestratorConfig;
+    children: ReactNode;
+};
+
+export const StoreProvider = ({
+    initialOrchestratorConfig,
+    children,
+}: StoreProviderProps) => {
+    const { orchestratorConfig } = useOrchestratorConfig(
+        initialOrchestratorConfig,
+    );
+
+    const store = getOrchestratorStore(orchestratorConfig);
+
+    return <Provider store={store}>{children}</Provider>;
+};

package/src/types/types.ts

@@ -1,3 +1,5 @@
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+
 import { InputForm } from './forms';
 
 export type Nullable<T> = T | null;
@@ -18,11 +20,12 @@ export enum EngineStatus {
     RUNNING = 'RUNNING',
     PAUSING = 'PAUSING',
     PAUSED = 'PAUSED',
+    UNKNOWN = 'UNKNOWN',
 }
 
 export type Customer = {
     fullname: string;
-    identifier: string;
+    customerId: string;
     shortcode: string;
 };
 
@@ -266,6 +269,10 @@ export type GraphQLPageInfo = {
     filterFields: string[];
 };
 
+export type BaseGraphQlResult = {
+    pageInfo: GraphQLPageInfo;
+};
+
 export interface SubscriptionsResult<T = Subscription> {
     subscriptions: GraphQlResultPage<T>;
 }
@@ -377,7 +384,7 @@ export type SubscriptionDropdownOption = {
     description: Subscription['description'];
     subscriptionId: Subscription['subscriptionId'];
     product: Pick<ProductDefinition, 'tag' | 'productId'>;
-    customer: Pick<Customer, 'fullname' | 'identifier'>;
+    customer: Pick<Customer, 'fullname' | 'customerId'>;
     productBlockInstances: ProductBlockInstance[];
     fixedInputs: FieldValue[];
     tag: string;
@@ -440,3 +447,27 @@ export type ExternalService = {
 };
 
 export type WfoTreeNodeMap = { [key: number]: TreeBlock };
+
+export type { Toast };
+
+export enum ToastTypes {
+    ERROR = 'ERROR',
+    SUCCESS = 'SUCCESS',
+}
+
+export enum Environment {
+    DEVELOPMENT = 'Development',
+    PRODUCTION = 'Production',
+}
+
+export type OrchestratorConfig = {
+    environmentName: Environment | string;
+    orchestratorApiBaseUrl: string;
+    graphqlEndpointCore: string;
+    engineStatusEndpoint: string;
+    processStatusCountsEndpoint: string;
+    processesEndpoint: string;
+    subscriptionActionsEndpoint: string;
+    subscriptionProcessesEndpoint: string;
+    authActive: boolean;
+};

package/src/utils/csvDownload.ts

@@ -0,0 +1,83 @@
+import { TranslationValues } from 'next-intl';
+
+import { MAXIMUM_ITEMS_FOR_BULK_FETCHING } from '@/configuration/constants';
+import { ToastTypes } from '@/types';
+import { GraphQLPageInfo } from '@/types';
+import { sortObjectKeys } from '@/utils/sortObjectKeys';
+
+function toCsvFileContent<T extends object>(data: T[]): string {
+    const headers = Object.keys(data[0]).join(';');
+    const rows = data.map((row) =>
+        Object.values(row)
+            .map((value) => (value === null ? '' : `"${value}"`))
+            .join(';')
+            .split('\n')
+            .join(' '),
+    );
+    return [headers, ...rows].join('\n');
+}
+
+function startCsvDownload(csvFileContent: string, fileName: string) {
+    const blob = new Blob([csvFileContent], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName.endsWith('.csv') ? fileName : `${fileName}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+}
+
+export function initiateCsvFileDownload<T extends object>(
+    data: T[],
+    fileName: string,
+) {
+    const csvFileContent = toCsvFileContent(data);
+    startCsvDownload(csvFileContent, fileName);
+}
+
+export const getCsvFileNameWithDate = (fileNameWithoutExtension: string) => {
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate();
+
+    const hour = date.getHours();
+    const minute = date.getMinutes();
+    const second = date.getSeconds();
+
+    return `${fileNameWithoutExtension}_${year}-${month}-${day}-${hour}${minute}${second}.csv`;
+};
+
+export const csvDownloadHandler = <T extends object, U extends object>(
+    dataFetchFunction: () => Promise<T | undefined>,
+    dataMapper: (data: T) => U[],
+    pageInfoMapper: (data: T) => GraphQLPageInfo,
+    keyOrder: string[],
+    filename: string,
+    addToastFunction: (type: ToastTypes, text: string, title: string) => void,
+    translationFunction: (
+        translationKey: string,
+        variables?: TranslationValues,
+    ) => string,
+) => {
+    return async () => {
+        const data: T | undefined = await dataFetchFunction();
+
+        if (data) {
+            const dataForExport = dataMapper(data).map((d) =>
+                sortObjectKeys(d, keyOrder),
+            );
+            const pageInfo = pageInfoMapper(data);
+            (pageInfo.totalItems ?? 0) > MAXIMUM_ITEMS_FOR_BULK_FETCHING &&
+                addToastFunction(
+                    ToastTypes.ERROR,
+                    translationFunction('notAllResultsExported', {
+                        totalResults: pageInfo.totalItems,
+                        maximumExportedResults: MAXIMUM_ITEMS_FOR_BULK_FETCHING,
+                    }),
+                    translationFunction('notAllResultsExportedTitle'),
+                );
+            initiateCsvFileDownload(dataForExport, filename);
+        }
+    };
+};

package/src/utils/getDefaultTableConfig.ts

@@ -64,19 +64,17 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
             const activeProcessColumns: (keyof ProcessListItem)[] = [
                 'productName',
                 'customer',
-                'createdBy',
                 'assignee',
                 'processId',
+                'startedAt',
             ];
             return getTableConfig<T>(activeProcessColumns as (keyof T)[]);
 
         case COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY:
             const completedProcessColumns: (keyof ProcessListItem)[] = [
                 'lastStep',
-                'lastStatus',
                 'productName',
                 'customer',
-                'createdBy',
                 'assignee',
                 'processId',
                 'startedAt',

package/src/utils/getQueryVariablesForExport.spec.ts

@@ -0,0 +1,19 @@
+import { getQueryVariablesForExport } from './getQueryVariablesForExport';
+
+describe('getQueryVariablesForExport', () => {
+    it('returns queryVariables with first and after property set to 1000 and 0', () => {
+        const queryVariables = {
+            first: 10,
+            after: 20,
+            otherField: 'test',
+        };
+
+        const result = getQueryVariablesForExport(queryVariables);
+
+        expect(result).toEqual({
+            first: 1000,
+            after: 0,
+            otherField: 'test',
+        });
+    });
+});

package/src/utils/getQueryVariablesForExport.ts

@@ -0,0 +1,11 @@
+import type { GraphqlQueryVariables } from '@/types';
+
+import { MAXIMUM_ITEMS_FOR_BULK_FETCHING } from '../configuration/constants';
+
+export const getQueryVariablesForExport = <T extends object>(
+    queryVariables: GraphqlQueryVariables<T>,
+) => ({
+    ...queryVariables,
+    first: MAXIMUM_ITEMS_FOR_BULK_FETCHING,
+    after: 0,
+});

package/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './getTypedFieldFromObject';
 export * from './uuid';
 export * from './strings';
 export * from './getProductNamesFromProcess';
+export * from './getQueryVariablesForExport';