Pipeline builder task sidebar

frontend/packages/dev-console/src/components/import/pipeline/PipelineTemplate.tsx

@@ -6,7 +6,7 @@ import { Alert, Expandable } from '@patternfly/react-core';
 import { CheckboxField } from '@console/shared';
 import { CLUSTER_PIPELINE_NS } from '../../../const';
 import { PipelineModel } from '../../../models';
-import { PipelineVisualization } from '../../pipelines/detail-page-tabs/pipeline-details/PipelineVisualization';
+import PipelineVisualization from '../../pipelines/detail-page-tabs/pipeline-details/PipelineVisualization';
 
 const MISSING_DOCKERFILE_LABEL_TEXT =
   'The pipeline template for Dockerfiles is not available at this time.';

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
-import { K8sResourceKind } from '@console/internal/module/k8s';
-import { PipelineRunVisualization } from './PipelineRunVisualization';
+import PipelineRunVisualization from './PipelineRunVisualization';
+import { PipelineRun } from '../../../utils/pipeline-augment';
 
 export interface PipelineRunDetailsProps {
-  obj: K8sResourceKind;
+  obj: PipelineRun;
 }
 
 export const PipelineRunDetails: React.FC<PipelineRunDetailsProps> = ({ obj: pipelineRun }) => {

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

@@ -1,57 +1,35 @@
 import * as React from 'react';
-import { K8sResourceKind, k8sGet } from '@console/internal/module/k8s';
-import { getPipelineTasks } from '../../../utils/pipeline-utils';
+import { Alert } from '@patternfly/react-core';
+import { k8sGet } from '@console/internal/module/k8s';
 import { PipelineModel } from '../../../models';
-import { pipelineRunFilterReducer } from '../../../utils/pipeline-filter-reducer';
-import { PipelineVisualizationGraph } from '../../pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationGraph';
+import PipelineVisualization from '../../pipelines/detail-page-tabs/pipeline-details/PipelineVisualization';
+import { Pipeline, PipelineRun } from '../../../utils/pipeline-augment';
 
-export interface PipelineRunVisualizationProps {
-  pipelineRun: K8sResourceKind;
-}
+type PipelineRunVisualizationProps = {
+  pipelineRun: PipelineRun;
+};
 
-export interface PipelineVisualizationRunState {
-  pipeline: K8sResourceKind;
-  errorCode?: number;
-}
+const PipelineRunVisualization: React.FC<PipelineRunVisualizationProps> = ({ pipelineRun }) => {
+  const [errorMessage, setErrorMessage] = React.useState<string>(null);
+  const [pipeline, setPipeline] = React.useState<Pipeline>(null);
 
-export class PipelineRunVisualization extends React.Component<
-  PipelineRunVisualizationProps,
-  PipelineVisualizationRunState
-> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      pipeline: { apiVersion: '', metadata: {}, kind: 'PipelineRun' },
-      errorCode: null,
-    };
-  }
+  React.useEffect(() => {
+    k8sGet(PipelineModel, pipelineRun.spec.pipelineRef.name, pipelineRun.metadata.namespace)
+      .then((res: Pipeline) => setPipeline(res))
+      .catch((error) =>
+        setErrorMessage(error?.message || 'Could not load visualization at this time.'),
+      );
+  }, [pipelineRun, setPipeline]);
 
-  componentDidMount() {
-    k8sGet(
-      PipelineModel,
-      this.props.pipelineRun.spec.pipelineRef.name,
-      this.props.pipelineRun.metadata.namespace,
-    )
-      .then((res) => {
-        this.setState({
-          pipeline: res,
-        });
-      })
-      .catch((error) => this.setState({ errorCode: error.response.status }));
+  if (errorMessage) {
+    return <Alert variant="danger" isInline title={errorMessage} />;
   }
 
-  render() {
-    const { pipelineRun } = this.props;
-    if (this.state.errorCode === 404) {
-      return null;
-    }
-    return (
-      <PipelineVisualizationGraph
-        pipelineRun={pipelineRun.metadata.name}
-        namespace={pipelineRun.metadata.namespace}
-        graph={getPipelineTasks(this.state.pipeline, pipelineRun)}
-        runStatus={pipelineRunFilterReducer(pipelineRun)}
-      />
-    );
+  if (!pipeline || !pipelineRun) {
+    return null;
   }
-}
+
+  return <PipelineVisualization pipeline={pipeline} pipelineRun={pipelineRun} />;
+};
+
+export default PipelineRunVisualization;

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

@@ -12,8 +12,8 @@ import { getLatestRun } from '../../utils/pipeline-augment';
 import { PipelineRunModel, PipelineModel } from '../../models';
 import {
   PipelineDetails,
-  PipelineParameters,
-  PipelineResources,
+  PipelineParametersForm,
+  PipelineResourcesForm,
   PipelineRuns,
 } from './detail-page-tabs';
 import PipelineForm from './pipeline-form/PipelineForm';
@@ -76,7 +76,7 @@ class PipelineDetailsPage extends React.Component<DetailsPageProps, PipelineDeta
             name: 'Parameters',
             component: (props) => (
               <PipelineForm
-                PipelineFormComponent={PipelineParameters}
+                PipelineFormComponent={PipelineParametersForm}
                 formName="parameters"
                 {...props}
               />
@@ -87,7 +87,7 @@ class PipelineDetailsPage extends React.Component<DetailsPageProps, PipelineDeta
             name: 'Resources',
             component: (props) => (
               <PipelineForm
-                PipelineFormComponent={PipelineResources}
+                PipelineFormComponent={PipelineResourcesForm}
                 formName="resources"
                 {...props}
               />

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

@@ -32,7 +32,7 @@ const PipelinesResourceList: React.FC<PipelinesResourceListProps> = (props) => {
       createProps={{
         to: `/k8s/${namespace ? `ns/${namespace}` : 'cluster'}/${referenceForModel(
           PipelineModel,
-        )}/~new`,
+        )}/~new/builder`,
       }}
       filterLabel="by name"
       textFilter="name"

frontend/packages/dev-console/src/components/pipelines/const.ts

@@ -0,0 +1,7 @@
+export enum PipelineResourceType {
+  '' = 'Select resource type',
+  git = 'Git',
+  image = 'Image',
+  cluster = 'Cluster',
+  storage = 'Storage',
+}

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

@@ -1,67 +1,43 @@
 import * as React from 'react';
-import * as _ from 'lodash';
-import { Form, TextInputTypes } from '@patternfly/react-core';
-import { FormikProps, FormikValues } from 'formik';
-import { useAccessReview } from '@console/internal/components/utils';
-import { getActiveNamespace } from '@console/internal/actions/ui';
-import { MultiColumnField, InputField, FormFooter } from '@console/shared';
+import { TextInputTypes } from '@patternfly/react-core';
+import { MultiColumnField, InputField } from '@console/shared';
+
+type PipelineParametersProps = {
+  addLabel?: string;
+  fieldName: string;
+  isReadOnly?: boolean;
+};
+
+const PipelineParameters: React.FC<PipelineParametersProps> = (props) => {
+  const { addLabel = 'Add Pipeline Params', fieldName, isReadOnly = false } = props;
 
-const PipelineParameters: React.FC<FormikProps<FormikValues>> = ({
-  handleSubmit,
-  handleReset,
-  isSubmitting,
-  status,
-  errors,
-  dirty,
-}) => {
-  const pipelineParameterAccess = useAccessReview({
-    group: 'tekton.dev',
-    resource: 'pipelines',
-    namespace: getActiveNamespace(),
-    verb: 'update',
-  });
   return (
-    <Form onSubmit={handleSubmit}>
-      <div className="co-m-pane__form">
-        <MultiColumnField
-          name="parameters"
-          addLabel="Add Pipeline Params"
-          headers={['Name', 'Description', 'Default Value']}
-          emptyValues={{ name: '', description: '', default: '' }}
-          isReadOnly={!pipelineParameterAccess}
-        >
-          <InputField
-            name="name"
-            type={TextInputTypes.text}
-            placeholder="Name"
-            isReadOnly={!pipelineParameterAccess}
-          />
-          <InputField
-            name="description"
-            type={TextInputTypes.text}
-            placeholder="Description"
-            isReadOnly={!pipelineParameterAccess}
-          />
-          <InputField
-            name="default"
-            type={TextInputTypes.text}
-            placeholder="Default Value"
-            isReadOnly={!pipelineParameterAccess}
-          />
-        </MultiColumnField>
-        <hr />
-        {pipelineParameterAccess && (
-          <FormFooter
-            handleReset={handleReset}
-            isSubmitting={isSubmitting}
-            errorMessage={status && status.submitError}
-            successMessage={status && !dirty && status.success}
-            disableSubmit={!dirty || !_.isEmpty(errors)}
-            showAlert={dirty}
-          />
-        )}
-      </div>
-    </Form>
+    <MultiColumnField
+      name={fieldName}
+      addLabel={addLabel}
+      headers={['Name', 'Description', 'Default Value']}
+      emptyValues={{ name: '', description: '', default: '' }}
+      isReadOnly={isReadOnly}
+    >
+      <InputField
+        name="name"
+        type={TextInputTypes.text}
+        placeholder="Name"
+        isReadOnly={isReadOnly}
+      />
+      <InputField
+        name="description"
+        type={TextInputTypes.text}
+        placeholder="Description"
+        isReadOnly={isReadOnly}
+      />
+      <InputField
+        name="default"
+        type={TextInputTypes.text}
+        placeholder="Default Value"
+        isReadOnly={isReadOnly}
+      />
+    </MultiColumnField>
   );
 };
 

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { Form } from '@patternfly/react-core';
+import { FormikProps, FormikValues } from 'formik';
+import { useAccessReview } from '@console/internal/components/utils';
+import { getActiveNamespace } from '@console/internal/actions/ui';
+import { FormFooter } from '@console/shared';
+import PipelineParameters from './PipelineParameters';
+
+const PipelineParametersForm: React.FC<FormikProps<FormikValues>> = ({
+  handleSubmit,
+  handleReset,
+  isSubmitting,
+  status,
+  errors,
+  dirty,
+}) => {
+  const pipelineParameterAccess = useAccessReview({
+    group: 'tekton.dev',
+    resource: 'pipelines',
+    namespace: getActiveNamespace(),
+    verb: 'update',
+  });
+  return (
+    <Form onSubmit={handleSubmit}>
+      <div className="co-m-pane__form">
+        <PipelineParameters fieldName="parameters" isReadOnly={!pipelineParameterAccess} />
+        <hr />
+        {pipelineParameterAccess && (
+          <FormFooter
+            handleReset={handleReset}
+            isSubmitting={isSubmitting}
+            errorMessage={status && status.submitError}
+            successMessage={status && !dirty && status.success}
+            disableSubmit={!dirty || !_.isEmpty(errors)}
+            showAlert={dirty}
+          />
+        )}
+      </div>
+    </Form>
+  );
+};
+
+export default PipelineParametersForm;

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

@@ -1,69 +1,33 @@
 import * as React from 'react';
-import * as _ from 'lodash';
-import { Form, TextInputTypes } from '@patternfly/react-core';
-import { FormikProps, FormikValues } from 'formik';
-import { useAccessReview } from '@console/internal/components/utils';
-import { getActiveNamespace } from '@console/internal/actions/ui';
-import { MultiColumnField, InputField, DropdownField, FormFooter } from '@console/shared';
+import { TextInputTypes } from '@patternfly/react-core';
+import { MultiColumnField, InputField, DropdownField } from '@console/shared';
+import { PipelineResourceType } from '../const';
 
-enum resourceTypes {
-  '' = 'Select resource type',
-  git = 'Git',
-  image = 'Image',
-  cluster = 'Cluster',
-  storage = 'Storage',
-}
+type PipelineResourcesParam = {
+  addLabel?: string;
+  fieldName: string;
+  isReadOnly?: boolean;
+};
+
+const PipelineResources: React.FC<PipelineResourcesParam> = (props) => {
+  const { addLabel = 'Add Pipeline Resources', fieldName, isReadOnly = false } = props;
 
-const PipelineResources: React.FC<FormikProps<FormikValues>> = ({
-  handleSubmit,
-  handleReset,
-  isSubmitting,
-  status,
-  errors,
-  dirty,
-}) => {
-  const pipelineResourceAccess = useAccessReview({
-    group: 'tekton.dev',
-    resource: 'pipelines',
-    namespace: getActiveNamespace(),
-    verb: 'update',
-  });
   return (
-    <Form onSubmit={handleSubmit}>
-      <div className="co-m-pane__form">
-        <MultiColumnField
-          name="resources"
-          addLabel="Add Pipeline Resources"
-          headers={['Name', 'Resource Type']}
-          emptyValues={{ name: '', type: '' }}
-          isReadOnly={!pipelineResourceAccess}
-        >
-          <InputField
-            name="name"
-            type={TextInputTypes.text}
-            placeholder="Name"
-            isReadOnly={!pipelineResourceAccess}
-          />
-          <DropdownField
-            name="type"
-            items={resourceTypes}
-            fullWidth
-            disabled={!pipelineResourceAccess}
-          />
-        </MultiColumnField>
-        <hr />
-        {pipelineResourceAccess && (
-          <FormFooter
-            handleReset={handleReset}
-            isSubmitting={isSubmitting}
-            errorMessage={status && status.submitError}
-            successMessage={status && !dirty && status.success}
-            disableSubmit={!dirty || !_.isEmpty(errors)}
-            showAlert={dirty}
-          />
-        )}
-      </div>
-    </Form>
+    <MultiColumnField
+      name={fieldName}
+      addLabel={addLabel}
+      headers={['Name', 'Resource Type']}
+      emptyValues={{ name: '', type: '' }}
+      isReadOnly={isReadOnly}
+    >
+      <InputField
+        name="name"
+        type={TextInputTypes.text}
+        placeholder="Name"
+        isReadOnly={isReadOnly}
+      />
+      <DropdownField name="type" items={PipelineResourceType} fullWidth disabled={isReadOnly} />
+    </MultiColumnField>
   );
 };