Merge pull request ceph#58114 from rhcs-dashboard/add-configuration-page-rgw

mgr/dashboard: add a new configuration page in side nav bar  Object > Configuration

Reviewed-by: Ankush Behl <[email protected]>
Reviewed-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.e2e-spec.ts

@@ -31,11 +31,6 @@ describe('RGW buckets page', () => {
       buckets.delete(bucket_name);
     });
 
-    it('should check default encryption is SSE-S3', () => {
-      buckets.navigateTo('create');
-      buckets.checkForDefaultEncryption();
-    });
-
     it('should create bucket with object locking enabled', () => {
       buckets.navigateTo('create');
       buckets.create(bucket_name, BucketsPageHelper.USERS[0], true);

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts

@@ -50,14 +50,6 @@ export class BucketsPageHelper extends PageHelper {
     this.getFirstTableCell(name).should('exist');
   }
 
-  @PageHelper.restrictTo(pages.create.url)
-  checkForDefaultEncryption() {
-    cy.get("a[aria-label='click here']").click();
-    cy.get('cd-modal').within(() => {
-      cy.get('input[id=s3Enabled]').should('be.checked');
-    });
-  }
-
   @PageHelper.restrictTo(pages.index.url)
   edit(name: string, new_owner: string, isLocking = false) {
     this.navigateEdit(name);

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/configuration.e2e-spec.ts

@@ -0,0 +1,36 @@
+import { ConfigurationPageHelper } from './configuration.po';
+
+describe('RGW configuration page', () => {
+  const configurations = new ConfigurationPageHelper();
+
+  beforeEach(() => {
+    cy.login();
+    configurations.navigateTo();
+  });
+
+  describe('breadcrumb and tab tests', () => {
+    it('should open and show breadcrumb', () => {
+      configurations.expectBreadcrumbText('Configuration');
+    });
+
+    it('should show one tab', () => {
+      configurations.getTabsCount().should('eq', 1);
+    });
+
+    it('should show Server-side Encryption Config list tab at first', () => {
+      configurations.getTabText(0).should('eq', 'Server-side Encryption');
+    });
+  });
+
+  describe('create and edit encryption configuration', () => {
+    it('should create configuration', () => {
+      configurations.create('vault', 'agent', 'transit', 'https://localhost:8080');
+      configurations.getFirstTableCell('SSE_KMS').should('exist');
+    });
+
+    it('should edit configuration', () => {
+      configurations.edit('https://localhost:9090');
+      configurations.getDataTables().should('contain.text', 'https://localhost:9090');
+    });
+  });
+});

src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/configuration.po.ts

@@ -0,0 +1,52 @@
+import { PageHelper } from '../page-helper.po';
+
+export class ConfigurationPageHelper extends PageHelper {
+  pages = {
+    index: { url: '#/rgw/configuration', id: 'cd-rgw-configuration-page' }
+  };
+
+  columnIndex = {
+    address: 4
+  };
+
+  create(provider: string, auth_method: string, secret_engine: string, address: string) {
+    cy.contains('button', 'Create').click();
+    this.selectKmsProvider(provider);
+    cy.get('#kms_provider').should('have.class', 'ng-valid');
+    this.selectAuthMethod(auth_method);
+    cy.get('#auth_method').should('have.class', 'ng-valid');
+    this.selectSecretEngine(secret_engine);
+    cy.get('#secret_engine').should('have.class', 'ng-valid');
+    cy.get('#address').type(address);
+    cy.get('#address').should('have.class', 'ng-valid');
+    cy.contains('button', 'Submit').click();
+    this.getFirstTableCell('SSE_KMS').should('exist');
+  }
+
+  edit(new_address: string) {
+    this.navigateEdit('SSE_KMS', true, false);
+    cy.get('#address').clear().type(new_address);
+    cy.get('#address').should('have.class', 'ng-valid');
+    cy.get('#kms_provider').should('be.disabled');
+    cy.contains('button', 'Submit').click();
+    this.getTableCell(this.columnIndex.address, new_address)
+      .parent()
+      .find(`datatable-body-cell:nth-child(${this.columnIndex.address})`)
+      .should(($elements) => {
+        const address = $elements.text();
+        expect(address).to.eq(new_address);
+      });
+  }
+
+  private selectKmsProvider(provider: string) {
+    return this.selectOption('kms_provider', provider);
+  }
+
+  private selectAuthMethod(auth_method: string) {
+    return this.selectOption('auth_method', auth_method);
+  }
+
+  private selectSecretEngine(secret_engine: string) {
+    return this.selectOption('secret_engine', secret_engine);
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-bucket-encryption.ts

@@ -1,7 +1,37 @@
-export class RgwBucketEncryptionModel {
-  kmsProviders = ['vault'];
-  authMethods = ['token', 'agent'];
-  secretEngines = ['kv', 'transit'];
-  sse_s3 = 'AES256';
-  sse_kms = 'aws:kms';
+enum KmsProviders {
+  Vault = 'vault'
 }
+
+enum AuthMethods {
+  Token = 'token',
+  Agent = 'agent'
+}
+
+enum SecretEngines {
+  KV = 'kv',
+  Transit = 'transit'
+}
+
+enum sseS3 {
+  SSE_S3 = 'AES256'
+}
+
+enum sseKms {
+  SSE_KMS = 'aws:kms'
+}
+
+interface RgwBucketEncryptionModel {
+  kmsProviders: KmsProviders[];
+  authMethods: AuthMethods[];
+  secretEngines: SecretEngines[];
+  SSE_S3: sseS3;
+  SSE_KMS: sseKms;
+}
+
+export const rgwBucketEncryptionModel: RgwBucketEncryptionModel = {
+  kmsProviders: [KmsProviders.Vault],
+  authMethods: [AuthMethods.Token, AuthMethods.Agent],
+  secretEngines: [SecretEngines.KV, SecretEngines.Transit],
+  SSE_S3: sseS3.SSE_S3,
+  SSE_KMS: sseKms.SSE_KMS
+};

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html

@@ -296,12 +296,11 @@
                      name="encryption_enabled"
                      formControlName="encryption_enabled"
                      type="checkbox"
-                     [attr.disabled]="!kmsVaultConfig && !s3VaultConfig ? true : null"/>
+                     [attr.disabled]="!kmsConfigured && !s3Configured ? true : null"/>
               <cd-help-text aria-label="encryption helper">
                 <span i18n>Enables encryption for the objects in the bucket.
                     To enable encryption on a bucket you need to set the configuration values for SSE-S3 or SSE-KMS.
-                    To set the configuration values <a href="#/rgw/bucket/create"
-                                                       (click)="openConfigModal()"
+                    To set the configuration values <a href="#/rgw/configuration"
                                                        aria-label="click here">Click here</a></span>
               </cd-help-text>
             </div>
@@ -317,10 +316,11 @@
                          type="radio"
                          name="encryption_type"
                          value="AES256"
-                         [attr.disabled]="!s3VaultConfig ? true : null">
+                         [attr.disabled]="!s3Configured ? true : null">
                   <label class="form-control-label"
+                         [ngClass]="{'text-muted': !s3Configured}"
                          for="sse_S3_enabled"
-                         i18n>SSE-S3 Encryption</label>
+                         i18n>SSE-S3</label>
                 </div>
               </div>
             </div>
@@ -333,9 +333,10 @@
                          id="kms_enabled"
                          name="encryption_type"
                          value="aws:kms"
-                         [attr.disabled]="!kmsVaultConfig ? true : null"
+                         [attr.disabled]="!kmsConfigured ? true : null"
                          type="radio">
                   <label class="form-control-label"
+                         [ngClass]="{'text-muted': !kmsConfigured}"
                          for="kms_enabled"
                          i18n>Connect to an external key management service</label>
                 </div>

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts

@@ -25,15 +25,14 @@ import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { CdValidators } from '~/app/shared/forms/cd-validators';
 import { ModalService } from '~/app/shared/services/modal.service';
 import { NotificationService } from '~/app/shared/services/notification.service';
-import { RgwBucketEncryptionModel } from '../models/rgw-bucket-encryption';
+import { rgwBucketEncryptionModel } from '../models/rgw-bucket-encryption';
 import { RgwBucketMfaDelete } from '../models/rgw-bucket-mfa-delete';
 import {
   AclPermissionsType,
   RgwBucketAclPermissions as aclPermission,
   RgwBucketAclGrantee as Grantee
 } from './rgw-bucket-acl-permissions.enum';
 import { RgwBucketVersioning } from '../models/rgw-bucket-versioning';
-import { RgwConfigModalComponent } from '../rgw-config-modal/rgw-config-modal.component';
 import { BucketTagModalComponent } from '../bucket-tag-modal/bucket-tag-modal.component';
 import { TextAreaJsonFormatterService } from '~/app/shared/services/text-area-json-formatter.service';
 import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
@@ -44,8 +43,7 @@ import { TextAreaXmlFormatterService } from '~/app/shared/services/text-area-xml
 @Component({
   selector: 'cd-rgw-bucket-form',
   templateUrl: './rgw-bucket-form.component.html',
-  styleUrls: ['./rgw-bucket-form.component.scss'],
-  providers: [RgwBucketEncryptionModel]
+  styleUrls: ['./rgw-bucket-form.component.scss']
 })
 export class RgwBucketFormComponent extends CdForm implements OnInit, AfterViewChecked {
   @ViewChild('bucketPolicyTextArea')
@@ -64,8 +62,8 @@ export class RgwBucketFormComponent extends CdForm implements OnInit, AfterViewC
   isVersioningAlreadyEnabled = false;
   isMfaDeleteAlreadyEnabled = false;
   icons = Icons;
-  kmsVaultConfig = false;
-  s3VaultConfig = false;
+  kmsConfigured = false;
+  s3Configured = false;
   tags: Record<string, string>[] = [];
   dirtyTags = false;
   tagConfig = [
@@ -97,7 +95,6 @@ export class RgwBucketFormComponent extends CdForm implements OnInit, AfterViewC
     private modalService: ModalService,
     private rgwUserService: RgwUserService,
     private notificationService: NotificationService,
-    private rgwEncryptionModal: RgwBucketEncryptionModel,
     private textAreaJsonFormatterService: TextAreaJsonFormatterService,
     private textAreaXmlFormatterService: TextAreaXmlFormatterService,
     public actionLabels: ActionLabelsI18n,
@@ -187,15 +184,20 @@ export class RgwBucketFormComponent extends CdForm implements OnInit, AfterViewC
       )
     );
 
-    this.kmsProviders = this.rgwEncryptionModal.kmsProviders;
+    this.kmsProviders = rgwBucketEncryptionModel.kmsProviders;
     this.rgwBucketService.getEncryptionConfig().subscribe((data) => {
-      this.kmsVaultConfig = data[0];
-      this.s3VaultConfig = data[1];
-      if (this.kmsVaultConfig && this.s3VaultConfig) {
+      if (data['SSE_KMS']?.length > 0) {
+        this.kmsConfigured = true;
+      }
+      if (data['SSE_S3']?.length > 0) {
+        this.s3Configured = true;
+      }
+      // Set the encryption type based on the configurations
+      if (this.kmsConfigured && this.s3Configured) {
         this.bucketForm.get('encryption_type').setValue('');
-      } else if (this.kmsVaultConfig) {
+      } else if (this.kmsConfigured) {
         this.bucketForm.get('encryption_type').setValue('aws:kms');
-      } else if (this.s3VaultConfig) {
+      } else if (this.s3Configured) {
         this.bucketForm.get('encryption_type').setValue('AES256');
       } else {
         this.bucketForm.get('encryption_type').setValue('');
@@ -459,13 +461,6 @@ export class RgwBucketFormComponent extends CdForm implements OnInit, AfterViewC
     this.bucketForm.updateValueAndValidity();
   }
 
-  openConfigModal() {
-    const modalRef = this.modalService.show(RgwConfigModalComponent, null, { size: 'lg' });
-    modalRef.componentInstance.configForm
-      .get('encryptionType')
-      .setValue(this.bucketForm.getValue('encryption_type') || 'AES256');
-  }
-
   showTagModal(index?: number) {
     const modalRef = this.modalService.show(BucketTagModalComponent);
     const modalComponent = modalRef.componentInstance as BucketTagModalComponent;

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-details/rgw-config-details.component.html

@@ -0,0 +1,17 @@
+<ng-container *ngIf="selection">
+  <nav ngbNav
+       #nav="ngbNav"
+       id="tabset-config-details"
+       class="nav-tabs"
+       cdStatefulTab="config-details">
+    <ng-container ngbNavItem="details">
+      <a ngbNavLink
+         i18n>Details</a>
+      <ng-template ngbNavContent>
+        <cd-table-key-value [data]="transformedData">
+        </cd-table-key-value>
+      </ng-template>
+    </ng-container>
+  </nav>
+  <div [ngbNavOutlet]="nav"></div>
+</ng-container>

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-details/rgw-config-details.component.scss

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RgwConfigDetailsComponent } from './rgw-config-details.component';
+
+describe('RgwConfigDetailsComponent', () => {
+  let component: RgwConfigDetailsComponent;
+  let fixture: ComponentFixture<RgwConfigDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RgwConfigDetailsComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RgwConfigDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});