mgr/dashboard: rgw encryption modal and host component cleanup

along with some additional cleanups

Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit c31f699bd78d54b8cdab52e78bec3044c99ce4d7)

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
index aef7697da2f204685eb16027936ea05331a8aef5..160962d666f52e2d0d25b8439ece272e7a11445d 100644 (file)
--- 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
index 73459a364d50ef2dba6c60c7d233cce3d0818cde..9d5e67a897dd3f9c9a2c7bbe1b3ab0196f074aba 100644 (file)
--- 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/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts
index aecb76925ccf5eedb470d28d5530c133e8491d1d..91449c7d3d8880b75f2ecdb43b02517f2a810906 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts
+++ b/src/pybind/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/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.html
index 50d1a6e9e5d8ae9f4a81808126cedd6ad46fd9ac..5ad6520e26c75200879222bb0af740b1f5c9bb77 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.html
+++ b/src/pybind/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/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.ts
index bc181a7605d59f1b5824ec257a00bd010489ca5a..de1541a680fe0fd36f6ef50a56e712f74346a880 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-config-modal/rgw-config-modal.component.ts
+++ b/src/pybind/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
index 47decd6a99b031ee8e81525a26b68230fe8b436a..73b4dcb9c57f2eda9d7890f016ce60d287bf9b27 100644 (file)
--- 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
index d1410e332b61884c8d386b5ccd5d808d0026ea0a..e65f2f56acfbbfd38906a8d2cefb53cdf17de4c2 100644 (file)
--- 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
index 0503c1d50019ab0dfbf75a22c3b464e986ae09d3..5b9789b3162d3bc76aa154e4e7f6379396a5c96b 100644 (file)
--- 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
index 5ca20012f5b2cba3cc3e869b4045d9dba657d401..26edbd11264f0546f4c4d85828440109dc07b793 100644 (file)
--- 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;
 }