fix:UI breaking while clicking on nested tasks in execution diagram

ui/src/components/diagram/WorkflowDAG.js

@@ -580,7 +580,7 @@ export default class WorkflowDAG {
       return this.taskResultsById.get(taskPointer.id);
     } else {
       const node = this.graph.node(taskPointer.ref);
-      return _.last(node.taskResults);
+      return _.last(node?.taskResults);
     }
   }
 }

ui/src/pages/execution/Execution.jsx

@@ -126,6 +126,7 @@ export default function Execution() {
   const [isFullWidth, setIsFullWidth] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
   const [drawerWidth, setDrawerWidth] = useState(INIT_DRAWER_WIDTH);
+  const [selectedNode, setSelectedNode] = useState();
 
   const [tabIndex, setTabIndex] = useQueryState("tabIndex", 0);
   const [selectedTaskRison, setSelectedTaskRison] = useQueryState("task", "");
@@ -265,6 +266,7 @@ export default function Execution() {
                   execution={execution}
                   setSelectedTask={setSelectedTask}
                   selectedTask={selectedTask}
+                  setSelectedNode={setSelectedNode}
                 />
               )}
               {tabIndex === 1 && <ExecutionSummary execution={execution} />}
@@ -307,6 +309,8 @@ export default function Execution() {
                 className={classes.rightPanel}
                 selectedTask={selectedTask}
                 dag={dag}
+                execution={execution}
+                selectedNode={selectedNode}
                 onTaskChange={setSelectedTask}
               />
             </div>

ui/src/pages/execution/RightPanel.jsx

@@ -8,6 +8,10 @@ import TaskLogs from "./TaskLogs";
 import { makeStyles } from "@material-ui/styles";
 import _ from "lodash";
 import TaskPollData from "./TaskPollData";
+import {
+  pendingTaskSelection,
+  taskWithLatestIteration,
+} from "../../utils/helpers";
 
 const useStyles = makeStyles({
   banner: {
@@ -24,7 +28,13 @@ const useStyles = makeStyles({
   },
 });
 
-export default function RightPanel({ selectedTask, dag, onTaskChange }) {
+export default function RightPanel({
+  selectedTask,
+  dag,
+  execution,
+  onTaskChange,
+  selectedNode,
+}) {
   const [tabIndex, setTabIndex] = useState("summary");
 
   const classes = useStyles();
@@ -33,10 +43,11 @@ export default function RightPanel({ selectedTask, dag, onTaskChange }) {
     setTabIndex("summary"); // Reset to Status Tab on ref change
   }, [selectedTask]);
 
-  const taskResult = useMemo(
-    () => dag && dag.resolveTaskResult(selectedTask),
-    [dag, selectedTask]
-  );
+  const taskResult =
+    selectedNode?.data?.task?.executionData?.status === "PENDING"
+      ? pendingTaskSelection(selectedNode?.data?.task)
+      : taskWithLatestIteration(execution?.tasks, selectedTask?.ref);
+
   const dfOptions = useMemo(
     () => dag && dag.getSiblings(selectedTask),
     [dag, selectedTask]

ui/src/pages/execution/TaskDetails.jsx

@@ -4,6 +4,10 @@ import Timeline from "./Timeline";
 import TaskList from "./TaskList";
 import { makeStyles } from "@material-ui/styles";
 import { WorkflowVisualizer } from "orkes-workflow-visualizer";
+import {
+  pendingTaskSelection,
+  taskWithLatestIteration,
+} from "../../utils/helpers";
 
 const useStyles = makeStyles({
   taskWrapper: {
@@ -18,6 +22,7 @@ export default function TaskDetails({
   dag,
   selectedTask,
   setSelectedTask,
+  setSelectedNode,
 }) {
   const [tabIndex, setTabIndex] = useState(0);
   const classes = useStyles();
@@ -39,7 +44,16 @@ export default function TaskDetails({
             zoom={0.7}
             data={dag?.execution}
             executionMode={true}
-            onClick={(e, data) => setSelectedTask({ ref: data?.id })}
+            onClick={(e, data) => {
+              const selectedTaskRefName =
+                data?.data?.task?.executionData?.status === "PENDING"
+                  ? pendingTaskSelection(data?.data?.task)?.workflowTask
+                      ?.taskReferenceName
+                  : taskWithLatestIteration(execution?.tasks, data?.id)
+                      ?.referenceTaskName;
+              setSelectedNode(data);
+              setSelectedTask({ ref: selectedTaskRefName });
+            }}
           />
         )}
         {tabIndex === 1 && (

ui/src/utils/helpers.js

@@ -1,6 +1,7 @@
 import { format, formatDuration, intervalToDuration } from "date-fns";
 import _ from "lodash";
-import packageJson from '../../package.json';
+import packageJson from "../../package.json";
+import _nth from "lodash/nth";
 
 export function timestampRenderer(date) {
   if (_.isNil(date)) return null;
@@ -91,9 +92,45 @@ export function isEmptyIterable(iterable) {
 }
 
 export function getBasename() {
-  let basename = '/';
-  try{
+  let basename = "/";
+  try {
     basename = new URL(packageJson.homepage).pathname;
-  } catch(e) {}
-  return _.isEmpty(basename) ? '/' : basename;
+  } catch (e) {}
+  return _.isEmpty(basename) ? "/" : basename;
 }
+
+export const taskWithLatestIteration = (tasksList, taskReferenceName) => {
+  const filteredTasks = tasksList?.filter(
+    (task) =>
+      task?.workflowTask?.taskReferenceName === taskReferenceName ||
+      task?.referenceTaskName === taskReferenceName
+  );
+
+  if (filteredTasks && filteredTasks.length === 1) {
+    // task without any retry/iteration
+    return _nth(filteredTasks, 0);
+  } else if (filteredTasks && filteredTasks.length > 1) {
+    const result = filteredTasks.reduce(
+      (acc, task, idx) => {
+        if (task?.seq && acc?.seqNumber < Number(task.seq)) {
+          return { seqNumber: Number(task.seq), idx };
+        }
+        return acc;
+      },
+      { seqNumber: 0, idx: -1 }
+    );
+
+    if (result?.idx > -1) {
+      return _nth(filteredTasks, result.idx);
+    }
+  }
+  return undefined;
+};
+
+export const pendingTaskSelection = (task) => {
+  const result = {
+    ...task?.executionData,
+    workflowTask: task,
+  };
+  return result;
+};