mgr/dashboard: Contact Info should be visible only when Ident channel is checked

Fixes:https://tracker.ceph.com/issues/54133
Signed-off-by: Sarthak0702 <sarthak.0702@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
index f84930dc1dcb6340684517752a0cc25502ef7226..ed3d7b85a765e6f2259a9a03e5759a7938feb190 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
@@ -185,6 +185,19 @@
                        i18n-placeholder>
               </div>
             </div>
+            <div class="form-group row">
+              <label class="cd-col-form-label"
+                     for="organization"
+                     i18n>Organization</label>
+              <div class="cd-col-form-input">
+                <input id="organization"
+                       class="form-control"
+                       type="text"
+                       formControlName="organization"
+                       placeholder="Organization name"
+                       i18n-placeholder>
+              </div>
+            </div>
           </ng-container>
             <legend i18n>Advanced Settings</legend>
             <div class="form-group row">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.spec.ts
index baf43e3ffc90dce40c75790c6f6d27e7a980051b..e2d93c4b4526d01e38fdd49991fc80cbd391ef5b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.spec.ts
@@ -86,22 +86,28 @@ describe('TelemetryComponent', () => {
         fixture.debugElement.nativeElement.querySelector('input[id=contact]');
       const getDescriptionField = () =>
         fixture.debugElement.nativeElement.querySelector('input[id=description]');
+      const checkVisibility = () => {
+        if (component.showContactInfo) {
+          expect(getContactField()).toBeTruthy();
+          expect(getDescriptionField()).toBeTruthy();
+        } else {
+          expect(getContactField()).toBeFalsy();
+          expect(getDescriptionField()).toBeFalsy();
+        }
+      };
 
-      // Initially hidden.
-      expect(getContactField()).toBeFalsy();
-      expect(getDescriptionField()).toBeFalsy();
+      // Initial check.
+      checkVisibility();
 
-      // Show fields.
+      // toggle fields.
       component.toggleIdent();
       fixture.detectChanges();
-      expect(getContactField()).toBeTruthy();
-      expect(getDescriptionField()).toBeTruthy();
+      checkVisibility();
 
-      // Hide fields.
+      // toggle fields again.
       component.toggleIdent();
       fixture.detectChanges();
-      expect(getContactField()).toBeFalsy();
-      expect(getDescriptionField()).toBeFalsy();
+      checkVisibility();
     });
 
     it('should set module enability to true correctly', () => {
@@ -293,7 +299,7 @@ describe('TelemetryComponent', () => {
       });
     });
 
-    it('should submit ', () => {
+    it('should submit', () => {
       component.onSubmit();
       const req1 = httpTesting.expectOne('api/telemetry');
       expect(req1.request.method).toBe('PUT');

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
index 47ebae3be199d7cd784d644f6aa1705be81d6a92..882a2fe3c403637aafe50ca0d9faf4a7ca481846 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
@@ -25,7 +25,8 @@ export class TelemetryComponent extends CdForm implements OnInit {
   licenseAgrmt = false;
   moduleEnabled: boolean;
   options: Object = {};
-  updatedConfig: Object = {};
+  newConfig: Object = {};
+  configResp: object = {};
   previewForm: CdFormGroup;
   requiredFields = [
     'channel_basic',
@@ -36,14 +37,16 @@ export class TelemetryComponent extends CdForm implements OnInit {
     'interval',
     'proxy',
     'contact',
-    'description'
+    'description',
+    'organization'
   ];
+  contactInfofields = ['contact', 'description', 'organization'];
   report: object = undefined;
   reportId: number = undefined;
   sendToUrl = '';
   sendToDeviceUrl = '';
   step = 1;
-  showContactInfo = false;
+  showContactInfo: boolean;
 
   constructor(
     public actionLabels: ActionLabelsI18n,
@@ -68,10 +71,11 @@ export class TelemetryComponent extends CdForm implements OnInit {
         this.moduleEnabled = configResp['enabled'];
         this.sendToUrl = configResp['url'];
         this.sendToDeviceUrl = configResp['device_url'];
+        this.showContactInfo = configResp['channel_ident'];
         this.options = _.pick(resp[0], this.requiredFields);
-        const configs = _.pick(configResp, this.requiredFields);
+        this.configResp = _.pick(configResp, this.requiredFields);
         this.createConfigForm();
-        this.configForm.setValue(configs);
+        this.configForm.setValue(this.configResp);
         this.loadingReady();
       },
       (_error) => {
@@ -177,21 +181,21 @@ export class TelemetryComponent extends CdForm implements OnInit {
     return result;
   }
 
-  private updateChannelsInReport(updatedConfig: Object = {}) {
-    const channels: string[] = this.report['report']['channels'];
+  private updateReportFromConfig(updatedConfig: Object = {}) {
+    // update channels
     const availableChannels: string[] = this.report['report']['channels_available'];
     const updatedChannels = [];
     for (const channel of availableChannels) {
       const key = `channel_${channel}`;
-      // channel unchanged or toggled on
-      if (
-        (!updatedConfig.hasOwnProperty(key) && channels.includes(channel)) ||
-        updatedConfig[key]
-      ) {
+      if (updatedConfig[key]) {
         updatedChannels.push(channel);
       }
     }
     this.report['report']['channels'] = updatedChannels;
+    // update contactInfo
+    for (const contactInfofield of this.contactInfofields) {
+      this.report['report'][contactInfofield] = updatedConfig[contactInfofield];
+    }
   }
 
   private getReport() {
@@ -201,7 +205,7 @@ export class TelemetryComponent extends CdForm implements OnInit {
       (resp: object) => {
         this.report = resp;
         this.reportId = resp['report']['report_id'];
-        this.updateChannelsInReport(this.updatedConfig);
+        this.updateReportFromConfig(this.newConfig);
         this.createPreviewForm();
         this.loadingReady();
         this.step++;
@@ -216,17 +220,22 @@ export class TelemetryComponent extends CdForm implements OnInit {
     this.showContactInfo = !this.showContactInfo;
   }
 
-  updateConfig() {
-    this.updatedConfig = {};
+  buildReport() {
+    this.newConfig = {};
     for (const option of Object.values(this.options)) {
       const control = this.configForm.get(option.name);
-      if (!control.valid) {
+      // Append the option only if they are valid
+      if (control.valid) {
+        this.newConfig[option.name] = control.value;
+      } else {
         this.configForm.setErrors({ cdSubmitButton: true });
         return;
       }
-      // Append the option only if the value has been modified.
-      if (control.dirty && control.valid) {
-        this.updatedConfig[option.name] = control.value;
+    }
+    // reset contact info field  if ident channel is off
+    if (!this.newConfig['channel_ident']) {
+      for (const contactInfofield of this.contactInfofields) {
+        this.newConfig[contactInfofield] = '';
       }
     }
     this.getReport();
@@ -247,21 +256,28 @@ export class TelemetryComponent extends CdForm implements OnInit {
   }
 
   next() {
-    if (this.configForm.pristine) {
-      this.getReport();
-    } else {
-      this.updateConfig();
-    }
+    this.buildReport();
   }
 
   back() {
     this.step--;
   }
 
+  getChangedConfig() {
+    const updatedConfig = {};
+    _.forEach(this.requiredFields, (configField) => {
+      if (!_.isEqual(this.configResp[configField], this.newConfig[configField])) {
+        updatedConfig[configField] = this.newConfig[configField];
+      }
+    });
+    return updatedConfig;
+  }
+
   onSubmit() {
+    const updatedConfig = this.getChangedConfig();
     const observables = [
       this.telemetryService.enable(),
-      this.mgrModuleService.updateConfig('telemetry', this.updatedConfig)
+      this.mgrModuleService.updateConfig('telemetry', updatedConfig)
     ];
 
     observableForkJoin(observables).subscribe(
@@ -283,7 +299,7 @@ export class TelemetryComponent extends CdForm implements OnInit {
         this.previewForm.setErrors({ cdSubmitButton: true });
       },
       () => {
-        this.updatedConfig = {};
+        this.newConfig = {};
         this.router.navigate(['']);
       }
     );