mgr/dashboard: add validator for size field in the forms

Fixes: https://tracker.ceph.com/issues/62655
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit 51bf62cb1bf1b03947bfebca89635d54ec647369)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
index 017456cb4d2a6fcd12d965d833ce7f49fed7ba5c..df0d0b8da3d0dee79adc6471b06d2e6f0aaf460a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
@@ -213,6 +213,9 @@
             <span class="invalid-feedback"
                   *ngIf="rbdForm.showError('size', formDir, 'invalidSizeObject')"
                   i18n>You have to increase the size.</span>
+            <span *ngIf="rbdForm.showError('size', formDir, 'pattern')"
+                  class="invalid-feedback"
+                  i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
           </div>
         </div>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-form/cephfs-subvolume-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-form/cephfs-subvolume-form.component.html
index 336e07cdb370200d9f0a14dbf43ce1f9e52f0880..772cc904da4b02ba6aa2724a51180c8466157ebc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-form/cephfs-subvolume-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-form/cephfs-subvolume-form.component.html
@@ -61,6 +61,9 @@
                    placeholder="e.g., 10GiB"
                    defaultUnit="GiB"
                    cdDimlessBinary>
+            <span *ngIf="subvolumeForm.showError('size', formDir, 'pattern')"
+                  class="invalid-feedback"
+                  i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
           </div>
         </div>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolumegroup-form/cephfs-subvolumegroup-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolumegroup-form/cephfs-subvolumegroup-form.component.html
index d83233b8ef0a25d99bb068614e99b14e78fca296..1b451dfbb379b7359ede7723df047e2307c6336c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolumegroup-form/cephfs-subvolumegroup-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolumegroup-form/cephfs-subvolumegroup-form.component.html
@@ -61,6 +61,9 @@
                    placeholder="e.g., 10GiB"
                    defaultUnit="GiB"
                    cdDimlessBinary>
+            <span *ngIf="subvolumegroupForm.showError('size', formDir, 'pattern')"
+                  class="invalid-feedback"
+                  i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
           </div>
         </div>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index b159f12530d04d28383d7fc82414c03ff0140aad..13103da324aab5cc3194e57701c93b96773942d7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -483,6 +483,9 @@
                 <span class="invalid-feedback"
                       *ngIf="form.showError('minBlobSize', formDir, 'maximum')"
                       i18n>Value should be less than the maximum blob size</span>
+                <span *ngIf="form.showError('minBlobSize', formDir, 'pattern')"
+                      class="invalid-feedback"
+                      i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
               </div>
             </div>
 
@@ -507,6 +510,9 @@
                 <span class="invalid-feedback"
                       *ngIf="form.showError('maxBlobSize', formDir, 'minimum')"
                       i18n>Value should be greater than the minimum blob size</span>
+                <span *ngIf="form.showError('maxBlobSize', formDir, 'pattern')"
+                      class="invalid-feedback"
+                      i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
               </div>
             </div>
 
@@ -560,6 +566,9 @@
                      placeholder="e.g., 10GiB"
                      defaultUnit="GiB"
                      cdDimlessBinary>
+              <span *ngIf="form.showError('max_bytes', formDir, 'pattern')"
+                    class="invalid-feedback"
+                    i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
             </div>
           </div>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index b708f47dbab1d4a7dc137404fe59c13ec6132d70..9fec45dfe01a8900766b75365d9ee497979b6bb4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -503,6 +503,9 @@
               <span class="invalid-feedback"
                     *ngIf="userForm.showError('user_quota_max_size', frm, 'quotaMaxSize')"
                     i18n>The value is not valid.</span>
+              <span *ngIf="userForm.showError('user_quota_max_size', formDir, 'pattern')"
+                    class="invalid-feedback"
+                    i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
             </div>
           </div>
 
@@ -597,6 +600,9 @@
               <span class="invalid-feedback"
                     *ngIf="userForm.showError('bucket_quota_max_size', frm, 'quotaMaxSize')"
                     i18n>The value is not valid.</span>
+              <span *ngIf="userForm.showError('bucket_quota_max_size', formDir, 'pattern')"
+                    class="invalid-feedback"
+                    i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
             </div>
           </div>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
index 46dd942e909fbf3094f708dbca3ec71547740451..fafd5e4086c40af44b66d8925bba6080557a6ed4 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
@@ -89,6 +89,9 @@ export class FormModalComponent implements OnInit {
     if (error === 'required') {
       return $localize`This field is required.`;
     }
+    if (error === 'pattern') {
+      return $localize`Size must be a number or in a valid format. eg: 5 GiB`;
+    }
     return $localize`An error occurred.`;
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/dimless-binary.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/dimless-binary.directive.ts
index 1c27ae1cecf42c5b3f888f2d9270383839e4ada9..12db3ad0b6f036b5ba418e7dd787d5062db1c8f1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/dimless-binary.directive.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/dimless-binary.directive.ts
@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { NgControl } from '@angular/forms';
+import { NgControl, Validators } from '@angular/forms';
 
 import _ from 'lodash';
 
@@ -86,6 +86,12 @@ export class DimlessBinaryDirective implements OnInit {
   setValue(value: string) {
     if (/^[\d.]+$/.test(value)) {
       value += this.defaultUnit || 'm';
+    } else {
+      if (value) {
+        this.control.control.setValue(value);
+        this.control.control.addValidators(Validators.pattern(/^[a-zA-Z\d. ]+$/));
+        this.control.control.updateValueAndValidity();
+      }
     }
     const size = this.formatter.toBytes(value);
     const roundedSize = this.round(size);