From: Abhishek Desai <abhishek.desai1@ibm.com>
Date: Mon, 15 Jun 2026 11:12:15 +0000 (+0530)
Subject: mgr/dashboard : Enable cephadm-signed TLS for NVMeOf
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=4ac6a8298f5cbd37b92acc554e9467c3bb16a6af;p=ceph.git

mgr/dashboard : Enable cephadm-signed TLS for NVMeOf
fixes: https://tracker.ceph.com/issues/77406
Signed-off-by: Abhishek Desai <abhishek.desai1@ibm.com>

(cherry picked from commit 14162473bb6a6993ec729056b35dc514cad2228e)
Signed-off-by: pujashahu <pshahu@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.html
index 078553f626a..287361a41dc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.html
@@ -1,6 +1,19 @@
 <div class="nvmeof-content-layout">
   <div class="nvmeof-content-main">
     <ng-container *ngIf="gatewayGroup$ | async as gateways">
+      <!-- Details Card Section -->
+      <ng-container *ngIf="selection.hasSelection">
+        <cd-details-card
+          cardTitle="Details"
+          i18n-cardTitle
+          [details]="selectedGatewayDetails"
+          [showEditButton]="true"
+          [editButtonLabel]="actionLabels.EDIT"
+          [columns]="4"
+          (editClicked)="editSelectedGatewayGroup()">
+        </cd-details-card>
+      </ng-container>
+
       <cd-table
         #table
         [data]="gateways"
@@ -14,11 +27,13 @@
         i18n-emptyStateTitle
         emptyStateMessage="Set up your first gateway group to start using NVMe over Fabrics. This will allow you to create high-performance block storage with NVMe/TCP protocol."
         i18n-emptyStateMessage>
-      <cd-table-actions class="table-actions"
-                        [permission]="permission"
-                        [selection]="selection"
-                        [tableActions]="tableActions">
-      </cd-table-actions>
+        <div class="table-actions">
+          <cd-table-actions
+            [permission]="permission"
+            [selection]="selection"
+            [tableActions]="tableActions">
+          </cd-table-actions>
+        </div>
       </cd-table>
     </ng-container>
   </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.scss
index a5f8a62aac9..71694a4ab86 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.scss
@@ -4,3 +4,7 @@ cd-details-card {
   display: block;
   margin-bottom: layout.$spacing-05;
 }
+
+.table-actions {
+  margin-top: layout.$spacing-03;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.ts
index 17766f2b717..04c3bf4fbe7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-group/nvmeof-gateway-group.component.ts
@@ -342,6 +342,45 @@ export class NvmeofGatewayGroupComponent implements OnInit, OnDestroy {
     this.router.navigate([this.viewUrl, groupName]);
   }
 
+  editSelectedGatewayGroup(): void {
+    const selectedGroup = this.selection.first();
+    if (!selectedGroup) {
+      return;
+    }
+    this.router.navigate([this.urlBuilder.getEdit(selectedGroup.name)]);
+  }
+
+  private buildGatewayDetails(selectedGroup: any): DetailItem[] {
+    if (!selectedGroup) {
+      return [];
+    }
+
+    const runningGateways = selectedGroup.statusCount?.running ?? 0;
+    const errorGateways = selectedGroup.statusCount?.error ?? 0;
+    const totalGateways = runningGateways + errorGateways;
+
+    return [
+      {
+        label: $localize`Gateway name`,
+        value: selectedGroup.name
+      },
+      {
+        label: $localize`Gateway nodes`,
+        value: totalGateways
+      },
+      {
+        label: $localize`Encryption`,
+        value: selectedGroup.spec?.enable_auth ? $localize`Enabled` : $localize`Disabled`,
+        type: 'status'
+      },
+      {
+        label: $localize`mTLS`,
+        value: selectedGroup.spec?.enable_mtls ? $localize`Enabled` : $localize`Disabled`,
+        type: 'status'
+      }
+    ];
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.html
index 0a97671fa3b..b8025d08f06 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.html
@@ -1,7 +1,7 @@
 <div class="content-theme">
   @if (mode === 'details' && groupName) {
-  <cd-details-card cardTitle="Details" i18n-cardTitle [details]="gatewayDetails" [showEditButton]="false"
-    class="cds-mb-5">
+  <cd-details-card cardTitle="Details" i18n-cardTitle [details]="gatewayDetails" [showEditButton]="true"
+    editButtonLabel="Edit" i18n-editButtonLabel (editClicked)="onEditGateway()" class="cds-mb-5">
   </cd-details-card>
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.ts
index 89fe4865356..fecbbe14a47 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-node/nvmeof-gateway-node.component.ts
@@ -439,6 +439,8 @@ export class NvmeofGatewayNodeComponent implements OnInit, OnDestroy, OnChanges
     this.hostsLoaded.emit(this.count);
   }
 
+  onEditGateway(): void {}
+
   private buildGatewayDetails(
     serviceSpec: CephServiceSpec,
     gatewayNodeCount: number
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
index d88531a22c2..b6e9374e006 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
@@ -1419,7 +1419,7 @@
            i18n>Choose Certificate Authority</label>
     <cds-radio-group formControlName="certificateType"
                      orientation="horizontal"
-                     helperText="Select how certificates will be signed for this service. Choose internal to use the cluster’s CA, or external to upload certificates signed by your organization."
+                     helperText="Select how certificates will be signed for this service. Choose internal to use the cluster's CA, or external to upload certificates signed by your organization."
                      i18n-helperText>
       <cds-radio [value]="CertificateType.internal"
                  (change)="onCertificateTypeChange(CertificateType.internal)"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
index 33f6d602c4c..26b6a0b2721 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
@@ -978,6 +978,8 @@ export class ServiceFormComponent extends CdForm implements OnInit {
         });
     }
     this.detectChanges();
+    this.updateRgwPlacementControlsState();
+    this.updateGrafanaPasswordControlState();
   }
 
   detectChanges(): void {
@@ -1151,7 +1153,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
         } else {
           this.showRealmCreationForm = false;
         }
-        this.updateRgwControlStates();
+         this.updateRgwControlStates();
       },
       (_error) => {
         const defaultZone = new RgwZone();
@@ -1160,7 +1162,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
         defaultZonegroup.name = 'default';
         this.zoneList.push(defaultZone);
         this.zonegroupList.push(defaultZonegroup);
-        this.updateRgwControlStates();
+         this.updateRgwControlStates();
       }
     );
   }
@@ -1191,6 +1193,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
 
   onServiceTypeChange(selectedServiceType: string) {
     this.setServiceId(selectedServiceType);
+    this.updateGrafanaPasswordControlState(selectedServiceType);
 
     this.serviceIds = this.serviceList
       ?.filter((service) => service['service_type'] === selectedServiceType)
@@ -1217,6 +1220,33 @@ export class ServiceFormComponent extends CdForm implements OnInit {
     }
   }
 
+  private updateRgwPlacementControlsState(): void {
+    this.toggleFormControlState('realm_name', this.editing || this.realmList.length === 0);
+    this.toggleFormControlState('zonegroup_name', this.editing || this.zonegroupList.length === 0);
+    this.toggleFormControlState('zone_name', this.editing || this.zoneList.length === 0);
+  }
+
+  private updateGrafanaPasswordControlState(serviceType = this.serviceForm?.get('service_type')?.value): void {
+    this.toggleFormControlState(
+      'grafana_admin_password',
+      this.editing && serviceType === 'grafana'
+    );
+  }
+
+  private toggleFormControlState(controlName: string, disabled: boolean): void {
+    const control = this.serviceForm.get(controlName);
+    if (!control) {
+      return;
+    }
+    if (disabled && control.enabled) {
+      control.disable({ emitEvent: false });
+      return;
+    }
+    if (!disabled && control.disabled) {
+      control.enable({ emitEvent: false });
+    }
+  }
+
   onPlacementChange(selected: string) {
     if (selected === 'label') {
       this.serviceForm.get('count').setValue(null);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 91a5cbced6a..fd81525f009 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -142,7 +142,6 @@ import { NumberWithUnitComponent } from './number-with-unit/number-with-unit.com
 @NgModule({
   imports: [
     CommonModule,
-    ProductiveCardComponent,
     FormsModule,
     ReactiveFormsModule,
     NgbAlertModule,
@@ -186,7 +185,8 @@ import { NumberWithUnitComponent } from './number-with-unit/number-with-unit.com
     TagModule,
     LinkModule,
     LayerModule,
-    ThemeModule
+    ThemeModule,
+    ProductiveCardComponent
   ],
   declarations: [
     SparklineComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
index b1595fbcdf2..3d558fb8c56 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
@@ -17,31 +17,32 @@
     }
   </ng-template>
 
-  <div [cdsStack]="'vertical'" 
-       [gap]="0">
+  <div>
     @if (details && details.length > 0) {
-    <div [cdsStack]="'horizontal'"
-         [gap]="5">
-      @for (detail of getVisibleDetails(); track detail.label) {
-      <div [cdsStack]="'vertical'" 
-           [gap]="2">
-        <label class="cds--type-label-01">{{ detail.label }}</label>
-        <div class="cds--type-body-01">
-          @switch (detail.type) {
-            @case ('status') {
-              <div [cdsStack]="'horizontal'" [gap]="3">
-                <cd-icon [type]="getStatusIcon(detail)"></cd-icon>
-                <span>{{ getDisplayValue(detail.value) }}</span>
-              </div>
-            }
-            
-            @default {
-              <span>{{ getDisplayValue(detail.value) }}</span>
-            }
-          }
+    <div class="cds--grid cds--no-gutter">
+      <div class="cds--row">
+        @for (detail of getVisibleDetails(); track detail.label) {
+        <div class="cds--col">
+          <div [cdsStack]="'vertical'" [gap]="2">
+            <label class="cds--type-label-01">{{ detail.label }}</label>
+            <div class="cds--type-body-01">
+              @switch (detail.type) {
+                @case ('status') {
+                  <div [cdsStack]="'horizontal'" [gap]="3">
+                    <cd-icon [type]="getStatusIcon(detail)"></cd-icon>
+                    <span>{{ getDisplayValue(detail.value) }}</span>
+                  </div>
+                }
+                
+                @default {
+                  <span>{{ getDisplayValue(detail.value) }}</span>
+                }
+              }
+            </div>
+          </div>
         </div>
+        }
       </div>
-      }
     </div>
     }
     <ng-content></ng-content>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts
index a8eb9996aa8..0896ba2a603 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DetailsCardComponent } from './details-card.component';
+import { ProductiveCardComponent } from '../productive-card/productive-card.component';
 
 describe('DetailsCardComponent', () => {
   let component: DetailsCardComponent;
@@ -8,7 +9,8 @@ describe('DetailsCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DetailsCardComponent]
+      declarations: [DetailsCardComponent],
+      imports: [ProductiveCardComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(DetailsCardComponent);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts
index 9b2fad7afb8..cbd62d6f8ef 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts
@@ -43,7 +43,6 @@ export class DetailsCardComponent {
   onEditClick(): void {
     this.editClicked.emit();
   }
-
   getVisibleDetails(): DetailItem[] {
     return (this.details || []).filter((detail) => !detail.hidden);
   }