mgr/dashboard: Fixes removal of custom tags during pool edit

The problem was that previously added custom application tags that were
saved during creation or edit, couldn't be deleted while editing the
updated pool. The custom tags weren't shown in the application drop down.

Now they can be removed and are shown in a sorted way in the application
drop down.

Fixes: https://tracker.ceph.com/issues/41747
Signed-off-by: Stephan Müller <smueller@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts
index f6036b6f83bf2b87677c21668b6a9081251f2712..88d5664d6b6a6445183bf1f021d0d12670df6c8d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts
@@ -3,7 +3,6 @@ import { Validators } from '@angular/forms';
 import { I18n } from '@ngx-translate/i18n-polyfill';
 
 import { SelectMessages } from '../../../shared/components/select/select-messages.model';
-import { SelectOption } from '../../../shared/components/select/select-option.model';
 import { Pool } from '../pool';
 
 export class PoolFormData {
@@ -16,11 +15,8 @@ export class PoolFormData {
     this.poolTypes = ['erasure', 'replicated'];
     this.applications = {
       selected: [],
-      available: [
-        new SelectOption(false, 'cephfs', ''),
-        new SelectOption(false, 'rbd', ''),
-        new SelectOption(false, 'rgw', '')
-      ],
+      default: ['cephfs', 'rbd', 'rgw'],
+      available: [], // Filled during runtime
       validators: [Validators.pattern('[A-Za-z0-9_]+'), Validators.maxLength(128)],
       messages: new SelectMessages(
         {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
index 6efb4bf0793060a8025e02aad45b80711d9844d6..d8c4624d4ee75e6118c1d2c36b77efdfdc9d29f2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
@@ -581,7 +581,7 @@ describe('PoolFormComponent', () => {
       testAddApp('g', ['rgw']);
       testAddApp('b', ['rbd', 'rgw']);
       testAddApp('c', ['cephfs', 'rbd', 'rgw']);
-      testAddApp('something', ['cephfs', 'rbd', 'rgw', 'something']);
+      testAddApp('ownApp', ['cephfs', 'ownApp', 'rbd', 'rgw']);
     });
 
     it('only allows 4 apps to be added to the array', () => {
@@ -1025,7 +1025,7 @@ describe('PoolFormComponent', () => {
       pool.options.compression_max_blob_size = 1024 * 1024;
       pool.options.compression_required_ratio = 0.8;
       pool.flags_names = 'someFlag1,someFlag2';
-      pool.application_metadata = ['rbd', 'rgw'];
+      pool.application_metadata = ['rbd', 'ownApp'];
       pool.quota_max_bytes = 1024 * 1024 * 1024;
       pool.quota_max_objects = 3000;
 
@@ -1070,6 +1070,15 @@ describe('PoolFormComponent', () => {
         });
       });
 
+      it('should include the custom app as valid option', () => {
+        expect(component.data.applications.available.map((app) => app.name)).toEqual([
+          'cephfs',
+          'ownApp',
+          'rbd',
+          'rgw'
+        ]);
+      });
+
       it('set all control values to the given pool', () => {
         expect(form.getValue('name')).toBe(pool.pool_name);
         expect(form.getValue('poolType')).toBe(pool.type);
@@ -1124,7 +1133,7 @@ describe('PoolFormComponent', () => {
           formHelper.setValue('ratio', '').markAsDirty();
           expectValidSubmit(
             {
-              application_metadata: ['rbd', 'rgw'],
+              application_metadata: ['ownApp', 'rbd'],
               compression_max_blob_size: 0,
               compression_min_blob_size: 0,
               compression_required_ratio: 0,
@@ -1139,7 +1148,7 @@ describe('PoolFormComponent', () => {
           formHelper.setValue('mode', 'none').markAsDirty();
           expectValidSubmit(
             {
-              application_metadata: ['rbd', 'rgw'],
+              application_metadata: ['ownApp', 'rbd'],
               compression_mode: 'unset',
               pool: 'somePoolName'
             },

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
index ed3fddf197d67ab51cfa6222b8e01391f46b5ac9..ba58a296140c78f050444965dd0fd62108ef4baa 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
@@ -11,6 +11,7 @@ import { ConfigurationService } from '../../../shared/api/configuration.service'
 import { ErasureCodeProfileService } from '../../../shared/api/erasure-code-profile.service';
 import { PoolService } from '../../../shared/api/pool.service';
 import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
+import { SelectOption } from '../../../shared/components/select/select-option.model';
 import { ActionLabelsI18n, URLVerbs } from '../../../shared/constants/app.constants';
 import { Icons } from '../../../shared/enum/icons.enum';
 import { CdFormGroup } from '../../../shared/forms/cd-form-group';
@@ -177,6 +178,8 @@ export class PoolFormComponent implements OnInit {
       this.initEcp(data[2]);
       if (this.editing) {
         this.initEditMode();
+      } else {
+        this.setAvailableApps();
       }
       this.listenToChanges();
       this.setComplexValidators();
@@ -250,9 +253,16 @@ export class PoolFormComponent implements OnInit {
       }
     });
     this.data.pgs = this.form.getValue('pgNum');
+    this.setAvailableApps(this.data.applications.default.concat(pool.application_metadata));
     this.data.applications.selected = pool.application_metadata;
   }
 
+  private setAvailableApps(apps: string[] = this.data.applications.default) {
+    this.data.applications.available = _.uniq(apps.sort()).map(
+      (x: string) => new SelectOption(false, x, '')
+    );
+  }
+
   private listenToChanges() {
     this.listenToChangesDuringAddEdit();
     if (!this.editing) {