OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
tomsun28
2021-12-02 17:50:42 +08:00
parent c47b0bf589
commit c91c885412
21 changed files with 929 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
View File

@@ -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>

128
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
View File

@@ -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}`)
}
}

87
web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
View File

@@ -1,2 +1,85 @@
<nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb>
<p>monitor-list 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>
<i nz-icon nzType="monitor"></i>
<span>监控列表 {{app?app.toUpperCase() : ""}}</span>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>
<button nz-button nzType="primary">
<a routerLink="/monitors/new" [queryParams]="{app: app}">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
新增 {{app}}
</a>
</button>
<button nz-button nzType="primary" (click)="onEditMonitor()" >
<i nz-icon nzType="edit" nzTheme="outline"></i>
编辑
</button>
<button nz-button nzType="primary" (click)="onDeleteMonitors()">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
<button nz-button nzType="primary">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
启动纳管
</button>
<button nz-button nzType="primary">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
取消纳管
</button>
<nz-table #fixedTable [nzData]="monitors"
[nzPageIndex]="pageIndex" [nzPageSize]="pageSize"
[nzLoading] = "tableLoading"
nzShowSizeChanger
[nzTotal]="pageTotal"
[nzShowTotal]="rangeTemplate"
[nzPageSizeOptions]="[8,15,25]"
nzShowPagination = "true" [nzScroll]="{ x: '1150px', y: '1240px' }">
<thead>
<tr>
<th nzAlign="center" nzLeft nzWidth="50px" [nzChecked]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">监控名称</th>
<th nzAlign="center">监控状态</th>
<th nzAlign="center">监控主机Host</th>
<th nzAlign="center">监控类型</th>
<th nzAlign="center">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of fixedTable.data">
<td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center">{{ data.name }}</td>
<td nzAlign="center">{{ data.status }}</td>
<td nzAlign="center">{{ data.host }}</td>
<td nzAlign="center">{{ data.app }}</td>
<td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary"(click)="onDeleteOneMonitor(data.id)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
</td>
</tr>
</tbody>
</nz-table>
<ng-template #rangeTemplate>
总量 {{ pageTotal }}
</ng-template>

142
web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
View File

@@ -1,4 +1,10 @@
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {MonitorService} from "../../../service/monitor.service";
import {Monitor} from "../../../pojo/Monitor";
import {Page} from "../../../pojo/Page";
import {NzModalService} from "ng-zorro-antd/modal";
import {NzNotificationService} from "ng-zorro-antd/notification";
@Component({
selector: 'app-monitor-list',
@@ -8,9 +14,143 @@ import { Component, OnInit } from '@angular/core';
})
export class MonitorListComponent implements OnInit {
constructor() { }
constructor(private route: ActivatedRoute,
private router: Router,
private modal: NzModalService,
private notifySvc: NzNotificationService,
private monitorSvc: MonitorService) { }
app!: string;
pageIndex: number = 1;
pageSize: number = 8;
pageTotal: number = 0;
monitors!: Monitor[];
pageMonitors!: Page<Monitor>;
tableLoading: boolean = true;
checkedMonitorIds = new Set<number>();
ngOnInit(): void {
this.route.queryParamMap
.subscribe(paramMap => {
this.app = paramMap.get("app") || '';
this.initMonitorTable();
});
}
initMonitorTable() {
let monitorInit$ = this.monitorSvc.getMonitors(this.app, this.pageIndex - 1, this.pageSize)
.subscribe(message => {
this.tableLoading = false;
if (message.code === 0) {
this.pageMonitors = message.data;
this.monitors = this.pageMonitors.content;
this.pageIndex = this.pageMonitors.number + 1;
this.pageTotal = this.pageMonitors.totalElements;
} else {
console.warn(message.msg);
}
monitorInit$.unsubscribe();
},
error => {
this.tableLoading = false;
monitorInit$.unsubscribe();
});
}
onEditOneMonitor(monitorId: number) {
if (monitorId == null) {
this.notifySvc.warning("未选中任何待编辑项！","");
return;
}
this.router.navigateByUrl(`/monitors/${monitorId}/edit`);
// 参数样例
// this.router.navigate(['/monitors/new'],{queryParams: {app: "linux"}});
}
onEditMonitor() {
// 编辑时只能选中一个监控
if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) {
this.notifySvc.warning("未选中任何待编辑项！","");
return;
}
if (this.checkedMonitorIds.size > 1) {
this.notifySvc.warning("只能对一个选中项进行编辑！","");
return;
}
let monitorId = 0;
this.checkedMonitorIds.forEach(item => monitorId = item);
this.router.navigateByUrl(`/monitors/${monitorId}/edit`);
}
onDeleteOneMonitor(monitorId: number) {
let monitors = new Set<number>();
monitors.add(monitorId);
this.modal.confirm({
nzTitle: '请确认是否删除！',
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOnOk: () => this.deleteMonitors(monitors)
});
}
onDeleteMonitors() {
if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) {
this.notifySvc.warning("未选中任何待删除项！","");
return;
}
this.modal.confirm({
nzTitle: '请确认是否批量删除！',
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOnOk: () => this.deleteMonitors(this.checkedMonitorIds)
});
}
deleteMonitors(monitors: Set<number>) {
if (monitors == null || monitors.size == 0) {
this.notifySvc.warning("未选中任何待删除项！","");
return;
}
const deleteMonitors$ = this.monitorSvc.deleteMonitors(monitors)
.subscribe(message => {
deleteMonitors$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success("删除成功！", "");
this.initMonitorTable();
} else {
this.notifySvc.error("删除失败！", message.msg);
}
},
error => {
deleteMonitors$.unsubscribe();
this.notifySvc.error("删除失败！", error.msg)
}
);
}
// begin: 列表多选逻辑
checkedAll: boolean = false;
onAllChecked(checked: boolean) {
if (checked) {
this.monitors.forEach(monitor => this.checkedMonitorIds.add(monitor.id));
} else {
this.checkedMonitorIds.clear();
}
}
onItemChecked(monitorId: number, checked: boolean) {
if (checked) {
this.checkedMonitorIds.add(monitorId);
} else {
this.checkedMonitorIds.delete(monitorId);
}
}
// end: 列表多选逻辑
}

213
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
View File

@@ -18,119 +18,124 @@
</nz-breadcrumb>
<nz-divider></nz-divider>
<div class = "-inner-content">
<form nz-form (ngSubmit)="onSubmit()">
<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-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-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-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"
<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"
[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>
[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-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-item >
<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-divider></nz-divider>
</nz-form-item >
<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-divider></nz-divider>
<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= "intervals">采集间隔</nz-form-label>
<nz-form-control nzSpan="10">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="10" id="intervals"></nz-input-number>
</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 >
<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">
探测
</button>
<button nz-button nzType="primary" type="submit">
确定
</button>
<button nz-button nzType="primary" nzDanger="true" type="reset">
取消
</button>
<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>
</div>
</form>
</div>
</form>
</div>
</nz-spin>

49
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
View File

@@ -23,7 +23,8 @@ export class MonitorNewComponent implements OnInit {
monitor!: Monitor;
profileForm: FormGroup = new FormGroup({});
detected: boolean = true;
passwordVisible!: boolean;
passwordVisible: boolean = false;
isSpinning:boolean = false
constructor(private appDefineSvc: AppDefineService,
private monitorSvc: MonitorService,
private route: ActivatedRoute,
@@ -48,6 +49,9 @@ export class MonitorNewComponent implements OnInit {
let param = new Param();
param.field = define.field;
param.type = define.type === "number" ? 0 : 1;
if (define.type === "boolean") {
param.value = false;
}
this.params.push(param);
})
} else {
@@ -58,20 +62,61 @@ export class MonitorNewComponent implements OnInit {
}
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}`)
}
}

2
web-app/src/app/routes/monitor/monitor-routing.module.ts
View File

@@ -6,7 +6,7 @@ import {MonitorEditComponent} from "./monitor-edit/monitor-edit.component";
import {MonitorDetailComponent} from "./monitor-detail/monitor-detail.component";
const routes: Routes = [
{ path: '', component: MonitorNewComponent },
{ path: '', component: MonitorListComponent },
{ path: 'new', component: MonitorNewComponent },
{ path: ':monitorId/edit', component: MonitorEditComponent },
{ path: ':monitorId', component: MonitorDetailComponent },