From 591e52adce6cb2be36aa264bdeaaf661a0b3500e Mon Sep 17 00:00:00 2001 From: Dipanshu Gupta Date: Wed, 29 May 2024 20:48:01 +0530 Subject: [PATCH] Pipeline task node details link to execution --- .../SelectedNodeInputOutputTab.tsx | 31 ++++++++++++- .../SelectedNodeInputOutputTab.spec.tsx | 46 +++++++++++++++++++ 2 files changed, 76 insertions(+), 1 deletion(-) diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx index 71b4b99d73..fb4e744b9d 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx @@ -1,14 +1,18 @@ 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'; +import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas'; type SelectedNodeInputOutputTabProps = { task: PipelineTask; @@ -19,6 +23,17 @@ const SelectedNodeInputOutputTab: React.FC = ({ task, execution, }) => { + const { namespace } = usePipelinesAPI(); + const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status; + + const executionDisplayName = React.useMemo( + () => + 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 +109,20 @@ const SelectedNodeInputOutputTab: React.FC = ({ return ( + {isExperimentsAvailable && execution?.id && ( + + + + Execution name + + + + {executionDisplayName} + + + + + )} {task.inputs && ( ({ MaxHeightCodeEditor: ({ code }: { code: string }) => JSON.stringify(JSON.parse(code)), })); +jest.mock('~/concepts/areas/useIsAreaAvailable', () => () => ({ + status: true, + featureFlags: {}, + reliantAreas: {}, + requiredComponents: {}, + requiredCapabilities: {}, + customCondition: jest.fn(), +})); + describe('SelectedNodeInputOutputTab', () => { + it('renders execution name', async () => { + render( + + + , + ); + expect(screen.getByText('task-1')).toBeVisible(); + }); + it('renders execution values for input parameters', async () => { render(