From: Sagar Gopale <sagar.gopale@ibm.com>
Date: Wed, 13 May 2026 14:13:56 +0000 (+0530)
Subject: mgr/dashboard: Carbonize cluster-wide OSD flags modal
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F68891%2Fhead;p=ceph.git

mgr/dashboard: Carbonize cluster-wide OSD flags modal
fixes:https://tracker.ceph.com/issues/76580
Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
index 2ae6460fbb73..7b3aa5a4eb82 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
@@ -1,41 +1,56 @@
-<cd-modal [modalRef]="activeModal">
-  <ng-container class="modal-title"
-                i18n>Cluster-wide OSD Flags</ng-container>
+<cds-modal size="sm"
+           [open]="open"
+           [hasScrollingContent]="true"
+           (overlaySelected)="closeModal()">
+  <cds-modal-header (closeSelect)="closeModal()">
+    <h3 cdsModalHeaderHeading
+        modal-primary-focus
+        i18n>Cluster-wide OSD Flags</h3>
+  </cds-modal-header>
 
-  <ng-container class="modal-content">
+  <div cdsModalContent>
     <form name="osdFlagsForm"
-          #formDir="ngForm"
           [formGroup]="osdFlagsForm"
-          novalidate
-          cdFormScope="osd">
-      <div class="modal-body osd-modal">
-        <div class="custom-control custom-checkbox"
-             *ngFor="let flag of flags; let last = last">
-          <input class="custom-control-input"
-                 type="checkbox"
-                 [checked]="flag.value"
-                 (change)="flag.value = !flag.value"
-                 [name]="flag.code"
-                 [id]="flag.code"
-                 [disabled]="flag.disabled">
-          <label class="custom-control-label"
-                 [for]="flag.code"
-                 ng-class="['tc_' + key]">
+          novalidate>
+      <div>
+        @for (flag of flags; track flag.code; let last = $last) {
+        <div>
+          <cds-checkbox
+            [checked]="flag.value"
+            (checkedChange)="flag.value = !flag.value"
+            [name]="flag.code"
+            [id]="flag.code"
+            [disabled]="flag.disabled"
+          >
             <strong>{{ flag.name }}</strong>
-            <br>
-            <span class="form-text text-muted">{{ flag.description }}</span>
-          </label>
-          <hr class="m-1"
-              *ngIf="!last">
-        </div>
-      </div>
 
-      <div class="modal-footer">
-        <cd-form-button-panel (submitActionEvent)="submitAction()"
-                              [form]="osdFlagsForm"
-                              [showSubmit]="permissions.osd.update"
-                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
+            <div class="cds-mt-4">
+              <cd-help-text>{{ flag.description }}</cd-help-text>
+            </div>
+          </cds-checkbox>
+          @if (!last) {
+          <hr class="cds-m-2" />
+          }
+        </div>
+        }
       </div>
     </form>
-  </ng-container>
-</cd-modal>
+  </div>
+
+  <cds-modal-footer>
+    <cds-button-set>
+      <button cdsButton="secondary"
+              (click)="closeModal()"
+              i18n>
+        Cancel
+      </button>
+      @if (permissions.osd.update) {
+      <cd-submit-button
+        (submitAction)="submitAction()"
+        [form]="osdFlagsForm"
+        [submitText]="actionLabels.UPDATE">
+        {{ actionLabels.UPDATE }}</cd-submit-button>
+      }
+    </cds-button-set>
+  </cds-modal-footer>
+</cds-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts
index b6bea06f9c47..14223dd715ef 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ModalService } from 'carbon-components-angular';
 import _ from 'lodash';
 import { ToastrModule } from 'ngx-toastr';
 
@@ -34,7 +34,7 @@ describe('OsdFlagsModalComponent', () => {
       ToastrModule.forRoot()
     ],
     declarations: [OsdFlagsModalComponent],
-    providers: [NgbActiveModal]
+    providers: [ModalService]
   });
 
   beforeEach(() => {
@@ -62,7 +62,6 @@ describe('OsdFlagsModalComponent', () => {
   describe('test submitAction', function () {
     let notificationType: NotificationType;
     let notificationService: NotificationService;
-    let bsModalRef: NgbActiveModal;
 
     beforeEach(() => {
       notificationService = TestBed.inject(NotificationService);
@@ -70,8 +69,7 @@ describe('OsdFlagsModalComponent', () => {
         notificationType = type;
       });
 
-      bsModalRef = TestBed.inject(NgbActiveModal);
-      spyOn(bsModalRef, 'close').and.callThrough();
+      spyOn(component, 'closeModal');
       component.unknownFlags = ['foo'];
     });
 
@@ -83,7 +81,7 @@ describe('OsdFlagsModalComponent', () => {
       expect(req.request.body).toEqual({ flags: ['pause', 'purged_snapdirs', 'foo'] });
 
       expect(notificationType).toBe(NotificationType.success);
-      expect(component.activeModal.close).toHaveBeenCalledTimes(1);
+      expect(component.closeModal).toHaveBeenCalledTimes(1);
     });
 
     it('should hide modal if request fails', () => {
@@ -93,7 +91,7 @@ describe('OsdFlagsModalComponent', () => {
       req.flush([], { status: 500, statusText: 'failure' });
 
       expect(notificationService.show).toHaveBeenCalledTimes(0);
-      expect(component.activeModal.close).toHaveBeenCalledTimes(1);
+      expect(component.closeModal).toHaveBeenCalledTimes(1);
     });
   });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
index a7e2ebd80c4e..ee07b85bb374 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { CdForm } from '~/app/shared/forms/cd-form';
 import _ from 'lodash';
 
 import { OsdService } from '~/app/shared/api/osd.service';
@@ -17,7 +17,7 @@ import { NotificationService } from '~/app/shared/services/notification.service'
   styleUrls: ['./osd-flags-modal.component.scss'],
   standalone: false
 })
-export class OsdFlagsModalComponent implements OnInit {
+export class OsdFlagsModalComponent extends CdForm implements OnInit {
   permissions: Permissions;
 
   osdFlagsForm = new UntypedFormGroup({});
@@ -116,12 +116,12 @@ export class OsdFlagsModalComponent implements OnInit {
   unknownFlags: string[] = [];
 
   constructor(
-    public activeModal: NgbActiveModal,
     public actionLabels: ActionLabelsI18n,
     private authStorageService: AuthStorageService,
     private osdService: OsdService,
     private notificationService: NotificationService
   ) {
+    super();
     this.permissions = this.authStorageService.getPermissions();
   }
 
@@ -147,10 +147,10 @@ export class OsdFlagsModalComponent implements OnInit {
     this.osdService.updateFlags(newFlags).subscribe(
       () => {
         this.notificationService.show(NotificationType.success, $localize`Updated OSD Flags`);
-        this.activeModal.close();
+        this.closeModal();
       },
       () => {
-        this.activeModal.close();
+        this.closeModal();
       }
     );
   }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index 2ff19e44fe9f..fb6c676a5dcd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -495,7 +495,7 @@ export class OsdListComponent extends ListWithDetails implements OnInit {
   }
 
   configureFlagsAction() {
-    this.bsModalRef = this.modalService.show(OsdFlagsModalComponent);
+    this.bsModalRef = this.cdsModalService.show(OsdFlagsModalComponent);
   }
 
   configureFlagsIndivAction() {