fix(Dashboard): improved task hierarchy navigation using a "tree view"

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>

Author: JBBianchi

src/dashboard/Synapse.Dashboard/Components/TaskInstanceDetails/TaskInstanceDetails.razor

@@ -71,32 +71,6 @@
                 <DocumentDetails Label='Output' Reference="@TaskInstance.OutputReference" />
             }
         </div>
-        <h6 class="pt-3">Executed Tasks</h6>
-        @if (SubTasks == null || SubTasks.Count() == 0)
-        {
-            @("-")
-        }
-        else
-        {
-            <table class="table table-hover">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th class="text-center">Status</th>
-                        <th class="text-center">Start Time</th>
-                        <th class="text-center">End Time</th>
-                        <th class="text-center">Duration</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @foreach (var task in SubTasks)
-                    {
-                        <TaskInstanceRow TaskInstance="@task" Tasks="@Tasks"/>
-                    }
-                </tbody>
-            </table>
-        }
         <h6 class="pt-3">Runs</h6>
         @if (TaskInstance.Runs == null || TaskInstance.Runs.Count == 0)
         {
@@ -163,13 +137,4 @@
 
 @code {
     [Parameter] public TaskInstance? TaskInstance { get; set; }
-    [Parameter] public IEnumerable<TaskInstance>? Tasks { get; set; }
-
-    IEnumerable<TaskInstance> SubTasks
-    {
-        get
-         {
-            return TaskInstance == null ? [] : (this.Tasks ?? []).Where(t => t.ParentId == TaskInstance.Id);
-        }
-    }
 }

src/dashboard/Synapse.Dashboard/Components/WorkflowInstanceDetails/TaskInstanceRow.razor

@@ -18,6 +18,17 @@
 
 @if (TaskInstance != null) {
     <tr @onclick="async _ => await OnToggleRow()" class="cursor-pointer">
+        <td>
+            @if (HasChildren) {
+                @for(var i = 0; i<Depth; i++)
+                {
+                    <span class="ps-2"></span>
+                }
+                <span @onclick="ToggleChildrenVisibility" @onclick:stopPropagation="true">
+                    <Icon Name="showChildren ? IconName.Dash : IconName.Plus" Class="cursor-pointer" />
+                </span>
+            }
+        </td>
         <td>@TaskInstance.Reference</td>
         <td class="text-center"><span class="badge rounded-pill badge rounded-pill border @TaskInstance.Status.GetColorClass()">@(TaskInstance.Status ?? TaskInstanceStatus.Pending)</span></td>
         <td class="text-center">@(TaskInstance.StartedAt?.RelativeFormat() ?? "-")</td>
@@ -38,7 +49,7 @@
         <tr>
             <td colspan="999">
                 <Collapse @ref="collapse">
-                    <TaskInstanceDetails TaskInstance="@TaskInstance" Tasks="@Tasks" />
+                    <TaskInstanceDetails TaskInstance="@TaskInstance" />
                 </Collapse>
             </td>
         </tr>
@@ -47,9 +58,12 @@
 
 @code {
     [Parameter] public TaskInstance? TaskInstance { get; set; }
-    [Parameter] public IEnumerable<TaskInstance>? Tasks { get; set; }
+    [Parameter] public bool HasChildren { get; set; }
+    [Parameter] public EventCallback<( string, int )> OnToggleChildrenClick { get; set; }
+    [Parameter] public int Depth { get; set; }
     bool isOpen = false;
     Collapse? collapse;
+    bool showChildren = false;
 
     async Task OnToggleRow()
     {
@@ -62,4 +76,13 @@
         }
         StateHasChanged();
     }
+
+    async Task ToggleChildrenVisibility()
+    {
+        showChildren = !showChildren;
+        if (OnToggleChildrenClick.HasDelegate && TaskInstance != null)
+        {
+            await OnToggleChildrenClick.InvokeAsync((TaskInstance.Id, Depth ));
+        }
+    }
 }

src/dashboard/Synapse.Dashboard/Components/WorkflowInstanceDetails/WorkflowInstanceDetails.razor

@@ -77,6 +77,7 @@
             <table class="table table-hover">
                 <thead>
                     <tr>
+                        <th></th>
                         <th>Name</th>
                         <th class="text-center">Status</th>
                         <th class="text-center">Start Time</th>
@@ -86,9 +87,9 @@
                     </tr>
                 </thead>
                 <tbody>
-                    @foreach (var task in workflowInstance.Status.Tasks.Where(task => string.IsNullOrWhiteSpace(task.ParentId)) )
+                    @foreach (var task in workflowInstance.Status.Tasks.Where(task => string.IsNullOrWhiteSpace(task.ParentId) || expandedTasks.ContainsKey(task.ParentId)) )
                     {
-                        <TaskInstanceRow TaskInstance="@task" Tasks="@workflowInstance.Status.Tasks" />
+                        <TaskInstanceRow TaskInstance="@task" Depth="string.IsNullOrWhiteSpace(task.ParentId) ? 0 : (expandedTasks[task.ParentId] + 1)" HasChildren="workflowInstance.Status.Tasks.Any(t => t.ParentId == task.Id)" OnToggleChildrenClick="ToggleChildrenTask" />
                     }
                 </tbody>
             </table>
@@ -186,6 +187,7 @@
 @code {
     private WorkflowInstance? workflowInstance;
     [Parameter] public WorkflowInstance? WorkflowInstance { get; set; }
+    private Dictionary<string, int> expandedTasks = new();
 
     protected override void OnParametersSet()
     {
@@ -204,4 +206,27 @@
         shouldRender = false;
         return true;
     }
+
+    protected void CloseChildrenTask(string taskId)
+    {
+        if (expandedTasks.ContainsKey(taskId))
+        {
+            expandedTasks.Remove(taskId);
+        }
+        foreach (var child in workflowInstance?.Status?.Tasks?.Where(task => task.ParentId == taskId) ?? [])
+        {
+            CloseChildrenTask(child.Id);
+        }
+    }
+
+    protected void ToggleChildrenTask((string, int) e)
+    {
+        (string taskId, int depth) = e;
+        if (expandedTasks.ContainsKey(taskId))
+        {
+            CloseChildrenTask(taskId);
+        }
+        else expandedTasks.Add(taskId, depth);
+        shouldRender = true;
+    }
 }