[manager,web-app] 监控列表，新增修改监控等编码

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

@@ -1 +1,141 @@
-<p>monitor-modify works!</p>
+<nz-divider></nz-divider>
+<nz-breadcrumb>
+  <nz-breadcrumb-item>
+    <a [routerLink]="['/']">
+      <i nz-icon nzType="home"></i>
+    </a>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item>
+    <a [routerLink]="['/monitors']">
+      <i nz-icon nzType="monitor"></i>
+      <span>监控列表</span>
+    </a>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item>
+    <i nz-icon nzType="plus-circle"></i>
+    <span>修改 {{monitor.app}} 监控</span>
+  </nz-breadcrumb-item>
+</nz-breadcrumb>
+<nz-divider></nz-divider>
+
+<nz-spin [nzSpinning]="isSpinning">
+  <div class = "-inner-content">
+    <form nz-form>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true">监控Host</nz-form-label>
+        <nz-form-control [nzSpan]="10">
+          <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">监控名称</nz-form-label>
+        <nz-form-control [nzSpan]="10">
+          <input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name">
+        </nz-form-control>
+      </nz-form-item >
+
+      <nz-divider></nz-divider>
+
+      <nz-form-item *ngFor="let paramDefine of paramDefines; let i = index">
+        <nz-form-label *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'"
+                       nzSpan="7"
+                       [nzRequired]="paramDefine.required"
+                       [nzFor]= "paramDefine.field">{{paramDefine.name}}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="10">
+          <input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field" [type]="paramDefine.type" [id]="paramDefine.field">
+        </nz-form-control>
+
+        <nz-form-label *ngIf="paramDefine.type === 'password'"
+                       nzSpan="7"
+                       [nzRequired]="paramDefine.required"
+                       [nzFor]= "paramDefine.field">{{paramDefine.name}}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="10">
+          <nz-input-group [nzSuffix]="suffixTemplate">
+            <input
+              [type]="passwordVisible ? 'text' : 'password'"
+              nz-input
+              placeholder="input password"
+              [(ngModel)]="params[i].value"
+              [id]="paramDefine.field"
+              [name]="paramDefine.field"
+            />
+          </nz-input-group>
+          <ng-template #suffixTemplate>
+            <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
+          </ng-template>
+        </nz-form-control>
+
+
+        <nz-form-label *ngIf="paramDefine.type === 'number'"
+                       nzSpan="7"
+                       [nzRequired]="paramDefine.required"
+                       [nzFor]= "paramDefine.field">{{paramDefine.name}}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="10">
+          <nz-input-number
+            [(ngModel)]="params[i].value"
+            [nzMin]="-1000"
+            [nzMax]="65535"
+            [nzStep]="1"
+            [nzPlaceHolder]="paramDefine.name"
+            [name]="paramDefine.field" [id]="paramDefine.field"
+          ></nz-input-number>
+        </nz-form-control>
+
+        <nz-form-label *ngIf="paramDefine.type === 'boolean'"
+                       nzSpan="7"
+                       [nzRequired]="paramDefine.required"
+                       [nzFor]= "paramDefine.field">{{paramDefine.name}}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="10">
+          <nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch>
+        </nz-form-control>
+
+      </nz-form-item >
+
+      <nz-divider></nz-divider>
+
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzFor= "intervals">采集间隔</nz-form-label>
+        <nz-form-control nzSpan="10">
+          <nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="10"
+                           name="intervals" id="intervals">
+          </nz-input-number>
+        </nz-form-control>
+      </nz-form-item >
+
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzFor= "detect">启动探测</nz-form-label>
+        <nz-form-control nzSpan="10">
+          <nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
+        </nz-form-control>
+      </nz-form-item >
+
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'description'>描述备注</nz-form-label>
+        <nz-form-control [nzSpan]="10">
+          <nz-textarea-count [nzMaxCharacterCount]="100">
+            <textarea rows="3" nz-input name="description" id="description"></textarea>
+          </nz-textarea-count>
+        </nz-form-control>
+      </nz-form-item >
+
+      <div nz-row>
+        <div nz-col nzSpan="8" nzOffset="9">
+          <button nz-button nzType="primary" type="submit" (click)="onDetect()">
+            探测
+          </button>
+          <button nz-button nzType="primary" type="submit" (click)="onSubmit()">
+            确定
+          </button>
+          <button nz-button nzType="primary" type="reset" (click)="onCancel()">
+            取消
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</nz-spin>
+

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

@@ -1,4 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import {switchMap} from "rxjs/operators";
+import {ActivatedRoute, ParamMap, Router} from "@angular/router";
+import {Param} from "../../../pojo/Param";
+import {AppDefineService} from "../../../service/app-define.service";
+import {MonitorService} from "../../../service/monitor.service";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {ParamDefine} from "../../../pojo/ParamDefine";
+import {Monitor} from "../../../pojo/Monitor";
+import {FormGroup} from "@angular/forms";
+import {Message} from "../../../pojo/Message";
+import {throwError} from "rxjs";
 
 @Component({
   selector: 'app-monitor-modify',
@@ -8,9 +19,124 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MonitorEditComponent implements OnInit {
 
-  constructor() { }
+  constructor(private appDefineSvc: AppDefineService,
+              private monitorSvc: MonitorService,
+              private route: ActivatedRoute,
+              private router: Router,
+              private notifySvc: NzNotificationService,) { }
+
+  paramDefines!: ParamDefine[];
+  params!: Param[];
+  paramValueMap = new Map<String, Param>();
+  monitor = new Monitor();
+  profileForm: FormGroup = new FormGroup({});
+  detected: boolean = true;
+  passwordVisible: boolean = false;
+  isSpinning:boolean = false
 
   ngOnInit(): void {
+    this.route.paramMap.pipe(
+      switchMap((paramMap: ParamMap) => {
+        let id = paramMap.get("monitorId");
+        this.monitor.id = Number(id);
+        // 查询监控信息
+        return this.monitorSvc.getMonitor(this.monitor.id);
+      })
+    ).pipe(switchMap((message: Message<any>) => {
+      if (message.code === 0) {
+        this.monitor = message.data.monitor;
+        if (message.data.params != null) {
+          message.data.params.forEach((item: Param) => {
+            this.paramValueMap.set(item.field, item)
+          });
+        }
+        this.params = message.data.params;
+      } else {
+        console.warn(message.msg);
+        this.notifySvc.error("查询此监控异常", message.msg);
+        return throwError("查询此监控异常");
+      }
+      return this.appDefineSvc.getAppParamsDefine(this.monitor.app);
+    })).subscribe(message => {
+      if (message.code === 0) {
+        this.paramDefines = message.data;
+        this.params = [];
+        this.paramDefines.forEach(define => {
+          let param = this.paramValueMap.get(define.field);
+          if (param === undefined) {
+            param = new Param();
+            param.type = define.type === "number" ? 0 : 1;
+            if (define.type === "boolean") {
+              param.value = false;
+            }
+            if (param.field === "host") {
+              param.value = this.monitor.host;
+            }
+          }
+          this.params.push(param);
+        })
+      } else {
+        console.warn(message.msg);
+      }
+    });
+  }
+
+  onSubmit() {
+    // todo 暂时单独设置host属性值
+    this.params.forEach(param => {
+      if (param.field === "host") {
+        param.value = this.monitor.host;
+      }
+    });
+    let addMonitor = {
+      "detected": this.detected,
+      "monitor": this.monitor,
+      "params": this.params
+    };
+    this.isSpinning = true;
+    this.monitorSvc.newMonitor(addMonitor)
+      .subscribe(message => {
+          this.isSpinning = false;
+          if (message.code === 0) {
+            this.notifySvc.success("新增监控成功", "");
+            this.router.navigateByUrl("/monitors")
+          } else {
+            this.notifySvc.error("新增监控失败", message.msg);
+          }},
+        error => {
+          this.isSpinning = false
+        }
+      )
+  }
+
+  onDetect() {
+    // todo 暂时单独设置host属性值
+    this.params.forEach(param => {
+      if (param.field === "host") {
+        param.value = this.monitor.host;
+      }
+    });
+    let detectMonitor = {
+      "detected": this.detected,
+      "monitor": this.monitor,
+      "params": this.params
+    };
+    this.isSpinning = true;
+    this.monitorSvc.newMonitor(detectMonitor)
+      .subscribe(message => {
+        this.isSpinning = false;
+        if (message.code === 0) {
+          this.notifySvc.success("探测成功", "");
+        } else {
+          this.notifySvc.error("探测失败", message.msg);
+        }
+      })
+  }
+
+  onCancel() {
+    let app = this.monitor.app;
+    app = app ? app : '';
+    this.router.navigateByUrl(`/monitors?app=${app}`)
   }
 
 }