Display operation on workflow error details page

With some additional information from the backend, we can display
the workflow operation during which an error occured
on the error details page for easy access to information
about the operation.

Requires backend PR opencast/opencast#6888

Author: Arnei

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx

@@ -1,5 +1,7 @@
 import Notifications from "../../../shared/Notifications";
 import {
+	getModalWorkflowId,
+	getWorkflowByJobId,
 	getWorkflowErrorDetails,
 	isFetchingWorkflowErrorDetails,
 } from "../../../../selectors/eventDetailsSelectors";
@@ -10,24 +12,39 @@ import { removeNotificationWizardForm } from "../../../../slices/notificationSli
 import { renderValidDate } from "../../../../utils/dateUtils";
 import { WorkflowTabHierarchy } from "../modals/EventDetails";
 import { useTranslation } from "react-i18next";
-import { setModalWorkflowTabHierarchy } from "../../../../slices/eventDetailsSlice";
+import { fetchWorkflowOperationDetails, setModalWorkflowTabHierarchy } from "../../../../slices/eventDetailsSlice";
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
+import { Operation } from "./EventDetailsWorkflowOperations";
 
 /**
  * This component manages the workflow error details for the workflows tab of the event details modal
  */
-const EventDetailsWorkflowErrorDetails = () => {
+const EventDetailsWorkflowErrorDetails = ({
+	eventId,
+}: {
+	eventId: string
+}) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const errorDetails = useAppSelector(state => getWorkflowErrorDetails(state));
 	const isFetching = useAppSelector(state => isFetchingWorkflowErrorDetails(state));
+	const operationsEntry = useAppSelector(state => getWorkflowByJobId(state, errorDetails.rootJobId ?? errorDetails.jobId, errorDetails.jobId))
+	const workflowId = useAppSelector(state => getModalWorkflowId(state));
 
 	const openSubTab = (tabType: WorkflowTabHierarchy) => {
 		dispatch(removeNotificationWizardForm());
 		dispatch(setModalWorkflowTabHierarchy(tabType));
 	};
 
+	const openOperationDetailsSubTab = (tabType: WorkflowTabHierarchy, operationId: number | undefined = undefined) => {
+		dispatch(removeNotificationWizardForm());
+		dispatch(setModalWorkflowTabHierarchy(tabType));
+		if (tabType === "workflow-operation-details") {
+			dispatch(fetchWorkflowOperationDetails({ eventId, workflowId, operationId })).then();
+		}
+	};
+
 	return (
 		<ModalContentTable
 			modalContentChildren={
@@ -45,6 +62,38 @@ const EventDetailsWorkflowErrorDetails = () => {
 			}
 			modalBodyChildren={<Notifications context="not_corner" />}
 		>
+			{/* Error operation table */}
+			<div className="obj tbl-container">
+				<header>
+					{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.OPERATION")}
+				</header>
+				<table className="main-tbl">
+					<thead>
+						<tr>
+							<th>
+								{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS") /* Status */}
+							</th>
+							<th>
+								{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE") /* Title */}
+							</th>
+							<th>
+								{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION") /* Description */}
+							</th>
+							<th className="medium" />
+						</tr>
+					</thead>
+					<tbody>
+						{ operationsEntry &&
+							<Operation
+								operationId={operationsEntry.index}
+								item={operationsEntry.operation}
+								openSubTab={openOperationDetailsSubTab}
+							/>
+						}
+					</tbody>
+				</table>
+			</div>
+
 			{/* 'Error Details' table */}
 			<div className="obj tbl-details">
 				<header>

src/components/events/partials/modals/EventDetails.tsx

@@ -289,7 +289,9 @@ const EventDetails = ({
 							<EventDetailsWorkflowOperationDetails />
 						)) ||
 						(workflowTabHierarchy === "workflow-error-details" && (
-							<EventDetailsWorkflowErrorDetails />
+							<EventDetailsWorkflowErrorDetails
+								eventId={eventId}
+							/>
 						)))}
 				{page === EventDetailsPage.AccessPolicy && (
 					<EventDetailsAccessPolicyTab

src/i18n/org/opencastproject/adminui/languages/lang-en_US.json

@@ -1095,7 +1095,8 @@
 						"DATE": "Date",
 						"HOST": "Processing host",
 						"TYPE": "Service type",
-						"TECHNICAL_DETAILS": "Technical details"
+						"TECHNICAL_DETAILS": "Technical details",
+						"OPERATION": "Operation the error occured in"
 					}
 				}
 			}

src/selectors/eventDetailsSelectors.ts

@@ -131,6 +131,36 @@ export const getLatestWorkflowOperation = createSelector(
 		return null; // if none found
 	},
 );
+// Get operation by root_job_id, or jobId
+export const getWorkflowByJobId = createSelector(
+	[
+		getWorkflowOperations,
+		(_operations, rootJobId: number) => rootJobId,
+		(_operations, rootJobId: number, jobId: number) => jobId,
+	],
+	(operations, rootJobId, jobId) => {
+		let operation = null;
+		let index = null;
+
+		index = operations.entries.findIndex(
+			entry => entry.id === rootJobId,
+		);
+		operation = operations.entries[index];
+
+		if (!operation) {
+			index = operations.entries.findIndex(
+				entry => entry.id === jobId,
+			);
+			operation = operations.entries[index];
+		}
+
+		if (operation) {
+			return { operation, index };
+		}
+
+		return null;
+	},
+);
 export const isFetchingWorkflowOperations = (state: RootState) =>
 	state.eventDetails.statusWorkflowOperations === "loading";
 export const getWorkflowOperationDetails = (state: RootState) =>

src/slices/eventDetailsSlice.ts

@@ -359,6 +359,7 @@ type EventDetailsState = {
 		}[],
 		id: number,
 		jobId: number,
+		rootJobId?: number,
 		processingHost: string,
 		serviceType: string,
 		severity: string,