fix(web-app): clear dependent param value when condition not met (#2298) (#4304)

Signed-off-by: Deep Shekhar Singh <deepshekhar0306@gmail.com>

web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html

@@ -133,7 +133,18 @@
                 >{{ paramDefine.name }}
               </nz-form-label>
               <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
-                <app-form-field [item]="paramDefine" [name]="paramDefine.field" [(ngModel)]="advancedParams[i].paramValue" />
+                <app-form-field
+                  [item]="paramDefine"
+                  [name]="paramDefine.field"
+                  [(ngModel)]="advancedParams[i].paramValue"
+                  (ngModelChange)="
+                    paramDefine.type === 'boolean'
+                      ? onParamBooleanChanged($event, paramDefine.field)
+                      : paramDefine.type === 'radio'
+                      ? onDependChanged($event, paramDefine.field)
+                      : null
+                  "
+                />
               </nz-form-control>
             </nz-form-item>
           </ng-container>

web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts

@@ -22,6 +22,8 @@ import { FormsModule } from '@angular/forms';
 import { configureShallowTest } from '@testing';
 
 import { Monitor } from '../../../pojo/Monitor';
+import { Param } from '../../../pojo/Param';
+import { ParamDefine } from '../../../pojo/ParamDefine';
 import { MonitorFormComponent } from './monitor-form.component';
 
 describe('MonitorFormComponent', () => {
@@ -42,4 +44,59 @@ describe('MonitorFormComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should reset dependent paramValue to null and set display to false when dependency is not met', () => {
+    const payloadDefine = new ParamDefine();
+    payloadDefine.field = 'payload';
+    payloadDefine.name = 'Payload';
+    payloadDefine.type = 'textarea';
+    (payloadDefine as any).depend = {
+      httpMethod: ['POST', 'PUT']
+    };
+
+    const payloadParam = new Param();
+    payloadParam.field = 'payload';
+    payloadParam.paramValue = '{"test": "data"}';
+    payloadParam.display = true;
+
+    component.paramDefines = [];
+    component.params = [];
+    component.sdDefines = [];
+    component.sdParams = [];
+    component.advancedParamDefines = [payloadDefine];
+    component.advancedParams = [payloadParam];
+
+    component.onDependChanged('GET', 'httpMethod');
+
+    expect(payloadParam.display).toBeFalse();
+    expect(payloadParam.paramValue).toBeNull();
+    expect(component.hasAdvancedParams).toBeFalse();
+  });
+
+  it('should set display to true when dependency is met', () => {
+    const payloadDefine = new ParamDefine();
+    payloadDefine.field = 'payload';
+    payloadDefine.name = 'Payload';
+    payloadDefine.type = 'textarea';
+    (payloadDefine as any).depend = {
+      httpMethod: ['POST', 'PUT']
+    };
+
+    const payloadParam = new Param();
+    payloadParam.field = 'payload';
+    payloadParam.paramValue = null;
+    payloadParam.display = false;
+
+    component.paramDefines = [];
+    component.params = [];
+    component.sdDefines = [];
+    component.sdParams = [];
+    component.advancedParamDefines = [payloadDefine];
+    component.advancedParams = [payloadParam];
+
+    component.onDependChanged('POST', 'httpMethod');
+
+    expect(payloadParam.display).toBeTrue();
+    expect(component.hasAdvancedParams).toBeTrue();
+  });
 });

web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts

@@ -76,19 +76,18 @@ export class MonitorFormComponent implements OnChanges {
     }
 
     if (changes.advancedParams && changes.advancedParams.currentValue !== changes.advancedParams.previousValue) {
-      for (const advancedParam of changes.advancedParams.currentValue) {
+      this.hasAdvancedParams = this.advancedParams?.some(param => param.display !== false) ?? false;
-        if (advancedParam.display !== false) {
-          this.hasAdvancedParams = true;
-          break;
-        }
-      }
     }
     if (changes.paramDefines && changes.paramDefines.currentValue !== changes.paramDefines.previousValue) {
       changes.paramDefines.currentValue.forEach((paramDefine: any) => {
+        const paramVal =
+          this.paramValueMap?.get(paramDefine.field)?.paramValue ??
+          this.params?.find(p => p.field === paramDefine.field)?.paramValue ??
+          paramDefine.defaultValue;
         if (paramDefine.type == 'radio') {
-          this.onDependChanged(this.paramValueMap?.get(paramDefine.field)?.paramValue, paramDefine.field);
+          this.onDependChanged(paramVal, paramDefine.field);
         } else if (paramDefine.type == 'boolean') {
-          this.onParamBooleanChanged(this.paramValueMap?.get(paramDefine.field)?.paramValue, paramDefine.field);
+          this.onParamBooleanChanged(paramVal, paramDefine.field);
         }
       });
     }
@@ -232,39 +231,46 @@ export class MonitorFormComponent implements OnChanges {
   }
 
   onDependChanged(dependValue: string, dependField: string) {
-    this.paramDefines.forEach((paramDefine, index) => {
+    this.paramDefines?.forEach((paramDefine, index) => {
-      if (paramDefine.depend) {
+      if (paramDefine.depend && this.params && this.params[index]) {
-        let fieldValues = new Map(Object.entries(paramDefine.depend)).get(dependField);
+        const fieldValues = new Map(Object.entries(paramDefine.depend)).get(dependField);
         if (fieldValues) {
-          this.params[index].display = false;
           if (fieldValues.map(String).includes(dependValue)) {
             this.params[index].display = true;
+          } else {
+            this.params[index].display = false;
+            this.params[index].paramValue = null;
           }
         }
       }
     });
-    this.sdDefines.forEach((paramDefine, index) => {
+    this.sdDefines?.forEach((paramDefine, index) => {
-      if (paramDefine.depend) {
+      if (paramDefine.depend && this.sdParams && this.sdParams[index]) {
-        let fieldValues = new Map(Object.entries(paramDefine.depend)).get(dependField);
+        const fieldValues = new Map(Object.entries(paramDefine.depend)).get(dependField);
         if (fieldValues) {
-          this.sdParams[index].display = false;
           if (fieldValues.map(String).includes(dependValue)) {
             this.sdParams[index].display = true;
+          } else {
+            this.sdParams[index].display = false;
+            this.sdParams[index].paramValue = null;
           }
         }
       }
     });
-    this.advancedParamDefines.forEach((advancedParamDefine, index) => {
+    this.advancedParamDefines?.forEach((advancedParamDefine, index) => {
-      if (advancedParamDefine.depend) {
+      if (advancedParamDefine.depend && this.advancedParams && this.advancedParams[index]) {
-        let fieldValues = new Map(Object.entries(advancedParamDefine.depend)).get(dependField);
+        const fieldValues = new Map(Object.entries(advancedParamDefine.depend)).get(dependField);
         if (fieldValues) {
-          this.advancedParams[index].display = false;
           if (fieldValues.map(String).includes(dependValue)) {
             this.advancedParams[index].display = true;
+          } else {
+            this.advancedParams[index].display = false;
+            this.advancedParams[index].paramValue = null;
           }
         }
       }
     });
+    this.hasAdvancedParams = this.advancedParams?.some(param => param.display !== false) ?? false;
   }
 
   //start grafana