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

[manager,webapp]feature 监控列表支持过滤搜索 (#29)

Browse Source
This commit is contained in:
tomsun28
2022-03-15 16:21:25 +08:00
committed by GitHub
parent 540f4bcbf4
commit 4db3e04dd6
6 changed files with 104 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web-app/src/app/routes/alert/alert-center/alert-center.component.html
View File

@@ -37,6 +37,7 @@
type="text"
placeholder="搜索告警内容"
nzSize="default"
(keyup.enter)="onFilterSearchAlerts()"
[(ngModel)]="filterContent"
/>
<nz-select

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

@@ -12,31 +12,57 @@
</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>
新增 {{ 'monitor.app.' + app | i18n }}
</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" (click)="onEnableManageMonitors()">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
启用监控
</button>
<button nz-button nzType="primary" (click)="onCancelManageMonitors()">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
取消监控
</button>
<button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<div>
<button nz-button nzType="primary">
<a routerLink="/monitors/new" [queryParams]="{ app: app }">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
新增 {{ 'monitor.app.' + app | i18n }}
</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" (click)="onEnableManageMonitors()">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
启用监控
</button>
<button nz-button nzType="primary" (click)="onCancelManageMonitors()">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
取消监控
</button>
<button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchMonitors()"> 搜索 </button>
<input
style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
nz-input
type="text"
placeholder="搜索监控"
nzSize="default"
(keyup.enter)="onFilterSearchMonitors()"
[(ngModel)]="filterContent"
/>
<nz-select
style="margin-right: 10px; float: right; width: 120px"
nzAllowClear
[nzPlaceHolder]="'监控状态过滤'"
[(ngModel)]="filterStatus"
>
<nz-option nzLabel="全部状态" nzValue="9"></nz-option>
<nz-option nzLabel="监控正常" nzValue="1"></nz-option>
<nz-option nzLabel="不可用" nzValue="2"></nz-option>
<nz-option nzLabel="不可达" nzValue="3"></nz-option>
<nz-option nzLabel="未监控" nzValue="0"></nz-option>
</nz-select>
</div>
<nz-table
#fixedTable

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

@@ -30,6 +30,9 @@ export class MonitorListComponent implements OnInit {
monitors!: Monitor[];
tableLoading: boolean = true;
checkedMonitorIds = new Set<number>();
// 过滤搜索
filterContent!: string;
filterStatus: number = 9;
ngOnInit(): void {
this.route.queryParamMap.subscribe(paramMap => {
@@ -42,6 +45,33 @@ export class MonitorListComponent implements OnInit {
});
}
onFilterSearchMonitors() {
this.tableLoading = true;
let filter$ = this.monitorSvc
.searchMonitors(this.app, this.filterContent, this.filterStatus, this.pageIndex - 1, this.pageSize)
.subscribe(
message => {
filter$.unsubscribe();
this.tableLoading = false;
this.checkedAll = false;
this.checkedMonitorIds.clear();
if (message.code === 0) {
let page = message.data;
this.monitors = page.content;
this.pageIndex = page.number + 1;
this.total = page.totalElements;
} else {
console.warn(message.msg);
}
},
error => {
this.tableLoading = false;
filter$.unsubscribe();
console.error(error.msg);
}
);
}
sync() {
this.loadMonitorTable();
}