Pipeline params (#25)

* feat: Display and edit pipeline params

* chore: Disable Application Type as it is not used at the moment

Author: wzrdx

src/components/create-job/steps/specifications/ServiceSpecifications.tsx

@@ -1,11 +1,9 @@
-import { APPLICATION_TYPES } from '@data/applicationTypes';
 import { serviceContainerTypes } from '@data/containerResources';
 import { SlateCard } from '@shared/cards/SlateCard';
 import ContainerResourcesInfo from '@shared/jobs/ContainerResourcesInfo';
 import SelectContainerOrWorkerType from '@shared/jobs/SelectContainerOrWorkerType';
 import JobTags from '@shared/jobs/target-nodes/JobTags';
 import NumberInputWithLabel from '@shared/NumberInputWithLabel';
-import SelectWithLabel from '@shared/SelectWithLabel';
 
 export default function ServiceSpecifications({ isEditingRunningJob }: { isEditingRunningJob?: boolean }) {
     return (
@@ -25,11 +23,11 @@ export default function ServiceSpecifications({ isEditingRunningJob }: { isEditi
                 <div className="flex gap-4">
                     <NumberInputWithLabel name="specifications.targetNodesCount" label="Target Nodes Count" isDisabled />
 
-                    <SelectWithLabel
+                    {/* <SelectWithLabel
                         name="specifications.applicationType"
                         label="Application Type"
                         options={APPLICATION_TYPES}
-                    />
+                    /> */}
                 </div>
 
                 <JobTags />

src/components/edit-job/JobEditFormWrapper.tsx

@@ -134,7 +134,7 @@ export default function JobEditFormWrapper({
     const getBaseSchemaDefaults = (config: JobConfig = jobConfig) => ({
         jobType: job.resources.jobType,
         specifications: {
-            applicationType: APPLICATION_TYPES[0], // TODO: Get from job after the API update
+            applicationType: APPLICATION_TYPES[0], // Disabled for now
             targetNodesCount: Number(job.numberOfNodesRequested),
             jobTags: !job.jobTags ? [] : job.jobTags.filter((tag) => !tag.startsWith('CT:')),
             nodesCountries: !job.jobTags
@@ -173,7 +173,7 @@ export default function JobEditFormWrapper({
         },
         deployment: {
             ...getBaseSchemaDeploymentDefaults(),
-            pipelineParams: [], // TODO: Missing from the API response
+            pipelineParams: getPipelineParams(),
             pipelineInputType: job.pipelineData.TYPE,
             pipelineInputUri: job.pipelineData.URL,
             chainstoreResponse: BOOLEAN_TYPES[1],
@@ -194,6 +194,10 @@ export default function JobEditFormWrapper({
         },
     });
 
+    const getPipelineParams = () => {
+        return !job.pipelineParams ? [] : Object.entries(job.pipelineParams).map(([key, value]) => ({ key, value }));
+    };
+
     const getPortMappings = (config: JobConfig) => {
         return !config.CONTAINER_RESOURCES.ports
             ? []

src/components/job/config/JobDeploymentSection.tsx

@@ -4,6 +4,7 @@ import { CopyableValue } from '@shared/CopyableValue';
 import ItemWithBoldValue from '@shared/jobs/ItemWithBoldValue';
 import { JobType, RunningJobWithResources } from '@typedefs/deeploys';
 import { isEmpty } from 'lodash';
+import JobKeyValueSection from '../JobKeyValueSection';
 import JobSimpleTagsSection from '../JobSimpleTagsSection';
 import ConfigSectionTitle from './ConfigSectionTitle';
 
@@ -14,8 +15,6 @@ export default function JobDeploymentSection({ job }: { job: RunningJobWithResou
 
     const pipelineData = job.pipelineData;
 
-    // console.log('Pipeline Data', pipelineData);
-
     return (
         <BorderedCard isLight={false} disableWrapper>
             <div className="col gap-3 p-4">
@@ -107,6 +106,17 @@ export default function JobDeploymentSection({ job }: { job: RunningJobWithResou
                             <div className="grid grid-cols-2 gap-3">
                                 <ItemWithBoldValue label="Pipeline Input Type" value={pipelineData.TYPE} />
                                 <ItemWithBoldValue label="Pipeline Input URI" value={pipelineData.URL ?? '—'} />
+
+                                <ItemWithBoldValue
+                                    label="Pipeline Parameters"
+                                    value={
+                                        isEmpty(job.pipelineParams) ? (
+                                            '—'
+                                        ) : (
+                                            <JobKeyValueSection obj={job.pipelineParams} displayShortValues={false} />
+                                        )
+                                    }
+                                />
                             </div>
                         </>
                     )}

src/lib/contexts/deployment/deployment-provider.tsx

@@ -245,7 +245,7 @@ export const DeploymentProvider = ({ children }) => {
                     return null;
                 }
 
-                return {
+                const jobWithDetails: RunningJobWithDetails = {
                     alias,
                     projectName: specs.project_name,
                     allowReplicationInTheWild: specs.allow_replication_in_the_wild,
@@ -257,6 +257,12 @@ export const DeploymentProvider = ({ children }) => {
                     pipelineData,
                     ...job,
                 };
+
+                if (specs.job_config?.pipeline_params) {
+                    jobWithDetails.pipelineParams = specs.job_config.pipeline_params;
+                }
+
+                return jobWithDetails;
             })
             .filter((job) => job !== null)
             .value();

src/schemas/steps/specifications.ts

@@ -18,7 +18,7 @@ const getRequiredIntegerSchema = (max: number) => {
 
 const baseSpecificationsSchema = z.object({
     gpuType: z.union([z.literal(''), z.enum(gpuTypes.map((type) => type.name) as [string, ...string[]])]).optional(),
-    applicationType: z.enum(APPLICATION_TYPES, { required_error: 'Application type is required' }),
+    applicationType: z.enum(APPLICATION_TYPES, { required_error: 'Application type is required' }).optional(), // Disabled for now
     targetNodesCount: getRequiredIntegerSchema(100),
     jobTags: z.array(z.string()),
     nodesCountries: z.array(z.string()),

src/shared/jobs/SpecsNodesSection.tsx

@@ -1,8 +1,6 @@
-import { APPLICATION_TYPES } from '@data/applicationTypes';
 import { ContainerOrWorkerType, genericContainerTypes, nativeWorkerTypes } from '@data/containerResources';
 import { SlateCard } from '@shared/cards/SlateCard';
 import NumberInputWithLabel from '@shared/NumberInputWithLabel';
-import SelectWithLabel from '@shared/SelectWithLabel';
 import { JobType } from '@typedefs/deeploys';
 import { useEffect, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -105,11 +103,11 @@ export default function SpecsNodesSection({
                             hasWarning={hasWarning}
                         />
 
-                        <SelectWithLabel
+                        {/* <SelectWithLabel
                             name="specifications.applicationType"
                             label="Application Type"
                             options={APPLICATION_TYPES}
-                        />
+                        /> */}
                     </div>
 
                     <div className="col gap-2">

src/typedefs/deeployApi.ts

@@ -23,6 +23,9 @@ type DeeploySpecs = {
     date_created: number;
     date_updated: number;
     initial_target_nodes: R1Address[];
+    job_config?: {
+        pipeline_params?: Record<string, string>;
+    };
     job_id: number;
     job_tags: string[];
     nr_target_nodes: number;

src/typedefs/deeploys.ts

@@ -23,7 +23,7 @@ enum ProjectPage {
 
 // Specifications
 type BaseJobSpecifications = {
-    applicationType: (typeof APPLICATION_TYPES)[number];
+    applicationType: (typeof APPLICATION_TYPES)[number]; // Disabled for now
     targetNodesCount: number;
     jobTags: string[];
     nodesCountries: string[];
@@ -106,6 +106,7 @@ type RunningJob = {
     balance: bigint;
     lastAllocatedEpoch: bigint;
     activeNodes: readonly EthAddress[];
+    pipelineParams?: Record<string, string>;
 };
 
 type RunningJobWithDetails = RunningJob & {