Skip to content

Commit

Permalink
[RHOAIENG-8359] Move and update pipeline and run detail tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpuzz0
jpuzz0 committed Jun 13, 2024
1 parent 7d5b99f commit 41d4263
Show file tree
Hide file tree
Showing 12 changed files with 352 additions and 512 deletions.
36 changes: 14 additions & 22 deletions frontend/src/__tests__/cypress/cypress/pages/pipelines/topology.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,20 @@ class PipelineRunRightDrawer extends Contextual<HTMLDivElement> {
}

class RunDetails extends PipelinesTopology {
findBottomDrawer() {
return new PipelineRunBottomDrawer(() =>
cy.findByTestId('pipeline-run-drawer-bottom').parent(),
);
findGraphTab() {
return cy.findByTestId('pipeline-run-tab-graph');
}

findDetailsTab() {
return cy.findByTestId('pipeline-run-tab-details');
}

findPipelineSpecTab() {
return cy.findByTestId('pipeline-run-tab-spec');
}

findDetailItem(key: string) {
return new DetailsItem(() => cy.findByTestId(`detail-item-${key}`));
}

findRightDrawer() {
Expand Down Expand Up @@ -247,24 +257,6 @@ class PipelineRunDetails extends RunDetails {
}
}

class PipelineRunBottomDrawer extends Contextual<HTMLDivElement> {
findBottomDrawerDetailsTab() {
return this.find().findByTestId('bottom-drawer-tab-details');
}

findBottomDrawerYamlTab() {
return this.find().findByTestId('bottom-drawer-tab-run-output');
}

findBottomDrawerInputTab() {
return this.find().findByTestId('bottom-drawer-tab-input-parameters');
}

findBottomDrawerDetailItem(key: string) {
return new DetailsItem(() => this.find().findByTestId(`detail-item-${key}`));
}
}

export const pipelineDetails = new PipelineDetails();
export const pipelineRunDetails = new PipelineRunDetails();
export const pipelineRunJobDetails = new PipelineRunJobDetails();
Expand Down
137 changes: 33 additions & 104 deletions frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,85 +341,45 @@ describe('Pipeline topology', () => {
cy.wait('@deletepipelineRunJob');
});

it('Test pipeline job bottom drawer project navigation', () => {
it('Test pipeline job details project navigation', () => {
pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);

pipelineRunJobDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Project')
.findValue()
.find('a')
.click();
pipelineRunJobDetails.findDetailsTab().click();
pipelineRunJobDetails.findDetailItem('Project').findValue().find('a').click();
verifyRelativeURL(`/projects/${projectId}?section=overview`);
});

it('Test pipeline job bottom drawer pipeline version navigation', () => {
it('Test pipeline job details pipeline version navigation', () => {
pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);

pipelineRunJobDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Pipeline version')
.findValue()
.find('a')
.click();
pipelineRunJobDetails.findDetailsTab().click();
pipelineRunJobDetails.findDetailItem('Pipeline version').findValue().find('a').click();
verifyRelativeURL(
`/pipelines/${projectId}/pipeline/view/${mockJob.pipeline_version_reference.pipeline_id}/${mockJob.pipeline_version_reference.pipeline_version_id}`,
);
});
});

it('Test pipeline job bottom drawer details', () => {
it('Test pipeline job tab details', () => {
initIntercepts();

pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);

pipelineRunJobDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
pipelineRunJobDetails.findDetailsTab().click();
pipelineRunJobDetails.findDetailItem('Name').findValue().contains(mockJob.display_name);
pipelineRunJobDetails.findDetailItem('Project').findValue().contains('Test Project');
pipelineRunJobDetails.findDetailItem('Run ID').findValue().contains(mockJob.display_name);
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Name')
.findDetailItem('Pipeline version')
.findValue()
.contains(mockJob.display_name);
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Project')
.findValue()
.contains('Test Project');
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Run ID')
.findValue()
.contains(mockJob.display_name);
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Workflow name')
.findValue()
.contains('test-pipeline');
.contains('test-version-name');
pipelineRunJobDetails.findDetailItem('Pipeline').findValue().contains('test-pipeline');
pipelineRunJobDetails.findDetailItem('Workflow name').findValue().contains('test-pipeline');
pipelineRunJobDetails.findDetailItem('Created').findValue().contains('February 8, 2024');
pipelineRunJobDetails.findDetailItem('Run trigger enabled').findValue().contains('Yes');
pipelineRunJobDetails.findDetailItem('Trigger').findValue().contains('Every 1 minute');
});

it('Test pipeline job bottom drawer parameters', () => {
initIntercepts();

pipelineRunJobDetails.visit(projectId, mockJob.recurring_run_id);

pipelineRunJobDetails.findBottomDrawer().findBottomDrawerInputTab().click();
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('min_max_scaler')
.findValue()
.contains('False');
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('neighbors')
.findValue()
.contains('0');
pipelineRunJobDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('standard_scaler')
.findValue()
.contains('yes');
});
it('Ensure that clicking on a node will open a right-side drawer', () => {
initIntercepts();

Expand All @@ -438,63 +398,32 @@ describe('Pipeline topology', () => {
taskDrawer.find().should('not.exist');
});

it('Test pipeline triggered run bottom drawer details', () => {
it('Test pipeline triggered run tab details', () => {
initIntercepts();

pipelineRunDetails.visit(projectId, mockRun.run_id);

pipelineRunJobDetails.findBottomDrawer().findBottomDrawerYamlTab();
pipelineRunDetails.findBottomDrawer().findBottomDrawerDetailsTab().click();
pipelineRunDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Name')
.findValue()
.contains(mockJob.display_name);
pipelineRunDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Project')
.findValue()
.contains('Test Project');
pipelineRunDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Run ID')
.findValue()
.contains(mockJob.display_name);
pipelineRunDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('Workflow name')
.findValue()
.contains('test-pipeline');
});

it('Test pipeline triggered run bottom drawer parameters', () => {
initIntercepts();

pipelineRunDetails.visit(projectId, mockRun.run_id);

pipelineRunDetails.findBottomDrawer().findBottomDrawerInputTab().click();
pipelineRunDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('min_max_scaler')
.findValue()
.contains('False');
pipelineRunDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('neighbors')
.findValue()
.contains('1');
pipelineRunJobDetails.findPipelineSpecTab();
pipelineRunDetails.findDetailsTab().click();
pipelineRunDetails.findDetailItem('Name').findValue().contains(mockJob.display_name);
pipelineRunDetails
.findBottomDrawer()
.findBottomDrawerDetailItem('standard_scaler')
.findDetailItem('Pipeline version')
.findValue()
.contains('False');
.contains('test-version-name');
pipelineRunDetails.findDetailItem('Pipeline').findValue().contains('test-pipeline');
pipelineRunDetails.findDetailItem('Project').findValue().contains('Test Project');
pipelineRunDetails.findDetailItem('Run ID').findValue().contains(mockJob.display_name);
pipelineRunDetails.findDetailItem('Workflow name').findValue().contains('test-pipeline');
pipelineRunDetails.findDetailItem('Started').findValue().contains('March 15, 2024');
pipelineRunDetails.findDetailItem('Finished').findValue().contains('March 15, 2024');
pipelineRunDetails.findDetailItem('Duration').findValue().contains('0:50');
});

it('Test pipeline triggered run bottom drawer output', () => {
it('Test pipeline triggered run YAML output', () => {
initIntercepts();
pipelineRunDetails.visit(projectId, mockRun.run_id);

pipelineRunDetails.findBottomDrawer().findBottomDrawerYamlTab().click();
pipelineRunDetails.findPipelineSpecTab().click();
pipelineRunDetails.findYamlOutput().click();
const pipelineDashboardCodeEditor = pipelineDetails.getPipelineDashboardCodeEditor();
pipelineDashboardCodeEditor.findInput().should('not.be.empty');
Expand Down
34 changes: 25 additions & 9 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
FlexItem,
Tab,
TabContent,
TabContentBody,
Tabs,
TabTitleText,
Truncate,
Expand All @@ -30,9 +31,11 @@ import { getCorePipelineSpec } from '~/concepts/pipelines/getCorePipelineSpec';
import PipelineDetailsActions from './PipelineDetailsActions';
import SelectedTaskDrawerContent from './SelectedTaskDrawerContent';
import PipelineNotFound from './PipelineNotFound';
import { PipelineSummaryDescriptionList } from './PipelineSummaryDescriptionList';

enum PipelineDetailsTab {
GRAPH,
SUMMARY,
YAML,
}

Expand Down Expand Up @@ -163,9 +166,20 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
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>YAML</TabTitleText>}
title={<TabTitleText>Pipeline spec</TabTitleText>}
data-testid="pipeline-yaml-tab"
aria-label="Pipeline YAML Tab"
tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
Expand Down Expand Up @@ -202,15 +216,17 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
eventKey={PipelineDetailsTab.YAML}
activeKey={activeTabKey}
hidden={PipelineDetailsTab.YAML !== activeTabKey}
style={{ height: '100%' }}
className="pf-v5-u-h-100"
>
<PipelineDetailsYAML
filename={`Pipeline ${
getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
'details'
}`}
content={pipelineVersion?.pipeline_spec}
/>
<TabContentBody hasPadding className="pf-v5-u-h-100">
<PipelineDetailsYAML
filename={`Pipeline ${
getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
'details'
}`}
content={pipelineVersion?.pipeline_spec}
/>
</TabContentBody>
</TabContent>
</div>
</ApplicationsPage>
Expand Down
49 changes: 49 additions & 0 deletions ...c/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineSummaryDescriptionList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from 'react';
import { Link } from 'react-router-dom';

import { Truncate } from '@patternfly/react-core';

import { PipelineKFv2, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
import {
asTimestamp,
DetailItem,
renderDetailItems,
} from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils';

type PipelineSummaryDescriptionListProps = {
pipeline: PipelineKFv2 | null;
version: PipelineVersionKFv2 | null;
};

export const PipelineSummaryDescriptionList: React.FC<PipelineSummaryDescriptionListProps> = ({
pipeline,
version,
}) => {
if (!pipeline) {
return null;
}

const details: DetailItem[] = [
{ key: 'Pipeline ID', value: <Truncate content={pipeline.pipeline_id} /> },
...(version
? [
{
key: 'Version ID',
value: version.pipeline_version_id,
},
]
: []),
...(version?.code_source_url
? [
{
key: 'Version source',
value: <Link to={version.code_source_url}>{version.code_source_url}</Link>,
},
]
: []),
{ key: 'Uploaded on', value: asTimestamp(new Date(pipeline.created_at)) },
...(pipeline.description ? [{ key: 'Pipeline description', value: pipeline.description }] : []),
];

return renderDetailItems(details);
};
Loading

0 comments on commit 41d4263

Please sign in to comment.