add the form flag for deploying with serverless

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

@@ -37,6 +37,9 @@ const DeployImage: React.FC<DeployImageProps> = ({ namespace }) => {
       ports: [],
     },
     isSearchingForImage: false,
+    serverless: {
+      trigger: false,
+    },
     route: {
       create: true,
       targetPort: '',

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

@@ -7,6 +7,7 @@ import { NormalizedBuilderImages } from '../../utils/imagestream-utils';
 import ImageSearchSection from './image-search/ImageSearchSection';
 import AppSection from './app/AppSection';
 import AdvancedSection from './advanced/AdvancedSection';
+import ServerlessSection from './serverless/ServerlessSection';
 
 export interface DeployImageFormProps {
   builderImages?: NormalizedBuilderImages;
@@ -34,6 +35,7 @@ const DeployImageForm: React.FC<FormikProps<FormikValues> & DeployImageFormProps
     <div className="co-m-pane__form">
       <AppSection project={values.project} />
       <ImageSearchSection />
+      <ServerlessSection />
       <AdvancedSection values={values} />
     </div>
     <br />

frontend/packages/dev-console/src/components/import/deployImage-submit-utils.ts

@@ -11,6 +11,7 @@ import { SelectorInput } from '@console/internal/components/utils';
 import { makePortName } from '../../utils/imagestream-utils';
 import { getAppLabels, getPodLabels } from '../../utils/resource-label-utils';
 import { DeployImageFormData } from './import-types';
+import { createKnativeService } from '../../utils/create-knative-utils';
 
 const annotations = {
   'openshift.io/generated-by': 'OpenShiftWebConsole',
@@ -266,20 +267,26 @@ export const createResources = (
 ): Promise<K8sResourceKind[]> => {
   const {
     route: { create: canCreateRoute },
-    isi: { ports },
+    project: { name: projectName },
+    name,
+    isi: { name: isiName, tag, ports },
   } = formData;
 
-  const requests: Promise<K8sResourceKind>[] = [
-    createDeploymentConfig(formData, dryRun),
-    createImageStream(formData, dryRun),
-    createBuildConfig(formData, dryRun),
-  ];
+  const requests: Promise<K8sResourceKind>[] = [];
+  if (!formData.serverless.trigger) {
+    requests.push(createDeploymentConfig(formData, dryRun));
+    requests.push(createImageStream(formData, dryRun));
+    requests.push(createBuildConfig(formData, dryRun));
 
-  if (!_.isEmpty(ports)) {
-    requests.push(createService(formData, dryRun));
-    if (canCreateRoute) {
-      requests.push(createRoute(formData, dryRun));
+    if (!_.isEmpty(ports)) {
+      requests.push(createService(formData, dryRun));
+      if (canCreateRoute) {
+        requests.push(createRoute(formData, dryRun));
+      }
     }
+  } else if (!dryRun) {
+    // Do not run serverless call during the dry run.
+    requests.push(createKnativeService(name, projectName, isiName, tag));
   }
 
   return Promise.all(requests);

frontend/packages/dev-console/src/components/import/deployImage-validation-utils.ts

@@ -19,6 +19,9 @@ export const deployValidationSchema = yup.object().shape({
     tag: yup.string().required('Required'),
     status: yup.string().required('Required'),
   }),
+  serverless: yup.object().shape({
+    trigger: yup.boolean(),
+  }),
   deployment: yup.object().shape({
     replicas: yup
       .number()

frontend/packages/dev-console/src/components/import/import-types.ts

@@ -8,17 +8,18 @@ export interface FirehoseList {
 
 export interface DeployImageFormData {
   project: ProjectData;
+  application: ApplicationData;
   name: string;
   searchTerm: string;
   isi: ImageStreamImageData;
   image: ImageStreamImageData;
   isSearchingForImage: boolean;
+  serverless?: ServerlessData;
   labels: { [name: string]: string };
   env: { [name: string]: string };
   route: RouteData;
   build: BuildData;
   deployment: DeploymentData;
-  application: ApplicationData;
 }
 
 export interface GitImportFormData {
@@ -103,6 +104,10 @@ export interface DeploymentData {
   env: (NameValuePair | NameValueFromPair)[];
 }
 
+export interface ServerlessData {
+  trigger: boolean;
+}
+
 export enum GitTypes {
   '' = 'Please choose Git type',
   github = 'GitHub',

frontend/packages/dev-console/src/components/import/serverless/ServerlessSection.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { connectToFlags } from '@console/internal/reducers/features';
+import { FLAG_KNATIVE_SERVING } from '@console/knative-plugin';
+import FormSection from '../section/FormSection';
+import { CheckboxField } from '../../formik-fields';
+
+type ServerlessSectionProps = {
+  flags: { [key: string]: boolean };
+};
+
+const ServerlessSection: React.FC<ServerlessSectionProps> = ({ flags }) => {
+  if (flags[FLAG_KNATIVE_SERVING]) {
+    return (
+      <FormSection title="Serverless Options" divider>
+        <span className="label label-warning">Tech Preview</span>
+        <CheckboxField
+          type="checkbox"
+          label="Enable scaling to zero when idle"
+          name="serverless.trigger"
+        />
+      </FormSection>
+    );
+  }
+
+  return null;
+};
+
+export default connectToFlags(FLAG_KNATIVE_SERVING)(ServerlessSection);

frontend/packages/dev-console/src/utils/create-knative-utils.ts

@@ -5,7 +5,7 @@ export const createKnativeService = (
   name: string,
   namespace: string,
   imageStreamName: string,
-  imageStreamTag: string,
+  imageStreamTag?: string,
   cpuResource: string = '100m',
   memoryResource: string = '100Mi',
 ): Promise<K8sResourceKind> => {
@@ -22,7 +22,7 @@ export const createKnativeService = (
           revisionTemplate: {
             spec: {
               container: {
-                image: `${imageStreamName}:${imageStreamTag}`,
+                image: `${imageStreamName}${imageStreamTag ? `:${imageStreamTag}` : ''}`,
                 resources: {
                   requests: {
                     cpu: `${cpuResource}`,

frontend/public/reducers/features.ts

@@ -89,7 +89,7 @@ type WithFlagsProps = {
   flags: {[key: string]: boolean};
 };
 
-export type ConnectToFlags = <P extends WithFlagsProps>(...flags: FLAGS[]) => (C: React.ComponentType<P>) =>
+export type ConnectToFlags = <P extends WithFlagsProps>(...flags: (FLAGS | string)[]) => (C: React.ComponentType<P>) =>
   React.ComponentType<Omit<P, keyof WithFlagsProps>> & {WrappedComponent: React.ComponentType<P>};
 export const connectToFlags: ConnectToFlags = (...flags) => connect(state => stateToProps(flags, state), null, null, {areStatePropsEqual: _.isEqual});