feat: use DAG for details panel content

flyteorg · Dec 20, 2021 · 915f60b · 915f60b
1 parent 3310be6
commit 915f60b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx b/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx
@@ -40,6 +40,11 @@ import { ExpandableMonospaceText } from '../../common/ExpandableMonospaceText';
 import { fetchWorkflowExecution } from '../useWorkflowExecution';
 import { RemoteLiteralMapViewer } from 'components/Literals/RemoteLiteralMapViewer';
 import { fetchWorkflow } from 'components/Workflow/workflowQueries';
+import { dNode } from 'models/Graph/types';
+import {
+    transformWorkflowToKeyedDag,
+    getNodeNameFromDag
+} from 'components/WorkflowGraph/utils';
 
 const useStyles = makeStyles((theme: Theme) => {
     const paddingVertical = `${theme.spacing(2)}px`;
@@ -239,28 +244,23 @@ const NodeExecutionTabs: React.FC<{
 };
 
 const WorkflowTabs: React.FC<{
-    workflow: Workflow;
+    dagData: dNode;
     nodeId: string;
-}> = ({ workflow, nodeId }) => {
+}> = ({ dagData, nodeId }) => {
     const styles = useStyles();
     const tabState = useTabState(tabIds, tabIds.inputs);
     const commonStyles = useCommonStyles();
     let tabContent: JSX.Element | null = null;
-    const currentNode = workflow.closure?.compiledWorkflow.primary.template.nodes.find(
-        node => node.id === nodeId
-    );
-    const taskName = currentNode.metadata.name;
-    const taskTemplate = workflow.closure.compiledWorkflow.tasks.find(task =>
-        taskName.includes(task.template.id.name)
-    );
+    console.log('555', { dagData, nodeId });
+    const taskTemplate = dagData[nodeId].value.template;
 
     switch (tabState.value) {
         case tabIds.inputs: {
             tabContent = taskTemplate ? (
                 <div className={commonStyles.detailsPanelCard}>
                     <div className={commonStyles.detailsPanelCardContent}>
                         <RemoteLiteralMapViewer
-                            blob={taskTemplate.template.interface.inputs}
+                            blob={taskTemplate.interface.inputs}
                         />
                     </div>
                 </div>
@@ -293,7 +293,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
 }) => {
     const queryClient = useQueryClient();
     const [isReasonsVisible, setReasonsVisible] = React.useState(false);
-    const [workflow, setWorkflow] = React.useState<Workflow | null>(null);
+    const [dag, setDag] = React.useState<dNode | null>(null);
     const nodeExecutionQuery = useQuery<NodeExecution, Error>({
         ...makeNodeExecutionQuery(nodeExecutionId),
         // The selected NodeExecution has been fetched at this point, we don't want to
@@ -307,7 +307,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
 
     const nodeExecution = nodeExecutionQuery.data;
 
-    const getWorkflow = async () => {
+    const getWorkflowDag = async () => {
         const workflowExecution = await fetchWorkflowExecution(
             queryClient,
             nodeExecutionId.executionId
@@ -316,13 +316,16 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
             queryClient,
             workflowExecution.closure.workflowId
         );
-        if (workflowData) setWorkflow(workflowData);
+        if (workflowData) {
+            const keyedDag = transformWorkflowToKeyedDag(workflowData);
+            setDag(keyedDag);
+        }
     };
 
     if (!nodeExecution) {
-        getWorkflow();
+        getWorkflowDag();
     } else {
-        if (workflow) setWorkflow(null);
+        if (dag) setDag(null);
     }
     const listTaskExecutionsQuery = useQuery<
         PaginatedEntityResponse<TaskExecution>,
@@ -435,17 +438,16 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
                         variant="subtitle1"
                         color="textSecondary"
                     >
-                        {workflow ? workflow.id.name : displayName}
+                        {dag
+                            ? getNodeNameFromDag(dag, nodeExecutionId.nodeId)
+                            : displayName}
                     </Typography>
                     {statusContent}
-                    {!workflow && detailsContent}
+                    {!dag && detailsContent}
                 </div>
             </header>
-            {workflow ? (
-                <WorkflowTabs
-                    nodeId={nodeExecutionId.nodeId}
-                    workflow={workflow}
-                />
+            {dag ? (
+                <WorkflowTabs nodeId={nodeExecutionId.nodeId} dagData={dag} />
             ) : (
                 tabsContent
             )}

diff --git a/src/components/WorkflowGraph/utils.ts b/src/components/WorkflowGraph/utils.ts
@@ -1,10 +1,10 @@
 import { Identifier } from 'models/Common/types';
 import { endNodeId, startNodeId } from 'models/Node/constants';
-import { CompiledWorkflow } from 'models/Workflow/types';
+import { CompiledWorkflow, Workflow } from 'models/Workflow/types';
 import { CompiledNode, TaskNode } from 'models/Node/types';
 import { CompiledTask, TaskTemplate } from 'models/Task/types';
-import { dTypes } from 'models/Graph/types';
-
+import { dTypes, dNode } from 'models/Graph/types';
+import { transformerWorkflowToDAG } from './transformerWorkflowToDAG';
 /**
  * @TODO these are dupes for testing, remove once tests fixed
  */
@@ -116,3 +116,17 @@ export const getTaskTypeFromCompiledNode = (
     }
     return null;
 };
+
+export const getNodeNameFromDag = (dagData: dNode, nodeId: string) =>
+    dagData[nodeId].value.taskNode.referenceId.name;
+
+export const transformWorkflowToKeyedDag = (workflow: Workflow) => {
+    const dagData = transformerWorkflowToDAG(
+        workflow.closure?.compiledWorkflow
+    );
+    const data = {};
+    dagData.nodes.forEach(node => {
+        data[`${node.id}`] = node;
+    });
+    return data;
+};