Merge pull request #122 from StatCan/add-ui-for-sas

Add UI for SAS

Author: saffaalvi

config.go

@@ -10,6 +10,7 @@ type SpawnerFormDefaults struct {
 	Image            Image           `yaml:"image" json:"image"`
 	ImageGroupOne    ImageGroup      `yaml:"imageGroupOne" json:"imageGroupOne"`
 	ImageGroupTwo    ImageGroup      `yaml:"imageGroupTwo" json:"imageGroupTwo"`
+	ImageGroupThree  ImageGroup      `yaml:"imageGroupThree" json:"imageGroupThree"`
 	AllowCustomImage bool            `yaml:"allowCustomImage" json:"allowCustomImage"`
 	ImagePullPolicy  ImagePullPolicy `yaml:"imagePullPolicy" json:"imagePullPolicy"`
 	CPU              CPU             `yaml:"cpu" json:"cpu"`
@@ -100,8 +101,14 @@ type Image struct {
 }
 
 type ImageGroup struct {
-	Value   string   `yaml:"value" json:"value"`
-	Options []string `yaml:"options" json:"options"`
+	DisabledMessage  map[string]string `yaml:"disabledMessage" json:"disabledMessage,omitempty"`
+	EnabledCondition *EnabledCondition `yaml:"enabledCondition" json:"enabledCondition,omitempty"`
+	Value            string            `yaml:"value" json:"value"`
+	Options          []string          `yaml:"options" json:"options"`
+}
+
+type EnabledCondition struct {
+	Labels map[string]string `yaml:"labels" json:"labels,omitempty"`
 }
 
 type Shm struct {

frontend/common/kubeflow-common-lib/projects/kubeflow/src/assets/en.json

@@ -45,7 +45,8 @@
       "serverType": "Server Type",
       "useJupyterLabBasedServer": "Use JupyterLab based server",
       "useGroupOneBasedServer": "Use Group One based server",
-      "useGroupTwoBasedServer": "Use Group Two based server"
+      "useGroupTwoBasedServer": "Use Group Two based server",
+      "useGroupThreeBasedServer": "Use Group Three based server"
     },
     "formName": {
       "nameDesc": "Specify the name of the Notebook Server and the Namespace it will belong to."

frontend/common/kubeflow-common-lib/projects/kubeflow/src/assets/fr.json

@@ -45,7 +45,8 @@
       "serverType": "Type de serveur",
       "useJupyterLabBasedServer": "Utiliser le serveur basé sur JupyterLab",
       "useGroupOneBasedServer": "Utiliser le serveur basé sur le groupe un",
-      "useGroupTwoBasedServer": "Utiliser le serveur basé sur le groupe deux"
+      "useGroupTwoBasedServer": "Utiliser le serveur basé sur le groupe deux",
+      "useGroupThreeBasedServer": "Utiliser le serveur basé sur le groupe trois"
     },
     "formName": {
       "nameDesc": "Spécifier le nom du serveur bloc-notes et l'espace de noms dont il fera partie."

frontend/jupyter/package-lock.json

@@ -8,9 +8,8 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AppComponent {
   constructor(private translate: TranslateService) {
-    const currentLanguage = this.translate.getBrowserLang();
-    const lang = currentLanguage.match(/en|fr/)? currentLanguage : 'en';
-    translate.setDefaultLang(lang);
+    translate.setDefaultLang('en');
+    translate.use(this.translate.getBrowserLang()); 
   }
   title = 'frontend';
 }

frontend/jupyter/src/app/app.component.ts

@@ -9,11 +9,13 @@
         <app-form-image
           [parentForm]="formCtrl"
           [images]="config?.image?.options"
-          [imagesGroupOne]="config?.imageGroupOne?.options"
-          [imagesGroupTwo]="config?.imageGroupTwo?.options"
+          [imagesGroupOne]="config?.imageGroupOne"
+          [imagesGroupTwo]="config?.imageGroupTwo"
+          [imagesGroupThree]="config?.imageGroupThree"
           [allowCustomImage]="config?.allowCustomImage"
           [hideRegistry]="config?.hideRegistry"
           [hideTag]="config?.hideTag"
+          [nsMetadata]="nsMetadata"
         ></app-form-image>
 
         <app-form-cpu-ram

frontend/jupyter/src/app/pages/form/form-default/form-default.component.html

@@ -14,6 +14,7 @@ import { getFormDefaults, initFormControls } from './utils';
 import { JWABackendService } from 'src/app/services/backend.service';
 import { environment } from '@app/environment';
 import { TranslateService } from '@ngx-translate/core';
+import { V1Namespace } from '@kubernetes/client-node';
 
 @Component({
   selector: 'app-form-default',
@@ -36,6 +37,7 @@ export class FormDefaultComponent implements OnInit, OnDestroy {
   subscriptions = new Subscription();
 
   readonlySpecs: boolean;
+  nsMetadata: V1Namespace;
 
   constructor(
     public namespaceService: NamespaceService,
@@ -71,6 +73,11 @@ export class FormDefaultComponent implements OnInit, OnDestroy {
         this.backend.getVolumes(namespace).subscribe(pvcs => {
           this.pvcs = pvcs;
         });
+
+        this.backend.getNSMetadata(namespace).subscribe(nsMetadata => {
+          this.nsMetadata = nsMetadata;
+        });
+
       }),
     );
 
@@ -121,11 +128,15 @@ export class FormDefaultComponent implements OnInit, OnDestroy {
     } else if (notebook.serverType === 'group-two') {
       // Set notebook image from imageGroupTwo
       notebook.image = notebook.imageGroupTwo;
+    } else if (notebook.serverType === 'group-three') {
+      // Set notebook image from imageGroupThree
+      notebook.image = notebook.imageGroupThree;
     }
 
     // Remove unnecessary images from the request sent to the backend
     delete notebook.imageGroupOne;
     delete notebook.imageGroupTwo;
+    delete notebook.imageGroupThree;
 
     // Ensure CPU input is a string
     if (typeof notebook.cpu === 'number') {
@@ -177,16 +188,17 @@ export class FormDefaultComponent implements OnInit, OnDestroy {
       this.router.navigate(['/']);
     });
   }
-    // 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("4");
-        this.formCtrl.get("memory").setValue("96");
-      }
+  
+  // 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("4");
+      this.formCtrl.get("memory").setValue("96");
     }
+  }
 
   onCancel() {
     this.router.navigate(['/']);

frontend/jupyter/src/app/pages/form/form-default/form-default.component.ts

@@ -31,6 +31,9 @@
         attr.aria-label="{{
           'jupyter.formImage.useGroupOneBasedServer' | translate
         }}"
+        [disabled]="!shouldEnable(imagesGroupOne?.enabledCondition)"
+        [matTooltip]="!shouldEnable(imagesGroupOne?.enabledCondition) ? getDisabledMessage('group-one') : ''"
+        [class.toolbar-icon-disabled]="!shouldEnable(imagesGroupOne?.enabledCondition)"
       >
         <mat-icon class="server-type" svgIcon="group-one"></mat-icon>
       </mat-button-toggle>
@@ -39,9 +42,23 @@
         attr.aria-label="{{
           'jupyter.formImage.useGroupTwoBasedServer' | translate
         }}"
+        [disabled]="!shouldEnable(imagesGroupTwo?.enabledCondition)"
+        [matTooltip]="!shouldEnable(imagesGroupTwo?.enabledCondition) ? getDisabledMessage('group-two') : ''"
+        [class.toolbar-icon-disabled]="!shouldEnable(imagesGroupTwo?.enabledCondition)"
       >
         <mat-icon class="server-type" svgIcon="group-two"></mat-icon>
       </mat-button-toggle>
+      <mat-button-toggle
+        value="group-three"
+        attr.aria-label="{{
+          'jupyter.formImage.useGroupThreeBasedServer' | translate
+        }}"
+        [disabled]="!shouldEnable(imagesGroupThree?.enabledCondition)"
+        [matTooltip]="!shouldEnable(imagesGroupThree?.enabledCondition) ? getDisabledMessage('group-three') : ''"
+        [class.toolbar-icon-disabled]="!shouldEnable(imagesGroupThree?.enabledCondition)"
+      >
+        <mat-icon class="server-type" svgIcon="group-three"></mat-icon>
+      </mat-button-toggle>
     </mat-button-toggle-group>
   </div>
 
@@ -83,7 +100,7 @@
       [formControl]="parentForm.get('imageGroupOne')"
     >
       <mat-option
-       *ngFor="let img of imagesGroupOne"
+       *ngFor="let img of imagesGroupOne.options"
        [value]="img"
        [matTooltip]="img"
        >
@@ -110,7 +127,7 @@
       [formControl]="parentForm.get('imageGroupTwo')"
     >
       <mat-option
-       *ngFor="let img of imagesGroupTwo"
+       *ngFor="let img of imagesGroupTwo.options"
        [value]="img"
        [matTooltip]="img"
        >
@@ -122,6 +139,33 @@
     </mat-error>
   </mat-form-field>
 
+  <mat-form-field
+    class="wide"
+    appearance="outline"
+    *ngIf="
+    !parentForm?.value.customImageCheck &&
+    parentForm?.value.serverType === 'group-three'
+  "
+  >
+    <!-- If readonly, then make it an input element instead of select -->
+    <mat-label>{{ 'common.image' | translate }}</mat-label>
+    <mat-select
+      placeholder="{ 'jupyter.formImage.imageDocker' | translate }}"
+      [formControl]="parentForm.get('imageGroupThree')"
+    >
+      <mat-option
+      *ngFor="let img of imagesGroupThree.options"
+      [value]="img"
+      [matTooltip]="img"
+      >
+        {{ imageDisplayName(img) }}
+      </mat-option>
+    </mat-select>
+    <mat-error>
+      {{ 'jupyter.formImage.errorImageRequired' | translate }}
+    </mat-error>
+  </mat-form-field>
+
   <mat-form-field
     class="wide"
     appearance="outline"

frontend/jupyter/src/app/pages/form/form-default/form-image/form-image.component.html

@@ -7,3 +7,12 @@
   margin-bottom: 1rem;
   width: fit-content;
 }
+
+.toolbar-icon-disabled {
+  fill: gray;
+  opacity: .5;
+}
+
+p { 
+  margin-top: -5px; 
+}