Skip to content

Commit

Permalink
add flexItems and minWidth
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenny-s51
jenny-s51 committed Jul 2, 2024
1 parent ef67597 commit acc7c99
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 121 deletions.
6 changes: 6 additions & 0 deletions frontend/src/app/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ 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
152 changes: 81 additions & 71 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,81 +156,91 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
style={{ flexBasis: 0, overflowY: 'hidden' }}
variant="light"
>
<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}
<Flex
direction={{ default: 'column' }}
style={{ height: '100%' }}
data-testid="pipeline-version-topology-content"
spaceItems={{ default: 'spaceItemsNone' }}
>
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
setSelectedId(ids.length ? ids[0] : null);
<FlexItem>
<Tabs
activeKey={activeTabKey}
onSelect={(e, tabIndex) => {
setActiveTabKey(tabIndex);
setSelectedId(null);
}}
sidePanel={
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => 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>
</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={
<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>
)}
</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>
</ApplicationsPage>
{pipeline && (
Expand Down
111 changes: 61 additions & 50 deletions ...nd/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
TabContentBody,
TabContent,
PageSection,
FlexItem,
Flex,
} from '@patternfly/react-core';

import PipelineDetailsYAML from '~/concepts/pipelines/content/pipelinesDetails/PipelineDetailsYAML';
Expand Down Expand Up @@ -45,58 +47,67 @@ export const PipelineRunDetailsTabs: React.FC<PipelineRunDetailsTabsProps> = ({
style={{ flexBasis: 0, overflowY: 'hidden' }}
variant="light"
>
<Tabs
activeKey={activeKey}
onSelect={(_, eventKey) => setActiveKey(eventKey)}
aria-label="Pipeline run details tabs"
<Flex
direction={{ default: 'column' }}
style={{ height: '100%' }}
spaceItems={{ default: 'spaceItemsNone' }}
>
<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
<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}
eventKey={DetailsTabKey.Spec}
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>
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>
</FlexItem>
</Flex>
</PageSection>
);
};

0 comments on commit acc7c99

Please sign in to comment.