Merge pull request #16 from Ratio1/fix-deeploy-native

Fix deeploy native

Author: wzrdx

src/components/create-job/secondary-plugins/NativeInputsSection.tsx

@@ -26,6 +26,7 @@ export default function NativeInputsSection({ index }: { index: number }) {
                 displayLabel="custom parameters"
                 maxEntries={50}
                 predefinedEntries={pluginSignaturesCustomParams[pluginSignature] ?? []}
+                enableJsonValues={true}
             />
         </div>
     );

src/components/create-job/secondary-plugins/SecondaryPluginsCard.tsx

@@ -94,6 +94,7 @@ export default function SecondaryPluginsCard() {
                         crVisibility: CR_VISIBILITY_OPTIONS[0],
                         crUsername: '',
                         crPassword: '',
+                        ports: {},
                     },
                     ...TUNNELING_DEFAULTS,
                     ...GENERIC_PLUGIN_DEFAULTS,
@@ -114,6 +115,7 @@ export default function SecondaryPluginsCard() {
                             { command: 'npm run build' },
                             { command: 'npm run start' },
                         ],
+                        ports: {},
                     },
                     ...TUNNELING_DEFAULTS,
                     ...GENERIC_PLUGIN_DEFAULTS,

src/components/create-job/sections/AppParametersSection.tsx

@@ -1,13 +1,15 @@
 import { BOOLEAN_TYPES } from '@data/booleanTypes';
 import InputWithLabel from '@shared/InputWithLabel';
 import NumberInputWithLabel from '@shared/NumberInputWithLabel';
+import PortMappingSection from '@shared/PortMappingSection';
 import SelectWithLabel from '@shared/SelectWithLabel';
 import { useFormContext } from 'react-hook-form';
 
 export default function AppParametersSection({ baseName = 'deployment' }: { baseName?: string }) {
     const { watch, trigger } = useFormContext();
 
     const enableTunneling: (typeof BOOLEAN_TYPES)[number] = watch(`${baseName}.enableTunneling`);
+    const deploymentType = watch(`${baseName}.deploymentType.type`);
 
     return (
         <div className="col gap-4">
@@ -33,6 +35,11 @@ export default function AppParametersSection({ baseName = 'deployment' }: { base
                     <InputWithLabel name={`${baseName}.tunnelingToken`} label="Tunnel Token" placeholder="Starts with 'ey'" />
                 </div>
             )}
+
+            {/* TODO: Check if deploying generic plugin/job */}
+            {(deploymentType === 'container' || deploymentType === 'worker') && (
+                <PortMappingSection name={`${baseName}.deploymentType.ports`} label="Port Mapping" />
+            )}
         </div>
     );
 }

src/components/create-job/steps/deployment/NativeDeployment.tsx

@@ -36,6 +36,7 @@ function NativeDeployment({ isEditingJob }: { isEditingJob?: boolean }) {
                     displayLabel="custom parameters"
                     maxEntries={50}
                     predefinedEntries={pluginSignaturesCustomParams[pluginSignature] ?? []}
+                    enableJsonValues={true}
                 />
             </SlateCard>
 

src/lib/deeploy-utils.ts

@@ -29,7 +29,7 @@ import _ from 'lodash';
 import { FieldValues, UseFieldArrayAppend, UseFieldArrayRemove } from 'react-hook-form';
 import { formatUnits } from 'viem';
 import { environment } from './config';
-import { deepSort } from './utils';
+import { deepSort, parseIfJson } from './utils';
 
 export const GITHUB_REPO_REGEX = new RegExp('^https?://github\\.com/([^\\s/]+)/([^\\s/]+?)(?:\\.git)?(?:/.*)?$', 'i');
 
@@ -123,7 +123,7 @@ export const downloadDataAsJson = (data: any, filename: string) => {
 export const generateDeeployNonce = (): string => {
     const now = new Date();
     const unixTimestamp = now.getTime();
-    console.log({ now, unixTimestamp });
+    // console.log({ now, unixTimestamp });
     return `0x${unixTimestamp.toString(16)}`;
 };
 
@@ -170,10 +170,11 @@ export const formatFileVolumes = (fileVolumes: { name: string; mountingPoint: st
     return formatted;
 };
 
-export const formatContainerResources = (containerOrWorkerType: ContainerOrWorkerType) => {
+export const formatContainerResources = (containerOrWorkerType: ContainerOrWorkerType, ports?: Record<string, string>) => {
     return {
         cpu: containerOrWorkerType.cores,
         memory: `${containerOrWorkerType.ram}g`,
+        ...(ports && Object.keys(ports).length > 0 && { ports }),
     };
 };
 
@@ -208,7 +209,7 @@ export const formatServiceDraftJobPayload = (job: ServiceDraftJob) => {
     return formatServiceJobPayload(containerType, job.specifications, job.deployment);
 };
 
-export const formatGenericJobVariables = (plugin: GenericSecondaryPlugin) => {
+const formatGenericJobVariables = (plugin: GenericSecondaryPlugin) => {
     return {
         envVars: formatEnvVars(plugin.envVars),
         dynamicEnvVars: formatDynamicEnvVars(plugin.dynamicEnvVars),
@@ -217,16 +218,27 @@ export const formatGenericJobVariables = (plugin: GenericSecondaryPlugin) => {
     };
 };
 
-export const formatNativeJobPluginSignature = (plugin: NativeSecondaryPlugin) => {
+const formatNativeJobPluginSignature = (plugin: NativeSecondaryPlugin) => {
     return plugin.pluginSignature === PLUGIN_SIGNATURE_TYPES[PLUGIN_SIGNATURE_TYPES.length - 1]
         ? plugin.customPluginSignature
         : plugin.pluginSignature;
 };
 
+const formatNativeJobCustomParams = (pluginConfig: any, plugin: NativeSecondaryPlugin) => {
+    if (!_.isEmpty(plugin.customParams)) {
+        plugin.customParams.forEach((param) => {
+            if (param.key) {
+                pluginConfig[param.key] = parseIfJson(param.value);
+            }
+        });
+    }
+};
+
 export const formatGenericPluginConfigAndSignature = (
     resources: {
         cpu: number;
         memory: string;
+        ports?: Record<string, string>;
     },
     plugin: GenericSecondaryPlugin,
 ) => {
@@ -291,7 +303,7 @@ export const formatGenericJobPayload = (
     const spareNodes = formatNodes(deployment.spareNodes);
 
     const { pluginConfig, pluginSignature } = formatGenericPluginConfigAndSignature(
-        formatContainerResources(containerType),
+        formatContainerResources(containerType, deployment.deploymentType.ports),
         deployment,
     );
 
@@ -331,7 +343,7 @@ export const formatNativeJobPayload = (
         }
     });
 
-    const nodeResources = formatContainerResources(workerType);
+    const nodeResources = formatContainerResources(workerType, undefined);
     const targetNodes = formatNodes(deployment.targetNodes);
     const targetNodesCount = formatTargetNodesCount(targetNodes, specifications.targetNodesCount);
 
@@ -348,13 +360,7 @@ export const formatNativeJobPayload = (
         NGROK_USE_API: true,
     };
 
-    if (!_.isEmpty(deployment.customParams)) {
-        deployment.customParams.forEach((param) => {
-            if (param.key) {
-                primaryPluginConfig[param.key] = param.value;
-            }
-        });
-    }
+    formatNativeJobCustomParams(primaryPluginConfig, deployment);
 
     // Build plugins array starting with the primary plugin
     const plugins = [primaryPluginConfig];
@@ -424,7 +430,7 @@ export const formatServiceJobPayload = (
     deployment: ServiceJobDeployment,
 ) => {
     const jobTags = formatJobTags(specifications);
-    const containerResources = formatContainerResources(containerType);
+    const containerResources = formatContainerResources(containerType, undefined);
     const targetNodes = formatNodes(deployment.targetNodes);
     const spareNodes = formatNodes(deployment.spareNodes);
 

src/lib/utils.tsx

@@ -106,7 +106,7 @@ export const extractRepositoryPath = (url: string): string => {
  * @param length - The length of the password (default: 24)
  * @returns A secure password string
  */
-function generateSecurePassword(length: number = 24): string {
+export function generateSecurePassword(length: number = 24): string {
     const lowercase = 'abcdefghijklmnopqrstuvwxyz';
     const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
     const numbers = '0123456789';
@@ -132,3 +132,12 @@ function generateSecurePassword(length: number = 24): string {
         .sort(() => Math.random() - 0.5)
         .join('');
 }
+
+export function parseIfJson<T = any>(input: string): T | string {
+    try {
+        const parsed = JSON.parse(input);
+        return parsed;
+    } catch {
+        return input;
+    }
+}

src/pages/deeploys/job/EditJob.tsx

@@ -280,7 +280,7 @@ export default function EditJob() {
             target_nodes: targetNodes,
             target_nodes_count: 0,
             app_params: {
-                CONTAINER_RESOURCES: formatContainerResources(containerType),
+                CONTAINER_RESOURCES: formatContainerResources(containerType, undefined),
             },
             project_id: job.projectHash,
             chainstore_response: true,

src/schemas/common.ts

@@ -8,6 +8,7 @@ export const keyValueEntrySchema = z
     .object({
         key: z.string().optional(),
         value: z.string().optional(),
+        valueType: z.enum(['text', 'json']).optional().default('text'),
     })
     .refine(
         (data) => {
@@ -38,6 +39,24 @@ export const keyValueEntrySchema = z
             message: 'Value is required',
             path: ['value'],
         },
+    )
+    .refine(
+        (data) => {
+            // If valueType is 'json', validate JSON syntax
+            if (data.valueType === 'json' && data.value && data.value.trim() !== '') {
+                try {
+                    JSON.parse(data.value);
+                    return true;
+                } catch {
+                    return false;
+                }
+            }
+            return true;
+        },
+        {
+            message: 'Invalid JSON format',
+            path: ['value'],
+        },
     );
 
 // Schema for array of key-value entries with duplicate key validation

src/schemas/steps/deployment.ts

@@ -39,6 +39,12 @@ const validations = {
         .max(256, 'Value cannot exceed 256 characters')
         .regex(/^https?:\/\/.+/, 'Must be a valid URI'),
 
+    optionalUri: z
+        .string()
+        .refine((val) => val === '' || val.length >= 2, 'Value must be at least 2 characters')
+        .refine((val) => val === '' || val.length <= 256, 'Value cannot exceed 256 characters')
+        .refine((val) => val === '' || /^https?:\/\/.+/.test(val), 'Must be a valid URI'),
+
     port: z.union([
         z.literal(''),
         z
@@ -215,6 +221,7 @@ const containerDeploymentTypeSchema = z.object({
     crVisibility: z.enum(CR_VISIBILITY_OPTIONS, { required_error: 'Value is required' }),
     crUsername: z.union([getStringSchema(3, 128), z.literal('')]).optional(),
     crPassword: z.union([getStringSchema(3, 256), z.literal('')]).optional(),
+    ports: z.record(z.string(), z.string()).optional(),
 });
 
 const workerDeploymentTypeSchema = z.object({
@@ -247,6 +254,7 @@ const workerDeploymentTypeSchema = z.object({
             message: 'Duplicate commands are not allowed',
         },
     ),
+    ports: z.record(z.string(), z.string()).optional(),
 });
 
 export const deploymentTypeSchema = z.discriminatedUnion('type', [containerDeploymentTypeSchema, workerDeploymentTypeSchema]);
@@ -325,7 +333,7 @@ const nativeAppDeploymentSchemaWihtoutRefinements = baseDeploymentSchema.extend(
     customParams: validations.customParams,
     pipelineParams: validations.pipelineParams,
     pipelineInputType: z.enum(PIPELINE_INPUT_TYPES, { required_error: 'Value is required' }),
-    pipelineInputUri: validations.uri.optional(),
+    pipelineInputUri: validations.optionalUri.optional(),
     chainstoreResponse: validations.chainstoreResponse,
     secondaryPlugins: z.array(secondaryPluginSchema).max(5, 'Only 5 secondary plugins allowed').optional(),
 });

src/shared/PortMappingSection.tsx

@@ -0,0 +1,121 @@
+import ConfigSectionTitle from '@components/job/config/ConfigSectionTitle';
+import StyledInput from '@shared/StyledInput';
+import VariableSectionRemove from '@shared/jobs/VariableSectionRemove';
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { RiAddLine } from 'react-icons/ri';
+import DeeployWarning from './jobs/DeeployWarning';
+
+interface PortMappingSectionProps {
+    name: string;
+    label?: string;
+}
+
+export default function PortMappingSection({ name, label = 'Port Mapping' }: PortMappingSectionProps) {
+    const { setValue, watch, formState, trigger } = useFormContext();
+    const ports = watch(name) || {};
+    const [portEntries, setPortEntries] = useState<Array<{ id: string; hostPort: string; containerPort: string }>>(
+        Object.entries(ports).map(([hostPort, containerPort], index) => ({
+            id: `port-${index}`,
+            hostPort,
+            containerPort: String(containerPort),
+        })),
+    );
+
+    const updatePorts = (entries: Array<{ id: string; hostPort: string; containerPort: string }>) => {
+        const newPorts: Record<string, string> = {};
+        entries.forEach((entry) => {
+            if (entry.hostPort && entry.containerPort) {
+                newPorts[entry.hostPort] = entry.containerPort;
+            }
+        });
+        setValue(name, newPorts);
+        trigger(name);
+    };
+
+    const addPortMapping = () => {
+        const newEntry = {
+            id: `port-${Date.now()}`,
+            hostPort: '',
+            containerPort: '',
+        };
+        const newEntries = [...portEntries, newEntry];
+        setPortEntries(newEntries);
+    };
+
+    const removePortMapping = (id: string) => {
+        const newEntries = portEntries.filter((entry) => entry.id !== id);
+        setPortEntries(newEntries);
+        updatePorts(newEntries);
+    };
+
+    const updateEntry = (id: string, field: 'hostPort' | 'containerPort', value: string) => {
+        const newEntries = portEntries.map((entry) => (entry.id === id ? { ...entry, [field]: value } : entry));
+        setPortEntries(newEntries);
+        updatePorts(newEntries);
+    };
+
+    // Check for duplicate host ports
+    const hostPorts = portEntries.map((entry) => entry.hostPort).filter((port) => port);
+    const duplicateHostPorts = hostPorts.filter((port, index) => hostPorts.indexOf(port) !== index);
+    const hasDuplicateHostPorts = duplicateHostPorts.length > 0;
+
+    return (
+        <div className="col gap-3">
+            <ConfigSectionTitle title={label} />
+
+            <DeeployWarning
+                title={<div>Port Availability</div>}
+                description={
+                    <div>
+                        The plugin may fail to start if the specified host ports are not available on your target nodes. Ensure
+                        the ports you map are free and accessible.
+                    </div>
+                }
+            />
+
+            {portEntries.length === 0 && <div className="text-sm text-gray-500 italic">No port mappings added yet.</div>}
+
+            {portEntries.map((entry, index) => (
+                <div key={entry.id} className="row items-end gap-3">
+                    <div className="flex-1">
+                        <StyledInput
+                            placeholder="e.g., 8080"
+                            value={entry.hostPort}
+                            onChange={(e) => updateEntry(entry.id, 'hostPort', e.target.value)}
+                            isInvalid={hasDuplicateHostPorts && duplicateHostPorts.includes(entry.hostPort)}
+                            errorMessage={
+                                hasDuplicateHostPorts && duplicateHostPorts.includes(entry.hostPort)
+                                    ? 'Duplicate host port'
+                                    : undefined
+                            }
+                        />
+                    </div>
+                    <div className="flex-1">
+                        <StyledInput
+                            placeholder="e.g., 8081"
+                            value={entry.containerPort}
+                            onChange={(e) => updateEntry(entry.id, 'containerPort', e.target.value)}
+                        />
+                    </div>
+                    <VariableSectionRemove onClick={() => removePortMapping(entry.id)} />
+                </div>
+            ))}
+
+            {portEntries.length > 0 && (
+                <div className="text-sm text-slate-500">
+                    Format: <span className="font-medium uppercase">host_port:container_port</span>
+                </div>
+            )}
+
+            {hasDuplicateHostPorts && (
+                <div className="text-danger-600 text-sm">⚠️ Duplicate host ports detected. Each host port must be unique.</div>
+            )}
+
+            {/* TODO: Use append */}
+            <div className="row compact text-primary cursor-pointer gap-0.5 hover:opacity-50" onClick={addPortMapping}>
+                <RiAddLine className="text-lg" /> Add
+            </div>
+        </div>
+    );
+}