mgr/dashboard: Fix service form to take into account labels

Fixes https://tracker.ceph.com/issues/76215

- placement label for services takes only a single label
- when multiple labels or an array of labels is passed the service was not getting created

Signed-off-by: Afreen Misbah <afreen@ibm.com>
(cherry picked from commit 2cb8fafb73cabe7181a402ec7bd89d11b5a4b635)

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 8a158c229f441bfb06f4efe917f4c96c62f56330..d7cb9ddd58323286a187c1af1a83779b4b9b27d2 100644 (file)
--- 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
@@ -322,7 +322,7 @@
       @if (hostsAndLabels$ | async; as data) {
       @if (!serviceForm.controls.unmanaged.value && serviceForm.controls.placement.value === 'label') {
       <div class="form-item">
-        <cds-combo-box type="multi"
+        <cds-combo-box type="single"
                        selectionFeedback="top-after-reopen"
                        label="Label"
                        cdRequiredField="Label"
@@ -331,9 +331,7 @@
                        [appendInline]="true"
                        [items]="data.labels"
                        [invalid]="serviceForm.controls.label.invalid && serviceForm.controls.label.dirty"
-                       [invalidText]="requiredFieldLabel"
-                       (selected)="multiSelector($event, 'label')"
-                       i18n>
+                       [invalidText]="requiredFieldLabel">
           <cds-dropdown-list></cds-dropdown-list>
         </cds-combo-box>
         <ng-template #requiredFieldLabel>
@@ -354,7 +352,7 @@
                        id="hosts"
                        [appendInline]="true"
                        [items]="data.hosts"
-                       (selected)="multiSelector($event, 'hosts')"
+                       (selected)="multiSelector($event)"
                        i18n>
           <cds-dropdown-list></cds-dropdown-list>
         </cds-combo-box>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.spec.ts
index 8247c26a91877990c289a0ce3c719a10686222ca..9a4ab4a9f26c6ef7b06ec4d0830a5cf9de3e89bb 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.spec.ts
@@ -100,15 +100,18 @@ describe('ServiceFormComponent', () => {
       });
     });
 
-    it('should test placement (label)', () => {
+    it('should test placement (label) with single select value', () => {
+      // placement labels take only single value
       formHelper.setValue('service_type', 'mgr');
       formHelper.setValue('placement', 'label');
-      formHelper.setValue('label', [{ content: 'foo', selected: true }]);
+      formHelper.setValue('label', 'foo');
+
       component.onSubmit();
+
       expect(cephServiceService.create).toHaveBeenCalledWith({
         service_type: 'mgr',
         placement: {
-          label: ['foo']
+          label: 'foo'
         },
         unmanaged: false
       });

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 6577646dde72e7fe77c2070df91fe52dc70901a6..d63944e242654e103fb61d3082c9b93a34bc8489 100644 (file)
--- 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
@@ -72,7 +72,6 @@ export class ServiceFormComponent extends CdForm implements OnInit {
   resource: string;
   serviceTypes: string[] = [];
   serviceIds: string[] = [];
-  selectedLabels: string[] = [];
   selectedHosts: string[] = [];
   labels: string[];
   labelClick = new Subject<string>();
@@ -1271,9 +1270,9 @@ export class ServiceFormComponent extends CdForm implements OnInit {
           }
           break;
         case 'label':
-          serviceSpec['placement']['label'] = values['label']
-            .filter((label: { content: string; selected: boolean }) => label.selected)
-            .map((label: { content: string }) => label.content);
+          if (!_.isEmpty(values['label'])) {
+            serviceSpec['placement']['label'] = values['label']?.content;
+          }
           break;
       }
       if (_.isNumber(values['count']) && values['count'] > 0) {
@@ -1406,9 +1405,8 @@ export class ServiceFormComponent extends CdForm implements OnInit {
     });
   }
 
-  multiSelector(event: any, field: 'label' | 'hosts') {
-    if (field === 'hosts') this.selectedHosts = event.map((host: any) => host.content);
-    else this.selectedLabels = event.map((label: any) => label.content);
+  multiSelector(event: any) {
+    this.selectedHosts = event.map((host: any) => host.content);
   }
 
   get isPrefixedNamedService(): boolean {