Add explanation and copy action for the Pod name in the Pipeline run …

…graph execution node drawer
opendatahub-io · Oct 16, 2024 · 3cec451 · 3cec451
1 parent a15a69c
commit 3cec451
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx b/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx
@@ -5,13 +5,17 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
-  Text,
+  Flex,
+  Popover,
   Title,
 } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import PipelineRunDrawerRightTabs from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs';
 import './PipelineRunDrawer.scss';
 import { PipelineTask } from '~/concepts/pipelines/topology';
 import { Execution } from '~/third_party/mlmd';
+import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
+import InlineTruncatedClipboardCopy from '~/components/InlineTruncatedClipboardCopy';
 import { ArtifactNodeDrawerContent } from './artifacts';
 
 type PipelineRunDrawerRightContentProps = {
@@ -48,7 +52,24 @@ const PipelineRunDrawerRightContent: React.FC<PipelineRunDrawerRightContentProps
             <Title headingLevel="h2" size="xl">
               {task.name}
             </Title>
-            {task.status?.podName && <Text component="small">{task.status.podName}</Text>}
+            {task.status?.podName && (
+              <Flex
+                display={{ default: 'inlineFlex' }}
+                spaceItems={{ default: 'spaceItemsXs' }}
+                flexWrap={{ default: 'nowrap' }}
+              >
+                <InlineTruncatedClipboardCopy
+                  testId="podname-copy"
+                  textToCopy={task.status.podName}
+                />
+                <Popover bodyContent="This is the pod name of the run execution in OpenShift">
+                  <DashboardPopupIconButton
+                    icon={<OutlinedQuestionCircleIcon />}
+                    aria-label="More info"
+                  />
+                </Popover>
+              </Flex>
+            )}
             <DrawerActions>
               <DrawerCloseButton onClick={onClose} />
             </DrawerActions>