fix: show correct i/o in details panel (#727)

* chore: show correct i/o in details panel Signed-off-by: Carina Ursu <[email protected]> * chore: bump version Signed-off-by: Carina Ursu <[email protected]> * chore: feedback Signed-off-by: Carina Ursu <[email protected]> --------- Signed-off-by: Carina Ursu <[email protected]>
flyteorg · Mar 21, 2023 · c968593 · c968593
1 parent d0d383e
commit c968593
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 30 deletions.
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",

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!}
     />
   ) : 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 />;
   }
@@ -28,7 +29,7 @@ export const LiteralMapViewer: React.FC<{
     return <NoneTypeValue />;
   }
 
-  const transformedLiterals = transformLiterals(literals);
+  const transformedLiterals = transformLiterals(literals, mapTaskIndex);
 
   return <ReactJsonViewWrapper src={transformedLiterals} />;
 };
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 { union: processLiteral(union.value!) };
 }
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
@@ -351,27 +351,37 @@ function processScalar(
   }
 }
 
-function processCollection(collection?: Core.ILiteralCollection | null) {
-  const literals = collection?.literals;
+function processCollection(
+  collection?: Core.ILiteralCollection | null,
+  mapTaskIndex?: number,
+) {
+  let literals = collection?.literals;
 
   if (!literals) {
     return 'invalid collection';
   }
 
-  return literals?.map(literal => processLiteral(literal));
+  if (!isNaN(mapTaskIndex!)) {
+    literals = (literals || []).splice(mapTaskIndex!, 1);
+  }
+
+  return literals?.map(literal => processLiteral(literal, mapTaskIndex));
 }
 
-function processMap(map?: Core.ILiteralMap | null) {
+function processMap(map?: Core.ILiteralMap | null, mapTaskIndex?: number) {
   const literals = map?.literals;
 
   if (!literals) {
     return 'invalid map';
   }
 
-  return transformLiterals(literals);
+  return transformLiterals(literals, mapTaskIndex);
 }
 
-function processLiteral(literal?: Core.ILiteral & Pick<Core.Literal, 'value'>) {
+function processLiteral(
+  literal?: Core.ILiteral & Pick<Core.Literal, 'value'>,
+  mapTaskIndex?: number,
+) {
   const type = literal?.value;
 
   if (!literal) {
@@ -382,18 +392,21 @@ function processLiteral(literal?: Core.ILiteral & Pick<Core.Literal, 'value'>) {
     case 'scalar':
       return processScalar(literal.scalar);
     case 'collection':
-      return processCollection(literal.collection);
+      return processCollection(literal.collection, mapTaskIndex);
     case 'map':
-      return processMap(literal.map);
+      return processMap(literal.map, mapTaskIndex);
     default:
       return DEFAULT_UNSUPPORTED;
   }
 }
 
-export function transformLiterals(json: { [k: string]: Core.ILiteral }) {
+export function transformLiterals(
+  json: { [k: string]: Core.ILiteral },
+  mapTaskIndex?: number,
+) {
   const obj = Object.entries(json)
     .map(([key, literal]) => ({
-      [key]: processLiteral(literal),
+      [key]: processLiteral(literal, mapTaskIndex),
     }))
     .reduce(
       (acc, cur) => ({

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,
           });
         };
 

diff --git a/website/package.json b/website/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@flyteorg/common": "^0.0.3",
-    "@flyteorg/console": "^0.0.14",
+    "@flyteorg/console": "^0.0.15",
     "long": "^4.0.0",
     "protobufjs": "~6.11.3",
     "react-ga4": "^1.4.1",

diff --git a/yarn.lock b/yarn.lock
@@ -1995,7 +1995,7 @@ __metadata:
   resolution: "@flyteconsole/client-app@workspace:website"
   dependencies:
     "@flyteorg/common": ^0.0.3
-    "@flyteorg/console": ^0.0.14
+    "@flyteorg/console": ^0.0.15
     "@types/long": ^3.0.32
     long: ^4.0.0
     protobufjs: ~6.11.3
@@ -2034,7 +2034,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@flyteorg/console@^0.0.14, @flyteorg/console@workspace:packages/console":
+"@flyteorg/console@^0.0.15, @flyteorg/console@workspace:packages/console":
   version: 0.0.0-use.local
   resolution: "@flyteorg/console@workspace:packages/console"
   dependencies: