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>

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 648b0282202d39737a63d88c0dd34755904096d7..c7552e233e620d9b434c35356ea4ce5c9b5013e2 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 2490f993d497ab534ecc679d97399477bc47c4e3..e3ea965b0d3a02dd0da8d475c034af5fee690033 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
@@ -105,15 +105,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 6ecb3ba29158b58515db427de13e09358297986d..03025cce416e203af8791479b811a4777eb7083a 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
@@ -80,7 +80,6 @@ export class ServiceFormComponent extends CdForm implements OnInit {
   resource: string;
   serviceTypes: string[] = [];
   serviceIds: string[] = [];
-  selectedLabels: string[] = [];
   selectedHosts: string[] = [];
   labels: string[];
   labelClick = new Subject<string>();
@@ -1355,9 +1354,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) {
@@ -1499,9 +1498,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 {