chore: show correct i/o in details panel

Signed-off-by: Carina Ursu <[email protected]>
flyteorg · Mar 20, 2023 · c135e24 · c135e24
1 parent b3074dc
commit c135e24
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 16 deletions.
diff --git a/...s/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx b/...s/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx
@@ -495,6 +495,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<
       phase={taskPhase}
       taskTemplate={details?.taskTemplate}
       onTaskSelected={setSelectedTaskExecution}
+      taskIndex={selectedTaskExecution?.taskIndex || undefined}
     />
   ) : null;
 

diff --git a/...sole/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx b/...sole/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx
@@ -6,14 +6,18 @@ import { NodeExecution } from 'models/Execution/types';
 import * as React from 'react';
 
 /** Fetches and renders the input data for a given `NodeExecution` */
-export const NodeExecutionInputs: React.FC<{ execution: NodeExecution }> = ({
-  execution,
-}) => {
+export const NodeExecutionInputs: React.FC<{
+  execution: NodeExecution;
+  taskIndex?: number;
+}> = ({ execution, taskIndex }) => {
   const executionData = useNodeExecutionData(execution.id);
   return (
     <WaitForData {...executionData}>
       <PanelSection>
-        <LiteralMapViewer map={executionData.value.fullInputs} />
+        <LiteralMapViewer
+          map={executionData.value.fullInputs}
+          mapTaskIndex={taskIndex}
+        />
       </PanelSection>
     </WaitForData>
   );

diff --git a/...ole/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx b/...ole/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx
@@ -6,14 +6,18 @@ import { NodeExecution } from 'models/Execution/types';
 import * as React from 'react';
 
 /** Fetches and renders the output data for a given `NodeExecution` */
-export const NodeExecutionOutputs: React.FC<{ execution: NodeExecution }> = ({
-  execution,
-}) => {
+export const NodeExecutionOutputs: React.FC<{
+  execution: NodeExecution;
+  taskIndex?: number;
+}> = ({ execution, taskIndex }) => {
   const executionData = useNodeExecutionData(execution.id);
   return (
     <WaitForData {...executionData}>
       <PanelSection>
-        <LiteralMapViewer map={executionData.value.fullOutputs} />
+        <LiteralMapViewer
+          map={executionData.value.fullOutputs}
+          mapTaskIndex={taskIndex}
+        />
       </PanelSection>
     </WaitForData>
   );

diff --git a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/index.tsx b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/index.tsx
@@ -47,12 +47,14 @@ export const NodeExecutionTabs: React.FC<{
   onTaskSelected: (val: MapTaskExecution) => void;
   phase?: TaskExecutionPhase;
   taskTemplate?: TaskTemplate | null;
+  taskIndex?: number;
 }> = ({
   nodeExecution,
   selectedTaskExecution,
   onTaskSelected,
   taskTemplate,
   phase,
+  taskIndex,
 }) => {
   const styles = useStyles();
   const tabState = useTabState(tabIds, defaultTab);
@@ -80,11 +82,15 @@ export const NodeExecutionTabs: React.FC<{
       break;
     }
     case tabIds.inputs: {
-      tabContent = <NodeExecutionInputs execution={nodeExecution} />;
+      tabContent = (
+        <NodeExecutionInputs execution={nodeExecution} taskIndex={taskIndex} />
+      );
       break;
     }
     case tabIds.outputs: {
-      tabContent = <NodeExecutionOutputs execution={nodeExecution} />;
+      tabContent = (
+        <NodeExecutionOutputs execution={nodeExecution} taskIndex={taskIndex} />
+      );
       break;
     }
     case tabIds.task: {

diff --git a/packages/console/src/components/Executions/TaskExecutionsList/utils.ts b/packages/console/src/components/Executions/TaskExecutionsList/utils.ts
@@ -66,8 +66,8 @@ export const getGroupedLogs = (
       // for user to understand which array items are in this state
       const newLogs =
         item.logs.length > 0
-          ? item.logs.map(l => ({ ...l, index: item.index }))
-          : [{ name: item.externalId, index: item.index }];
+          ? item.logs.map(l => ({ ...l, index: item.index || 0 }))
+          : [{ name: item.externalId }];
       logsByPhase.set(
         phase,
         currentValue ? [...currentValue, ...newLogs] : [...newLogs],

diff --git a/packages/console/src/components/Literals/LiteralMapViewer.tsx b/packages/console/src/components/Literals/LiteralMapViewer.tsx
@@ -17,7 +17,8 @@ export const LiteralMapViewer: React.FC<{
   className?: string;
   map: LiteralMap | null;
   showBrackets?: boolean;
-}> = ({ map }) => {
+  mapTaskIndex?: number;
+}> = ({ map, mapTaskIndex }) => {
   if (!map) {
     return <NoDataIsAvailable />;
   }
@@ -30,5 +31,14 @@ export const LiteralMapViewer: React.FC<{
 
   const transformedLiterals = transformLiterals(literals);
 
-  return <ReactJsonViewWrapper src={transformedLiterals} />;
+  let transformedLiteralsFinal = {};
+  if (!isNaN(mapTaskIndex as number)) {
+    const keys = Object.keys(transformedLiterals);
+    transformedLiteralsFinal[keys?.[0]] =
+      transformedLiterals?.[keys?.[0]]?.[mapTaskIndex as number];
+  } else {
+    transformedLiteralsFinal = transformedLiterals;
+  }
+
+  return <ReactJsonViewWrapper src={transformedLiteralsFinal} />;
 };
diff --git a/packages/console/src/components/Literals/helpers.ts b/packages/console/src/components/Literals/helpers.ts
@@ -146,7 +146,7 @@ function processUnionType(union?: Core.IUnionType | null, shortString = false) {
 }
 
 function processUnion(union: Core.IUnion) {
-  return DEFAULT_UNSUPPORTED;
+  return processLiteral(union.value!);
 }
 /* eslint-enable @typescript-eslint/no-unused-vars */
 

diff --git a/packages/console/src/components/common/MapTaskExecutionsList/TaskNameList.tsx b/packages/console/src/components/common/MapTaskExecutionsList/TaskNameList.tsx
@@ -60,7 +60,7 @@ export const TaskNameList = ({
           // Use the resource's index instead of the log index
           onTaskSelected({
             ...taskExecution,
-            taskIndex: (log as any).index || 0,
+            taskIndex: (log as any).index,
           });
         };