feat: show details panel for failed node

src/components/Executions/ExecutionDetails/ExecutionWorkflowGraph.tsx

@@ -26,7 +26,7 @@ export const ExecutionWorkflowGraph: React.FC<ExecutionWorkflowGraphProps> = ({
         makeWorkflowQuery(useQueryClient(), workflowId)
     );
     const nodeExecutionsById = React.useMemo(
-        () => keyBy(nodeExecutions, 'scopedId'),
+        () => keyBy(nodeExecutions, 'id.nodeId'),
         [nodeExecutions]
     );
 
@@ -36,10 +36,6 @@ export const ExecutionWorkflowGraph: React.FC<ExecutionWorkflowGraphProps> = ({
             if (nodeId === startNodeId || nodeId === endNodeId) {
                 return false;
             }
-            const execution = nodeExecutionsById[nodeId];
-            if (!execution) {
-                return false;
-            }
             return true;
         });
         setSelectedNodes(validSelection);
@@ -48,7 +44,14 @@ export const ExecutionWorkflowGraph: React.FC<ExecutionWorkflowGraphProps> = ({
     // Note: flytegraph allows multiple selection, but we only support showing
     // a single item in the details panel
     const selectedExecution = selectedNodes.length
-        ? nodeExecutionsById[selectedNodes[0]].id
+        ? nodeExecutionsById[selectedNodes[0]]
+            ? nodeExecutionsById[selectedNodes[0]].id
+            : {
+                  nodeId: selectedNodes[0],
+                  executionId:
+                      nodeExecutionsById[Object.keys(nodeExecutionsById)[0]].id
+                          .executionId
+              }
         : null;
 
     const onCloseDetailsPanel = () => setSelectedNodes([]);

src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx

@@ -6,11 +6,13 @@ import Close from '@material-ui/icons/Close';
 import * as classnames from 'classnames';
 import { useCommonStyles } from 'components/common/styles';
 import { InfoIcon } from 'components/common/Icons/InfoIcon';
+import { bodyFontFamily, smallFontSize } from 'components/Theme/constants';
 import { ExecutionStatusBadge } from 'components/Executions/ExecutionStatusBadge';
 import { LocationState } from 'components/hooks/useLocationState';
 import { useTabState } from 'components/hooks/useTabState';
 import { LocationDescriptor } from 'history';
 import { PaginatedEntityResponse } from 'models/AdminEntity/types';
+import { Workflow } from 'models/Workflow/types';
 import {
     NodeExecution,
     NodeExecutionIdentifier,
@@ -19,7 +21,7 @@ import {
 import { TaskTemplate } from 'models/Task/types';
 import * as React from 'react';
 import Skeleton from 'react-loading-skeleton';
-import { useQuery } from 'react-query';
+import { useQuery, useQueryClient } from 'react-query';
 import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { NodeExecutionCacheStatus } from '../NodeExecutionCacheStatus';
@@ -35,11 +37,29 @@ import { NodeExecutionOutputs } from './NodeExecutionOutputs';
 import { NodeExecutionTaskDetails } from './NodeExecutionTaskDetails';
 import { getTaskExecutionDetailReasons } from './utils';
 import { ExpandableMonospaceText } from '../../common/ExpandableMonospaceText';
+import { fetchWorkflowExecution } from '../useWorkflowExecution';
+import { RemoteLiteralMapViewer } from 'components/Literals/RemoteLiteralMapViewer';
+import { fetchWorkflow } from 'components/Workflow/workflowQueries';
 
 const useStyles = makeStyles((theme: Theme) => {
     const paddingVertical = `${theme.spacing(2)}px`;
     const paddingHorizontal = `${theme.spacing(3)}px`;
     return {
+        notRunStatus: {
+            alignItems: 'center',
+            backgroundColor: 'gray',
+            borderRadius: '4px',
+            color: theme.palette.text.primary,
+            display: 'flex',
+            flex: '0 0 auto',
+            height: theme.spacing(3),
+            fontSize: smallFontSize,
+            justifyContent: 'center',
+            textTransform: 'uppercase',
+            width: theme.spacing(11),
+            fontFamily: bodyFontFamily,
+            fontWeight: 'bold'
+        },
         closeButton: {
             marginLeft: theme.spacing(1)
         },
@@ -218,13 +238,62 @@ const NodeExecutionTabs: React.FC<{
     );
 };
 
+const WorkflowTabs: React.FC<{
+    workflow: Workflow;
+    nodeId: string;
+}> = ({ workflow, 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)
+    );
+
+    switch (tabState.value) {
+        case tabIds.inputs: {
+            tabContent = taskTemplate ? (
+                <div className={commonStyles.detailsPanelCard}>
+                    <div className={commonStyles.detailsPanelCardContent}>
+                        <RemoteLiteralMapViewer
+                            blob={taskTemplate.template.interface.inputs}
+                        />
+                    </div>
+                </div>
+            ) : null;
+            break;
+        }
+        case tabIds.task: {
+            tabContent = taskTemplate ? (
+                <NodeExecutionTaskDetails taskTemplate={taskTemplate} />
+            ) : null;
+            break;
+        }
+    }
+    return (
+        <>
+            <Tabs {...tabState} className={styles.tabs}>
+                <Tab value={tabIds.inputs} label="Inputs" />
+                {!!taskTemplate && <Tab value={tabIds.task} label="Task" />}
+            </Tabs>
+            <div className={styles.content}>{tabContent}</div>
+        </>
+    );
+};
+
 /** DetailsPanel content which renders execution information about a given NodeExecution
  */
 export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProps> = ({
     nodeExecutionId,
     onClose
 }) => {
+    const queryClient = useQueryClient();
     const [isReasonsVisible, setReasonsVisible] = React.useState(false);
+    const [workflow, setWorkflow] = React.useState<Workflow | null>(null);
     const nodeExecutionQuery = useQuery<NodeExecution, Error>({
         ...makeNodeExecutionQuery(nodeExecutionId),
         // The selected NodeExecution has been fetched at this point, we don't want to
@@ -238,6 +307,23 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
 
     const nodeExecution = nodeExecutionQuery.data;
 
+    const getWorkflow = async () => {
+        const workflowExecution = await fetchWorkflowExecution(
+            queryClient,
+            nodeExecutionId.executionId
+        );
+        const workflowData: Workflow = await fetchWorkflow(
+            queryClient,
+            workflowExecution.closure.workflowId
+        );
+        if (workflowData) setWorkflow(workflowData);
+    };
+
+    if (!nodeExecution) {
+        getWorkflow();
+    } else {
+        if (workflow) setWorkflow(null);
+    }
     const listTaskExecutionsQuery = useQuery<
         PaginatedEntityResponse<TaskExecution>,
         Error
@@ -299,7 +385,9 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
                 </div>
             )}
         </div>
-    ) : null;
+    ) : (
+        <div className={styles.notRunStatus}>NOT RUN</div>
+    );
 
     const detailsContent = nodeExecution ? (
         <>
@@ -319,7 +407,6 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
             taskTemplate={taskTemplate}
         />
     ) : null;
-
     return (
         <section className={styles.container}>
             <header className={styles.header}>
@@ -348,13 +435,20 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
                         variant="subtitle1"
                         color="textSecondary"
                     >
-                        {displayName}
+                        {workflow ? workflow.id.name : displayName}
                     </Typography>
                     {statusContent}
-                    {detailsContent}
+                    {!workflow && detailsContent}
                 </div>
             </header>
-            {tabsContent}
+            {workflow ? (
+                <WorkflowTabs
+                    nodeId={nodeExecutionId.nodeId}
+                    workflow={workflow}
+                />
+            ) : (
+                tabsContent
+            )}
         </section>
     );
 };