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

2021-12-03 15:26:00 +08:00
parent 582dccbfb5
commit 61d4759357
9 changed files with 37 additions and 44 deletions
--- a/manager/src/main/java/com/usthe/manager/controller/MonitorController.java
+++ b/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());
        }
--- a/manager/src/main/java/com/usthe/manager/pojo/dto/MonitorDto.java
+++ b/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;
 }
--- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
+++ b/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) {
--- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
+++ b/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>
--- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
+++ b/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();
+  }

 }
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
+++ b/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();
    });
  }

--- a/web-app/src/app/service/monitor.service.ts
+++ b/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({
--- a/web-app/src/app/service/my-service.service.spec.ts
+++ b/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();
-  });
-});
--- a/web-app/src/app/service/my-service.service.ts
+++ b/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() { }
-}