Services UX improvements, public/private service with default port mapping suggested (#35)

* fix: Services small UX fixes and improvements

* feat: Services changes for isPublicService and ports mapping

* feat: Suggest default port mapping when using a private service

* chore: Format job payload, handle editing running services

* fix: Service tunneling payload

Author: wzrdx

scripts/add-service.ts

@@ -694,7 +694,7 @@ const printSummary = (service: Service) => {
     console.log(`Description: ${colorValue(service.description)}`);
     console.log(`Image: ${colorValue(service.image)}`);
     console.log(`Port: ${colorValue(service.port)}`);
-    console.log(`Logo: ${colorValue(service.logo)}`);
+    console.log(`Logo filename (in src/assets/services): ${colorValue(service.logo)}`);
     console.log(`Color: ${colorValue(service.color)}`);
     console.log(`Plugin signature: ${colorValue(service.pluginSignature)}`);
     console.log(`Tunnel engine: ${colorValue(service.tunnelEngine)}`);

src/components/auth/LoginCard.tsx

@@ -145,6 +145,8 @@ export default function LoginCard({ hasOracles }: { hasOracles: boolean }) {
         try {
             const [appsResult, secretsResult] = await Promise.allSettled([getApps(request), getSecrets(request)]);
 
+            console.log('Login', { appsResult, secretsResult });
+
             if (appsResult.status === 'rejected') {
                 throw appsResult.reason;
             }

src/components/create-job/JobFormWrapper.tsx

@@ -120,6 +120,8 @@ function JobFormWrapper({ projectName, draftJobsCount }) {
         },
         deployment: {
             ...getBaseSchemaDefaults().deployment,
+            ports: [],
+            isPublicService: true,
             envVars: [],
             inputs: [],
         },

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

@@ -1,6 +1,8 @@
 import AppParametersSection from '@components/create-job/sections/AppParametersSection';
+import { BOOLEAN_TYPES } from '@data/booleanTypes';
 import services, { Service } from '@data/services';
 import { Button } from '@heroui/button';
+import { Checkbox } from '@heroui/checkbox';
 import { createTunnel } from '@lib/api/tunnels';
 import { DeploymentContextType } from '@lib/contexts/deployment/context';
 import { useDeploymentContext } from '@lib/contexts/deployment/hook';
@@ -12,6 +14,7 @@ import InputWithLabel from '@shared/InputWithLabel';
 import DeeployInfoTag from '@shared/jobs/DeeployInfoTag';
 import ServiceInputsSection from '@shared/jobs/ServiceInputsSection';
 import TargetNodesCard from '@shared/jobs/target-nodes/TargetNodesCard';
+import PortMappingSection from '@shared/PortMappingSection';
 import { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -27,10 +30,13 @@ function ServiceDeployment({ isEditingRunningJob }: { isEditingRunningJob?: bool
 
     const serviceId: number = watch('serviceId');
     const alias: string = watch('deployment.jobAlias');
+    const isPublicService: boolean = watch('deployment.isPublicService');
+    const ports = watch('deployment.ports');
 
     const service: Service = services.find((service) => service.id === serviceId)!;
 
     const [isCreatingTunnel, setCreatingTunnel] = useState<boolean>(false);
+    const [generatedPortMapping, setGeneratedPortMapping] = useState<boolean>(false);
 
     useEffect(() => {
         if (!alias || alias === '') {
@@ -42,6 +48,31 @@ function ServiceDeployment({ isEditingRunningJob }: { isEditingRunningJob?: bool
         setValue('deployment.port', service.port);
     }, [service]);
 
+    useEffect(() => {
+        if (!isPublicService && !generatedPortMapping) {
+            const hasPorts = Array.isArray(ports) && ports.length > 0;
+            if (!hasPorts) {
+                const hostPort = 32000 + Math.floor(Math.random() * 700) + 1;
+                setValue('deployment.ports', [{ hostPort, containerPort: service.port }], {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                });
+                setGeneratedPortMapping(true);
+            }
+        }
+    }, [isPublicService, ports, service.port, setValue]);
+
+    useEffect(() => {
+        setValue('deployment.enableTunneling', isPublicService ? BOOLEAN_TYPES[0] : BOOLEAN_TYPES[1], {
+            shouldDirty: true,
+            shouldValidate: true,
+        });
+
+        if (isPublicService) {
+            setValue('deployment.ports', [], { shouldDirty: true });
+        }
+    }, [isPublicService, setValue]);
+
     const onGenerateTunnel = async () => {
         if (!tunnelingSecrets) {
             throw new Error('No tunneling secrets found.');
@@ -90,43 +121,66 @@ function ServiceDeployment({ isEditingRunningJob }: { isEditingRunningJob?: bool
             <TargetNodesCard isEditingRunningJob={isEditingRunningJob} />
 
             <SlateCard
-                title="Tunneling"
+                title="Service Parameters"
                 label={
-                    <Button
-                        className="h-[34px]"
-                        color="primary"
-                        size="sm"
-                        onPress={onGenerateTunnel}
-                        isLoading={isCreatingTunnel}
-                        isDisabled={!tunnelingSecrets}
-                    >
-                        <div className="row gap-1.5">
-                            <RiCodeSSlashLine className="text-base" />
-                            <div className="compact">Generate Tunnel</div>
-                        </div>
-                    </Button>
+                    isPublicService && (
+                        <Button
+                            className="h-[34px]"
+                            color="primary"
+                            size="sm"
+                            onPress={onGenerateTunnel}
+                            isLoading={isCreatingTunnel}
+                            isDisabled={!tunnelingSecrets || isEditingRunningJob}
+                        >
+                            <div className="row gap-1.5">
+                                <RiCodeSSlashLine className="text-base" />
+                                <div className="compact">Generate Tunnel</div>
+                            </div>
+                        </Button>
+                    )
                 }
             >
-                {!tunnelingSecrets && (
-                    <DeeployInfoTag
-                        text={
-                            <>
-                                Please add your{' '}
-                                <Link to={routePath.tunnels} className="text-primary font-medium hover:opacity-70">
-                                    Cloudflare secrets
-                                </Link>{' '}
-                                to enable tunnel generation.
-                            </>
-                        }
-                    />
-                )}
-
-                <AppParametersSection
-                    enablePort={false}
-                    isCreatingTunnel={isCreatingTunnel}
-                    enableTunnelingLabel
-                    forceTunnelingEnabled
-                />
+                <div className="col gap-4">
+                    {!isEditingRunningJob && (
+                        <Checkbox
+                            isSelected={isPublicService}
+                            onValueChange={(value) => setValue('deployment.isPublicService', value, { shouldDirty: true })}
+                        >
+                            <div className="compact">Public Service</div>
+                        </Checkbox>
+                    )}
+
+                    {isPublicService && !tunnelingSecrets && (
+                        <DeeployInfoTag
+                            text={
+                                <>
+                                    Please add your{' '}
+                                    <Link to={routePath.tunnels} className="text-primary font-medium hover:opacity-70">
+                                        Cloudflare secrets
+                                    </Link>{' '}
+                                    to enable tunnel generation.
+                                </>
+                            }
+                        />
+                    )}
+
+                    {isPublicService ? (
+                        <AppParametersSection
+                            enablePort={false}
+                            isCreatingTunnel={isCreatingTunnel}
+                            enableTunnelingLabel={service.tunnelEngine === 'ngrok'}
+                            forceTunnelingEnabled
+                        />
+                    ) : (
+                        <div className="col gap-2">
+                            <DeeployInfoTag
+                                text={<>Add a port mapping of type HOST_PORT to SERVICE_PORT ({service.port}).</>}
+                            />
+
+                            <PortMappingSection />
+                        </div>
+                    )}
+                </div>
             </SlateCard>
 
             {service?.inputs?.length > 0 && <ServiceInputsSection inputs={service.inputs} />}

src/components/draft/DraftEditFormWrapper.tsx

@@ -167,6 +167,8 @@ export default function DraftEditFormWrapper({
             deployment: {
                 ...baseDefaults.deployment,
                 inputs: cloneDeep(deployment.inputs),
+                ports: cloneDeep(deployment.ports ?? []),
+                isPublicService: deployment.isPublicService ?? true,
                 serviceReplica: deployment.serviceReplica ?? '',
             },
         } as z.infer<typeof jobSchema>;

src/components/edit-job/JobEditFormWrapper.tsx

@@ -215,6 +215,8 @@ export default function JobEditFormWrapper({
             ...getBaseSchemaDefaults().deployment,
             tunnelingLabel: jobConfig.NGROK_EDGE_LABEL || '',
             inputs: getEnvVars(jobConfig),
+            ports: getPortMappings(jobConfig),
+            isPublicService: !!(jobConfig.CLOUDFLARE_TOKEN || jobConfig.NGROK_AUTH_TOKEN),
         },
     });
 

src/components/job/config/JobPluginsSection.tsx

@@ -48,24 +48,26 @@ export default function JobPluginsSection({ job }: { job: RunningJobWithResource
                 <div className="flex items-start justify-between">
                     <div className="text-lg font-semibold">Plugins</div>
 
-                    <div className="w-[240px]">
-                        <StyledSelect
-                            selectedKeys={[pluginConfig.signature]}
-                            onSelectionChange={(keys) => {
-                                const selectedKey = Array.from(keys)[0] as string;
-                                setPluginConfig(pluginConfigs.find((config) => config.signature === selectedKey)!);
-                            }}
-                            placeholder="Select a plugin"
-                        >
-                            {pluginConfigs.map((item) => (
-                                <SelectItem key={item.signature} textValue={item.signature}>
-                                    <div className="row gap-2 py-1">
-                                        <div className="font-medium">{item.signature}</div>
-                                    </div>
-                                </SelectItem>
-                            ))}
-                        </StyledSelect>
-                    </div>
+                    {job.resources.jobType !== JobType.Service && (
+                        <div className="w-[240px]">
+                            <StyledSelect
+                                selectedKeys={[pluginConfig.signature]}
+                                onSelectionChange={(keys) => {
+                                    const selectedKey = Array.from(keys)[0] as string;
+                                    setPluginConfig(pluginConfigs.find((config) => config.signature === selectedKey)!);
+                                }}
+                                placeholder="Select a plugin"
+                            >
+                                {pluginConfigs.map((item) => (
+                                    <SelectItem key={item.signature} textValue={item.signature}>
+                                        <div className="row gap-2 py-1">
+                                            <div className="font-medium">{item.signature}</div>
+                                        </div>
+                                    </SelectItem>
+                                ))}
+                            </StyledSelect>
+                        </div>
+                    )}
                 </div>
 
                 <div className="col gap-4">

src/lib/deeploy-utils.ts

@@ -536,7 +536,10 @@ export const formatServiceJobPayload = (
     deployment: ServiceJobDeployment,
 ) => {
     const jobTags = formatJobTags(specifications);
-    const containerResources = formatContainerResources(serviceContainerType, []);
+    const containerResources = formatContainerResources(
+        serviceContainerType,
+        deployment.isPublicService ? [] : deployment.ports,
+    );
     const targetNodes = formatNodes(deployment.targetNodes);
     const spareNodes = formatNodes(deployment.spareNodes);
 
@@ -558,7 +561,7 @@ export const formatServiceJobPayload = (
 
         // Tunneling
         PORT: formatPort(service.port),
-        TUNNEL_ENGINE_ENABLED: true, // Tunneling is always enabled for services
+        TUNNEL_ENGINE_ENABLED: deployment.isPublicService,
         TUNNEL_ENGINE: service.tunnelEngine,
 
         // Variables

src/schemas/steps/deployment.ts

@@ -398,7 +398,9 @@ export const nativeAppDeploymentSchema = applyCustomPluginSignatureRefinements(
 
 const serviceAppDeploymentSchemaWihtoutRefinements = baseDeploymentSchema.extend({
     inputs: validations.envVars,
-    serviceReplica: nodeSchema.shape.address.optional(),
+    ports: validations.ports,
+    isPublicService: z.boolean().default(true),
+    // serviceReplica: nodeSchema.shape.address.optional(),
 });
 
 export const serviceAppDeploymentSchema = applyTunnelingRefinements(serviceAppDeploymentSchemaWihtoutRefinements);

src/shared/jobs/DeeploySuccessAlert.tsx

@@ -37,17 +37,20 @@ export default function DeeploySuccessAlert({
                             <div>{item.text}</div>
                             <div>•</div>
                             <div>{item.serverAlias}</div>
-                            <div>•</div>
 
-                            {item.tunnelURL && (
-                                <Link
-                                    to={`https://${item.tunnelURL}`}
-                                    target="_blank"
-                                    className="row gap-1 text-[13px] text-green-500 hover:opacity-70"
-                                >
-                                    <span className="font-roboto-mono">{item.tunnelURL}</span>
-                                    <RiExternalLinkLine className="mb-px text-[14px]" />
-                                </Link>
+                            {!!item.tunnelURL && (
+                                <>
+                                    <div>•</div>
+
+                                    <Link
+                                        to={`https://${item.tunnelURL}`}
+                                        target="_blank"
+                                        className="row gap-1 text-[13px] text-green-500 hover:opacity-70"
+                                    >
+                                        <span className="font-roboto-mono">{item.tunnelURL}</span>
+                                        <RiExternalLinkLine className="mb-px text-[14px]" />
+                                    </Link>
+                                </>
                             )}
                         </div>
                     ))}