From: Nizamudeen A <nia@redhat.com>
Date: Thu, 31 Aug 2023 08:39:38 +0000 (+0530)
Subject: mgr/dashboard: add validator for size field in the forms
X-Git-Tag: v18.2.1~300^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=e3d07d06f09e046db030187fd9c262e43d8abe6d;p=ceph.git

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 017456cb4d2a6..df0d0b8da3d0d 100644
--- 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 336e07cdb3702..772cc904da4b0 100644
--- 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 d83233b8ef0a2..1b451dfbb379b 100644
--- 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 b159f12530d04..13103da324aab 100644
--- 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 b708f47dbab1d..9fec45dfe01a8 100644
--- 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 46dd942e909fb..fafd5e4086c40 100755
--- 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 1c27ae1cecf42..12db3ad0b6f03 100644
--- 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);