Add requiredSlots disable logic for multi-instance tasks (#2860)

* Add requiredSlots disable logic for multi-instance tasks * Remove required slots if multi-instance is enabled * Add required slots validation message to add-task-form --------- Co-authored-by: hoppe <hoppewang@microsoft.com>
Azure · Dec 20, 2023 · f36d6a8 · f36d6a8
1 parent 3384491
commit f36d6a8
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 0 deletions.
diff --git a/desktop/i18n/resources.resjson b/desktop/i18n/resources.resjson
@@ -43,6 +43,7 @@
   "add-certificate-form.password.required": "Password is required if the certificate format is '.pfx'",
   "add-certificate-form.title": "Create certificate",
   "add-task-form.action": "Add",
+  "add-task-form.info.disable-required-slots": "Required slots must be 1 for multi-instance tasks",
   "add-task-form.subtitle": "Add a task to the selected job",
   "add-task-form.title": "Add task",
   "auth-service.activate-tenant": "Activate tenant to authorize",

diff --git a/desktop/src/app/components/task/action/add/add-task-form.component.ts b/desktop/src/app/components/task/action/add/add-task-form.component.ts
@@ -30,6 +30,7 @@ export class AddTaskFormComponent extends DynamicForm<Task, TaskCreateDto> imple
     public fileUri = "create.task.batch.json";
     public virtualMachineConfiguration: VirtualMachineConfiguration = null;
     public userAccounts: any[] = [];
+    public displayDisableRequiredSlotsMsg = false;
 
     constructor(
         i18n: I18nService,
@@ -87,6 +88,7 @@ export class AddTaskFormComponent extends DynamicForm<Task, TaskCreateDto> imple
                 });
             }
         });
+        this._subscribeMultiInstanceSettings();
     }
 
     public dtoToForm(task: TaskCreateDto) {
@@ -126,4 +128,20 @@ export class AddTaskFormComponent extends DynamicForm<Task, TaskCreateDto> imple
             },
         };
     }
+
+    private _subscribeMultiInstanceSettings() {
+        const multiInstanceSettings = this.form.controls.multiInstanceSettings;
+        const requiredSlots = this.form.controls.requiredSlots;
+        multiInstanceSettings.valueChanges.subscribe((value) => {
+            if (value) {
+                // set requiredSlot to 1 & disable the control & display msg
+                requiredSlots.setValue(1);
+                requiredSlots.disable();
+                this.displayDisableRequiredSlotsMsg = true;
+            } else {
+                requiredSlots.enable();
+                this.displayDisableRequiredSlotsMsg = false;
+            }
+        });
+    }
 }
diff --git a/desktop/src/app/components/task/action/add/add-task-form.html b/desktop/src/app/components/task/action/add/add-task-form.html
@@ -35,6 +35,9 @@
                 <bl-form-field>
                     <input blInput formControlName="requiredSlots" placeholder="Required slots">
                 </bl-form-field>
+                <div *ngIf="displayDisableRequiredSlotsMsg" class="info-text">
+                    {{'add-task-form.info.disable-required-slots' | i18n}}
+                </div>
                 <bl-error controlName="requiredSlots" code="required">Required slots is a required field</bl-error>
                 <bl-error controlName="requiredSlots" code="min">Required slots value must be greater than or equal to 1</bl-error>
             </div>

diff --git a/desktop/src/app/components/task/action/add/add-task.i18n.yml b/desktop/src/app/components/task/action/add/add-task.i18n.yml
@@ -2,3 +2,5 @@ add-task-form:
   title: Add task
   subtitle: Add a task to the selected job
   action: Add
+  info:
+    disable-required-slots: Required slots must be 1 for multi-instance tasks
diff --git a/desktop/src/app/models/forms/create-task-model.ts b/desktop/src/app/models/forms/create-task-model.ts
@@ -49,6 +49,11 @@ export function createTaskFormToJsonData(formData: CreateTaskModel): TaskCreateD
         data.applicationPackageReferences = formData.appPackages;
     }
 
+    // Remove required slots if multi-instance is enabled, backend will set it to 1.
+    if (formData.multiInstanceSettings) {
+        delete data.requiredSlots;
+    }
+
     return new TaskCreateDto(data);
 }
 

diff --git a/desktop/src/app/styles/base/forms.scss b/desktop/src/app/styles/base/forms.scss
@@ -182,3 +182,7 @@ mat-tab-group.form-tabs {
         height: 32px;
     }
 }
+
+.info-text {
+    color: $secondary-text;
+}