From c968593b2385935ffd2f31b73a67d18decb55bf7 Mon Sep 17 00:00:00 2001 From: Carina Ursu Date: Tue, 21 Mar 2023 14:24:28 -0700 Subject: [PATCH] fix: show correct i/o in details panel (#727) * chore: show correct i/o in details panel Signed-off-by: Carina Ursu * chore: bump version Signed-off-by: Carina Ursu * chore: feedback Signed-off-by: Carina Ursu --------- Signed-off-by: Carina Ursu --- packages/console/package.json | 2 +- .../NodeExecutionDetailsPanelContent.tsx | 1 + .../NodeExecutionTabs/NodeExecutionInputs.tsx | 12 ++++--- .../NodeExecutionOutputs.tsx | 12 ++++--- .../NodeExecutionTabs/index.tsx | 10 ++++-- .../Executions/TaskExecutionsList/utils.ts | 4 +-- .../components/Literals/LiteralMapViewer.tsx | 5 +-- .../src/components/Literals/helpers.ts | 35 +++++++++++++------ .../MapTaskExecutionsList/TaskNameList.tsx | 2 +- website/package.json | 2 +- yarn.lock | 4 +-- 11 files changed, 59 insertions(+), 30 deletions(-) diff --git a/packages/console/package.json b/packages/console/package.json index db5ad95bf..5315d2f0e 100644 --- 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/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx index 40cb0a87b..179c7151b 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx +++ b/packages/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/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx index e4059f153..02c92329f 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx +++ b/packages/console/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 ( - + ); diff --git a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx index 42f7429a1..0aa836661 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx +++ b/packages/console/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 ( - + ); diff --git a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/index.tsx b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/index.tsx index 3a289b0c0..100d6cd58 100644 --- 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 = ; + tabContent = ( + + ); break; } case tabIds.outputs: { - tabContent = ; + tabContent = ( + + ); break; } case tabIds.task: { diff --git a/packages/console/src/components/Executions/TaskExecutionsList/utils.ts b/packages/console/src/components/Executions/TaskExecutionsList/utils.ts index f12397eed..e56951146 100644 --- 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 index 77be18da2..a09fd9ae5 100644 --- 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 ; } @@ -28,7 +29,7 @@ export const LiteralMapViewer: React.FC<{ return ; } - const transformedLiterals = transformLiterals(literals); + const transformedLiterals = transformLiterals(literals, mapTaskIndex); return ; }; diff --git a/packages/console/src/components/Literals/helpers.ts b/packages/console/src/components/Literals/helpers.ts index 22e9c844a..53a8ccb5b 100644 --- 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) { +function processLiteral( + literal?: Core.ILiteral & Pick, + mapTaskIndex?: number, +) { const type = literal?.value; if (!literal) { @@ -382,18 +392,21 @@ function processLiteral(literal?: Core.ILiteral & Pick) { 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 index fd7ce0461..c68acee91 100644 --- 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 index f77846c17..ee73c71ff 100644 --- 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 index 9e9a32076..f6f3db62c 100644 --- 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: