Skip to content

Commit

Permalink
Gage PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenny-s51
jenny-s51 committed Jun 27, 2024
1 parent b7b5b3c commit 2c11faa
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 150 deletions.
6 changes: 0 additions & 6 deletions frontend/src/app/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,6 @@ body,
inset-inline-start: 12px;
}
}
.pf-topology-container {
overflow-y: hidden;
.pf-v5-c-drawer__panel.pf-m-resizable {
min-width: 350px;
}
}
}

// specificity targeting form elements to override --pf-v5-global--FontSize--md
Expand Down
147 changes: 71 additions & 76 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,86 +163,81 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
style={{ flexBasis: 0, overflowY: 'hidden' }}
variant="light"
>
<Flex
direction={{ default: 'column' }}
<Tabs
activeKey={activeTabKey}
onSelect={(e, tabIndex) => {
setActiveTabKey(tabIndex);
setSelectedId(null);
}}
aria-label="Pipeline Details tabs"
role="region"
>
<Tab
eventKey={PipelineDetailsTab.GRAPH}
title={<TabTitleText>Graph</TabTitleText>}
aria-label="Pipeline Graph Tab"
tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
/>
<Tab
eventKey={PipelineDetailsTab.SUMMARY}
title={<TabTitleText>Summary</TabTitleText>}
aria-label="Pipeline Summary Tab"
>
<TabContentBody hasPadding>
<PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
</TabContentBody>
</Tab>
<Tab
eventKey={PipelineDetailsTab.YAML}
title={<TabTitleText>Pipeline spec</TabTitleText>}
data-testid="pipeline-yaml-tab"
aria-label="Pipeline YAML Tab"
tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
/>
</Tabs>
<TabContent
id={`tabContent-${PipelineDetailsTab.GRAPH}`}
eventKey={PipelineDetailsTab.GRAPH}
activeKey={activeTabKey}
hidden={PipelineDetailsTab.GRAPH !== activeTabKey}
style={{ height: '100%' }}
spaceItems={{ default: 'spaceItemsNone' }}
data-testid="pipeline-version-topology-content"
>
<FlexItem>
<Tabs
activeKey={activeTabKey}
onSelect={(e, tabIndex) => {
setActiveTabKey(tabIndex);
setSelectedId(null);
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
setSelectedId(ids.length ? ids[0] : null);
}}
aria-label="Pipeline Details tabs"
role="region"
>
<Tab
eventKey={PipelineDetailsTab.GRAPH}
title={<TabTitleText>Graph</TabTitleText>}
aria-label="Pipeline Graph Tab"
tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
/>
<Tab
eventKey={PipelineDetailsTab.SUMMARY}
title={<TabTitleText>Summary</TabTitleText>}
aria-label="Pipeline Summary Tab"
>
<TabContentBody hasPadding>
<PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
</TabContentBody>
</Tab>
<Tab
eventKey={PipelineDetailsTab.YAML}
title={<TabTitleText>Pipeline spec</TabTitleText>}
data-testid="pipeline-yaml-tab"
aria-label="Pipeline YAML Tab"
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) => {
setSelectedId(ids.length ? ids[0] : null);
}}
sidePanel={panelContent}
sidePanel={
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
)}
</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>
}
/>
)}
</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>
</PageSection>
</ApplicationsPage>
{pipeline && (
Expand Down
108 changes: 50 additions & 58 deletions ...nd/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,66 +47,58 @@ export const PipelineRunDetailsTabs: React.FC<PipelineRunDetailsTabsProps> = ({
style={{ flexBasis: 0, overflowY: 'hidden' }}
variant="light"
>
<Flex
direction={{ default: 'column' }}
style={{ height: '100%' }}
spaceItems={{ default: 'spaceItemsNone' }}
<Tabs
activeKey={activeKey}
onSelect={(_, eventKey) => setActiveKey(eventKey)}
aria-label="Pipeline run details tabs"
>
<FlexItem>
<Tabs
activeKey={activeKey}
onSelect={(_, eventKey) => setActiveKey(eventKey)}
aria-label="Pipeline run details tabs"
>
<Tab
eventKey={DetailsTabKey.Graph}
tabContentId={DetailsTabKey.Graph}
title={<TabTitleText>Graph</TabTitleText>}
aria-label="Run graph tab"
data-testid="pipeline-run-tab-graph"
/>
<Tab
eventKey={DetailsTabKey.Details}
title={<TabTitleText>Details</TabTitleText>}
aria-label="Run details tab"
data-testid="pipeline-run-tab-details"
>
<TabContentBody hasPadding>
<PipelineRunTabDetails workflowName={run?.display_name} run={run} />
</TabContentBody>
</Tab>
{!isJob && pipelineSpec && (
<Tab
eventKey={DetailsTabKey.Spec}
tabContentId={DetailsTabKey.Spec}
title={<TabTitleText>Pipeline spec</TabTitleText>}
aria-label="Run spec tab"
data-testid="pipeline-run-tab-spec"
/>
)}
</Tabs>
</FlexItem>
<FlexItem flex={{ default: 'flex_1' }} style={{ overflowY: 'hidden' }}>
<TabContent
id={DetailsTabKey.Graph}
eventKey={DetailsTabKey.Graph}
className="pf-v5-u-h-100"
hidden={activeKey !== DetailsTabKey.Graph}
>
<TabContentBody className="pf-v5-u-h-100">{graphContent}</TabContentBody>
</TabContent>
<TabContent
id={DetailsTabKey.Spec}
<Tab
eventKey={DetailsTabKey.Graph}
tabContentId={DetailsTabKey.Graph}
title={<TabTitleText>Graph</TabTitleText>}
aria-label="Run graph tab"
data-testid="pipeline-run-tab-graph"
/>
<Tab
eventKey={DetailsTabKey.Details}
title={<TabTitleText>Details</TabTitleText>}
aria-label="Run details tab"
data-testid="pipeline-run-tab-details"
>
<TabContentBody hasPadding>
<PipelineRunTabDetails workflowName={run?.display_name} run={run} />
</TabContentBody>
</Tab>
{!isJob && pipelineSpec && (
<Tab
eventKey={DetailsTabKey.Spec}
hidden={activeKey !== DetailsTabKey.Spec}
style={{ flex: 1 }}
>
<TabContentBody className="pf-v5-u-h-100" hasPadding>
<PipelineDetailsYAML filename={run?.display_name} content={pipelineSpec} />
</TabContentBody>
</TabContent>
</FlexItem>
</Flex>
tabContentId={DetailsTabKey.Spec}
title={<TabTitleText>Pipeline spec</TabTitleText>}
aria-label="Run spec tab"
data-testid="pipeline-run-tab-spec"
/>
)}
</Tabs>

<TabContent
id={DetailsTabKey.Graph}
eventKey={DetailsTabKey.Graph}
className="pf-v5-u-h-100"
hidden={activeKey !== DetailsTabKey.Graph}
>
<TabContentBody className="pf-v5-u-h-100">{graphContent}</TabContentBody>
</TabContent>
<TabContent
id={DetailsTabKey.Spec}
eventKey={DetailsTabKey.Spec}
hidden={activeKey !== DetailsTabKey.Spec}
className="pf-v5-u-h-100"
style={{ flex: 1 }}
>
<TabContentBody className="pf-v5-u-h-100" hasPadding>
<PipelineDetailsYAML filename={run?.display_name} content={pipelineSpec} />
</TabContentBody>
</TabContent>
</PageSection>
);
};
27 changes: 17 additions & 10 deletions frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,25 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
const controller = useVisualizationController();
const [error, setError] = React.useState<Error | null>();

const selectedNode = React.useMemo(() => {
if (selectedIds?.[0]) {
const node = controller.getNodeById(selectedIds[0]);
if (node) {
return node;
}
}
return null;
}, [selectedIds, controller]);

React.useEffect(() => {
let resizeTimeout: NodeJS.Timeout | null;

if (selectedIds?.[0]) {
const selectedNode = controller.getNodeById(selectedIds[0]);
if (selectedNode) {
// Use a timeout in order to allow the side panel to be shown and window size recomputed
resizeTimeout = setTimeout(() => {
controller.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
resizeTimeout = null;
}, 500);
}
if (selectedNode) {
// Use a timeout in order to allow the side panel to be shown and window size recomputed
resizeTimeout = setTimeout(() => {
controller.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
resizeTimeout = null;
}, 500);
}
return () => {
if (resizeTimeout) {
Expand Down Expand Up @@ -182,7 +189,7 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
})}
/>
}
sideBarOpen={!!sidePanel}
sideBarOpen={!!selectedNode}
sideBarResizable
sideBar={<TopologySideBar resizable>{sidePanel}</TopologySideBar>}
>
Expand Down

0 comments on commit 2c11faa

Please sign in to comment.