From dcc6d54a2dba84d0dcab07a230428abc9cb8af5b Mon Sep 17 00:00:00 2001
From: Wyh-max-star <2310137@mail.nankai.edu.cn>
Date: Thu, 18 Jun 2026 19:14:57 +0800
Subject: [PATCH] [web]bugfix: clear request body when http method changes to
 GET

---
 .../monitor-form.component.spec.ts            | 53 ++++++++++++++-----
 .../monitor-form/monitor-form.component.ts    | 15 ++++++
 2 files changed, 56 insertions(+), 12 deletions(-)

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 9a3dbd6e288..5c5940ede32 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
@@ -17,27 +17,56 @@
  * under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { MonitorFormComponent } from './monitor-form.component';
 
 describe('MonitorFormComponent', () => {
   let component: MonitorFormComponent;
-  let fixture: ComponentFixture<MonitorFormComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [MonitorFormComponent]
-    }).compileComponents();
-  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MonitorFormComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    component = new MonitorFormComponent(
+      {
+        info: () => undefined,
+        error: () => undefined
+      } as any,
+      {
+        fanyi: (key: string) => key
+      } as any
+    );
+    component.monitor = { name: 'api monitor', scheduleType: 'interval' } as any;
+    component.collector = '';
+    component.sdParams = [];
+    component.paramDefines = [];
+    component.sdDefines = [];
+    component.advancedParamDefines = [{ depend: { httpMethod: ['POST'] } } as any];
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should clear payload when httpMethod changes to a method without body', () => {
+    component.advancedParams = [{ field: 'payload', paramValue: 'old body' } as any];
+
+    component.onDependChanged('GET', 'httpMethod');
+
+    expect(component.advancedParams[0].paramValue).toBe('');
+  });
+
+  it('should keep payload when httpMethod changes to POST-like methods', () => {
+    component.advancedParams = [{ field: 'payload', paramValue: 'old body' } as any];
+
+    component.onDependChanged('POST', 'httpMethod');
+
+    expect(component.advancedParams[0].paramValue).toBe('old body');
+  });
+
+  it('should clear payload before submitting a GET monitor', () => {
+    component.params = [{ field: 'httpMethod', paramValue: 'GET' } as any];
+    component.advancedParams = [{ field: 'payload', paramValue: 'old body' } as any];
+    spyOn(component.formSubmit, 'emit');
+
+    component.onSubmit({ invalid: false } as any);
+
+    expect(component.advancedParams[0].paramValue).toBe('');
+  });
 });
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 715e664fbea..c01e9387646 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
@@ -120,6 +120,7 @@ export class MonitorFormComponent implements OnChanges {
         param.paramValue = (param.paramValue as string).trim();
       }
     });
+    this.clearPayloadIfHttpMethodHasNoBody(this.params.find(param => param.field === 'httpMethod')?.paramValue);
 
     // Set monitor.instance to host param value, let backend handle the port concatenation
     const hostParam = this.params.find(param => param.field === 'host');
@@ -170,6 +171,7 @@ export class MonitorFormComponent implements OnChanges {
         param.paramValue = (param.paramValue as string).trim();
       }
     });
+    this.clearPayloadIfHttpMethodHasNoBody(this.params.find(param => param.field === 'httpMethod')?.paramValue);
 
     // Set monitor.instance to host param value, let backend handle the port concatenation
     const hostParam = this.params.find(param => param.field === 'host');
@@ -265,6 +267,19 @@ export class MonitorFormComponent implements OnChanges {
         }
       }
     });
+    if (dependField === 'httpMethod') {
+      this.clearPayloadIfHttpMethodHasNoBody(dependValue);
+    }
+  }
+
+  private clearPayloadIfHttpMethodHasNoBody(httpMethod: unknown): void {
+    if (httpMethod == null || ['POST', 'PUT', 'PATCH'].includes(String(httpMethod).toUpperCase())) {
+      return;
+    }
+    const payloadParam = this.advancedParams?.find(param => param.field === 'payload');
+    if (payloadParam) {
+      payloadParam.paramValue = '';
+    }
   }
 
   //start grafana