wyl/hertzbeat
1
0
Fork 0
mirror of https://github.com/dromara/hertzbeat.git synced 2026-09-17 09:40:58 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Deep Shekhar Singh <deepshekhar0306@gmail.com>
This commit is contained in:
Deep Shekhar Singh
2026-08-17 15:24:31 +08:00
committed by GitHub
parent 50ee6b1178
commit 9614041ed7
3 changed files with 95 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
+12 -1
View File
@@ -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
+57
View File
@@ -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
+26 -20
View File
@@ -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