[web-app] bugfix-监控列表分页问题

manager/src/main/java/com/usthe/manager/controller/MonitorController.java

@@ -40,7 +40,7 @@ public class MonitorController {
     public ResponseEntity<Message<Void>> addNewMonitor(@Valid @RequestBody MonitorDto monitorDto) {
         // 校验请求数据
         monitorService.validate(monitorDto, false);
-        if (monitorDto.getDetected()) {
+        if (monitorDto.isDetected()) {
             // 进行探测
             monitorService.detectMonitor(monitorDto.getMonitor(), monitorDto.getParams());
         }
@@ -53,7 +53,7 @@ public class MonitorController {
     public ResponseEntity<Message<Void>> modifyMonitor(@Valid @RequestBody MonitorDto monitorDto) {
         // 校验请求数据
         monitorService.validate(monitorDto, true);
-        if (monitorDto.getDetected()) {
+        if (monitorDto.isDetected()) {
             // 进行探测
             monitorService.detectMonitor(monitorDto.getMonitor(), monitorDto.getParams());
         }

manager/src/main/java/com/usthe/manager/pojo/dto/MonitorDto.java

@@ -41,5 +41,5 @@ public class MonitorDto {
      * 是否探测
      */
     @ApiModelProperty(value = "是否进行探测", accessMode = READ_WRITE, position = 2)
-    private Boolean detected;
+    private boolean detected;
 }

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

@@ -37,6 +37,8 @@ export class MonitorEditComponent implements OnInit {
   ngOnInit(): void {
     this.route.paramMap.pipe(
       switchMap((paramMap: ParamMap) => {
+        this.isSpinning = false;
+        this.passwordVisible = false;
         let id = paramMap.get("monitorId");
         this.monitor.id = Number(id);
         // 查询监控信息
@@ -51,7 +53,7 @@ export class MonitorEditComponent implements OnInit {
           });
         }
         this.params = message.data.params;
-        this.detected = message.data.detected;
+        this.detected = message.data.detected? message.data.detected : true;
       } else {
         console.warn(message.msg);
         this.notifySvc.error("查询异常，此监控不存在", message.msg);
@@ -132,7 +134,7 @@ export class MonitorEditComponent implements OnInit {
       "params": this.params
     };
     this.isSpinning = true;
-    this.monitorSvc.editMonitor(detectMonitor)
+    this.monitorSvc.detectMonitor(detectMonitor)
       .subscribe(message => {
         this.isSpinning = false;
         if (message.code === 0) {

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

@@ -7,7 +7,7 @@
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
     <i nz-icon nzType="monitor"></i>
-    <span>监控列表 {{app?app.toUpperCase() : ""}}</span>
+    <span>{{app?app.toUpperCase() : ""}} 监控列表</span>
   </nz-breadcrumb-item>
 </nz-breadcrumb>
 <nz-divider></nz-divider>
@@ -36,16 +36,17 @@
 </button>
 
 <nz-table #fixedTable [nzData]="monitors"
-          [nzPageIndex]="pageIndex" [nzPageSize]="pageSize"
+          [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total"
+          nzFrontPagination ="false"
           [nzLoading] = "tableLoading"
           nzShowSizeChanger
-          [nzTotal]="pageTotal"
           [nzShowTotal]="rangeTemplate"
           [nzPageSizeOptions]="[8,15,25]"
+          (nzQueryParams)="onTablePageChange($event)"
           nzShowPagination = "true" [nzScroll]="{ x: '1150px', y: '1240px' }">
   <thead>
   <tr>
-    <th nzAlign="center" nzLeft nzWidth="50px" [nzChecked]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
+    <th nzAlign="center" nzLeft nzWidth="60px" [nzChecked]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
     <th nzAlign="center">监控名称</th>
     <th nzAlign="center">监控状态</th>
     <th nzAlign="center">监控主机Host</th>
@@ -81,5 +82,5 @@
 </nz-table>
 
 <ng-template #rangeTemplate>
-  总量 {{ pageTotal }}
+  总量 {{ total }}
 </ng-template>

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

@@ -6,6 +6,7 @@ import {Page} from "../../../pojo/Page";
 import {NzModalService} from "ng-zorro-antd/modal";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {NzMessageService} from "ng-zorro-antd/message";
+import {NzTableQueryParams} from "ng-zorro-antd/table";
 
 @Component({
   selector: 'app-monitor-list',
@@ -25,7 +26,7 @@ export class MonitorListComponent implements OnInit {
   app!: string;
   pageIndex: number = 1;
   pageSize: number = 8;
-  pageTotal: number = 0;
+  total: number = 0;
   monitors!: Monitor[];
   pageMonitors!: Page<Monitor>;
   tableLoading: boolean = true;
@@ -35,11 +36,13 @@ export class MonitorListComponent implements OnInit {
     this.route.queryParamMap
       .subscribe(paramMap => {
         this.app = paramMap.get("app") || '';
-        this.initMonitorTable();
+        this.pageIndex = 1;
+        this.pageSize = 8;
+        this.loadMonitorTable();
       });
   }
 
-  initMonitorTable() {
+  loadMonitorTable() {
     let monitorInit$ = this.monitorSvc.getMonitors(this.app, this.pageIndex - 1, this.pageSize)
       .subscribe(message => {
         this.tableLoading = false;
@@ -47,7 +50,7 @@ export class MonitorListComponent implements OnInit {
           this.pageMonitors = message.data;
           this.monitors = this.pageMonitors.content;
           this.pageIndex = this.pageMonitors.number + 1;
-          this.pageTotal = this.pageMonitors.totalElements;
+          this.total = this.pageMonitors.totalElements;
         } else {
           console.warn(message.msg);
         }
@@ -123,7 +126,7 @@ export class MonitorListComponent implements OnInit {
           deleteMonitors$.unsubscribe();
         if (message.code === 0) {
           this.notifySvc.success("删除成功！", "");
-          this.initMonitorTable();
+          this.loadMonitorTable();
         } else {
           this.notifySvc.error("删除失败！", message.msg);
         }
@@ -154,5 +157,15 @@ export class MonitorListComponent implements OnInit {
   }
   // end: 列表多选逻辑
 
+  /**
+   * 分页回调
+   * @param params 页码信息
+   */
+  onTablePageChange(params: NzTableQueryParams) {
+    const { pageSize, pageIndex, sort, filter } = params;
+    this.pageIndex = pageIndex;
+    this.pageSize = pageSize;
+    this.loadMonitorTable();
+  }
 
 }

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

@@ -36,9 +36,12 @@ export class MonitorNewComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    const paramDefine$ = this.route.queryParamMap.pipe(
+    this.route.queryParamMap.pipe(
       switchMap((paramMap: ParamMap) => {
         this.monitor.app = paramMap.get("app") || '';
+        this.detected = true;
+        this.passwordVisible = false;
+        this.isSpinning = false;
         return this.appDefineSvc.getAppParamsDefine(this.monitor.app);
       })
     ).subscribe(message => {
@@ -57,7 +60,6 @@ export class MonitorNewComponent implements OnInit {
       } else {
         console.warn(message.msg);
       }
-      paramDefine$.unsubscribe();
     });
   }
 

web-app/src/app/service/monitor.service.ts

@@ -48,8 +48,8 @@ export class MonitorService {
 
   public getMonitors(app: string, pageIndex: number, pageSize: number) : Observable<Message<Page<Monitor>>> {
     app = app.trim();
-    pageIndex = pageIndex ? 1 : pageIndex;
-    pageSize = pageSize ? 10 : pageSize;
+    pageIndex = pageIndex ? pageIndex : 0;
+    pageSize = pageSize ? pageSize : 8;
     // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象
     let httpParams = new HttpParams();
     httpParams = httpParams.appendAll({

web-app/src/app/service/my-service.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { MyServiceService } from './my-service.service';
-
-describe('MyServiceService', () => {
-  let service: MyServiceService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(MyServiceService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

web-app/src/app/service/my-service.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MyServiceService {
-
-  constructor() { }
-}