feat: Add validation for mounted pvc

frontend/src/app/resource-form/volume/volume.component.html

@@ -18,9 +18,10 @@
       matInput
       formControlName="name"
       *ngIf="volume.value.type == 'New'; else existingPvcControl"
+      [errorStateMatcher]="matcher"
     />
     <ng-template #existingPvcControl>
-      <mat-select formControlName="name">
+      <mat-select formControlName="name" [errorStateMatcher]="matcher">
         <mat-option *ngFor="let pvc of existingPVCs" [value]="pvc">{{
           pvc
         }}</mat-option>

frontend/src/app/resource-form/volume/volume.component.ts

@@ -1,8 +1,11 @@
 import { Component, OnInit, Input, OnDestroy } from "@angular/core";
-import { FormGroup, Validators } from "@angular/forms";
+import { FormGroup, Validators, ValidatorFn, AbstractControl, FormControl, FormGroupDirective, NgForm } from "@angular/forms";
 import { Volume } from "src/app/utils/types";
 import { Subscription } from "rxjs";
-import {TranslateService} from "@ngx-translate/core";
+import { TranslateService } from "@ngx-translate/core";
+import { NamespaceService } from "src/app/services/namespace.service";
+import { KubernetesService } from "src/app/services/kubernetes.service";
+import {ErrorStateMatcher} from '@angular/material/core';
 
 @Component({
   selector: "app-volume",
@@ -12,9 +15,12 @@ import {TranslateService} from "@ngx-translate/core";
 export class VolumeComponent implements OnInit, OnDestroy {
   private _notebookName = "";
   private _defaultStorageClass: boolean;
+  private mountedVolumes: Set<string> = new Set<string>();
 
   currentPVC: Volume;
   existingPVCs: Set<string> = new Set();
+  // Specific error matcher for volume name field
+  matcher = new PvcErrorStateMatcher();
 
   subscriptions = new Subscription();
 
@@ -101,14 +107,21 @@ export class VolumeComponent implements OnInit, OnDestroy {
   }
 
   // ----- Component Functions -----
-  constructor(private translate: TranslateService) {}
+  constructor(
+    private translate: TranslateService,
+    private k8s: KubernetesService,
+    private ns: NamespaceService) { }
 
   ngOnInit() {
     this.volume
       .get("name")
-      .setValidators([Validators.required, Validators.pattern(/^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/)]);
-
-   this.subscriptions.add(
+      .setValidators([
+        Validators.required,
+        this.isMountedValidator(),
+        Validators.pattern(/^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/)
+      ]);
+
+    this.subscriptions.add(
       this.volume.get("type").valueChanges.subscribe((type: string) => {
         this.setVolumeType(type);
       })
@@ -122,6 +135,18 @@ export class VolumeComponent implements OnInit, OnDestroy {
         this.updateVolInputFields();
       })
     );
+
+    // Get the list of mounted volumes of the existing Notebooks in the selected Namespace
+    this.subscriptions.add(
+      this.ns.getSelectedNamespace().subscribe(ns => {
+        this.k8s.getResource(ns).subscribe(notebooks => {
+          this.mountedVolumes.clear();
+          notebooks.map(nb => nb.volumes.map(v => {
+            this.mountedVolumes.add(v)
+          }));
+        });
+      })
+    );
   }
 
   ngOnDestroy() {
@@ -166,12 +191,30 @@ export class VolumeComponent implements OnInit, OnDestroy {
 
   showNameError() {
     const volumeName = this.volume.get("name");
-
     if (volumeName.hasError("required")) {
       return this.translate.instant("volume.errorNameRequired");
     }
     if (volumeName.hasError("pattern")) {
       return this.translate.instant("volume.errorNamePattern");
     }
+    if (volumeName.hasError("isMounted")) {
+      return this.translate.instant("volume.errorMountedVolume");
+    }
+  }
+
+  //Method that disables selecting a mounted pvc
+  private isMountedValidator(): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } => {
+      const exists = this.mountedVolumes.has(control.value);
+      return exists ? { isMounted: true } : null;
+    };
+  }
+}
+// Error when invalid control is dirty, touched, or submitted
+export class PvcErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    //Allows to control when volume is untouched but already assigned
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted || !control.hasError("pattern")));
   }
 }

frontend/src/assets/i18n/en.json

@@ -126,6 +126,7 @@
     "lblName": "Name",
     "errorNameRequired": "The volume name can't be empty",
     "errorNamePattern": "The volume name can only contain lowercase alphanumeric characters, '-' or '.', and must start and end with an alphanumeric character",
+    "errorMountedVolume":"The volume is already mounted to another notebook and cannot be currently selected",
     "lblSize": "Size",
     "lblMode": "Mode",
     "optReadWriteOnce": "ReadWriteOnce",

frontend/src/assets/i18n/fr.json

@@ -127,6 +127,7 @@
     "lblName": "Nom",
     "errorNameRequired": "Le nom du volume ne peut pas être vide",
     "errorNamePattern": "Le nom du volume ne peut contenir que des caractères alphanumériques en minuscule, '-' ou '.', et doit commencer et se terminer par un caractères alphanumériques",
+    "errorMountedVolume":"Le volume est déjà monté sur un autre bloc-notes et ne peut être sélectionné actuellement",
     "lblSize": "Taille",
     "lblMode": "Mode",
     "optReadWriteOnce": "ReadWriteOnce",