fix: set max cpu/ram values for 1 gpu + translation

saffaalvi · saffaalvi · commit 6c5fa37258d6 · 2020-12-16T13:18:55.000-05:00
diff --git a/frontend/src/app/resource-form/form-gpus/form-gpus.component.html b/frontend/src/app/resource-form/form-gpus/form-gpus.component.html
@@ -18,6 +18,7 @@ <h3>
           {{ v }}
         </mat-option>
       </mat-select>
+      <mat-hint>{{ message }}</mat-hint>
     </mat-form-field>
 
     <mat-form-field class="wide" appearance="outline">
diff --git a/frontend/src/app/resource-form/form-gpus/form-gpus.component.ts b/frontend/src/app/resource-form/form-gpus/form-gpus.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { GPUVendor } from 'src/app/utils/types';
@@ -12,12 +12,16 @@ import { TranslateService } from '@ngx-translate/core';
 export class FormGpusComponent implements OnInit {
   @Input() parentForm: FormGroup;
   @Input() vendors: GPUVendor[];
+  @Output() gpuValueEvent = new EventEmitter<string>();
+  
   private gpuCtrl: FormGroup;
   subscriptions = new Subscription();
 
   maxGPUs = 16;
   gpusCount = ['1'];
 
+  message: string;
+
   constructor(private translate: TranslateService) {}
 
   ngOnInit() {
@@ -32,10 +36,13 @@ export class FormGpusComponent implements OnInit {
     this.subscriptions.add(
       this.gpuCtrl.get('num').valueChanges.subscribe((n: string) => {
         if (n === 'none') {
+          this.message = "";
           this.gpuCtrl.get('vendor').disable();
         } else {
+          this.message = this.translate.instant('formGpus.specsWarningMessage')
           this.gpuCtrl.get('vendor').enable();
         }
+        this.gpuValueEvent.emit(n)
       }),
     );
   }
diff --git a/frontend/src/app/resource-form/form-specs/form-specs.component.html b/frontend/src/app/resource-form/form-specs/form-specs.component.html
@@ -12,6 +12,7 @@ <h3>
     <mat-form-field appearance="outline">
       <mat-label>{{ "formSpecs.lblCpu" | translate }}</mat-label>
       <input
+        [attr.disabled]="readonlySpecs ? '' : null"
         matInput
         placeholder="{{ 'formSpecs.plhCpu' | translate }}"
         formControlName="cpu"
@@ -23,6 +24,7 @@ <h3>
     <mat-form-field appearance="outline">
       <mat-label>{{ "formSpecs.lblMemory" | translate }}</mat-label>
       <input
+        [attr.disabled]="readonlySpecs ? '' : null"
         matInput
         placeholder="{{ 'formSpecs.plhMemory' | translate }}"
         formControlName="memory"
diff --git a/frontend/src/app/resource-form/form-specs/form-specs.component.ts b/frontend/src/app/resource-form/form-specs/form-specs.component.ts
@@ -25,15 +25,15 @@ function resourcesValidator(): ValidatorFn {
     const cpu = parseFloat(control.get("cpu").value);
     const ram = parseFloat(control.get("memory").value);
     const errors = {};
-
     const max = MAX_FOR_GPU.get(gpu);
-    if (cpu > max.cpu) {
-      errors["maxCpu"] = {max: max.cpu, gpu};
-    }
-    if (ram > max.ram) {
-      errors["maxRam"] = {max: max.ram, gpu};
+    if (gpu == 0) {
+      if (cpu > max.cpu) {
+        errors["maxCpu"] = {max: max.cpu, gpu};
+      }
+      if (ram > max.ram) {
+        errors["maxRam"] = {max: max.ram, gpu};
+      }
     }
-
     return Object.entries(errors).length > 0 ? errors : null;
   };
 }
@@ -47,8 +47,10 @@ export class FormSpecsComponent implements OnInit {
   @Input() parentForm: FormGroup;
   @Input() readonlyCPU: boolean;
   @Input() readonlyMemory: boolean;
+  @Input() readonlySpecs: boolean;
 
   constructor(private translate: TranslateService) {}
+  
   ngOnInit() {
     this.parentForm
       .get("cpu")
@@ -85,44 +87,27 @@ export class FormSpecsComponent implements OnInit {
   cpuErrorMessage(): string {
     let e: any;
     const errs = this.parentForm.get("cpu").errors || {};
-
     if (errs.required)
       return this.translate.instant("formSpecs.errorCpuRequired");
     if (errs.pattern) return this.translate.instant("formSpecs.errorCpuNumber");
     if ((e = errs.min))
       return this.translate.instant("formSpecs.errorCpuMin", {min: `${e.min}`});
     if (this.parentForm.hasError("maxCpu")) {
       e = this.parentForm.errors.maxCpu;
-      return (
-        this.translate.instant("formSpecs.errorCpuMax", {max: `${e.max}`}) +
-        (e.gpu > 0
-          ? this.translate.instant("formSpecs.errorCpuMaxLimit", {
-              gpu: `${e.gpu}`
-            })
-          : "")
-      );
+      return this.translate.instant("formSpecs.errorCpuMax", {max: `${e.max}`});
     }
   }
 
   memoryErrorMessage(): string {
     let e: any;
     const errs = this.parentForm.get("memory").errors || {};
-
     if (errs.required || errs.pattern)
       return this.translate.instant("formSpecs.errorRamRequired");
     if ((e = errs.min))
       return this.translate.instant("formSpecs.errorRamMin", {min: `${e.min}`});
-
     if (this.parentForm.hasError("maxRam")) {
       e = this.parentForm.errors.maxRam;
-      return (
-        this.translate.instant("formSpecs.errorRamMax", {max: `${e.max}`}) +
-        (e.gpu > 0
-          ? this.translate.instant("formSpecs.errorRamMaxLimit", {
-              gpu: `${e.gpu}`
-            })
-          : "")
-      );
+      return this.translate.instant("formSpecs.errorRamMax", {max: `${e.max}`});
     }
   }
 }
diff --git a/frontend/src/app/resource-form/resource-form.component.html b/frontend/src/app/resource-form/resource-form.component.html
@@ -12,7 +12,10 @@
         [hideVersion]="config?.image?.hideVersion"
       ></app-form-image>
 
-      <app-form-specs [parentForm]="formCtrl"></app-form-specs>
+      <app-form-specs 
+        [parentForm]="formCtrl"
+        [readonlySpecs]="readonlySpecs"
+      ></app-form-specs>
 
       <app-form-workspace-volume
         [parentForm]="formCtrl"
@@ -37,6 +40,7 @@
       <app-form-gpus
         [parentForm]="formCtrl"
         [vendors]="config?.gpus?.value.vendors"
+        (gpuValueEvent)="checkGPU($event)"
       ></app-form-gpus>
 
       <app-form-advanced-options
diff --git a/frontend/src/app/resource-form/resource-form.component.ts b/frontend/src/app/resource-form/resource-form.component.ts
@@ -27,6 +27,8 @@ export class ResourceFormComponent implements OnInit, OnDestroy {
 
   subscriptions = new Subscription();
 
+  readonlySpecs: boolean;
+
   constructor(
     private namespaceService: NamespaceService,
     private k8s: KubernetesService,
@@ -103,4 +105,15 @@ export class ResourceFormComponent implements OnInit, OnDestroy {
         }
       });
   }
+  
+  // Automatically set values of CPU and Memory if GPU is 1
+  checkGPU(gpu: string) {
+    if (gpu == "none") {
+      this.readonlySpecs = false;
+    } else {
+      this.readonlySpecs = true;
+      this.formCtrl.get("cpu").setValue("5");
+      this.formCtrl.get("memory").setValue("96Gi");
+    }
+  }
 }
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
@@ -69,7 +69,8 @@
     "lblNumGpu": "Number of GPUs",
     "optNone": "None",
     "lblGpuVendor": "GPU Vendor",
-    "errorGpuVendorRequired": "You must also specify the GPU Vendor for the assigned GPUs"
+    "errorGpuVendorRequired": "You must also specify the GPU Vendor for the assigned GPUs",
+    "specsWarningMessage": "Selecting 1 GPU will automatically set 5 CPUs and 96Gi of memory."
   },
   "formImage": {
     "h3Image": "Image",
diff --git a/frontend/src/assets/i18n/fr.json b/frontend/src/assets/i18n/fr.json
@@ -69,7 +69,9 @@
     "lblNumGpu": "Nombre GPUs",
     "optNone": "Aucun",
     "lblGpuVendor": "Vendeur de GPU",
-    "errorGpuVendorRequired": "Vous devez spécifier le vendeur des GPUs assignés"
+    "errorGpuVendorRequired": "Vous devez spécifier le vendeur des GPUs assignés",
+    "specsWarningMessage": "La sélection de 1 GPU définira automatiquement 5 processeurs et 96Gi de la mémoire."
+
   },
   "formImage": {
     "h3Image": "Image",
@@ -103,13 +105,13 @@
     "errorCpuNumber": "Doit être un nombre",
     "errorCpuMin": "Spécifier au moins {{min}} CPUs",
     "errorCpuMax": "Ne peut excéder {{max}} CPUs",
-    "errorCpuMaxLimit": " avec {{gpu}} GPU(s) sélectionné",
+    "errorCpuMaxLimit": " avec {{gpu}} GPU(s) sélectionné(s)",
     "lblMemory": "Mémoire",
     "plhMemory": "Quantié de mémoire",
     "errorRamRequired": "Spécifier la quantité de mémoire (ex. 2Gi)",
     "errorRamMin": "Spécifier au moins {{min}}Gi de mémoire",
     "errorRamMax": "Ne peut excéder {{max}}Gi de mémoire",
-    "errorRamMaxLimit": " avec {{gpu}} GPU(s) sélectionné"
+    "errorRamMaxLimit": " avec {{gpu}} GPU(s) sélectionné(s)"
   },
   "formWorkspaceVolume": {
     "h3WorkspaceVolume": "Volume d'espace de travail",
