@orchestrator-ui/orchestrator-ui-components 7.5.1 → 7.7.0

package/src/pages/metadata/WfoScheduleTaskFormPage.tsx

@@ -1,27 +1,33 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import _ from 'lodash';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
-import {
-  PydanticForm,
-  PydanticFormApiResponseType,
-  PydanticFormFieldFormat,
-  PydanticFormFieldType,
-} from 'pydantic-forms';
-import type {
-  PydanticFormApiProvider,
-  PydanticFormDefinitionResponse,
-  PydanticFormSuccessResponse,
-  RawJsonProperties,
-} from 'pydantic-forms';
-
-import { Footer, PATH_METADATA_SCHEDULED_TASKS, WfoContentHeader, WfoLoading } from '@/components';
+import { PydanticForm } from 'pydantic-forms';
+import type { PydanticFormApiProvider } from 'pydantic-forms';
+import { PydanticFormApiResponseType, PydanticFormFieldFormat, PydanticFormFieldType } from 'pydantic-forms';
+import type { PydanticFormDefinitionResponse, PydanticFormSuccessResponse, RawJsonProperties } from 'pydantic-forms';
+
+import { PATH_METADATA_SCHEDULED_TASKS } from '@/components';
+import { WfoContentHeader, WfoLoading } from '@/components';
+import { Footer } from '@/components/WfoPydanticForm/Footer';
 import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
-import { useGetPydanticFormsConfig, useShowToastMessage } from '@/hooks';
-import type { CronKwargs, ScheduledTaskPostPayload } from '@/rtk';
-import { useCreateScheduledTaskMutation, useGetTasksQuery } from '@/rtk';
-import { Intervals, TaskDefinition, TaskType, ToastTypes } from '@/types';
+import { useShowToastMessage } from '@/hooks';
+import { useGetPydanticFormsConfig } from '@/hooks/useGetPydanticFormsConfig';
+import {
+  HttpStatus,
+  ScheduledTaskPostPayload,
+  isFetchBaseQueryError,
+  isRecord,
+  useCreateScheduledTaskMutation,
+} from '@/rtk';
+import type { CronKwargs } from '@/rtk';
+import { useGetTasksQuery } from '@/rtk';
+import { useStartFormMutation } from '@/rtk/endpoints/forms';
+import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
+import { ToastTypes } from '@/types';
+import { Intervals, TaskDefinition, TaskType } from '@/types';
+import { compareVersions } from '@/utils/compareVersions';
 
 type CreateScheduleFormStep1 = {
   workflowId: TaskDefinition['workflowId'];
@@ -50,7 +56,8 @@ type CreateScheduleFormStep2 =
 
 type CreateScheduleFormInput = [CreateScheduleFormStep1, CreateScheduleFormStep2];
 
-export const WfoScheduleTaskFormPage = () => {
+// TODO: remove after 5.0.0 releases and rename WfoScheduleTaskFormPageBackend to WfoScheduleTaskFormPage
+export const WfoScheduleTaskFormPageHardCoded = () => {
   const t = useTranslations('metadata.scheduleTaskForm');
   const { showToastMessage } = useShowToastMessage();
 
@@ -256,13 +263,15 @@ export const WfoScheduleTaskFormPage = () => {
 
       if (userInputStep1.taskType === TaskType.DATE) {
         return {
-          type: userInputStep1.taskType,
-          workflowId: task.workflowId,
-          workflowDescription: task.description,
-          workflowName: task.name,
-          kwargs: {
+          scheduled_type: 'create',
+          workflow_id: task.workflowId,
+          workflow_name: task.name,
+          name: task.description,
+          trigger: userInputStep1.taskType,
+          trigger_kwargs: {
             run_date: startDate,
           },
+          user_inputs: [],
         };
       } else if (userInputStep1.taskType === TaskType.INTERVAL) {
         const step2Input = userInputStep2 as CreateScheduleFormStep2Interval;
@@ -273,24 +282,28 @@ export const WfoScheduleTaskFormPage = () => {
         }
 
         return {
-          type: userInputStep1.taskType,
-          workflowId: task.workflowId,
-          workflowDescription: task.description,
-          workflowName: task.name,
-          kwargs: {
+          scheduled_type: 'create',
+          workflow_id: task.workflowId,
+          workflow_name: task.name,
+          name: task.description,
+          trigger: userInputStep1.taskType,
+          trigger_kwargs: {
             start_date: startDate,
             ...intervalArg,
           },
+          user_inputs: [],
         };
       } else if (userInputStep1.taskType === TaskType.CRON) {
         const step2Input = userInputStep2 as CreateScheduleFormStep2Cron;
         // minute hour day month weekday
         return {
-          type: userInputStep1.taskType,
-          workflowId: task.workflowId,
-          workflowDescription: task.description,
-          workflowName: task.name,
-          kwargs: getCronKwargs(step2Input.cron, startDate),
+          scheduled_type: 'create',
+          workflow_id: task.workflowId,
+          workflow_name: task.name,
+          name: task.description,
+          trigger: userInputStep1.taskType,
+          trigger_kwargs: getCronKwargs(step2Input.cron, startDate),
+          user_inputs: [],
         };
       }
       throw new Error('Unknown or missing task type');
@@ -420,3 +433,108 @@ export const WfoScheduleTaskFormPage = () => {
     </>
   );
 };
+
+const START_SCHEDULE_PAYLOAD = {};
+
+export const WfoScheduleTaskFormPageBackend = () => {
+  const { showToastMessage } = useShowToastMessage();
+
+  const generateFormId = useMemo(() => {
+    return `${JSON.stringify(START_SCHEDULE_PAYLOAD)}`;
+  }, []);
+
+  const [startForm] = useStartFormMutation();
+  const [createScheduledTask, mutationState] = useCreateScheduledTaskMutation();
+  const router = useRouter();
+
+  const onSuccess = useCallback(
+    async (_fieldValues: object, req: object) => {
+      const request = req as {
+        status: HttpStatus;
+        data: ScheduledTaskPostPayload;
+      };
+      if (request?.data?.workflow_id) {
+        const resp = await createScheduledTask(request.data);
+        if (!resp?.error) {
+          router.replace(PATH_METADATA_SCHEDULED_TASKS);
+        }
+      }
+    },
+    [router, createScheduledTask],
+  );
+
+  const getPydanticFormProvider = useCallback(() => {
+    const pydanticFormProvider: PydanticFormApiProvider = async ({ requestBody = [], formKey }) => {
+      const userInputs =
+        _.isEmpty(START_SCHEDULE_PAYLOAD) ? [...requestBody] : [{ ...START_SCHEDULE_PAYLOAD }, ...requestBody];
+
+      const response = startForm({
+        formKey,
+        userInputs,
+      });
+      return response
+        .then(({ error, data }) => {
+          return new Promise<Record<string, unknown>>((resolve) => {
+            if (isFetchBaseQueryError(error) && isRecord(error.data)) {
+              if (error.status === HttpStatus.FormNotComplete) {
+                resolve(error.data);
+              } else if (error.status === HttpStatus.BadRequest) {
+                resolve({
+                  ...error.data,
+                  status: error.status,
+                });
+              }
+            } else if (data) {
+              resolve({
+                data,
+                status: HttpStatus.Created,
+              });
+            }
+
+            resolve({});
+          });
+        })
+        .catch((error) => {
+          return new Promise<Record<string, object>>((resolve, reject) => {
+            if (error.status === HttpStatus.FormNotComplete) {
+              resolve(error.data);
+            }
+            reject(error);
+          });
+        });
+    };
+
+    return pydanticFormProvider;
+  }, [startForm]);
+
+  const config = useGetPydanticFormsConfig(getPydanticFormProvider, (props) => <Footer {...props} />);
+
+  const handleCancel = useCallback(() => {
+    const pfBasePath = PATH_METADATA_SCHEDULED_TASKS;
+    router.replace(pfBasePath);
+  }, [router]);
+
+  if (mutationState.isError) {
+    showToastMessage(ToastTypes.ERROR, '', 'Error while saving scheduled task');
+    console.error('Error saving scheduled task', mutationState);
+    return undefined;
+  }
+
+  return (
+    <PydanticForm
+      formKey="configure_schedule"
+      formId={generateFormId}
+      onSuccess={onSuccess}
+      onCancel={handleCancel}
+      config={config}
+    />
+  );
+};
+
+export const WfoScheduleTaskFormPage = () => {
+  const { data } = useGetVersionsQuery();
+  const coreVersion = data?.version.applicationVersions[0].split(' ')[1] ?? '';
+
+  const isCompatible = compareVersions(coreVersion, '5.0.0a7') !== -1;
+  return isCompatible ? <WfoScheduleTaskFormPageBackend /> : <WfoScheduleTaskFormPageHardCoded />;
+};

package/src/rtk/endpoints/agentQueryResults.ts

@@ -0,0 +1,19 @@
+import { SEARCH_QUERY_RESULTS_ENDPOINT } from '@/configuration';
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+import { QueryResultsData } from '@/types';
+
+const agentQueryResultsApi = orchestratorApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getAgentQueryResults: builder.query<QueryResultsData, string>({
+      query: (queryId) => ({
+        url: `${SEARCH_QUERY_RESULTS_ENDPOINT}/${queryId}/results`,
+        method: 'GET',
+      }),
+      extraOptions: {
+        baseQueryType: BaseQueryTypes.fetch,
+      },
+    }),
+  }),
+});
+
+export const { useGetAgentQueryResultsQuery } = agentQueryResultsApi;

package/src/rtk/endpoints/forms.ts

@@ -2,7 +2,7 @@ import { BaseQueryTypes, orchestratorApi } from '@/rtk';
 
 const PROCESS_ENDPOINT = 'processes';
 const RESUME_ENDPOINT = 'resume';
-const FORMS_ENDPOINT = 'surf/forms/'; // It is still being used by example-wfo-ui
+const FORMS_ENDPOINT = 'forms/'; // It is still being used by example-wfo-ui
 
 const formsApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({

package/src/rtk/endpoints/index.ts

@@ -20,3 +20,4 @@ export * from './forms';
 export * from './fileUpload';
 export * from './search';
 export * from './availability';
+export * from './agentQueryResults';

package/src/rtk/endpoints/metadata/scheduledTasks.ts

@@ -7,7 +7,6 @@ import {
   GraphqlQueryVariables,
   ScheduledTaskDefinition,
   ScheduledTasksDefinitionsResult,
-  TaskType,
 } from '@/types';
 
 export const scheduledTasks = `
@@ -41,7 +40,7 @@ export type ScheduledTasksResponse = {
   schedules: ScheduledTaskDefinition[];
 } & BaseGraphQlResult;
 
-/* 
+/*
 https://apscheduler.readthedocs.io/en/3.x/modules/triggers/interval.html#module-apscheduler.triggers.interval
 Possible parameters:
 weeks (int) – number of weeks to wait
@@ -105,11 +104,13 @@ export type CronKwargs = {
 type Kwargs = DateKwargs | InterValKwargs | CronKwargs;
 
 export type ScheduledTaskPostPayload = {
-  workflowId: string;
-  workflowName: string;
-  workflowDescription: string;
-  type: TaskType;
-  kwargs: Kwargs;
+  workflow_id: string;
+  workflow_name: string;
+  name: string;
+  trigger: string;
+  trigger_kwargs: Kwargs;
+  scheduled_type: string;
+  user_inputs: object[];
 };
 
 const scheduledTasksApi = orchestratorApi.injectEndpoints({
@@ -149,22 +150,13 @@ const scheduledTasksApi = orchestratorApi.injectEndpoints({
     }),
     createScheduledTask: builder.mutation<unknown, ScheduledTaskPostPayload>({
       query: (payload) => {
-        const scheduleTaskPayload = {
-          scheduled_type: 'create',
-          name: payload.workflowDescription,
-          workflow_name: payload.workflowName,
-          workflow_id: payload.workflowId,
-          trigger: payload.type,
-          trigger_kwargs: payload.kwargs,
-        };
-
         return {
           url: METADATA_SCHEDULES_ENDPOINT,
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
-          body: scheduleTaskPayload,
+          body: payload,
         };
       },
       extraOptions: {

package/src/rtk/endpoints/streamMessages.ts

@@ -1,8 +1,7 @@
 import { debounce } from 'lodash';
 
 import { getWebSocket, orchestratorApi } from '@/rtk';
-import type { RootState } from '@/rtk/store';
-import { CacheTag, CacheTagType } from '@/types';
+import { CacheTag } from '@/types';
 
 const PING_INTERVAL_MS = 30000;
 const NO_PONG_RECEIVED_TIMEOUT_MS = 35000;
@@ -29,32 +28,26 @@ enum MessageTypes {
  * - It invalidates the cache entry with the tag received in the message event
  * - WfoWebsocketStatusBadge contains logic that handles automatic reconnection and their circumstances
  */
+
 const streamMessagesApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
-    streamMessages: build.query<boolean, void>({
+    streamMessages: build.query<boolean, string>({
       queryFn: () => {
         return { data: true };
       },
-      async onCacheEntryAdded(_, { cacheDataLoaded, cacheEntryRemoved, dispatch, getState, updateCachedData }) {
+      async onCacheEntryAdded(wsEndpoint, { cacheDataLoaded, cacheEntryRemoved, dispatch, updateCachedData }) {
         const cleanUp = () => {
           clearInterval(pingInterval);
           updateCachedData(() => false);
         };
 
         const invalidateTag = (cacheTag: CacheTag) => {
-          if (validCacheTags.includes(cacheTag.type)) {
-            const cacheInvalidationAction = orchestratorApi.util.invalidateTags([cacheTag]);
-            dispatch(cacheInvalidationAction);
-          } else {
-            console.error(`Trying to invalidate a cache entry with an unknown tag: ${cacheTag.type}`);
-          }
+          const cacheInvalidationAction = orchestratorApi.util.invalidateTags([cacheTag]);
+          dispatch(cacheInvalidationAction);
         };
 
         await cacheDataLoaded;
         let initialConnection = true;
-        const state = getState() as RootState;
-        const { orchestratorWebsocketUrl } = state.orchestratorConfig;
-        const validCacheTags = Object.values(CacheTagType);
 
         const getDebounce = (delay: number) => {
           return debounce(() => {
@@ -68,8 +61,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
         const closeConnectionAfterFirstPing = getDebounce(INITIAL_CONNECTION_CHECK_INTERVAL_MS);
         const debounceClosingConnection = getDebounce(NO_PONG_RECEIVED_TIMEOUT_MS);
 
-        // Starts the websocket
-        const webSocket = await getWebSocket(orchestratorWebsocketUrl);
+        const webSocket = await getWebSocket(wsEndpoint);
 
         const sendPing = () => {
           if (webSocket.readyState === WebSocket.OPEN) {
@@ -82,9 +74,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
         // run less frequently at the discretion of the browser causing the websocket to disconnect
         // sometimes. WfoWebsocketStatusBadge contains logic to reconnect based on the pageVisibility api
         // to handle that situation.
-        const pingInterval = setInterval(() => {
-          sendPing();
-        }, PING_INTERVAL_MS);
+        const pingInterval = setInterval(sendPing, PING_INTERVAL_MS);
 
         webSocket.onopen = () => {
           // Check the connection right after it is established
@@ -106,6 +96,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
             }
             return;
           }
+
           const message = JSON.parse(data) as WebSocketMessage;
           if (message.name === MessageTypes.invalidateCache) {
             invalidateTag(message.value);
@@ -114,17 +105,13 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
           }
         });
 
-        webSocket.onerror = (event) => {
-          console.error('WebSocket error', event);
-        };
-
+        webSocket.onerror = (event) => console.error('WebSocket error', event);
         webSocket.onclose = () => {
           console.error('WebSocket closed');
           cleanUp();
         };
 
         await cacheEntryRemoved;
-
         webSocket.close();
       },
     }),

package/src/rtk/slices/orchestratorComponentOverride.ts

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 
 import { Slice, createSlice } from '@reduxjs/toolkit';
 
-import { FieldValue, RenderableFieldValue, SubscriptionDetail } from '@/types';
+import { FieldValue, RenderableFieldValue, Step, SubscriptionDetail } from '@/types';
 
 export type ValueOverrideFunction = (
   fieldValue: FieldValue | RenderableFieldValue,
@@ -19,6 +19,10 @@ export type OrchestratorComponentOverride = {
   startPage?: {
     summaryCardConfigurationOverride?: (defaultItems: ReactElement[]) => ReactElement[];
   };
+  stepDetail?: {
+    stepHeader?: React.JSXElementConstructor<{ step?: Step }>;
+    stepBody?: React.JSXElementConstructor<{ step?: Step }>;
+  };
   subscriptionDetail?: {
     valueOverrides?: ValueOverrideConfiguration;
     generalSectionConfigurationOverride?: (

package/src/types/search.ts

@@ -156,7 +156,7 @@ export type PathInfo = {
 
 /** ---------- Agent visualization types ---------- */
 
-export type AggregationResult = {
+export type ResultRow = {
   group_values: Record<string, string>;
   aggregations: Record<string, number>;
 };
@@ -172,11 +172,26 @@ export enum VisualizationType {
   TABLE = 'table',
 }
 
-export type AggregationResultsData = {
-  results: AggregationResult[];
-  total_groups: number;
+export type QueryResultsData = {
+  results: ResultRow[];
+  total_results: number;
   metadata: SearchMetadata;
   visualization_type: {
     type: VisualizationType;
   };
 };
+
+export type QueryArtifact = {
+  query_id: string;
+  total_results: number;
+  visualization_type: {
+    type: VisualizationType;
+  };
+  description: string;
+};
+
+export type ExportArtifact = {
+  query_id: string;
+  download_url: string;
+  description: string;
+};

package/src/utils/compareVersions.spec.ts

@@ -48,4 +48,9 @@ describe('isOrchestratorUiVersionCompatible', () => {
     expect(getOrchestratorCoreVersionIfNotCompatible('1.0.0', '2.10.0', TEST_VERSIONS)).toBe(null); // falls back to first MAPPED_VERSION
     expect(getOrchestratorCoreVersionIfNotCompatible('1.0.0', '2.9.9', TEST_VERSIONS)).toBe('2.10.0');
   });
+
+  test('handles prerelease orchestratorCoreVersion (e.g. 5.0.0a7)', () => {
+    expect(getOrchestratorCoreVersionIfNotCompatible('3.10.0', '5.0.0a7', TEST_VERSIONS)).toBe(null);
+    expect(getOrchestratorCoreVersionIfNotCompatible('3.10.0', '3.1.1a1', TEST_VERSIONS)).toBe('3.1.1');
+  });
 });

package/src/utils/compareVersions.ts

@@ -1,33 +1,62 @@
 import { MappedVersion } from '@/types';
 
-const compareVersions = (versionString1: string, versionString2: string): number => {
-  const splittedVersion1 = versionString1.split('.');
-  const splittedVersion2 = versionString2.split('.');
-
-  for (let i = 0; i < splittedVersion1.length; i++) {
-    if (parseInt(splittedVersion1[i]) > parseInt(splittedVersion2[i])) {
-      return 1;
-    } else if (parseInt(splittedVersion1[i]) < parseInt(splittedVersion2[i])) {
-      return -1;
+export const compareVersions = (v1: string, v2: string): number => {
+  const parse = (v: string) => {
+    const parts = v.split('.');
+
+    const major = parseInt(parts[0]);
+    const minor = parseInt(parts[1]);
+
+    const patchPart = parts[2] ?? '';
+
+    let patch = 0;
+    let suffix = '';
+
+    // extract numeric patch and suffix manually
+    for (let i = 0; i < patchPart.length; i++) {
+      const char = patchPart[i];
+
+      if (char >= '0' && char <= '9') {
+        patch = patch * 10 + Number(char);
+      } else {
+        suffix = patchPart.slice(i);
+        break;
+      }
     }
-  }
-  return 0;
+
+    return { major, minor, patch, suffix };
+  };
+
+  const a = parse(v1);
+  const b = parse(v2);
+
+  // compare numeric parts
+  if (a.major !== b.major) return a.major > b.major ? 1 : -1;
+  if (a.minor !== b.minor) return a.minor > b.minor ? 1 : -1;
+  if (a.patch !== b.patch) return a.patch > b.patch ? 1 : -1;
+
+  // compare suffix
+  if (a.suffix === b.suffix) return 0;
+  if (!a.suffix) return 1; // stable > pre-release
+  if (!b.suffix) return -1;
+
+  return a.suffix > b.suffix ? 1 : -1;
 };
 
 const findMinimumOrchestratorCoreVersion = (
   orchestratorUiVersion: string,
   versionMappings: MappedVersion[],
-): string => {
-  const orchestratorUiVersions = versionMappings.map((version) => version.orchestratorUiVersion);
-  let mappedVersion = versionMappings[0];
+): string | null => {
+  // sort mappings descending by UI version. This is done just in case the input versionMappings are not sorted
+  const sorted = [...versionMappings].sort((a, b) => compareVersions(b.orchestratorUiVersion, a.orchestratorUiVersion));
 
-  for (let i = 0; i < orchestratorUiVersions.length; i++) {
-    if ([0, 1].includes(compareVersions(orchestratorUiVersion, orchestratorUiVersions[i]))) {
-      mappedVersion = versionMappings[i];
+  for (const mapping of sorted) {
+    if (compareVersions(orchestratorUiVersion, mapping.orchestratorUiVersion) >= 0) {
+      return mapping.minimumOrchestratorCoreVersion;
     }
   }
 
-  return mappedVersion.minimumOrchestratorCoreVersion;
+  return sorted[sorted.length - 1]?.minimumOrchestratorCoreVersion ?? null;
 };
 
 export const getOrchestratorCoreVersionIfNotCompatible = (
@@ -35,10 +64,13 @@ export const getOrchestratorCoreVersionIfNotCompatible = (
   orchestratorCoreVersion: string,
   versionMappings: MappedVersion[],
 ): string | null => {
-  const minimumOrchestratorCoreVersion = findMinimumOrchestratorCoreVersion(orchestratorUiVersion, versionMappings);
-  const comparison = compareVersions(orchestratorCoreVersion, minimumOrchestratorCoreVersion);
-  if (comparison === -1) {
-    return minimumOrchestratorCoreVersion;
+  const minimumVersion = findMinimumOrchestratorCoreVersion(orchestratorUiVersion, versionMappings);
+
+  if (!minimumVersion) {
+    return null;
   }
-  return null;
+
+  const isCompatible = compareVersions(orchestratorCoreVersion, minimumVersion) !== -1;
+
+  return isCompatible ? null : minimumVersion;
 };