cherry-pick: UI fix for handling missing params (#1657)

* Use YAML input if TrialParams are missing

Signed-off-by: Kimonas Sotirchos <[email protected]>

* review: Separate TrialTemplates in two words

Co-authored-by: Andrey Velichkevich <[email protected]>

Co-authored-by: Andrey Velichkevich <[email protected]>

Co-authored-by: Andrey Velichkevich <[email protected]>

Author: kimwnasptd

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.html

@@ -37,7 +37,13 @@
     <mat-form-field appearance="outline" class="fit-content">
       <mat-label>Source Type</mat-label>
       <mat-select formControlName="type">
-        <mat-option value="configmap">ConfigMap</mat-option>
+        <mat-option
+          [disabled]="!templates.length"
+          [matTooltip]="!templates.length ? 'No Trial templates found' : ''"
+          value="configmap"
+        >
+          ConfigMap
+        </mat-option>
         <mat-option value="yaml">YAML</mat-option>
       </mat-select>
     </mat-form-field>
@@ -90,7 +96,7 @@
     <mat-divider class="margin-bottom margin-top"></mat-divider>
 
     <app-trial-parameter
-      *ngFor="let ctrl of trialParameters.controls"
+      *ngFor="let ctrl of trialParameters?.controls"
       [formGroup]="ctrl"
     ></app-trial-parameter>
   </div>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-template.component.ts

@@ -18,7 +18,7 @@ export class FormTrialTemplateComponent implements OnInit, OnDestroy {
   public templates: ConfigMapResponse[] = [];
   public configmaps: ConfigMapBody[] = [];
   public paths: string[] = [];
-  public trialParameters: FormArray;
+  public trialParameters = new FormArray([]);
   private selectedConfigMap: ConfigMapBody;
   private subs = new Subscription();
   private yamlPrv = '';
@@ -53,6 +53,12 @@ export class FormTrialTemplateComponent implements OnInit, OnDestroy {
       this.backend.getTrialTemplates('').subscribe(templates => {
         this.templates = templates.Data;
         this.formGroup.get('cmNamespace').setValue('kubeflow');
+
+        // Use the ConfigMap option if the TrialTemplates were successfully
+        // fetched
+        if (this.templates && this.templates.length) {
+          this.formGroup.get('type').setValue('configmap');
+        }
       }),
     );
 

pkg/new-ui/v1beta1/frontend/src/app/services/experiment-form.service.ts

@@ -212,7 +212,7 @@ export class ExperimentFormService {
 
   createTrialTemplateForm(): FormGroup {
     return this.builder.group({
-      type: 'configmap',
+      type: 'yaml',
       podLabels: this.builder.array([]),
       containerName: 'training-container',
       successCond: 'status.conditions.#(type=="Complete")#|#(status=="True")#',