Add icons to wf operation status

This adds icons in front of the status text in the workflow
operation list. This is supposed to make the state of the
workflow more easily identifiable at a glance.

Author: Arnei

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

@@ -45,6 +45,7 @@ const EventDetailsWorkflowDetails = ({
 	const isFetching = useAppSelector(state => isFetchingWorkflowDetails(state));
 
 	useEffect(() => {
+		// Get latest workflow. Ideally we would have an endpoint that gives us the latest workflow straight up.
 		if (!workflowId) {
 			dispatch(fetchWorkflows(eventId)).unwrap()
 				.then(workflows => {

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

@@ -14,6 +14,8 @@ import { WorkflowTabHierarchy } from "../modals/EventDetails";
 import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
+import { LuCheck, LuEllipsis, LuLoader, LuPause, LuRotateCcw, LuX } from "react-icons/lu";
+import { GoDash } from "react-icons/go";
 
 /**
  * This component manages the workflow operations for the workflows tab of the event details modal
@@ -149,7 +151,10 @@ export const Operation = ({
 
 	return (
 		<tr>
-			<td>{t(item.status as ParseKeys)}</td>
+			<td style={{ display: "flex", alignItems: "center" }}>
+				<OperationStatusIcon status={item.status} />
+				{t(item.status as ParseKeys)}
+			</td>
 			<td>{item.title}</td>
 			<td>{item.description}</td>
 
@@ -172,4 +177,34 @@ export const Operation = ({
 	);
 };
 
+const OperationStatusIcon = ({
+	status,
+}: {
+	status: string
+}) => {
+	// Parse translation key to state
+	const state = status.split(".").pop();
+
+	const iconStyle = { marginRight: "5px"};
+
+	switch (state) {
+		case "INSTANTIATED":
+			return <LuEllipsis style={{ ...iconStyle, color: "#666"}}/>;
+		case "RUNNING":
+			return <LuLoader className="fa-spin" style={{ ...iconStyle, color: "#666"}}/>;
+		case "PAUSED":
+			return <LuPause style={{ ...iconStyle, color: "#666"}}/>;
+		case "SUCCEEDED":
+			return <LuCheck style={{ ...iconStyle, color: "#37c180"}}/>;
+		case "FAILED":
+			return <LuX style={{ ...iconStyle, color: "#fa1919"}}/>;
+		case "SKIPPED":
+			return <GoDash style={{ ...iconStyle, color: "#378dd4"}}/>;
+		case "RETRY":
+			return <LuRotateCcw className="fa-spin" style={{ ...iconStyle, color: "#666"}}/>;
+		default:
+			return <></>;
+	}
+}
+
 export default EventDetailsWorkflowOperations;

src/slices/eventDetailsSlice.ts

@@ -323,7 +323,7 @@ type EventDetailsState = {
 			configuration: { [key: string]: string },
 			description: string,
 			id: number,
-			status: string,  // translation key
+			status: string,  // translation key, ending on INSTANTIATED, RUNNING, PAUSED, SUCCEEDED, FAILED, SKIPPED, RETRY
 			title: string,
 		}[]
 	},