From: Nizamudeen A <nia@redhat.com>
Date: Wed, 17 Sep 2025 03:39:54 +0000 (+0530)
Subject: mgr/dashboard: fix rbd form mirroring toggle
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=1efd37d4b5fc4363c6c86a84ede9c826c94d2c22;p=ceph.git

mgr/dashboard: fix rbd form mirroring toggle

- fix the toggle not working while editing the image
- the rbd form mirroring toggle doesn't disable/enable the mirror mode
when you change the pool.

- also re-arrange the form in a way that the required fields are together.
- disable mirroring when selecting the namespace

Fixes: https://tracker.ceph.com/issues/72458
Signed-off-by: Nizamudeen A <nia@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-contants.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-contants.ts
index c5b251915946f..abc78f7612dcb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-contants.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-contants.ts
@@ -12,3 +12,13 @@ export const RBDActionHelpers = {
   journalTooltipText: $localize`'Ensures reliable replication by logging changes before updating the image, but doubles write time, impacting performance. Not recommended for high-speed data processing tasks.`,
   snapshotTooltipText: $localize`This mode replicates RBD images between clusters using snapshots, efficiently copying data changes but requiring complete delta syncing during failover. Ideal for less demanding tasks due to its less granular approach compared to journaling.`
 };
+
+export const RBDPoolMirrorModes = {
+  pool: 'pool',
+  image: 'image'
+}
+
+export const RBDMirroringModes = {
+  journal: 'journal',
+  snapshot: 'snapshot'
+}
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 a6675bc0898d2..225c52510814a 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
@@ -75,6 +75,7 @@
                     cdRequiredField="Pool"
                     [invalid]="!rbdForm.controls['pool'].valid && (rbdForm.controls['pool'].dirty)"
                     [invalidText]="poolError"
+                    (valueChange)="setPoolMirrorMode()"
                     *ngIf="mode !== 'editing' && poolPermission.read">
           <option *ngIf="pools === null"
                   [ngValue]="null"
@@ -95,6 +96,89 @@
         </ng-template>
       </div>
 
+      <!-- Size -->
+      <div class="form-item">
+        <cds-text-label for="size"
+                        i18n
+                        [invalid]="!rbdForm.controls['size'].valid && (rbdForm.controls['size'].dirty)"
+                        [invalidText]="sizeError"
+                        cdRequiredField="Size">Size
+          <input cdsText
+                 type="text"
+                 placeholder="e.g., 10GiB"
+                 id="size"
+                 name="size"
+                 formControlName="size"
+                 defaultUnit="GiB"
+                 [invalid]="!rbdForm.controls['size'].valid && (rbdForm.controls['size'].dirty)"
+                 cdDimlessBinary>
+        </cds-text-label>
+        <ng-template #sizeError>
+          <span class="invalid-feedback"
+                *ngIf="rbdForm.showError('size', formDir, 'required')"
+                i18n>This field is required.</span>
+          <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>
+        </ng-template>
+      </div>
+
+      <!-- Namespace -->
+      <!-- Skeleton-->
+      <div class="form-item"
+           *ngIf="mode !== 'editing' && rbdForm.getValue('pool') && namespaces === null">
+        <cds-select label="Namespace"
+                    for="namespace"
+                    name="namespace"
+                    id="namespace"
+                    [skeleton]="true"
+                    formControlName="namespace">
+          <option [ngValue]="null"
+                  i18n>Loading...</option>
+        </cds-select>
+      </div>
+
+      <div class="form-item"
+           *ngIf="(mode === 'editing' && rbdForm.getValue('namespace')) || mode !== 'editing' && (namespaces && namespaces.length > 0 || !poolPermission.read)">
+        <cds-text-label label="Namespace"
+                        id="namespace"
+                        [helperText]="namespaceHelperTpl"
+                        *ngIf="mode === 'editing' || !poolPermission.read"
+                        i18n>Namespace
+          <input cdsText
+                 id="namespace"
+                 formControlName="namespace">
+        </cds-text-label>
+
+        <cds-select label="Namespace"
+                    [helperText]="namespaceHelperTpl"
+                    for="namespace"
+                    name="namespace"
+                    id="namespace"
+                    formControlName="namespace"
+                    (valueChange)="disableMirroring($event)"
+                    *ngIf="mode !== 'editing' && poolPermission.read">
+          <option *ngIf="namespaces === null"
+                  [ngValue]="null"
+                  i18n>Loading...</option>
+          <option *ngIf="namespaces !== null && namespaces.length === 0"
+                  [ngValue]="null"
+                  i18n>-- No namespaces available --</option>
+          <option *ngIf="namespaces !== null && namespaces.length > 0"
+                  value=""
+                  i18n>-- Select a namespace --</option>
+          <option *ngFor="let namespace of namespaces"
+                  [value]="namespace">{{ namespace }}</option>
+        </cds-select>
+
+        <ng-template #namespaceHelperTpl>
+          Namespace allows you to logically group RBD images within your Ceph Cluster.Choosing a namespace makes it easier to locate and manage related RBD images efficiently.
+        </ng-template>
+      </div>
+
       <!-- Mirroring -->
       <div class="form-item">
         <cds-checkbox id="mirroring"
@@ -223,73 +307,6 @@
         </ng-template>
       </div>
 
-      <!-- Namespace -->
-      <!-- Skeleton-->
-      <div class="form-item"
-           *ngIf="mode !== 'editing' && rbdForm.getValue('pool') && namespaces === null">
-        <cds-select label="Namespace"
-                    for="namespace"
-                    name="namespace"
-                    id="namespace"
-                    [skeleton]="true"
-                    formControlName="namespace">
-          <option [ngValue]="null"
-                  i18n>Loading...</option>
-        </cds-select>
-      </div>
-
-      <div class="form-item">
-        <cds-select label="Namespace"
-                    helperText="Namespace allows you to logically group RBD images within your Ceph Cluster.Choosing a namespace makes it easier to locate and manage related RBD images efficiently"
-                    for="namespace"
-                    name="namespace"
-                    id="namespace"
-                    formControlName="namespace"
-                    *ngIf="(mode === 'editing' && rbdForm.getValue('namespace')) || mode !== 'editing' && (namespaces && namespaces.length > 0 || !poolPermission.read)">
-          <option *ngIf="namespaces === null"
-                  [ngValue]="null"
-                  i18n>Loading...</option>
-          <option *ngIf="namespaces !== null && namespaces.length === 0"
-                  [ngValue]="null"
-                  i18n>-- No namespaces available --</option>
-          <option *ngIf="namespaces !== null && namespaces.length > 0"
-                  [ngValue]="null"
-                  i18n>-- Select a namespace --</option>
-          <option *ngFor="let namespace of namespaces"
-                  [value]="namespace">{{ namespace }}</option>
-        </cds-select>
-      </div>
-
-      <!-- Size -->
-      <div class="form-item">
-        <cds-text-label for="size"
-                        i18n
-                        [invalid]="!rbdForm.controls['size'].valid && (rbdForm.controls['size'].dirty)"
-                        [invalidText]="sizeError"
-                        cdRequiredField="Size">Size
-          <input cdsText
-                 type="text"
-                 placeholder="e.g., 10GiB"
-                 id="size"
-                 name="size"
-                 formControlName="size"
-                 defaultUnit="GiB"
-                 [invalid]="!rbdForm.controls['size'].valid && (rbdForm.controls['size'].dirty)"
-                 cdDimlessBinary>
-        </cds-text-label>
-        <ng-template #sizeError>
-          <span class="invalid-feedback"
-                *ngIf="rbdForm.showError('size', formDir, 'required')"
-                i18n>This field is required.</span>
-          <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>
-        </ng-template>
-      </div>
-
       <!-- Advanced Section -->
       <cd-form-advanced-fieldset>
         <!-- Features -->
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
index 84652ebd6c117..fdc6d35cc0147 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
@@ -298,7 +298,7 @@ export class RbdFormComponent extends CdForm implements OnInit {
     });
   }
 
-  setPoolMirrorMode() {
+  setPoolMirrorMode(namespace?: string) {
     this.currentPoolName =
       this.mode === this.rbdFormMode.editing
         ? this.response?.pool_name
@@ -309,7 +309,11 @@ export class RbdFormComponent extends CdForm implements OnInit {
         const pool = data.content_data.pools.find((o: any) => o.name === this.currentPoolName);
         this.currentPoolMirrorMode = pool.mirror_mode;
         if (this.mode === this.rbdFormMode.editing) {
-          if (this.currentPoolMirrorMode === 'pool') {
+          if (namespace) {
+            this.mirroring = false;
+            this.rbdForm.get('mirroring').disable();
+          }
+          if (this.currentPoolMirrorMode === this.rbdPoolMirrorModes.pool) {
             this.showMirrorDisableMessage = true;
           } else {
             this.showMirrorDisableMessage = false;
@@ -668,7 +672,7 @@ export class RbdFormComponent extends CdForm implements OnInit {
         this.mirroring = false;
         this.rbdForm.get('mirroring').setValue(this.mirroring);
       }
-      this.setPoolMirrorMode();
+      this.setPoolMirrorMode(response.namespace);
     }
     this.rbdForm.get('pool').setValue(response.pool_name);
     this.onPoolChange(response.pool_name);
@@ -852,7 +856,18 @@ export class RbdFormComponent extends CdForm implements OnInit {
   }
 
   shouldDisable(option: string): boolean {
-    return this.currentPoolMirrorMode === 'pool' && option === 'snapshot' ? true : null;
+    return this.currentPoolMirrorMode === 'pool' && option === 'snapshot' ? true : false;
+  }
+
+  disableMirroring(namespace: string) {
+    const mirroringControl = this.rbdForm.get('mirroring');
+    if (namespace) {
+      this.mirroring = false;
+      mirroringControl.disable();
+    } else {
+      this.mirroring = true;
+      mirroringControl.enable();
+    }
   }
 
   submit() {