This is an automated email from the ASF dual-hosted git repository.
Aias00 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new 9614041ed7 fix(web-app): clear dependent param value when condition
not met (#2298) (#4304)
9614041ed7 is described below
commit 9614041ed70ab5a5f163afe5e0e3d23aa1e9e2b5
Author: Deep Shekhar Singh <[email protected]>
AuthorDate: Mon Aug 17 12:54:31 2026 +0530
fix(web-app): clear dependent param value when condition not met (#2298)
(#4304)
Signed-off-by: Deep Shekhar Singh <[email protected]>
---
.../monitor-form/monitor-form.component.html | 13 ++++-
.../monitor-form/monitor-form.component.spec.ts | 57 ++++++++++++++++++++++
.../monitor/monitor-form/monitor-form.component.ts | 46 +++++++++--------
3 files changed, 95 insertions(+), 21 deletions(-)
diff --git
a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
index 61f9a18aad..6fc77d30f2 100644
--- a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
+++ b/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>
diff --git
a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts
b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts
index 0b43dad05e..7603f02c09 100644
--- a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts
+++ b/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();
+ });
});
diff --git
a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts
b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts
index 715e664fbe..e695d1dd88 100644
--- a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts
+++ b/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) {
- if (advancedParam.display !== false) {
- this.hasAdvancedParams = true;
- break;
- }
- }
+ this.hasAdvancedParams = this.advancedParams?.some(param =>
param.display !== false) ?? false;
}
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) => {
- if (paramDefine.depend) {
- let fieldValues = new
Map(Object.entries(paramDefine.depend)).get(dependField);
+ this.paramDefines?.forEach((paramDefine, index) => {
+ if (paramDefine.depend && this.params && this.params[index]) {
+ 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) => {
- if (paramDefine.depend) {
- let fieldValues = new
Map(Object.entries(paramDefine.depend)).get(dependField);
+ this.sdDefines?.forEach((paramDefine, index) => {
+ if (paramDefine.depend && this.sdParams && this.sdParams[index]) {
+ 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) => {
- if (advancedParamDefine.depend) {
- let fieldValues = new
Map(Object.entries(advancedParamDefine.depend)).get(dependField);
+ this.advancedParamDefines?.forEach((advancedParamDefine, index) => {
+ if (advancedParamDefine.depend && this.advancedParams &&
this.advancedParams[index]) {
+ 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
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
