added support for custom docker images

content/pages/publishAlgo.json

@@ -33,9 +33,30 @@
         "placeholder": "e.g. python3.7",
         "help": "Please select a predefined image to run your algorithm.",
         "type": "select",
-        "options": ["NodeJS", "Python 3.7"],
+        "options": ["node:pre-defined", "python:pre-defined", "custom image"],
         "required": true
       },
+      {
+        "name": "image",
+        "label": "Image URL",
+        "placeholder": "e.g. node or https://hub.docker.com/_/node ",
+        "help": "Provide the name of a docker image or the full url if you have it hosted in a 3rd party repo",
+        "required": false
+      },
+      {
+        "name": "version",
+        "label": "Version",
+        "placeholder": "e.g. 10",
+        "help": "Provide the version for your image.",
+        "required": false
+      },
+      {
+        "name": "entrypoint",
+        "label": "Entrypoint",
+        "placeholder": "e.g. python $ALGO",
+        "help": "Provide the entrypoint for your algorithm.",
+        "required": false
+      },
       {
         "name": "algorithmPrivacy",
         "label": "Algorithm Privacy",

src/@types/MetaData.d.ts

@@ -49,6 +49,9 @@ export interface AlgorithmPublishForm {
   algorithmPrivacy: boolean
   termsAndConditions: boolean
   // ---- optional fields ----
+  image: string
+  version: string
+  entrypoint: string
   tags?: string
 }
 

src/components/molecules/MetadataPreview.module.css

@@ -17,7 +17,7 @@
   display: grid;
   gap: var(--spacer);
   grid-template-columns: 1fr 1fr;
-  margin-bottom: var(--spacer/2);
+  margin-bottom: var(--spacer);
 }
 
 .previewTitle {

src/components/pages/Publish/FormAlgoPublish.tsx

@@ -33,16 +33,48 @@ export default function FormPublish({
     // setSubmitting(false)
   }, [setErrors, setTouched])
 
+  function handleImageSelectChange(imageSelected: string) {
+    switch (imageSelected) {
+      case 'node:pre-defined': {
+        setFieldValue('dockerImage', imageSelected)
+        setFieldValue('image', 'node')
+        setFieldValue('version', '10')
+        setFieldValue('entrypoint', 'node $ALGO')
+        break
+      }
+      case 'python:pre-defined': {
+        setFieldValue('dockerImage', imageSelected)
+        setFieldValue('image', 'oceanprotocol/algo_dockers')
+        setFieldValue('version', 'python-panda')
+        setFieldValue('entrypoint', 'python $ALGO')
+        break
+      }
+      default: {
+        setFieldValue('dockerImage', imageSelected)
+        setFieldValue('image', '')
+        setFieldValue('version', '')
+        setFieldValue('entrypoint', '')
+        break
+      }
+    }
+  }
+
   // Manually handle change events instead of using `handleChange` from Formik.
   // Workaround for default `validateOnChange` not kicking in
   function handleFieldChange(
     e: ChangeEvent<HTMLInputElement>,
     field: FormFieldProps
   ) {
+    console.log(field)
     const value =
       field.type === 'checkbox' ? !JSON.parse(e.target.value) : e.target.value
-    validateField(field.name)
-    setFieldValue(field.name, value)
+    if (field.name === 'dockerImage') {
+      validateField(field.name)
+      handleImageSelectChange(e.target.value)
+    } else {
+      validateField(field.name)
+      setFieldValue(field.name, value)
+    }
   }
 
   const resetFormAndClearStorage = (e: FormEvent<Element>) => {

src/models/FormAlgoPublish.ts

@@ -11,8 +11,13 @@ export const validationSchema: Yup.SchemaOf<AlgorithmPublishForm> = Yup.object()
     description: Yup.string().min(10).required('Required'),
     files: Yup.array<FileMetadata>().required('Required').nullable(),
     dockerImage: Yup.string()
-      .matches(/NodeJS|Python 3.7/g, { excludeEmptyString: true })
+      .matches(/node:pre-defined|python:pre-defined|custom image/g, {
+        excludeEmptyString: true
+      })
       .required('Required'),
+    image: Yup.string().required('Required'),
+    version: Yup.string().required('Required'),
+    entrypoint: Yup.string().required('Required'),
     author: Yup.string().required('Required'),
     termsAndConditions: Yup.boolean().required('Required'),
     // ---- optional fields ----
@@ -26,6 +31,9 @@ export const initialValues: Partial<AlgorithmPublishForm> = {
   name: '',
   author: '',
   dockerImage: '',
+  image: '',
+  version: '',
+  entrypoint: '',
   files: '',
   description: '',
   algorithmPrivacy: false,

src/utils/metadata.ts

@@ -70,21 +70,29 @@ export function checkIfTimeoutInPredefinedValues(
   return false
 }
 
-function getAlgoithComponent(selectedAlgorithm: string): MetadataAlgorithm {
+function getAlgoithComponent(
+  image: string,
+  version: string,
+  entrypoint: string,
+  algorithmLanguace: string
+): MetadataAlgorithm {
   return {
-    language: selectedAlgorithm === 'NodeJS' ? 'js' : 'py',
+    language: algorithmLanguace,
     format: 'docker-image',
     version: '0.1',
     container: {
-      entrypoint:
-        selectedAlgorithm === 'NodeJS' ? 'node $ALGO' : 'python $ALGO',
-      image:
-        selectedAlgorithm === 'NodeJS' ? 'node' : 'oceanprotocol/algo_dockers',
-      tag: selectedAlgorithm === 'NodeJS' ? '10' : 'python-panda'
+      entrypoint: entrypoint,
+      image: image,
+      tag: version
     }
   }
 }
 
+function getAlgoithFileExtension(fileUrl: string): string {
+  const splitedFileUrl = fileUrl.split('.')
+  return splitedFileUrl[splitedFileUrl.length - 1]
+}
+
 export function transformPublishFormToMetadata(
   {
     name,
@@ -127,13 +135,23 @@ export function transformPublishAlgorithmFormToMetadata(
     description,
     tags,
     dockerImage,
+    image,
+    version,
+    entrypoint,
     termsAndConditions,
     files
   }: Partial<AlgorithmPublishForm>,
   ddo?: DDO
 ): MetadataMarket {
   const currentTime = toStringNoMS(new Date())
-  const algorithm = getAlgoithComponent(dockerImage)
+  const fileUrl = typeof files !== 'string' && files[0].url
+  const algorithmLanguace = getAlgoithFileExtension(fileUrl)
+  const algorithm = getAlgoithComponent(
+    image,
+    version,
+    entrypoint,
+    algorithmLanguace
+  )
   const metadata: MetadataMarket = {
     main: {
       ...AssetModel.main,