mgr/dashboard : Fixed labels issue

fixes : https://tracker.ceph.com/issues/74078
Signed-off-by: Abhishek Desai <abhishek.desai1@ibm.com>

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 73d5f2e80d12a90f6aa426abbdc732319a70fb50..ed526f9baa49786465c71a508849a957d3aedb96 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
@@ -313,11 +313,14 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   }
 
   editAction() {
-    this.hostService.getLabels().subscribe((resp: string[]) => {
-      const host = this.selection.first();
-      const labels = new Set(resp.concat(this.hostService.predefinedLabels));
+    const host = this.selection.first();
+    this.hostService.getLabels().subscribe((resp) => {
+      const hostLabels: string[] = Array.isArray(host['labels'])
+        ? [...(host['labels'] as string[])]
+        : [];
+      const labels = new Set(resp.concat(this.hostService.predefinedLabels).concat(hostLabels));
       const allLabels = Array.from(labels).map((label) => {
-        return { content: label, selected: host['labels'].includes(label) };
+        return { content: label, selected: hostLabels.includes(label) };
       });
       this.cdsModalService.show(FormModalComponent, {
         titleText: $localize`Edit Host: ${host.hostname}`,
@@ -325,7 +328,7 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
           {
             type: 'select-badges',
             name: 'labels',
-            value: host['labels'],
+            value: hostLabels,
             label: $localize`Labels`,
             typeConfig: {
               customBadges: true,
@@ -341,6 +344,11 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
         submitButtonText: $localize`Edit Host`,
         onSubmit: (values: any) => {
           this.hostService.update(host['hostname'], true, values.labels).subscribe(() => {
+            const selectedHost = this.selection.first();
+            if (selectedHost && selectedHost['hostname'] === host.hostname) {
+              host['labels'] = values.labels;
+              Object.assign(selectedHost, host);
+            }
             this.notificationService.show(
               NotificationType.success,
               $localize`Updated Host "${host.hostname}"`

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
index f05ee7abe8c0feb679d923d7bdadc624e5646914..7cda7800b86ecdb0bb8b3663498c3c8671bea1c9 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
@@ -87,7 +87,7 @@
                          [invalidText]="getError(field)"
                          [appendInline]="false"
                          cdDynamicInputCombobox
-                         (updatedItems)="field.typeConfig.options = $event"
+                         (updatedItems)="onLabelsUpdated(field, $event)"
                          [items]="field?.typeConfig?.options"
                          [cdRequiredField]="field?.required === true ? field.label : ''"
                          i18n>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
index 68e10b33e84ccaccba68ecebae16357b50a31895..bd28b8d3388e7961ea0ae72ef99ebe0a1b793a69 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts
@@ -7,6 +7,7 @@ import _ from 'lodash';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { CdFormModalFieldConfig } from '~/app/shared/models/cd-form-modal-field-config';
+import { ComboBoxItem } from '~/app/shared/models/combo-box.model';
 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
 import { FormatterService } from '~/app/shared/services/formatter.service';
 
@@ -136,4 +137,15 @@ export class FormModalComponent extends BaseModal implements OnInit {
     field.setAsyncValidators(validator);
     field.updateValueAndValidity();
   }
+
+  onLabelsUpdated(field: CdFormModalFieldConfig, updatedItems: ComboBoxItem[]) {
+    const control = this.formGroup.get(field.name);
+    const currentValue: string[] = control?.value || [];
+    // Sync selected state based on current form control value to preserve existing selections
+    const itemsWithSelection: ComboBoxItem[] = updatedItems.map((item: ComboBoxItem) => ({
+      ...item,
+      selected: currentValue.includes(item.content)
+    }));
+    field.typeConfig.options = itemsWithSelection;
+  }
 }