Merge pull request #5005 from karthikjeeyar/trigger-pages

Add pipeline trigger resource pages and related links in details pages

frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/PipelineRunDetails.tsx

@@ -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';
@@ -14,8 +15,11 @@ export interface PipelineRunDetailsProps {
 
 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">
@@ -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>

frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/__tests__/PipelineRunDetails.spec.tsx

@@ -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];
@@ -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');
@@ -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);
   });
 });

frontend/packages/dev-console/src/components/pipelines/EventListenerPage.tsx

@@ -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;

frontend/packages/dev-console/src/components/pipelines/TriggerBindingPage.tsx

@@ -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;

frontend/packages/dev-console/src/components/pipelines/TriggerTemplatePage.tsx

@@ -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;

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/EventListenerDetails.tsx

@@ -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;

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/TriggerBindingDetails.tsx

@@ -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;

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/TriggerTemplateDetails.tsx

@@ -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;

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineDetails.tsx

@@ -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;

frontend/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderForm.tsx

@@ -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';
@@ -33,7 +33,7 @@ import { applyChange } from './update-utils';
 import './PipelineBuilderForm.scss';
 
 type PipelineBuilderFormProps = FormikProps<FormikValues> & {
-  existingPipeline: K8sResourceKind;
+  existingPipeline: Pipeline;
   namespace: string;
 };
 

frontend/packages/dev-console/src/components/pipelines/pipeline-builder/utils.ts

@@ -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);

frontend/packages/dev-console/src/components/pipelines/resource-overview/ResourceLinkList.scss

@@ -0,0 +1,3 @@
+.odc-resource-link-list {
+  margin-bottom: var(--pf-global--spacer--lg);
+}