@orchestrator-ui/orchestrator-ui-components 0.4.0 → 0.5.1

package/src/pages/startPage/WfoStartPage.tsx

@@ -23,7 +23,7 @@ import {
     SortOrder,
     Subscription,
 } from '@/types';
-import { getFirstUuidPart } from '@/utils';
+import { formatDate } from '@/utils';
 
 export const WfoStartPage = () => {
     const t = useTranslations('startPage');
@@ -71,7 +71,7 @@ export const WfoStartPage = () => {
             subscriptionsSummaryResult?.subscriptions.page.map(
                 (subscription) => ({
                     title: subscription.description,
-                    value: getFirstUuidPart(subscription.subscriptionId),
+                    value: formatDate(subscription.startDate),
                     url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
                 }),
             ) ?? [],
@@ -90,7 +90,7 @@ export const WfoStartPage = () => {
         listItems:
             processesSummaryResult?.processes.page.map((workflow) => ({
                 title: workflow.workflowName,
-                value: workflow.startedAt,
+                value: formatDate(workflow?.startedAt),
                 url: `${PATH_WORKFLOWS}/${workflow.processId}`,
             })) ?? [],
         button: {
@@ -109,7 +109,7 @@ export const WfoStartPage = () => {
         listItems:
             failedTasksSummaryResult?.processes.page.map((task) => ({
                 title: task.workflowName,
-                value: task.startedAt,
+                value: formatDate(task?.startedAt),
                 url: `${PATH_TASKS}/${task.processId}`,
             })) ?? [],
         button: {
@@ -154,9 +154,9 @@ export const WfoStartPage = () => {
         <EuiFlexItem>
             <WfoSummaryCards
                 summaryCards={[
-                    latestActiveSubscriptionsSummaryCard,
-                    latestWorkflowsSummaryCard,
                     failedTasksSummaryCard,
+                    latestWorkflowsSummaryCard,
+                    latestActiveSubscriptionsSummaryCard,
                     productsSummaryCard,
                 ]}
             />

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,6 +20,7 @@ export enum EngineStatus {
     RUNNING = 'RUNNING',
     PAUSING = 'PAUSING',
     PAUSED = 'PAUSED',
+    UNKNOWN = 'UNKNOWN',
 }
 
 export type Customer = {
@@ -266,6 +269,10 @@ export type GraphQLPageInfo = {
     filterFields: string[];
 };
 
+export type BaseGraphQlResult = {
+    pageInfo: GraphQLPageInfo;
+};
+
 export interface SubscriptionsResult<T = Subscription> {
     subscriptions: GraphQlResultPage<T>;
 }
@@ -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

@@ -1,7 +1,7 @@
 import { TranslationValues } from 'next-intl';
 
 import { MAXIMUM_ITEMS_FOR_BULK_FETCHING } from '@/configuration/constants';
-import { ToastTypes } from '@/contexts';
+import { ToastTypes } from '@/types';
 import { GraphQLPageInfo } from '@/types';
 import { sortObjectKeys } from '@/utils/sortObjectKeys';
 
@@ -48,24 +48,19 @@ export const getCsvFileNameWithDate = (fileNameWithoutExtension: string) => {
     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,
-    ) =>
-    async () => {
+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) {
@@ -85,3 +80,4 @@ export const csvDownloadHandler =
             initiateCsvFileDownload(dataForExport, filename);
         }
     };
+};

package/src/utils/date.ts

@@ -112,3 +112,11 @@ export const formatDateCetWithUtc = (
 
     return `${formattedDateCET} (${formattedDateUTC})`;
 };
+
+export const getDate = (date: Date | string | null) => {
+    if (typeof date === 'string') {
+        return new Date(date);
+    }
+
+    return date;
+};

package/src/components/WfoSettings/WfoSettings.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
-
-import { EngineStatus } from '@/types';
-
-import { WfoFlushSettings } from './WfoFlushSettings';
-import { WfoModifySettings } from './WfoModifySettings';
-import { WfoStatus } from './WfoStatus';
-
-interface WfoSettingsProps {
-    currentEngineStatus: EngineStatus | undefined;
-    currentRunningProcesses: number | undefined;
-    changeEngineStatus: () => void;
-}
-export const WfoSettings = ({
-    currentEngineStatus,
-    currentRunningProcesses,
-    changeEngineStatus,
-}: WfoSettingsProps) => {
-    return (
-        <>
-            <EuiSpacer />
-
-            <EuiPageHeader pageTitle="Settings" />
-            <EuiHorizontalRule />
-            <WfoFlushSettings />
-            <EuiSpacer />
-            <WfoModifySettings
-                engineStatus={currentEngineStatus}
-                changeEngineStatus={changeEngineStatus}
-            />
-            <EuiSpacer />
-            <WfoStatus
-                engineStatus={currentEngineStatus || EngineStatus.PAUSED}
-                runningProcesses={currentRunningProcesses}
-            />
-        </>
-    );
-};