fix(executions): show loop iteration taskruns in the Gantt view

A LOOP child execution's taskruns are all orphans: their parentTaskRunId
points at the Loop run, which lives in the parent execution and is never
present in the child's taskRunList. The Gantt view dropped such orphans
(they were pushed to childTasks but never reattached, so they never
reached rootTasks), while the Logs view treated them as roots and
rendered them. The Gantt tab therefore showed the empty "ended without
running any task" state for every loop iteration.

Unify the duplicated parent->child ordering of both views into one shared
buildTaskRunHierarchy() helper that treats orphans (parentTaskRunId whose
target is absent) as roots and assigns depth during the DFS walk. Gantt
passes a start-date sibling comparator; the Logs view keeps list order.

Author: brian-mulier-p

ui/src/components/executions/Gantt.vue

@@ -246,6 +246,7 @@
     import TaskRunActions from "./TaskRunActions.vue"
     import ExecutionPending from "./ExecutionPending.vue"
     import emptyIllustration from "../../assets/empty_visuals/generic.svg"
+    import {buildTaskRunHierarchy} from "../../utils/taskRunHierarchy"
     import OnboardingSuccessPopup from "../onboarding/OnboardingSuccessPopup.vue"
     import SaveExecuteAnimation from "../inputs/SaveExecuteAnimation.vue"
 
@@ -269,8 +270,7 @@
 
     interface TaskWrapper {
         task: TaskRun;
-        depth: number | undefined;
-        children?: TaskWrapper[];
+        depth: number;
     }
 
     interface SeriesItem {
@@ -381,48 +381,12 @@
         return execution.value?.state?.histories?.[0] ? ts(execution.value.state.histories[0].date) : 0
     })
 
-    const tasks = computed<TaskWrapper[]>(() => {
-        const rootTasks: TaskWrapper[] = []
-        const childTasks: TaskWrapper[] = []
-        const sortedTasks: TaskWrapper[] = []
-        const tasksById: Record<string, TaskWrapper> = {}
-
-        for (const task of (execution.value?.taskRunList || []) as TaskRun[]) {
-            const taskWrapper: TaskWrapper = {task, depth: task.parentTaskRunId ? undefined : 0}
-            if (task.parentTaskRunId) {
-                childTasks.push(taskWrapper)
-            } else {
-                rootTasks.push(taskWrapper)
-            }
-            tasksById[task.id] = taskWrapper
-        }
-
-        for (let i = 0; i < childTasks.length; i++) {
-            const taskWrapper = childTasks[i]
-            const parentTask = tasksById[taskWrapper.task.parentTaskRunId!]
-            if (parentTask) {
-                taskWrapper.depth = parentTask.depth! + 1
-                tasksById[taskWrapper.task.id] = taskWrapper
-                if (!parentTask.children) {
-                    parentTask.children = []
-                }
-                parentTask.children.push(taskWrapper)
-            }
-        }
-
-        const nodeStart = (node: TaskWrapper): number => ts(node.task.state.histories[0].date)
-        const childrenSort = (nodes: TaskWrapper[]): void => {
-            nodes.sort((n1, n2) => (nodeStart(n1) > nodeStart(n2) ? 1 : -1))
-            for (const node of nodes) {
-                sortedTasks.push(node)
-                if (node.children) {
-                    childrenSort(node.children)
-                }
-            }
-        }
-        childrenSort(rootTasks)
-        return sortedTasks
-    })
+    const tasks = computed<TaskWrapper[]>(() =>
+        buildTaskRunHierarchy(
+            (execution.value?.taskRunList || []) as TaskRun[],
+            (n1, n2) => ts(n1.state.histories[0].date) - ts(n2.state.histories[0].date),
+        ),
+    )
 
     const taskTypeByTaskRun = computed<Array<[TaskRun, string | undefined]>>(() => {
         return series.value.map(serie => [serie.task, taskType(serie.task)])

ui/src/components/logs/TaskRunDetails.vue

@@ -287,6 +287,7 @@
     import {apiUrl} from "override/utils/route"
     import * as Utils from "../../utils/utils"
     import * as LogUtils from "../../utils/logs"
+    import {buildTaskRunHierarchy} from "../../utils/taskRunHierarchy"
     import throttle from "lodash/throttle"
     import {useClient, type TaskRun, type TaskRunAttempt} from "@kestra-io/kestra-sdk"
 
@@ -392,29 +393,7 @@
 
         // Order taskruns parent → child and annotate depth, so dynamically-generated taskruns
         // (e.g. each Ansible play/task) render indented under their parent taskrun.
-        const byId: Record<string, TaskRun> = Object.fromEntries(taskRunList.map((tr) => [tr.id, tr]))
-        const childrenByParent: Record<string, TaskRun[]> = {}
-        const roots: TaskRun[] = []
-        for (const tr of taskRunList) {
-            if (tr.parentTaskRunId && byId[tr.parentTaskRunId]) {
-                (childrenByParent[tr.parentTaskRunId] ??= []).push(tr)
-            } else {
-                roots.push(tr)
-            }
-        }
-
-        const ordered: TaskRunWithDepth[] = []
-        const walk = (nodes: TaskRun[], depth: number) => {
-            for (const node of nodes) {
-                ordered.push({...node, depth})
-                const children = childrenByParent[node.id]
-                if (children) {
-                    walk(children, depth + 1)
-                }
-            }
-        }
-        walk(roots, 0)
-        return ordered
+        return buildTaskRunHierarchy(taskRunList).map(({task, depth}) => ({...task, depth}))
     })
 
     const taskRunById = computed(() =>

ui/src/utils/taskRunHierarchy.ts

@@ -0,0 +1,51 @@
+/**
+ * Orders a flat list of taskruns parent → child, annotating each with its nesting depth.
+ *
+ * A taskrun is nested under its parent only when that parent is also present in the list. Orphans
+ * (a `parentTaskRunId` whose target is absent — e.g. a LOOP iteration execution whose tasks point at
+ * the Loop run living in the parent execution) are treated as roots so they still render.
+ *
+ * @param taskRunList    the taskruns to order
+ * @param compareSiblings optional comparator to sort siblings (e.g. by start date); when omitted the
+ *                        original list order is preserved
+ * @return the taskruns flattened depth-first, each paired with its depth (roots at depth 0)
+ */
+export function buildTaskRunHierarchy<T extends {id: string; parentTaskRunId?: string}>(
+    taskRunList: T[],
+    compareSiblings?: (a: T, b: T) => number,
+): Array<{task: T; depth: number}> {
+    const byId = new Set(taskRunList.map((tr) => tr.id))
+    const childrenByParent: Record<string, T[]> = {}
+    const roots: T[] = []
+
+    for (const tr of taskRunList) {
+        if (tr.parentTaskRunId && byId.has(tr.parentTaskRunId)) {
+            (childrenByParent[tr.parentTaskRunId] ??= []).push(tr)
+        } else {
+            // root OR orphan-treated-as-root
+            roots.push(tr)
+        }
+    }
+
+    if (compareSiblings) {
+        roots.sort(compareSiblings)
+        for (const children of Object.values(childrenByParent)) {
+            children.sort(compareSiblings)
+        }
+    }
+
+    const ordered: Array<{task: T; depth: number}> = []
+    const walk = (nodes: T[], depth: number): void => {
+        for (const node of nodes) {
+            // depth is computed during the walk — order-independent, parents resolve before children
+            ordered.push({task: node, depth})
+            const children = childrenByParent[node.id]
+            if (children) {
+                walk(children, depth + 1)
+            }
+        }
+    }
+    walk(roots, 0)
+
+    return ordered
+}

ui/tests/unit/utils/taskRunHierarchy.spec.ts

@@ -0,0 +1,85 @@
+import {describe, it, expect} from "vitest"
+
+import {buildTaskRunHierarchy} from "../../../src/utils/taskRunHierarchy"
+
+type TestTaskRun = {id: string; parentTaskRunId?: string; start?: number}
+
+const flatten = (taskRunList: TestTaskRun[], compareSiblings?: (a: TestTaskRun, b: TestTaskRun) => number) =>
+    buildTaskRunHierarchy(taskRunList, compareSiblings).map(({task, depth}) => [task.id, depth])
+
+describe("buildTaskRunHierarchy", () => {
+    it("returns an empty array for an empty list", () => {
+        expect(buildTaskRunHierarchy([] as TestTaskRun[])).toEqual([])
+    })
+
+    it("treats an orphan child (parent not in list) as a depth-0 root", () => {
+        // A LOOP iteration execution: every taskrun points at the Loop run, which is absent from the list.
+        const taskRunList: TestTaskRun[] = [
+            {id: "log-a", parentTaskRunId: "loop-run-not-in-list"},
+            {id: "log-b", parentTaskRunId: "loop-run-not-in-list"},
+        ]
+
+        expect(flatten(taskRunList)).toEqual([
+            ["log-a", 0],
+            ["log-b", 0],
+        ])
+    })
+
+    it("nests present children under their parent with correct depth", () => {
+        const taskRunList: TestTaskRun[] = [
+            {id: "parent"},
+            {id: "child", parentTaskRunId: "parent"},
+            {id: "root"},
+        ]
+
+        expect(flatten(taskRunList)).toEqual([
+            ["parent", 0],
+            ["child", 1],
+            ["root", 0],
+        ])
+    })
+
+    it("handles multi-level nesting", () => {
+        const taskRunList: TestTaskRun[] = [
+            {id: "a"},
+            {id: "b", parentTaskRunId: "a"},
+            {id: "c", parentTaskRunId: "b"},
+        ]
+
+        expect(flatten(taskRunList)).toEqual([
+            ["a", 0],
+            ["b", 1],
+            ["c", 2],
+        ])
+    })
+
+    it("sorts siblings with the provided comparator (Gantt's start-date contract)", () => {
+        const taskRunList: TestTaskRun[] = [
+            {id: "late", start: 200},
+            {id: "early", start: 100},
+            {id: "late-child", parentTaskRunId: "early", start: 50},
+            {id: "early-child", parentTaskRunId: "early", start: 10},
+        ]
+
+        expect(flatten(taskRunList, (a, b) => (a.start ?? 0) - (b.start ?? 0))).toEqual([
+            ["early", 0],
+            ["early-child", 1],
+            ["late-child", 1],
+            ["late", 0],
+        ])
+    })
+
+    it("preserves list order when no comparator is given (Logs' behaviour)", () => {
+        const taskRunList: TestTaskRun[] = [
+            {id: "third"},
+            {id: "first"},
+            {id: "second", parentTaskRunId: "third"},
+        ]
+
+        expect(flatten(taskRunList)).toEqual([
+            ["third", 0],
+            ["second", 1],
+            ["first", 0],
+        ])
+    })
+})