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>
(cherry picked from commit 15211a6378a6fee9316f79ba0b27821891527c38)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
		- `this.loading` used in Octopus instead of `this.loadingReady()`

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 1640ad94ed5fb25b38f85cf8c0199fa2fda268b8..77f39ac17bf84ca51ae312e0bfc832c1ba80034a 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
@@ -169,6 +169,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 64cf6561a4c39513e396bda79711113dfd63b5e9..2bc758a4dc4bd839e77ddd378cb5fcf1fd5c7cac 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
@@ -85,22 +85,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', () => {
@@ -175,7 +181,7 @@ describe('TelemetryComponent', () => {
       expect(downloadSpy).toHaveBeenCalledWith(JSON.stringify(reportText, null, 2), filename);
     });
 
-    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 5661908a65531769d177bea8a3f8e663394021f9..53458aedbc9c7da692a3d80e08601f68cc124baf 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
@@ -32,7 +32,8 @@ export class TelemetryComponent implements OnInit {
   loading = false;
   moduleEnabled: boolean;
   options: Object = {};
-  updatedConfig: Object = {};
+  newConfig: Object = {};
+  configResp: object = {};
   previewForm: CdFormGroup;
   requiredFields = [
     'channel_basic',
@@ -42,14 +43,16 @@ export class TelemetryComponent 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(
     private formBuilder: CdFormBuilder,
@@ -74,10 +77,11 @@ export class TelemetryComponent 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.loading = false;
       },
       (_error) => {
@@ -128,21 +132,21 @@ export class TelemetryComponent 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() {
@@ -151,7 +155,7 @@ export class TelemetryComponent implements OnInit {
       (resp: object) => {
         this.report = resp;
         this.reportId = resp['report']['report_id'];
-        this.updateChannelsInReport(this.updatedConfig);
+        this.updateReportFromConfig(this.newConfig);
         this.createPreviewForm();
         this.loading = false;
         this.step++;
@@ -166,17 +170,22 @@ export class TelemetryComponent 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();
@@ -201,21 +210,28 @@ export class TelemetryComponent 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(
@@ -239,7 +255,7 @@ export class TelemetryComponent implements OnInit {
         this.previewForm.setErrors({ cdSubmitButton: true });
       },
       () => {
-        this.updatedConfig = {};
+        this.newConfig = {};
         this.router.navigate(['']);
       }
     );