mgr/dashboard: rgw encryption modal and host component cleanup

along with some additional cleanups Signed-off-by: Nizamudeen A <[email protected]>
nizamial09 · Nov 14, 2022 · c31f699 · c31f699
1 parent 2fc1390
commit c31f699
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 49 deletions.
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
@@ -54,8 +54,7 @@
 <ng-template #servicesTpl
              let-value="value">
   <span *ngFor="let instance of value; last as isLast">
-    <span class="badge badge-background-primary" >{{ instance }}</span>
-    <ng-container *ngIf="!isLast">&nbsp;</ng-container>
+    <span class="badge badge-background-primary ms-1" >{{ instance }}</span>
   </span>
 </ng-template>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
@@ -199,7 +199,7 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
       {
         name: $localize`Service Instances`,
         prop: 'service_instances',
-        flexGrow: 1,
+        flexGrow: 1.5,
         cellTemplate: this.servicesTpl
       },
       {
@@ -214,7 +214,7 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
       {
         name: $localize`Status`,
         prop: 'status',
-        flexGrow: 1,
+        flexGrow: 0.8,
         cellTransformation: CellTemplate.badge,
         customTemplateConfig: {
           map: {

diff --git a/...bind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts b/...bind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts
@@ -332,7 +332,7 @@ export class RgwBucketFormComponent extends CdForm implements OnInit, AfterViewC
   }
 
   openConfigModal() {
-    const modalRef = this.modalService.show(RgwConfigModalComponent);
+    const modalRef = this.modalService.show(RgwConfigModalComponent, null, { size: 'lg' });
     modalRef.componentInstance.configForm
       .get('encryptionType')
       .setValue(this.bucketForm.getValue('encryption_type'));

diff --git a/.../mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.html b/.../mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.html
@@ -7,29 +7,33 @@
           #frm="ngForm"
           [formGroup]="configForm">
     <div class="modal-body">
-      <label class="cd-col-form-label">Encryption Type:</label>
-      <div class="custom-control custom-radio custom-control-inline">
-        <input class="custom-control-input"
-               formControlName="encryptionType"
-               id="s3Enabled"
-               type="radio"
-               name="encryptionType"
-               value="AES256">
-        <label class="custom-control-label"
-               for="s3Enabled"
-               i18n>SSE-S3 Encryption</label>
-      </div>
+      <div class="form-group row">
+        <label class="cd-col-form-label required"
+               for="encryptionType"
+               i18n>Encryption Type</label>
+        <div class="col-md-auto custom-checkbox form-check-inline ms-3">
+          <input class="form-check-input"
+                 formControlName="encryptionType"
+                 id="s3Enabled"
+                 type="radio"
+                 name="encryptionType"
+                 value="AES256">
+          <label class="custom-check-label"
+                 for="s3Enabled"
+                 i18n>SSE-S3 Encryption</label>
+        </div>
 
-      <div class="custom-control custom-radio custom-control-inline">
-        <input class="custom-control-input"
-               formControlName="encryptionType"
-               id="kmsEnabled"
-               name="encryptionType"
-               value="aws:kms"
-               type="radio">
-        <label class="custom-control-label"
-               for="kmsEnabled"
-               i18n>SSE-KMS Encryption</label>
+        <div class="col-md-auto custom-checkbox form-check-inline">
+          <input class="form-check-input"
+                 formControlName="encryptionType"
+                 id="kmsEnabled"
+                 name="encryptionType"
+                 value="aws:kms"
+                 type="radio">
+          <label class="custom-check-label"
+                 for="kmsEnabled"
+                 i18n>SSE-KMS Encryption</label>
+        </div>
       </div>
 
       <div *ngIf="configForm.getValue('encryptionType') == 'aws:kms' || configForm.getValue('encryptionType') == 'AES256'">

diff --git a/...nd/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.ts b/...nd/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.ts
@@ -64,7 +64,7 @@ export class RgwConfigModalComponent implements OnInit {
         ]
       ],
       kms_provider: ['vault', Validators.required],
-      encryptionType: [null, Validators.required],
+      encryptionType: ['aws:kms', Validators.required],
       auth_method: [null, Validators.required],
       secret_engine: [null, Validators.required],
       secret_path: ['/'],

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.ts
@@ -1,9 +1,4 @@
-import {
-  Directive,
-  Input,
-  TemplateRef,
-  ViewContainerRef
-} from '@angular/core';
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 
 import { AlertPanelComponent } from '../components/alert-panel/alert-panel.component';
 import { LoadingPanelComponent } from '../components/loading-panel/loading-panel.component';
@@ -13,10 +8,7 @@ import { LoadingStatus } from '../forms/cd-form';
   selector: '[cdFormLoading]'
 })
 export class FormLoadingDirective {
-  constructor(
-    private templateRef: TemplateRef<any>,
-    private viewContainer: ViewContainerRef
-  ) {}
+  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
 
   @Input('cdFormLoading') set cdFormLoading(condition: LoadingStatus) {
     let content: any;
@@ -26,14 +18,16 @@ export class FormLoadingDirective {
     switch (condition) {
       case LoadingStatus.Loading:
         content = this.resolveNgContent($localize`Loading form data...`);
-        this.viewContainer.createComponent(LoadingPanelComponent, {projectableNodes: content});
+        this.viewContainer.createComponent(LoadingPanelComponent, { projectableNodes: content });
         break;
       case LoadingStatus.Ready:
         this.viewContainer.createEmbeddedView(this.templateRef);
         break;
       case LoadingStatus.Error:
         content = this.resolveNgContent($localize`Form data could not be loaded.`);
-        const componentRef = this.viewContainer.createComponent(AlertPanelComponent, {projectableNodes: content});
+        const componentRef = this.viewContainer.createComponent(AlertPanelComponent, {
+          projectableNodes: content
+        });
         (<AlertPanelComponent>componentRef.instance).type = 'error';
         break;
     }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
@@ -121,4 +121,3 @@ legend {
 .fa {
   @extend .fa-fw;
 }
-
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
@@ -5,7 +5,7 @@
 .form-check-input.is-valid {
   border-color: rgba(vv.$primary, 0.8);
 
-  &:checked{
+  &:checked {
     background-color: vv.$primary;
     border-color: rgba(vv.$primary, 0.8);
     box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5);
@@ -94,9 +94,3 @@
 .card-footer button.btn:not(:first-child) {
   margin-left: 5px;
 }
-
-button {
-  &.disabled {
-    pointer-events: none !important;
-  }
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
@@ -96,7 +96,7 @@ cd-modal {
   display: block;
 }
 
-.form-group{
+.form-group {
   @extend .mb-3;
 }