Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pipeline trigger resource pages and related links in details pages #5005

Merged
merged 1 commit into from
Apr 16, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import * as React from 'react';
import { SectionHeading, ResourceSummary, ResourceLink } from '@console/internal/components/utils';
import { referenceForModel } from '@console/internal/module/k8s';
import PipelineRunVisualization from './PipelineRunVisualization';
import { PipelineRun, PipelineRunReferenceResource } from '../../../utils/pipeline-augment';
import { PipelineModel, PipelineResourceModel } from '../../../models';
import ResourceLinkList from '../../pipelines/resource-overview/ResourceLinkList';
import PipelineRunVisualization from './PipelineRunVisualization';
import TriggeredBySection from './TriggeredBySection';

import './TriggeredBySection.scss';
Expand All @@ -14,8 +15,11 @@ export interface PipelineRunDetailsProps {

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Net zero changes please.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

export const PipelineRunDetails: React.FC<PipelineRunDetailsProps> = ({ obj: pipelineRun }) => {
// FIXME: If they are inline resources, we are not going to render them
const unfilteredResources = pipelineRun?.spec?.resources as PipelineRunReferenceResource[];
const renderResources = unfilteredResources?.filter(({ resourceRef }) => !!resourceRef);
const unfilteredResources = pipelineRun.spec.resources as PipelineRunReferenceResource[];
const renderResources =
unfilteredResources
?.filter(({ resourceRef }) => !!resourceRef)
.map((resource) => resource.resourceRef.name) || [];

return (
<div className="co-m-pane__body odc-pipeline-run-details">
Expand All @@ -37,28 +41,12 @@ export const PipelineRunDetails: React.FC<PipelineRunDetailsProps> = ({ obj: pip
</dd>
</dl>
<TriggeredBySection pipelineRun={pipelineRun} />
{renderResources?.length > 0 && (
<>
<SectionHeading text="Pipeline Resources" />
<dl>
{renderResources.map((res) => {
return (
<React.Fragment key={res.resourceRef.name}>
<dt>Name: {res.resourceRef.name}</dt>
<dd>
<ResourceLink
kind={referenceForModel(PipelineResourceModel)}
name={res.resourceRef.name}
namespace={pipelineRun.metadata.namespace}
inline
/>
</dd>
</React.Fragment>
);
})}
</dl>
</>
)}
<br />
<ResourceLinkList
model={PipelineResourceModel}
links={renderResources}
namespace={pipelineRun.metadata.namespace}
/>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { PipelineModel, PipelineResourceModel } from '../../../../models';
import { PipelineRunDetails } from '../PipelineRunDetails';
import { pipelineTestData, PipelineExampleNames, DataState } from '../../../../test/pipeline-data';
import PipelineRunVisualization from '../PipelineRunVisualization';
import ResourceLinkList from '../../../pipelines/resource-overview/ResourceLinkList';

const mockPipelineRun =
pipelineTestData[PipelineExampleNames.SIMPLE_PIPELINE].pipelineRuns[DataState.SUCCESS];
Expand All @@ -31,9 +32,8 @@ describe('PipelineRun details page', () => {
});

it('should render page with pipeline run links', () => {
const resources = wrapper
.find(ResourceLink)
.filter({ kind: referenceForModel(PipelineResourceModel) });
const resourceList = wrapper.find(ResourceLinkList).filter({ model: PipelineResourceModel });
const resources = resourceList.dive().find(ResourceLink);
expect(resources).toHaveLength(2);
expect(resources.get(0).props.name).toBe('mapit-git');
expect(resources.get(1).props.name).toBe('mapit-image');
Expand All @@ -43,18 +43,16 @@ describe('PipelineRun details page', () => {
const pipelineRun = _.cloneDeep(mockPipelineRun);
pipelineRun.spec.resources = [];
wrapper.setProps({ obj: pipelineRun });
const resources = wrapper
.find(ResourceLink)
.filter({ kind: referenceForModel(PipelineResourceModel) });
const resourceList = wrapper.find(ResourceLinkList).filter({ model: PipelineResourceModel });
const resources = resourceList.dive().find(ResourceLink);
expect(resources).toHaveLength(0);
});

it('should not render page with pipeline run links if resources is undefined', () => {
const pipelineRun = _.omit(_.cloneDeep(mockPipelineRun), 'spec.resources');
wrapper.setProps({ obj: pipelineRun });
const resources = wrapper
.find(ResourceLink)
.filter({ kind: referenceForModel(PipelineResourceModel) });
const resourceList = wrapper.find(ResourceLinkList).filter({ model: PipelineResourceModel });
const resources = resourceList.dive().find(ResourceLink);
expect(resources).toHaveLength(0);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
import { Kebab, navFactory, viewYamlComponent } from '@console/internal/components/utils';
import EventListenerDetails from './detail-page-tabs/EventListenerDetails';

const EventListenerPage: React.FC<DetailsPageProps> = (props) => (
<DetailsPage
{...props}
menuActions={Kebab.factory.common}
pages={[navFactory.details(EventListenerDetails), navFactory.editYaml(viewYamlComponent)]}
/>
);

export default EventListenerPage;
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
import { Kebab, navFactory, viewYamlComponent } from '@console/internal/components/utils';
import TriggerBindingDetails from './detail-page-tabs/TriggerBindingDetails';

const TriggerBindingPage: React.FC<DetailsPageProps> = (props) => (
<DetailsPage
{...props}
menuActions={Kebab.factory.common}
pages={[navFactory.details(TriggerBindingDetails), navFactory.editYaml(viewYamlComponent)]}
/>
);

export default TriggerBindingPage;
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
import { Kebab, navFactory, viewYamlComponent } from '@console/internal/components/utils';
import TriggerTemplateDetails from './detail-page-tabs/TriggerTemplateDetails';

const TriggerTemplatePage: React.FC<DetailsPageProps> = (props) => (
<DetailsPage
{...props}
menuActions={Kebab.factory.common}
pages={[navFactory.details(TriggerTemplateDetails), navFactory.editYaml(viewYamlComponent)]}
/>
);

export default TriggerTemplatePage;
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from 'react';
import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
import { TriggerTemplateModel, TriggerBindingModel } from '../../../models';
import { EventListenerKind } from '../resource-types';
import TriggerTemplateResourceLink from '../resource-overview/TriggerTemplateResourceLink';
import ResourceLinkList from '../resource-overview/ResourceLinkList';
import {
RouteTemplate,
useEventListenerTriggerTemplateNames,
getEventListenerTriggerBindingNames,
} from '../utils/triggers';

export interface EventListenerDetailsProps {
obj: EventListenerKind;
}

const EventListenerDetails: React.FC<EventListenerDetailsProps> = ({ obj: eventListener }) => {
const routeTemplates: RouteTemplate[] = useEventListenerTriggerTemplateNames(eventListener) || [];
const bindings: string[] = getEventListenerTriggerBindingNames(eventListener) || [];
return (
<div className="co-m-pane__body">
<SectionHeading text="Event Listener Details" />
<div className="row">
<div className="col-sm-6">
<ResourceSummary resource={eventListener} />
</div>
<div className="col-sm-6">
<TriggerTemplateResourceLink
namespace={eventListener.metadata.namespace}
model={TriggerTemplateModel}
links={routeTemplates}
/>
<ResourceLinkList
namespace={eventListener.metadata.namespace}
model={TriggerBindingModel}
links={bindings}
/>
</div>
</div>
</div>
);
};

export default EventListenerDetails;
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from 'react';
import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
import { EventListenerModel } from '../../../models';
import ResourceLinkList from '../resource-overview/ResourceLinkList';
import { useTriggerBindingEventListenerNames } from '../utils/triggers';
import { TriggerBindingKind } from '../resource-types';

export interface TriggerBindingDetailsProps {
obj: TriggerBindingKind;
}

const TriggerBindingDetails: React.FC<TriggerBindingDetailsProps> = ({ obj: triggerBinding }) => {
const eventListeners: string[] = useTriggerBindingEventListenerNames(triggerBinding);
return (
<div className="co-m-pane__body">
<SectionHeading text="Trigger Binding Details" />
<div className="row">
<div className="col-sm-6">
<ResourceSummary resource={triggerBinding} />
</div>
<div className="col-sm-6">
<ResourceLinkList
namespace={triggerBinding.metadata.namespace}
model={EventListenerModel}
links={eventListeners}
/>
</div>
</div>
</div>
);
};

export default TriggerBindingDetails;
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from 'react';
import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
import { EventListenerModel, PipelineModel } from '../../../models';
import ResourceLinkList from '../resource-overview/ResourceLinkList';
import {
useTriggerTemplateEventListenerNames,
getTriggerTemplatePipelineName,
} from '../utils/triggers';
import { TriggerTemplateKind } from '../resource-types';

export interface TriggerTemplateDetailsProps {
obj: TriggerTemplateKind;
}

const TriggerTemplateDetails: React.FC<TriggerTemplateDetailsProps> = ({
obj: triggerTemplate,
}) => {
const eventListeners: string[] = useTriggerTemplateEventListenerNames(triggerTemplate);
const pipelineName: string = getTriggerTemplatePipelineName(triggerTemplate);
return (
<div className="co-m-pane__body">
<SectionHeading text="Trigger Template Details" />
<div className="row">
<div className="col-sm-6">
<ResourceSummary resource={triggerTemplate} />
</div>
<div className="col-sm-6">
<ResourceLinkList
namespace={triggerTemplate.metadata.namespace}
model={PipelineModel}
links={[pipelineName]}
/>
<ResourceLinkList
namespace={triggerTemplate.metadata.namespace}
model={EventListenerModel}
links={eventListeners}
/>
</div>
</div>
</div>
);
};

export default TriggerTemplateDetails;
Original file line number Diff line number Diff line change
@@ -1,48 +1,42 @@
import * as React from 'react';
import { SectionHeading, ResourceSummary, ResourceLink } from '@console/internal/components/utils';
import { referenceForModel } from '@console/internal/module/k8s';
import { Pipeline, getResourceModelFromTask } from '../../../../utils/pipeline-augment';
import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
import { Pipeline } from '../../../../utils/pipeline-augment';
import { TriggerTemplateModel, TaskModel } from '../../../../models';
import { usePipelineTriggerTemplateNames, RouteTemplate } from '../../utils/triggers';
import TriggerTemplateResourceLink from '../../resource-overview/TriggerTemplateResourceLink';
import ResourceLinkList from '../../resource-overview/ResourceLinkList';
import PipelineVisualization from './PipelineVisualization';

interface PipelineDetailsProps {
obj: Pipeline;
}

const PipelineDetails: React.FC<PipelineDetailsProps> = ({ obj: pipeline }) => (
<div className="co-m-pane__body">
<SectionHeading text="Pipeline Details" />
<PipelineVisualization pipeline={pipeline} />
<div className="row">
<div className="col-sm-6">
<ResourceSummary resource={pipeline} />
</div>
{pipeline.spec && pipeline.spec.tasks && (
const PipelineDetails: React.FC<PipelineDetailsProps> = ({ obj: pipeline }) => {
const routeTemplates: RouteTemplate[] = usePipelineTriggerTemplateNames(pipeline) || [];
const pipelineTasks = pipeline.spec.tasks.map((task) => task.taskRef.name);
return (
<div className="co-m-pane__body">
<SectionHeading text="Pipeline Details" />
<PipelineVisualization pipeline={pipeline} />
<div className="row">
<div className="col-sm-6">
<ResourceSummary resource={pipeline} />
</div>
<div className="col-sm-6">
<SectionHeading text="Tasks" />
<dl>
{pipeline.spec.tasks.map((task) => {
const resourceModel = getResourceModelFromTask(task);
return (
<React.Fragment key={task.name}>
<dt>Name: {task.name}</dt>
<dd>
Ref:{' '}
<ResourceLink
kind={referenceForModel(resourceModel)}
name={task.taskRef.name}
namespace={pipeline.metadata.namespace}
title={task.taskRef.name}
inline
/>
</dd>
</React.Fragment>
);
})}
</dl>
<TriggerTemplateResourceLink
namespace={pipeline.metadata.namespace}
model={TriggerTemplateModel}
links={routeTemplates}
/>
<ResourceLinkList
namespace={pipeline.metadata.namespace}
links={pipelineTasks}
model={TaskModel}
/>
</div>
)}
</div>
</div>
</div>
);
);
};

export default PipelineDetails;
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '@patternfly/react-core';
import { InputField } from '@console/shared';
import { ButtonBar } from '@console/internal/components/utils';
import { K8sResourceKind } from '@console/internal/module/k8s';
import { Pipeline } from '../../../utils/pipeline-augment';
import { PipelineParameters, PipelineResources } from '../detail-page-tabs';
import { UpdateOperationType } from './const';
import { useResourceValidation } from './hooks';
Expand All @@ -33,7 +33,7 @@ import { applyChange } from './update-utils';
import './PipelineBuilderForm.scss';

type PipelineBuilderFormProps = FormikProps<FormikValues> & {
existingPipeline: K8sResourceKind;
existingPipeline: Pipeline;
namespace: string;
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const removeEmptyDefaultParams = (task: PipelineTask): PipelineTask => {
export const convertBuilderFormToPipeline = (
formValues: PipelineBuilderFormikValues,
namespace: string,
existingPipeline: Pipeline = {},
existingPipeline?: Pipeline,
): Pipeline => {
const { name, resources, params, tasks, listTasks } = formValues;
const listIds = listTasks.map((listTask) => listTask.name);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.odc-resource-link-list {
margin-bottom: var(--pf-global--spacer--lg);
}