diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx index 71b4b99d73..17eab42eeb 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx @@ -1,14 +1,17 @@ import React from 'react'; -import { Stack, StackItem } from '@patternfly/react-core'; +import { Grid, GridItem, Stack, StackItem } from '@patternfly/react-core'; import { Value as ProtoValue } from 'google-protobuf/google/protobuf/struct_pb'; +import { Link } from 'react-router-dom'; import { Execution } from '~/third_party/mlmd'; import TaskDetailsInputOutput from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput'; import { PipelineTask, PipelineTaskParam } from '~/concepts/pipelines/topology'; import { ExecutionDetailsPropertiesValueCode } from '~/pages/pipelines/global/experiments/executions/details/ExecutionDetailsPropertiesValue'; import { InputDefinitionParameterType } from '~/concepts/pipelines/kfTypes'; import { NoValue } from '~/components/NoValue'; +import { executionDetailsRoute } from '~/routes'; +import { usePipelinesAPI } from '~/concepts/pipelines/context'; type SelectedNodeInputOutputTabProps = { task: PipelineTask; @@ -19,6 +22,16 @@ const SelectedNodeInputOutputTab: React.FC = ({ task, execution, }) => { + const { namespace } = usePipelinesAPI(); + + const getExecutionDisplayNameFromObject = React.useCallback( + () => + execution?.customPropertiesMap.find( + ([customPropKey]) => customPropKey === 'display_name', + )?.[1].stringValue || '(No name)', + [execution?.customPropertiesMap], + ); + const getExecutionFieldsMap = React.useCallback( (key: string) => execution?.customPropertiesMap.find(([customPropKey]) => customPropKey === key)?.[1] @@ -94,6 +107,20 @@ const SelectedNodeInputOutputTab: React.FC = ({ return ( + {execution && ( + + + + Execution name + + + + {getExecutionDisplayNameFromObject()} + + + + + )} {task.inputs && ( ({ })); describe('SelectedNodeInputOutputTab', () => { + it('renders execution name', async () => { + render( + + + , + ); + expect(screen.getByText('task-1')).toBeVisible(); + }); + it('renders execution values for input parameters', async () => { render(