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

96
manager/src/main/java/com/usthe/manager/controller/MonitorsController.java Normal file
View File

@@ -0,0 +1,96 @@
package com.usthe.manager.controller;
import com.usthe.common.entity.dto.Message;
import com.usthe.manager.pojo.entity.Monitor;
import com.usthe.manager.service.MonitorService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.Predicate;
import java.util.HashSet;
import java.util.List;
import static org.springframework.http.MediaType.APPLICATION_JSON_VALUE;
/**
* 监控管理批量API
* @author tom
* @date 2021/12/1 20:43
*/
@Api(tags = "监控列表API")
@RestController
@RequestMapping(path = "/monitors", produces = {APPLICATION_JSON_VALUE})
public class MonitorsController {
@Autowired
private MonitorService monitorService;
@GetMapping
@ApiOperation(value = "查询监控列表", notes = "根据查询过滤项获取监控信息列表")
public ResponseEntity<Message<Page<Monitor>>> getMonitors(
@ApiParam(value = "监控ID", example = "6565463543") @RequestParam(required = false) List<Long> ids,
@ApiParam(value = "监控类型", example = "linux") @RequestParam(required = false) String app,
@ApiParam(value = "监控名称，模糊查询", example = "linux-127.0.0.1") @RequestParam(required = false) String name,
@ApiParam(value = "监控Host，模糊查询", example = "127.0.0.1") @RequestParam(required = false) String host,
@ApiParam(value = "排序字段，默认id", example = "name") @RequestParam(defaultValue = "id") String sort,
@ApiParam(value = "排序方式，asc:升序，desc:降序", example = "asc") @RequestParam(defaultValue = "asc") String order,
@ApiParam(value = "列表当前分页", example = "0") @RequestParam(defaultValue = "0") int pageIndex,
@ApiParam(value = "列表分页数量", example = "10") @RequestParam(defaultValue = "8") int pageSize) {
Specification<Monitor> specification = (root, query, criteriaBuilder) -> {
Predicate predicate = criteriaBuilder.conjunction();
if (ids != null && !ids.isEmpty()) {
CriteriaBuilder.In<Long> inPredicate= criteriaBuilder.in(root.get("id"));
for (long id : ids) {
inPredicate.value(id);
}
predicate = criteriaBuilder.and(inPredicate);
}
if (app != null && !"".equals(app)) {
Predicate predicateApp = criteriaBuilder.equal(root.get("app"), app);
predicate = criteriaBuilder.and(predicateApp);
}
if (name != null && !"".equals(name)) {
Predicate predicateName = criteriaBuilder.like(root.get("name"), "%" + name + "%");
predicate = criteriaBuilder.and(predicateName);
}
if (host != null && !"".equals(host)) {
Predicate predicateHost = criteriaBuilder.like(root.get("host"), "%" + host + "%");
predicate = criteriaBuilder.and(predicateHost);
}
return predicate;
};
// 分页是必须的
Sort sortExp = Sort.by(new Sort.Order(Sort.Direction.fromString(order), sort));
PageRequest pageRequest = PageRequest.of(pageIndex, pageSize, sortExp);
Page<Monitor> monitorPage = monitorService.getMonitors(specification, pageRequest);
Message<Page<Monitor>> message = new Message<>(monitorPage);
return ResponseEntity.ok(message);
}
@DeleteMapping
@ApiOperation(value = "批量删除监控", notes = "根据监控ID列表批量删除监控项")
public ResponseEntity<Message<Void>> deleteMonitors(
@ApiParam(value = "监控IDs", example = "6565463543") @RequestParam(required = false) List<Long> ids
) {
if (ids != null && !ids.isEmpty()) {
monitorService.deleteMonitors(new HashSet<>(ids));
}
Message<Void> message = new Message<>();
return ResponseEntity.ok(message);
}
}

19
manager/src/main/java/com/usthe/manager/dao/MonitorDao.java
View File

@@ -2,13 +2,30 @@ package com.usthe.manager.dao;
import com.usthe.manager.pojo.entity.Monitor;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import java.util.List;
import java.util.Set;
/**
* AuthResources 数据库操作
* @author tomsun28
* @date 2021/11/14 11:24
*/
public interface MonitorDao extends JpaRepository<Monitor, Long> {
public interface MonitorDao extends JpaRepository<Monitor, Long>, JpaSpecificationExecutor<Monitor> {
/**
* 根据监控ID列表删除监控
* @param monitorIds 监控ID列表
*/
void deleteAllByIdIn(Set<Long> monitorIds);
/**
* 根据监控ID列表查询监控
* @param monitorIds 监控ID列表
* @return 监控列表
*/
List<Monitor> findMonitorsByIdIn(Set<Long> monitorIds);
}

19
manager/src/main/java/com/usthe/manager/service/MonitorService.java
View File

@@ -4,8 +4,12 @@ import com.usthe.manager.pojo.dto.MonitorDto;
import com.usthe.manager.pojo.entity.Monitor;
import com.usthe.manager.pojo.entity.Param;
import com.usthe.manager.support.exception.MonitorDetectException;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.jpa.domain.Specification;
import java.util.List;
import java.util.Set;
/**
* 监控管理服务
@@ -54,6 +58,13 @@ public interface MonitorService {
*/
void deleteMonitor(long id) throws RuntimeException;
/**
* 批量删除监控
* @param ids 监控ID
* @throws RuntimeException 删除过程中异常抛出
*/
void deleteMonitors(Set<Long> ids) throws RuntimeException;
/**
* 获取监控信息
* @param id 监控ID
@@ -61,4 +72,12 @@ public interface MonitorService {
* @throws RuntimeException 查询过程中异常抛出
*/
MonitorDto getMonitor(long id) throws RuntimeException;
/**
* 动态条件查询
* @param specification 查询条件
* @param pageRequest 分页参数
* @return 查询结果
*/
Page<Monitor> getMonitors(Specification<Monitor> specification, PageRequest pageRequest);
}

40
manager/src/main/java/com/usthe/manager/service/impl/MonitorServiceImpl.java
View File

@@ -21,12 +21,16 @@ import com.usthe.manager.support.exception.MonitorDetectException;
import com.usthe.scheduler.JobScheduling;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
import java.util.Map;
import java.util.Optional;
import java.util.Set;
import java.util.stream.Collectors;
/**
@@ -166,10 +170,20 @@ public class MonitorServiceImpl implements MonitorService {
break;
case "password":
// 明文密码需加密传输存储
String value = param.getValue();
if (!AesUtil.isCiphertext(value)) {
value = AesUtil.aesEncode(value);
param.setValue(value);
String passwordValue = param.getValue();
if (!AesUtil.isCiphertext(passwordValue)) {
passwordValue = AesUtil.aesEncode(passwordValue);
param.setValue(passwordValue);
}
break;
case "boolean":
// boolean校验
String booleanValue = param.getValue();
try {
Boolean.parseBoolean(booleanValue);
} catch (Exception e) {
throw new IllegalArgumentException("Params field " + field + " value "
+ booleanValue + " is invalid boolean value.");
}
break;
// todo 更多参数定义与实际值格式校验
@@ -236,6 +250,19 @@ public class MonitorServiceImpl implements MonitorService {
}
}
@Override
@Transactional(rollbackFor = Exception.class)
public void deleteMonitors(Set<Long> ids) throws RuntimeException {
List<Monitor> monitors = monitorDao.findMonitorsByIdIn(ids);
if (monitors != null) {
monitorDao.deleteAll(monitors);
paramDao.deleteParamsByMonitorIdIn(ids);
for (Monitor monitor : monitors) {
jobScheduling.cancelAsyncCollectJob(monitor.getJobId());
}
}
}
@Override
@Transactional(readOnly = true)
public MonitorDto getMonitor(long id) throws RuntimeException {
@@ -250,4 +277,9 @@ public class MonitorServiceImpl implements MonitorService {
return null;
}
}
@Override
public Page<Monitor> getMonitors(Specification<Monitor> specification, PageRequest pageRequest) {
return monitorDao.findAll(specification, pageRequest);
}
}

8
manager/src/main/java/com/usthe/manager/support/GlobalExceptionHandler.java
View File

@@ -129,7 +129,7 @@ public class GlobalExceptionHandler {
if (log.isDebugEnabled()) {
log.debug("[input argument not valid happen]-{}", errorMessage, e);
}
Message<Void> message = Message.<Void>builder().msg(errorMessage.toString()).build();
Message<Void> message = Message.<Void>builder().msg(errorMessage.toString()).code(PARAM_INVALID).build();
return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(message);
}
@@ -146,7 +146,7 @@ public class GlobalExceptionHandler {
errorMessage = exception.getMessage();
}
log.warn("[scheduler warning]-{}", errorMessage);
Message<Void> message = Message.<Void>builder().msg(errorMessage).build();
Message<Void> message = Message.<Void>builder().msg(errorMessage).code(MONITOR_CONFLICT).build();
return ResponseEntity.status(HttpStatus.CONFLICT).body(message);
}
@@ -163,7 +163,7 @@ public class GlobalExceptionHandler {
errorMessage = exception.getMessage();
}
log.warn("[database error happen]-{}", errorMessage, exception);
Message<Void> message = Message.<Void>builder().msg(errorMessage).build();
Message<Void> message = Message.<Void>builder().msg(errorMessage).code(MONITOR_CONFLICT).build();
return ResponseEntity.status(HttpStatus.CONFLICT).body(message);
}
@@ -197,7 +197,7 @@ public class GlobalExceptionHandler {
errorMessage = exception.getMessage();
}
log.error("[monitor]-[unknown error happen]-{}", errorMessage, exception);
Message<Void> message = Message.<Void>builder().msg(errorMessage).build();
Message<Void> message = Message.<Void>builder().msg(errorMessage).code(MONITOR_CONFLICT).build();
return ResponseEntity.status(HttpStatus.CONFLICT).body(message);
}

2
manager/src/main/resources/define/param/A-example.yml
View File

@@ -32,4 +32,4 @@ param:
required: false
# 当type为boolean时,前端用switch展示开关
# 当type为radio单选框,checkbox复选框时,option表示可选项值列表
option: Yes,No
# option: Yes,No

50
web-app/src/app/core/interceptor/default.interceptor.ts
View File

@@ -4,7 +4,7 @@ import {
HttpHandler,
HttpHeaders,
HttpInterceptor,
HttpRequest,
HttpRequest, HttpResponse,
HttpResponseBase
} from '@angular/common/http';
import { Injectable, Injector } from '@angular/core';
@@ -27,6 +27,7 @@ const CODE_MESSAGE: { [key: number]: string } = {
403: '用户得到授权，但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
406: '请求的格式不可得。',
409: '请求与服务器端目标资源的当前状态相冲突',
410: '请求的资源被永久删除，且不会再得到的。',
422: '当创建一个对象时，发生一个验证错误。',
500: '服务器发生错误，请检查服务器。',
@@ -63,9 +64,9 @@ export class DefaultInterceptor implements HttpInterceptor {
}
private checkStatus(ev: HttpResponseBase): void {
if (ev.status >= 200 && ev.status < 500) {
return;
}
// if (ev.status >= 200 && ev.status < 500) {
// return;
// }
const errorText = CODE_MESSAGE[ev.status] || ev.statusText;
this.notification.error(`抱歉服务器繁忙 ${ev.status}: ${ev.url}`, errorText);
}
@@ -158,27 +159,40 @@ export class DefaultInterceptor implements HttpInterceptor {
const newReq = req.clone({ url, setHeaders: this.fillHeaders(req.headers) });
return next.handle(newReq).pipe(
mergeMap(httpEvent => {
if (httpEvent instanceof HttpResponseBase) {
// 处理token过期自动刷新
switch (httpEvent.status) {
case 401:
if (this.refreshTokenEnabled) {
return this.tryRefreshToken(httpEvent, req, next);
}
this.toLogin();
break;
case 403 | 404 | 500:
this.goTo(`/exception/${httpEvent.status}?url=${req.urlWithParams}`);
break;
default:
break;
}
// todo 处理成功状态响应
return of(httpEvent);
} else {
return of(httpEvent);
}
}),
catchError((err: HttpErrorResponse) => {
// 处理失败响应，处理token过期自动刷新
switch (err.status) {
case 401:
if (this.refreshTokenEnabled) {
return this.tryRefreshToken(err, req, next);
}
this.toLogin();
break;
case 403:
case 404:
case 500:
this.goTo(`/exception/${err.status}?url=${req.urlWithParams}`);
break;
case 400:
let resp = new HttpResponse({
body: err.error,
headers: err.headers,
status: err.status,
statusText: err.statusText
});
return of(resp);
default:
break;
}
this.checkStatus(err);
console.warn(`${err.status} == ${err.message}`)
return throwError(err);

4
web-app/src/app/pojo/Message.ts
View File

@@ -1,5 +1,5 @@
export class Message {
data: any;
export class Message<T> {
data!: T;
msg!: string;
code: number = 0;
}

2
web-app/src/app/pojo/Monitor.ts
View File

@@ -3,7 +3,7 @@ export class Monitor {
name!: string;
app!: string;
host!: string;
intervals!: number;
intervals: number = 600;
status!: number;
description!: string;
creator!: string;

14
web-app/src/app/pojo/Page.ts Normal file
View File

@@ -0,0 +1,14 @@
export class Page<T> {
content!: T[];
// 集合总页数
totalPages!: number;
// 集合总数
totalElements!: number;
// 查询的pageSize
size!: number;
// 查询的pageIndex,从0开始
number!: number;
// 当前页的集合数量
numberOfElements!: number;
}

4
web-app/src/app/pojo/Param.ts
View File

@@ -1,6 +1,6 @@
export class Param {
id!: number;
field: string | undefined;
field!: string;
type: number | undefined;
value: string | undefined;
value: any;
}

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 },

5
web-app/src/app/service/app-define.service.ts
View File

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Message} from "../pojo/Message";
import {Observable} from "rxjs";
import {ParamDefine} from "../pojo/ParamDefine";
@Injectable({
@@ -11,12 +12,12 @@ export class AppDefineService {
constructor(private http : HttpClient) { }
public getAppParamsDefine(app: string | undefined | null) : Observable<Message> {
public getAppParamsDefine(app: string | undefined | null) : Observable<Message<ParamDefine[]>> {
if (app === null || app === undefined) {
console.log("getAppParamsDefine app can not null");
}
const paramDefineUri = `/apps/${app}/params`;
return this.http.get<Message>(paramDefineUri);
return this.http.get<Message<ParamDefine[]>>(paramDefineUri);
}
}

51
web-app/src/app/service/monitor.service.ts
View File

@@ -1,9 +1,13 @@
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {HttpClient, HttpParams} from "@angular/common/http";
import {Observable} from "rxjs";
import {Message} from "../pojo/Message";
import {Page} from "../pojo/Page";
import {Monitor} from "../pojo/Monitor";
const monitor_uri = "/monitor";
const monitors_uri = "/monitors";
const detect_monitor_uri = "/monitor/detect"
@Injectable({
providedIn: 'root'
@@ -12,8 +16,49 @@ export class MonitorService {
constructor(private http : HttpClient) { }
public newMonitor(body: any) : Observable<Message> {
return this.http.post<Message>(monitor_uri, body);
public newMonitor(body: any) : Observable<Message<any>> {
return this.http.post<Message<any>>(monitor_uri, body);
}
public editMonitor(body: any) : Observable<Message<any>> {
return this.http.put<Message<any>>(monitor_uri, body);
}
public deleteMonitor(monitorId: number) : Observable<Message<any>> {
return this.http.delete<Message<any>>(`${monitor_uri}/${monitorId}`);
}
public deleteMonitors(monitorIds: Set<number>) : Observable<Message<any>> {
let httpParams = new HttpParams();
monitorIds.forEach(monitorId => {
// 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象
httpParams = httpParams.set('ids', monitorId);
})
const options = { params: httpParams };
return this.http.delete<Message<any>>(monitors_uri, options);
}
public detectMonitor(body: any) : Observable<Message<any>> {
return this.http.post<Message<any>>(detect_monitor_uri, body);
}
public getMonitor(monitorId: number) : Observable<Message<any>> {
return this.http.get<Message<any>>(`${monitor_uri}/${monitorId}`);
}
public getMonitors(app: string, pageIndex: number, pageSize: number) : Observable<Message<Page<Monitor>>> {
app = app.trim();
pageIndex = pageIndex ? 1 : pageIndex;
pageSize = pageSize ? 10 : pageSize;
// 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象
let httpParams = new HttpParams();
httpParams = httpParams.appendAll({
'app': app,
'pageIndex': pageIndex,
'pageSize': pageSize
});
const options = { params: httpParams };
return this.http.get<Message<Page<Monitor>>>(monitors_uri, options);
}
}

4
web-app/src/assets/tmp/app-data.json
View File

@@ -36,12 +36,12 @@
"children": [
{
"text": "http",
"link": "/monitors",
"link": "/monitors?app=http",
"i18n": "monitor.app.http"
},
{
"text": "ping",
"link": "/monitors",
"link": "/monitors?app=ping",
"i18n": "monitor.app.ping"
},
{