fix: nested nodes view

flyteorg · Jan 20, 2022 · 0f3c5c0 · 0f3c5c0
1 parent 93a3266
commit 0f3c5c0
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx b/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx
@@ -22,7 +22,7 @@ import { useQuery, useQueryClient } from 'react-query';
 import { WaitForQuery } from 'components/common/WaitForQuery';
 import { DataError } from 'components/Errors/DataError';
 import { dNode } from 'models/Graph/types';
-import { transformerWorkflowToDAG } from 'components/WorkflowGraph/transformerWorkflowToDAG';
+import { transformerWorkflowToPlainNodes } from 'components/WorkflowGraph/transformerWorkflowToDAG';
 import { isEndNode, isStartNode } from 'components/WorkflowGraph/utils';
 
 ChartJS.register(...registerables, ChartDataLabels);
@@ -138,19 +138,19 @@ const TaskNames = React.forwardRef<HTMLDivElement, TaskNamesProps>(
                     />
                 ))}
                 {nodes
-                    .filter(node => !executionsMap[node.id])
+                    .filter(node => !executionsMap[node.scopedId])
                     .map(node => (
                         <div
                             className={styles.namesContainer}
-                            key={`task-name-${node.id}`}
+                            key={`task-name-${node.scopedId}`}
                         >
                             {node.name}
                             <Typography
                                 variant="subtitle1"
                                 color="textSecondary"
                                 className={styles.displayName}
                             >
-                                {node.value.template.id.name}
+                                {node.value.template?.id?.name}
                             </Typography>
                         </div>
                     ))}
@@ -179,6 +179,23 @@ const ExecutionTimeline: React.FC<Props> = ({ nodeExecutions, workflowId }) => {
     );
 };
 
+function convertToPlainNodes(nodes: dNode[]): dNode[] {
+    const result: dNode[] = [];
+    if (!nodes || nodes.length === 0) {
+        return result;
+    }
+    nodes.forEach(node => {
+        if (isStartNode(node) || isEndNode(node)) {
+            return;
+        }
+        result.push(node);
+        if (node.nodes.length > 0) {
+            result.push(...convertToPlainNodes(node.nodes));
+        }
+    });
+    return result;
+}
+
 export const ExecutionTimelineWithNodes: React.FC<Props & {
     closure: WorkflowClosure;
 }> = ({ nodeExecutions, closure }) => {
@@ -195,12 +212,10 @@ export const ExecutionTimelineWithNodes: React.FC<Props & {
     const durationsLabelsRef = React.useRef<HTMLDivElement>(null);
     const taskNamesRef = React.createRef<HTMLDivElement>();
 
-    const { nodes: originalNodes } = transformerWorkflowToDAG(
+    const { nodes: originalNodes } = transformerWorkflowToPlainNodes(
         closure.compiledWorkflow!
     );
-    const nodes = originalNodes.filter(
-        node => !isStartNode(node) && !isEndNode(node)
-    );
+    const nodes = convertToPlainNodes(originalNodes);
 
     const executionsMap = React.useMemo(
         () =>
@@ -239,7 +254,7 @@ export const ExecutionTimelineWithNodes: React.FC<Props & {
         });
         return [
             ...definedExecutions,
-            ...nodes.filter(node => !executionsMap[node.id]).map(() => -1)
+            ...nodes.filter(node => !executionsMap[node.scopedId]).map(() => -1)
         ];
     }, [nodeExecutions, executionsMap, nodes]);
 
@@ -252,7 +267,7 @@ export const ExecutionTimelineWithNodes: React.FC<Props & {
         return [
             ...definedExecutions,
             ...nodes
-                .filter(node => !executionsMap[node.id])
+                .filter(node => !executionsMap[node.scopedId])
                 .map(() => statusColors.UNKNOWN)
         ];
     }, [nodeExecutions, executionsMap, nodes]);
@@ -295,7 +310,7 @@ export const ExecutionTimelineWithNodes: React.FC<Props & {
         return [
             ...definedExecutions,
             ...nodes
-                .filter(node => !executionsMap[node.id])
+                .filter(node => !executionsMap[node.scopedId])
                 .map(() => undefinedStart)
         ];
     }, [nodes, nodeExecutions, executionsMap, startedAt]);

diff --git a/src/components/Executions/nodeExecutionQueries.ts b/src/components/Executions/nodeExecutionQueries.ts
@@ -339,35 +339,39 @@ async function fetchAllChildNodeExecutions(
 /**
  * Query returns all children (not only direct childs) for a list of `nodeExecutions`
  */
- async function fetchAllTreeNodeExecutions(
+async function fetchAllTreeNodeExecutions(
     queryClient: QueryClient,
     nodeExecutions: NodeExecution[],
     config: RequestConfig
 ): Promise<NodeExecution[]> {
-    const queue: NodeExecution[] = [...nodeExecutions]
+    const queue: NodeExecution[] = [...nodeExecutions];
     let left = 0;
     let right = queue.length;
 
-    while(left < right) {
+    while (left < right) {
         const top: NodeExecution = queue[left++];
         const executionGroups: NodeExecutionGroup[] = await fetchChildNodeExecutionGroups(
             queryClient,
             top,
             config
-        )
-        for(let i = 0; i < executionGroups.length; i++) {
-            for(let j = 0; j < executionGroups[i].nodeExecutions.length; j++) {
-                queue.push(executionGroups[i].nodeExecutions[j])
-                right++
+        );
+        for (let i = 0; i < executionGroups.length; i++) {
+            for (let j = 0; j < executionGroups[i].nodeExecutions.length; j++) {
+                queue.push(executionGroups[i].nodeExecutions[j]);
+                right++;
             }
         }
     }
 
     const sorted: NodeExecution[] = queue.sort(
-        (na: NodeExecution, nb: NodeExecution) => compareTimestampsAscending(na?.closure?.startedAt, nb?.closure?.startedAt)
+        (na: NodeExecution, nb: NodeExecution) =>
+            compareTimestampsAscending(
+                na.closure.startedAt!,
+                nb.closure.startedAt!
+            )
     );
 
-    return sorted
+    return sorted;
 }
 
 /**
@@ -420,7 +424,7 @@ export function useAllChildNodeExecutionGroupsQuery(
  * @param config
  * @returns
  */
- export function useAllTreeNodeExecutionGroupsQuery(
+export function useAllTreeNodeExecutionGroupsQuery(
     nodeExecutions: NodeExecution[],
     config: RequestConfig
 ): QueryObserverResult<NodeExecution[], Error> {