(POC) Add devfile v2 outerloop flow to console

cmd/bridge/main.go

@@ -58,6 +58,9 @@ const (
 
 	// Well-known location of the GitOps service. This is only accessible in-cluster
 	openshiftGitOpsHost = "cluster.openshift-pipelines-app-delivery.svc:8080"
+
+	// Well-known location of the GitOps service. This is only accessible in-cluster
+	openshiftDevfileParserHost = "cluster.openshift-pipelines-app-delivery.svc:8080"
 )
 
 func main() {

frontend/packages/dev-console/src/actions/add-resources.tsx

@@ -4,6 +4,7 @@ import {
   OsImageIcon,
   CatalogIcon,
   CubeIcon,
+  LayerGroupIcon,
   DatabaseIcon,
 } from '@patternfly/react-icons';
 import { ImportOptions } from '../components/import/import-types';
@@ -39,6 +40,13 @@ export const fromDockerfile = createKebabAction(
   allImportResourceAccess,
 );
 
+export const fromDevfile = createKebabAction(
+  'From Devfile',
+  <LayerGroupIcon />,
+  ImportOptions.DEVFILE,
+  allImportResourceAccess,
+);
+
 export const fromDatabaseCatalog = createKebabAction(
   'Database',
   <DatabaseIcon />,
@@ -50,11 +58,13 @@ export const addResourceMenu: KebabAction[] = [
   containerImage,
   fromCatalog,
   fromDockerfile,
+  fromDevfile,
   fromDatabaseCatalog,
 ];
 
 export const addResourceMenuWithoutCatalog: KebabAction[] = [
   fromGit,
   containerImage,
   fromDockerfile,
+  fromDevfile,
 ];

frontend/packages/dev-console/src/components/edit-application/EditApplicationForm.tsx

@@ -8,6 +8,7 @@ import GitSection from '../import/git/GitSection';
 import BuilderSection from '../import/builder/BuilderSection';
 import DockerSection from '../import/git/DockerSection';
 import IconSection from '../import/section/IconSection';
+import DevPreviewBadge from '@console/shared/src/components/badges/DevPreviewBadge';
 import AdvancedSection from '../import/advanced/AdvancedSection';
 import AppSection from '../import/app/AppSection';
 import { NormalizedBuilderImages } from '../../utils/imagestream-utils';
@@ -34,10 +35,13 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
   appResources,
 }) => (
   <>
-    <PageHeading title={createFlowType} style={{ padding: '0px' }} />
+    {createFlowType === CreateApplicationFlow.Devfile
+      ? <PageHeading title={createFlowType} style={{ padding: '0px' }} badge={<DevPreviewBadge />} />
+      : <PageHeading title={createFlowType} style={{ padding: '0px' }} />
+    }
     <Form onSubmit={handleSubmit}>
       {createFlowType !== CreateApplicationFlow.Container && (
-        <GitSection builderImages={builderImages} />
+        <GitSection buildStrategy={values.build.strategy} builderImages={builderImages} />
       )}
       {createFlowType === CreateApplicationFlow.Git && (
         <BuilderSection image={values.image} builderImages={builderImages} />
@@ -48,7 +52,9 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
       {createFlowType === CreateApplicationFlow.Container && <ImageSearchSection />}
       {createFlowType === CreateApplicationFlow.Container && <IconSection />}
       <AppSection project={values.project} />
-      <AdvancedSection values={values} appResources={appResources} />
+      {createFlowType !== CreateApplicationFlow.Devfile && (
+        <AdvancedSection values={values} appResources={appResources} />
+      )}
       <FormFooter
         handleReset={handleReset}
         errorMessage={status && status.submitError}

frontend/packages/dev-console/src/components/edit-application/edit-application-utils.ts

@@ -19,6 +19,7 @@ import { detectGitType } from '../import/import-validation-utils';
 export enum CreateApplicationFlow {
   Git = 'Import from Git',
   Dockerfile = 'Import from Dockerfile',
+  Devfile = 'Import from Devfile',
   Container = 'Deploy Image',
 }
 
@@ -41,6 +42,8 @@ export const getPageHeading = (buildStrategy: string): string => {
       return CreateApplicationFlow.Git;
     case BuildStrategyType.Docker:
       return CreateApplicationFlow.Dockerfile;
+    case BuildStrategyType.Devfile:
+      return CreateApplicationFlow.Devfile;
     default:
       return CreateApplicationFlow.Container;
   }
@@ -108,7 +111,7 @@ export const getRouteData = (route: K8sResourceKind, resource: K8sResourceKind)
 };
 
 export const getBuildData = (buildConfig: K8sResourceKind, gitType: string) => {
-  const buildStrategyType = _.get(buildConfig, 'spec.strategy.type', '');
+  let buildStrategyType = _.get(buildConfig, 'spec.strategy.type', '');
   let buildStrategyData;
   switch (buildStrategyType) {
     case BuildStrategyType.Source:
@@ -120,6 +123,10 @@ export const getBuildData = (buildConfig: K8sResourceKind, gitType: string) => {
     default:
       buildStrategyData = { env: [] };
   }
+  if (buildConfig.metadata.annotations['isFromDevfile'] === "true") {
+    buildStrategyType = BuildStrategyType.Devfile;
+    // buildStrategyData = _.get(buildConfig, 'spec.strategy.dockerStrategy');
+  }
   const triggers = _.get(buildConfig, 'spec.triggers');
   const buildData = {
     env: buildStrategyData.env || [],

frontend/packages/dev-console/src/components/import/DevfileImportForm.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { Form } from '@patternfly/react-core';
+import { FormikProps, FormikValues } from 'formik';
+import { FormFooter } from '@console/shared/src/components/form-utils';
+import { DevfileImportFormProps } from './import-types';
+import GitSection from './git/GitSection';
+import AppSection from './app/AppSection';
+
+const DevfileImportForm: React.FC<FormikProps<FormikValues> & DevfileImportFormProps> = ({
+  values,
+  errors,
+  handleSubmit,
+  handleReset,
+  status,
+  builderImages,
+  isSubmitting,
+  dirty,
+  projects,
+}) => (
+  <Form onSubmit={handleSubmit} data-test-id="import-devfile-form">
+    <GitSection buildStrategy= "Devfile" builderImages={builderImages}/>
+    <AppSection
+      project={values.project}
+      noProjectsAvailable={projects.loaded && _.isEmpty(projects.data)}
+    />
+    <FormFooter
+      handleReset={handleReset}
+      errorMessage={status && status.submitError}
+      isSubmitting={isSubmitting}
+      submitLabel="Create"
+      sticky
+      disableSubmit={!dirty || !_.isEmpty(errors)}
+      resetLabel="Cancel"
+    />
+  </Form>
+);
+
+export default DevfileImportForm;

frontend/packages/dev-console/src/components/import/ImportPage.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { PageHeading, Firehose, FirehoseResource } from '@console/internal/components/utils';
+import { PageHeading, Firehose, FirehoseResource, BuildStrategy } from '@console/internal/components/utils';
+import DevPreviewBadge from '@console/shared/src/components/badges/DevPreviewBadge';
 import { ImageStreamModel } from '@console/internal/models';
 import { QUERY_PROPERTIES } from '../../const';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
@@ -26,6 +27,13 @@ const ImportFlows: { [name: string]: ImportData } = {
     loader: () =>
       import('./GitImportForm' /* webpackChunkName: "git-import-form" */).then((m) => m.default),
   },
+  devfile: {
+    type: ImportTypes.devfile,
+    title: 'Import from devfile',
+    buildStrategy: 'Devfile',
+    loader: () =>
+      import('./DevfileImportForm' /* webpackChunkName: "devfile-import-form" */).then((m) => m.default),
+  },
   s2i: {
     type: ImportTypes.s2i,
     title: 'Create Source-to-Image Application',
@@ -72,6 +80,15 @@ const ImportPage: React.FunctionComponent<ImportPageProps> = ({ match, location
         isList: true,
       },
     ];
+  } else if (importType === ImportTypes.devfile) {
+    importData = ImportFlows.devfile;
+    resources = [
+      {
+        kind: 'Project',
+        prop: 'projects',
+        isList: true,
+      },
+    ];
   } else {
     importData = ImportFlows.git;
     resources = [
@@ -96,7 +113,10 @@ const ImportPage: React.FunctionComponent<ImportPageProps> = ({ match, location
           <Helmet>
             <title>{importData.title}</title>
           </Helmet>
-          <PageHeading title={importData.title} />
+          { importType === ImportTypes.devfile
+            ? <PageHeading title={importData.title} badge={<DevPreviewBadge />} />
+            : <PageHeading title={importData.title} />
+          }
           <div className="co-m-pane__body" style={{ paddingBottom: 0 }}>
             <Firehose resources={resources}>
               <ImportForm

frontend/packages/dev-console/src/components/import/git/GitSection.tsx

@@ -10,6 +10,7 @@ import {
 } from '@console/shared';
 import { GitReadableTypes, GitTypes } from '../import-types';
 import { detectGitType, detectGitRepoName } from '../import-validation-utils';
+import { DevfileParser } from '@console/git-service/src/utils/devfile-parser';
 import {
   getSampleRepo,
   getSampleRef,
@@ -23,10 +24,11 @@ import { UNASSIGNED_KEY, CREATE_APPLICATION_KEY } from '../../../const';
 
 export interface GitSectionProps {
   showSample?: boolean;
+  buildStrategy? : string
   builderImages: NormalizedBuilderImages;
 }
 
-const GitSection: React.FC<GitSectionProps> = ({ showSample, builderImages }) => {
+const GitSection: React.FC<GitSectionProps> = ({ showSample, buildStrategy, builderImages }) => {
   const { values, setFieldValue, setFieldTouched, touched, dirty } = useFormikContext<
     FormikValues
   >();
@@ -50,11 +52,41 @@ const GitSection: React.FC<GitSectionProps> = ({ showSample, builderImages }) =>
       setFieldValue('git.type', gitType);
       setFieldValue('git.showGitType', showGitType);
       showGitType && setFieldTouched('git.type', false);
-
+      
       const gitService = getGitService({ url, ref }, gitType as GitProvider);
       const isReachable = gitService && (await gitService.isRepoReachable());
+      const isDevfilePresent = gitService && (await gitService.isDevfilePresent());
+      const DevfileContents = gitService && (await gitService.getDevfileContent());
+      const devfileParser = new DevfileParser(DevfileContents);
+
       setFieldValue('git.isUrlValidating', false);
-      if (isReachable) {
+
+      if (buildStrategy === 'Devfile' ) {
+        if (isReachable && isDevfilePresent){
+          const DevfileVersion = await devfileParser.getDevfileVersion(DevfileContents)
+          const semver = require('semver')
+          if (semver.gte(DevfileVersion, '2.1.0')) {
+            gitRepoName && !values.name && setFieldValue('name', gitRepoName);
+            gitRepoName &&
+            !values.application.name &&
+            values.application.selectedKey !== UNASSIGNED_KEY &&
+            setFieldValue('application.name', `${gitRepoName}-app`);
+            setFieldValue('devfile.devfilePath', `${url}/devfile.yaml`)
+            setFieldValue('devfile.devfileContent', DevfileContents)
+            setValidated(ValidatedOptions.success);
+          }
+          else {
+            setValidated(ValidatedOptions.warning);
+          }
+        }
+        else if (isReachable && !isDevfilePresent){
+          setValidated(ValidatedOptions.warning);
+        }
+        else {
+          setValidated(ValidatedOptions.error);
+        }
+      }
+      else if (isReachable) {
         setValidated(ValidatedOptions.success);
         gitRepoName && !values.name && setFieldValue('name', gitRepoName);
         gitRepoName &&
@@ -157,6 +189,9 @@ const GitSection: React.FC<GitSectionProps> = ({ showSample, builderImages }) =>
     if (validated === ValidatedOptions.warning) {
       return 'URL is valid but cannot be reached. If this is a private repository, enter a source secret in Advanced Git Options';
     }
+    if (validated === ValidatedOptions.warning) {
+      return 'Valid URL but devfile build guidance not available.';
+    }
     return '';
   };