fix pipeline details view

jenny-s51 · Jul 10, 2024 · 2b55c1f · 2b55c1f
1 parent 4311de9
commit 2b55c1f
Showing 1 changed file with 51 additions and 43 deletions.
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -80,6 +80,13 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
     );
   }
 
+  const panelContent = selectedNode ? (
+    <SelectedTaskDrawerContent
+      task={selectedNode.data.pipelineTask}
+      onClose={() => setSelectedId(null)}
+    />
+  ) : null;
+
   return (
     <>
       <ApplicationsPage
@@ -163,7 +170,6 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
           >
             <FlexItem>
               <Tabs
-                style={{ flexShrink: 0 }}
                 activeKey={activeTabKey}
                 onSelect={(e, tabIndex) => {
                   setActiveTabKey(tabIndex);
@@ -187,7 +193,6 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
                     <PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
                   </TabContentBody>
                 </Tab>
-
                 <Tab
                   eventKey={PipelineDetailsTab.YAML}
                   title={<TabTitleText>Pipeline spec</TabTitleText>}
@@ -196,48 +201,51 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
                   tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
                 />
               </Tabs>
+            </FlexItem>
+            <FlexItem flex={{ default: 'flex_1' }} style={{ overflowY: 'hidden' }}>
               <TabContent
-                  id={`tabContent-${PipelineDetailsTab.GRAPH}`}
-                  eventKey={PipelineDetailsTab.GRAPH}
-                  activeKey={activeTabKey}
-                  hidden={PipelineDetailsTab.GRAPH !== activeTabKey}
-                  style={{ height: '100%' }}
-                  data-testid="pipeline-version-topology-content"
-                >
-                  {nodes.length === 0 ? (
-                    <PipelineTopologyEmpty />
-                  ) : (
-                    <PipelineTopology
-                      nodes={nodes}
-                      selectedIds={selectedId ? [selectedId] : []}
-                      onSelectionChange={(ids) => {
-                        const firstId = ids[0];
-                        if (ids.length === 0) {
-                          setSelectedId(null);
-                        } else {
-                          setSelectedId(firstId);
-                        }
-                      }}
-                    />
-                  )}
-                </TabContent>
-                <TabContent
-                  id={`tabContent-${PipelineDetailsTab.YAML}`}
-                  eventKey={PipelineDetailsTab.YAML}
-                  activeKey={activeTabKey}
-                  hidden={PipelineDetailsTab.YAML !== activeTabKey}
-                  className="pf-v5-u-h-100"
-                >
-                  <TabContentBody className="pf-v5-u-h-100">
-                    <PipelineDetailsYAML
-                      filename={`Pipeline ${
-                        getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
-                        'details'
-                      }`}
-                      content={pipelineVersion?.pipeline_spec}
-                    />
-                  </TabContentBody>
-                </TabContent>
+                id={`tabContent-${PipelineDetailsTab.GRAPH}`}
+                eventKey={PipelineDetailsTab.GRAPH}
+                activeKey={activeTabKey}
+                hidden={PipelineDetailsTab.GRAPH !== activeTabKey}
+                style={{ height: '100%' }}
+                data-testid="pipeline-version-topology-content"
+              >
+                {nodes.length === 0 ? (
+                  <PipelineTopologyEmpty />
+                ) : (
+                  <PipelineTopology
+                    nodes={nodes}
+                    selectedIds={selectedId ? [selectedId] : []}
+                    onSelectionChange={(ids) => {
+                      const firstId = ids[0];
+                      if (ids.length === 0) {
+                        setSelectedId(null);
+                      } else {
+                        setSelectedId(firstId);
+                      }
+                    }}
+                    sidePanel={panelContent}
+                  />
+                )}
+              </TabContent>
+              <TabContent
+                id={`tabContent-${PipelineDetailsTab.YAML}`}
+                eventKey={PipelineDetailsTab.YAML}
+                activeKey={activeTabKey}
+                hidden={PipelineDetailsTab.YAML !== activeTabKey}
+                className="pf-v5-u-h-100"
+              >
+                <TabContentBody hasPadding className="pf-v5-u-h-100">
+                  <PipelineDetailsYAML
+                    filename={`Pipeline ${
+                      getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
+                      'details'
+                    }`}
+                    content={pipelineVersion?.pipeline_spec}
+                  />
+                </TabContentBody>
+              </TabContent>
             </FlexItem>
           </Flex>
         </PageSection>