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

[webapp] 批量处理eslint格式告警

Browse Source
This commit is contained in:
tomsun28
2021-12-23 15:59:49 +08:00
parent 1469e85443
commit 7e41f64491
72 changed files with 1724 additions and 2170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,91 +30,106 @@
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<button style="margin-right: 25px;float: right;" nz-button nzType="primary" (click)="onFilterSearchAlerts()">
搜索
</button>
<input style="margin-right: 5px;float: right;width:150px;border-radius: 9px;text-align: center;" nz-input
type="text" placeholder="搜索告警内容" nzSize="default" [(ngModel)]="filterContent" />
<nz-select style="margin-right: 10px;float: right;width: 120px;" nzAllowClear
[nzPlaceHolder]="'告警状态过滤'" [(ngModel)]="filterStatus">
<button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchAlerts()"> 搜索 </button>
<input
style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
nz-input
type="text"
placeholder="搜索告警内容"
nzSize="default"
[(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="0"></nz-option>
<nz-option nzLabel="已处理" nzValue="3"></nz-option>
</nz-select>
<nz-select style="margin-right: 10px;float: right;width: 120px;" nzAllowClear
[nzPlaceHolder]="'告警级别过滤'" [(ngModel)]="filterPriority">
<nz-select
style="margin-right: 10px; float: right; width: 120px"
nzAllowClear
[nzPlaceHolder]="'告警级别过滤'"
[(ngModel)]="filterPriority"
>
<nz-option nzLabel="全部级别" nzValue="9"></nz-option>
<nz-option nzLabel="警告级别" nzValue="2"></nz-option>
<nz-option nzLabel="严重级别" nzValue="1"></nz-option>
<nz-option nzLabel="紧急级别" nzValue="0"></nz-option>
</nz-select>
</div>
<nz-table #fixedTable [nzData]="alerts"
[nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total"
nzFrontPagination ="false"
[nzLoading] = "tableLoading"
nzShowSizeChanger
[nzShowTotal]="rangeTemplate"
[nzPageSizeOptions]="[8,15,25]"
(nzQueryParams)="onTablePageChange($event)"
nzShowPagination = "true" [nzScroll]="{ x: '1150px', y: '1240px' }">
<nz-table
#fixedTable
[nzData]="alerts"
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzTotal]="total"
nzFrontPagination="false"
[nzLoading]="tableLoading"
nzShowSizeChanger
[nzShowTotal]="rangeTemplate"
[nzPageSizeOptions]="[8, 15, 25]"
(nzQueryParams)="onTablePageChange($event)"
nzShowPagination="true"
[nzScroll]="{ x: '1150px', y: '1240px' }"
>
<thead>
<tr>
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">告警指标</th>
<th nzAlign="center">所属监控</th>
<th nzAlign="center">级别</th>
<th nzAlign="center">告警内容</th>
<th nzAlign="center">状态</th>
<th nzAlign="center">告警时间</th>
<th nzAlign="center" nzRight>操作</th>
</tr>
<tr>
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">告警指标</th>
<th nzAlign="center">所属监控</th>
<th nzAlign="center">级别</th>
<th nzAlign="center">告警内容</th>
<th nzAlign="center">状态</th>
<th nzAlign="center">告警时间</th>
<th nzAlign="center" nzRight>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of fixedTable.data" [ngStyle]="{'background-color':data.status === 0 ? '#E1E7A89B' : 'inherit' }">
<td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center">{{ data.target }}</td>
<td nzAlign="center">
<a [routerLink]="['/monitors/' + data.monitorId]">
<span>{{ data.monitorName }}</span>
</a>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.priority == 0" nzColor="red">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>紧急告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 1" nzColor="orange">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>严重告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 2" nzColor="yellow">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>警告告警</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.content }}</td>
<td nzAlign="center">
{{ data.status === 0 ? '未处理' : '已处理' }}
</td>
<td nzAlign="center">{{ data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记已处理">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onMarkUnReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记未处理">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
</button>
</td>
</tr>
<tr *ngFor="let data of fixedTable.data" [ngStyle]="{ 'background-color': data.status === 0 ? '#E1E7A89B' : 'inherit' }">
<td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center">{{ data.target }}</td>
<td nzAlign="center">
<a [routerLink]="['/monitors/' + data.monitorId]">
<span>{{ data.monitorName }}</span>
</a>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.priority == 0" nzColor="red">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>紧急告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 1" nzColor="orange">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>严重告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 2" nzColor="yellow">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>警告告警</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.content }}</td>
<td nzAlign="center">
{{ data.status === 0 ? '未处理' : '已处理' }}
</td>
<td nzAlign="center">{{ data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记已处理">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onMarkUnReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记未处理">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
</button>
</td>
</tr>
</tbody>
</nz-table>
<ng-template #rangeTemplate>
总量 {{ total }}
</ng-template>
<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>

5
web-app/src/app/routes/alert/alert-center/alert-center.component.spec.ts
View File

@@ -8,9 +8,8 @@ describe('AlertCenterComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AlertCenterComponent ]
})
.compileComponents();
declarations: [AlertCenterComponent]
}).compileComponents();
});
beforeEach(() => {

149
web-app/src/app/routes/alert/alert-center/alert-center.component.ts
View File

@@ -1,21 +1,18 @@
import { Component, OnInit } from '@angular/core';
import {NzTableQueryParams} from "ng-zorro-antd/table";
import {Alert} from "../../../pojo/Alert";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {AlertService} from "../../../service/alert.service";
import {NzModalService} from "ng-zorro-antd/modal";
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { NzTableQueryParams } from 'ng-zorro-antd/table';
import { Alert } from '../../../pojo/Alert';
import { AlertService } from '../../../service/alert.service';
@Component({
selector: 'app-alert-center',
templateUrl: './alert-center.component.html',
styles: [
]
styles: []
})
export class AlertCenterComponent implements OnInit {
constructor(private notifySvc: NzNotificationService,
private modal: NzModalService,
private alertSvc: AlertService) { }
constructor(private notifySvc: NzNotificationService, private modal: NzModalService, private alertSvc: AlertService) {}
pageIndex: number = 1;
pageSize: number = 8;
@@ -34,27 +31,29 @@ export class AlertCenterComponent implements OnInit {
onFilterSearchAlerts() {
this.tableLoading = true;
let filterAlerts$ = this.alertSvc.searchAlerts(this.filterStatus, this.filterPriority,
this.filterContent, this.pageIndex - 1, this.pageSize)
.subscribe(message => {
filterAlerts$.unsubscribe();
this.tableLoading = false;
this.checkedAll = false;
this.checkedAlertIds.clear();
if (message.code === 0) {
let page = message.data;
this.alerts = page.content;
this.pageIndex = page.number + 1;
this.total = page.totalElements;
} else {
console.warn(message.msg);
let filterAlerts$ = this.alertSvc
.searchAlerts(this.filterStatus, this.filterPriority, this.filterContent, this.pageIndex - 1, this.pageSize)
.subscribe(
message => {
filterAlerts$.unsubscribe();
this.tableLoading = false;
this.checkedAll = false;
this.checkedAlertIds.clear();
if (message.code === 0) {
let page = message.data;
this.alerts = page.content;
this.pageIndex = page.number + 1;
this.total = page.totalElements;
} else {
console.warn(message.msg);
}
},
error => {
this.tableLoading = false;
filterAlerts$.unsubscribe();
console.error(error.msg);
}
}, error => {
this.tableLoading = false;
filterAlerts$.unsubscribe();
console.error(error.msg);
});
);
}
sync() {
@@ -63,8 +62,8 @@ export class AlertCenterComponent implements OnInit {
loadAlertsTable() {
this.tableLoading = true;
let alertsInit$ = this.alertSvc.getAlerts(this.pageIndex - 1, this.pageSize)
.subscribe(message => {
let alertsInit$ = this.alertSvc.getAlerts(this.pageIndex - 1, this.pageSize).subscribe(
message => {
this.tableLoading = false;
this.checkedAll = false;
this.checkedAlertIds.clear();
@@ -77,16 +76,18 @@ export class AlertCenterComponent implements OnInit {
console.warn(message.msg);
}
alertsInit$.unsubscribe();
}, error => {
},
error => {
this.tableLoading = false;
alertsInit$.unsubscribe();
console.error(error.msg);
});
}
);
}
onDeleteAlerts() {
if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
this.notifySvc.warning("未选中任何待删除项！","");
this.notifySvc.warning('未选中任何待删除项！', '');
return;
}
this.modal.confirm({
@@ -94,14 +95,14 @@ export class AlertCenterComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.deleteAlerts(this.checkedAlertIds)
});
}
onMarkReadAlerts() {
if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
this.notifySvc.warning("未选中任何待标记项！","");
this.notifySvc.warning('未选中任何待标记项！', '');
return;
}
this.modal.confirm({
@@ -109,13 +110,13 @@ export class AlertCenterComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 3)
});
}
onMarkUnReadAlerts() {
if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
this.notifySvc.warning("未选中任何待标记项！","");
this.notifySvc.warning('未选中任何待标记项！', '');
return;
}
this.modal.confirm({
@@ -123,7 +124,7 @@ export class AlertCenterComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 0)
});
}
@@ -136,7 +137,7 @@ export class AlertCenterComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.deleteAlerts(alerts)
});
}
@@ -149,7 +150,7 @@ export class AlertCenterComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(alerts, 3)
});
}
@@ -162,51 +163,51 @@ export class AlertCenterComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(alerts, 0)
});
}
deleteAlerts(alertIds: Set<number>) {
this.tableLoading = true;
const deleteAlerts$ = this.alertSvc.deleteAlerts(alertIds)
.subscribe(message => {
deleteAlerts$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success("删除成功！", "");
this.loadAlertsTable();
} else {
this.tableLoading = false;
this.notifySvc.error("删除失败！", message.msg);
}
},
error => {
const deleteAlerts$ = this.alertSvc.deleteAlerts(alertIds).subscribe(
message => {
deleteAlerts$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success('删除成功！', '');
this.loadAlertsTable();
} else {
this.tableLoading = false;
deleteAlerts$.unsubscribe();
this.notifySvc.error("删除失败！", error.msg)
this.notifySvc.error('删除失败！', message.msg);
}
);
},
error => {
this.tableLoading = false;
deleteAlerts$.unsubscribe();
this.notifySvc.error('删除失败！', error.msg);
}
);
}
updateAlertsStatus(alertIds: Set<number>, status: number) {
this.tableLoading = true;
const markAlertsStatus$ = this.alertSvc.applyAlertsStatus(alertIds, status)
.subscribe(message => {
markAlertsStatus$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success("标记成功！", "");
this.loadAlertsTable();
} else {
this.tableLoading = false;
this.notifySvc.error("标记失败！", message.msg);
}
},
error => {
const markAlertsStatus$ = this.alertSvc.applyAlertsStatus(alertIds, status).subscribe(
message => {
markAlertsStatus$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success('标记成功！', '');
this.loadAlertsTable();
} else {
this.tableLoading = false;
markAlertsStatus$.unsubscribe();
this.notifySvc.error("标记失败！", error.msg)
this.notifySvc.error('标记失败！', message.msg);
}
);
},
error => {
this.tableLoading = false;
markAlertsStatus$.unsubscribe();
this.notifySvc.error('标记失败！', error.msg);
}
);
}
// begin: 列表多选分页逻辑

266
web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
View File

@@ -22,58 +22,61 @@
<button nz-button nzType="primary" (click)="syncReceiver()" nz-tooltip nzTooltipTitle="刷新">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<nz-table #fixedTable [nzData]="receivers"
nzFrontPagination ="false"
[nzLoading] = "receiverTableLoading"
[nzScroll]="{ x: '1150px', y: '1240px' }">
<nz-table
#fixedTable
[nzData]="receivers"
nzFrontPagination="false"
[nzLoading]="receiverTableLoading"
[nzScroll]="{ x: '1150px', y: '1240px' }"
>
<thead>
<tr>
<th nzAlign="center">接收人</th>
<th nzAlign="center">通知方式</th>
<th nzAlign="center">配置</th>
<th nzAlign="center">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th>
</tr>
<tr>
<th nzAlign="center">接收人</th>
<th nzAlign="center">通知方式</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">
<span>{{ data.name}}</span>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.type == 0" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>短信</span>
</nz-tag>
<nz-tag *ngIf="data.type == 1" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>邮件</span>
</nz-tag>
<nz-tag *ngIf="data.type == 2" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>WebHook</span>
</nz-tag>
<nz-tag *ngIf="data.type == 3" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>微信公众号</span>
</nz-tag>
</td>
<td nzAlign="center">
<span *ngIf="data.type == 0">{{data.phone}}</span>
<span *ngIf="data.type == 1">{{data.email}}</span>
<span *ngIf="data.type == 2">{{data.hookUrl}}</span>
<span *ngIf="data.type == 3">{{data.wechatId}}</span>
</td>
<td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneNoticeReceiver(data.id)" nz-tooltip nzTooltipTitle="删除接收人">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</td>
</tr>
<tr *ngFor="let data of fixedTable.data">
<td nzAlign="center">
<span>{{ data.name }}</span>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.type == 0" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>短信</span>
</nz-tag>
<nz-tag *ngIf="data.type == 1" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>邮件</span>
</nz-tag>
<nz-tag *ngIf="data.type == 2" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>WebHook</span>
</nz-tag>
<nz-tag *ngIf="data.type == 3" nzColor="orange">
<i nz-icon nzType="notification" nzTheme="outline"></i>
<span>微信公众号</span>
</nz-tag>
</td>
<td nzAlign="center">
<span *ngIf="data.type == 0">{{ data.phone }}</span>
<span *ngIf="data.type == 1">{{ data.email }}</span>
<span *ngIf="data.type == 2">{{ data.hookUrl }}</span>
<span *ngIf="data.type == 3">{{ data.wechatId }}</span>
</td>
<td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneNoticeReceiver(data.id)" nz-tooltip nzTooltipTitle="删除接收人">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</td>
</tr>
</tbody>
</nz-table>
</nz-tab>
@@ -85,90 +88,84 @@
<button nz-button nzType="primary" (click)="syncRule()" nz-tooltip nzTooltipTitle="刷新">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<nz-table #ruleFixedTable [nzData]="rules"
nzFrontPagination ="false"
[nzLoading] = "ruleTableLoading"
[nzScroll]="{ x: '1150px', y: '1240px' }">
<nz-table
#ruleFixedTable
[nzData]="rules"
nzFrontPagination="false"
[nzLoading]="ruleTableLoading"
[nzScroll]="{ x: '1150px', y: '1240px' }"
>
<thead>
<tr>
<th nzAlign="center">策略名称</th>
<th nzAlign="center">接收人</th>
<th nzAlign="center">转发所有</th>
<th nzAlign="center">是否启用</th>
<th nzAlign="center">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th>
</tr>
<tr>
<th nzAlign="center">策略名称</th>
<th nzAlign="center">接收人</th>
<th nzAlign="center">转发所有</th>
<th nzAlign="center">是否启用</th>
<th nzAlign="center">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of ruleFixedTable.data">
<td nzAlign="center">
<span>{{ data.name}}</span>
</td>
<td nzAlign="center">
<span>{{ data.receiverName}}</span>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.filterAll" nzColor="green">
<span>是</span>
</nz-tag>
<nz-tag *ngIf="!data.filterAll" nzColor="orange">
<span>否</span>
</nz-tag>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.enable" nzColor="green">
<span>开启</span>
</nz-tag>
<nz-tag *ngIf="!data.enable" nzColor="orange">
<span>关闭</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)" nz-tooltip nzTooltipTitle="删除告警策略">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</td>
</tr>
<tr *ngFor="let data of ruleFixedTable.data">
<td nzAlign="center">
<span>{{ data.name }}</span>
</td>
<td nzAlign="center">
<span>{{ data.receiverName }}</span>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.filterAll" nzColor="green">
<span>是</span>
</nz-tag>
<nz-tag *ngIf="!data.filterAll" nzColor="orange">
<span>否</span>
</nz-tag>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.enable" nzColor="green">
<span>开启</span>
</nz-tag>
<nz-tag *ngIf="!data.enable" nzColor="orange">
<span>关闭</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)" nz-tooltip nzTooltipTitle="删除告警策略">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</td>
</tr>
</tbody>
</nz-table>
</nz-tab>
</nz-tabset>
<!-- 新增或修改通知接收人弹出框 -->
<nz-modal
[(nzVisible)]="isManageReceiverModalVisible"
[nzTitle]="isManageReceiverModalAdd?'新增接收人' : '修改接收人'"
[nzTitle]="isManageReceiverModalAdd ? '新增接收人' : '修改接收人'"
(nzOnCancel)="onManageReceiverModalCancel()"
(nzOnOk)="onManageReceiverModalOk()"
nzMaskClosable="false"
nzWidth="60%"
[nzOkLoading]="isManageReceiverModalOkLoading"
>
<div *nzModalContent class = "-inner-content">
<div *nzModalContent class="-inner-content">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">接收人名称</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">接收人名称</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="receiver.name" nz-input name="name" type="text" id="name">
<input [(ngModel)]="receiver.name" nz-input name="name" type="text" id="name" />
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7"
nzRequired="true"
nzFor= "type">通知方式
</nz-form-label>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="type">通知方式 </nz-form-label>
<nz-form-control nzSpan="8">
<nz-select
[(ngModel)]="receiver.type"
nzAllowClear
nzPlaceHolder="Choose"
name="type" id="type"
>
<nz-select [(ngModel)]="receiver.type" nzAllowClear nzPlaceHolder="Choose" name="type" id="type">
<nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option>
<nz-option [nzValue]="1" nzLabel="邮箱"></nz-option>
<nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
@@ -177,29 +174,29 @@
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="receiver.type === 0">
<nz-form-label [nzSpan]="7" nzFor= 'phone' [nzRequired]="receiver.type === 0">手机号</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="phone" [nzRequired]="receiver.type === 0">手机号</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="receiver.phone" nz-input name="phone" type="tel" id="phone">
<input [(ngModel)]="receiver.phone" nz-input name="phone" type="tel" id="phone" />
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item *ngIf="receiver.type === 1">
<nz-form-label [nzSpan]="7" nzFor= 'email' [nzRequired]="receiver.type === 1">邮箱</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="email" [nzRequired]="receiver.type === 1">邮箱</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="receiver.email" nz-input name="email" type="email" id="email">
<input [(ngModel)]="receiver.email" nz-input name="email" type="email" id="email" />
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item *ngIf="receiver.type === 2">
<nz-form-label [nzSpan]="7" nzFor= 'hookUrl' [nzRequired]="receiver.type === 2">URL地址</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="hookUrl" [nzRequired]="receiver.type === 2">URL地址</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="receiver.hookUrl" nz-input name="hookUrl" type="url" id="hookUrl">
<input [(ngModel)]="receiver.hookUrl" nz-input name="hookUrl" type="url" id="hookUrl" />
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item *ngIf="receiver.type === 3">
<nz-form-label [nzSpan]="7" nzFor= 'wechatId' [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="receiver.wechatId" nz-input name="wechatId" type="text" id="wechatId">
<input [(ngModel)]="receiver.wechatId" nz-input name="wechatId" type="text" id="wechatId" />
</nz-form-control>
</nz-form-item >
</nz-form-item>
</form>
</div>
</nz-modal>
@@ -207,29 +204,29 @@
<!-- 新增或修改通知策略弹出框 -->
<nz-modal
[(nzVisible)]="isManageRuleModalVisible"
[nzTitle]="isManageRuleModalAdd?'新增策略' : '修改策略'"
[nzTitle]="isManageRuleModalAdd ? '新增策略' : '修改策略'"
(nzOnCancel)="onManageRuleModalCancel()"
(nzOnOk)="onManageRuleModalOk()"
nzMaskClosable="false"
nzWidth="60%"
[nzOkLoading]="isManageRuleModalOkLoading"
>
<div *nzModalContent class = "-inner-content">
<div *nzModalContent class="-inner-content">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'rule_name' nzRequired="true">策略名称</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">策略名称</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="rule.name" nz-input name="rule_name" type="text" id="rule_name">
<input [(ngModel)]="rule.name" nz-input name="rule_name" type="text" id="rule_name" />
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "filterAll">转发所有</nz-form-label>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="filterAll">转发所有</nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="rule.filterAll" disabled name="filterAll" id="filterAll"></nz-switch>
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "receiver">接收人</nz-form-label>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="receiver">接收人</nz-form-label>
<nz-form-control nzSpan="8">
<nz-select
[(ngModel)]="rule.receiverId"
@@ -238,17 +235,18 @@
nzShowSearch
nzAllowClear
nzPlaceHolder="Select a person"
name="receiver" id="receiver"
name="receiver"
id="receiver"
>
</nz-select>
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "enable">是否启用</nz-form-label>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="enable">是否启用</nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="rule.enable" name="enable" id="enable"></nz-switch>
</nz-form-control>
</nz-form-item >
</nz-form-item>
</form>
</div>
</nz-modal>

5
web-app/src/app/routes/alert/alert-notice/alert-notice.component.spec.ts
View File

@@ -8,9 +8,8 @@ describe('AlertNoticeComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AlertNoticeComponent ]
})
.compileComponents();
declarations: [AlertNoticeComponent]
}).compileComponents();
});
beforeEach(() => {

310
web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts
View File

@@ -1,24 +1,25 @@
import { Component, OnInit } from '@angular/core';
import {NzNotificationService} from "ng-zorro-antd/notification";
import {NoticeReceiverService} from "../../../service/notice-receiver.service";
import {NoticeRuleService} from "../../../service/notice-rule.service";
import {NoticeReceiver} from "../../../pojo/NoticeReceiver";
import {finalize} from "rxjs/operators";
import {NoticeRule} from "../../../pojo/NoticeRule";
import {NzModalService} from "ng-zorro-antd/modal";
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { finalize } from 'rxjs/operators';
import { NoticeReceiver } from '../../../pojo/NoticeReceiver';
import { NoticeRule } from '../../../pojo/NoticeRule';
import { NoticeReceiverService } from '../../../service/notice-receiver.service';
import { NoticeRuleService } from '../../../service/notice-rule.service';
@Component({
selector: 'app-alert-notice',
templateUrl: './alert-notice.component.html',
styles: [
]
styles: []
})
export class AlertNoticeComponent implements OnInit {
constructor(private notifySvc: NzNotificationService,
private noticeReceiverSvc: NoticeReceiverService,
private modal: NzModalService,
private noticeRuleSvc : NoticeRuleService) { }
constructor(
private notifySvc: NzNotificationService,
private noticeReceiverSvc: NoticeReceiverService,
private modal: NzModalService,
private noticeRuleSvc: NoticeRuleService
) {}
receivers!: NoticeReceiver[];
receiverTableLoading: boolean = true;
@@ -38,8 +39,8 @@ export class AlertNoticeComponent implements OnInit {
loadReceiversTable() {
this.receiverTableLoading = true;
let receiverInit$ = this.noticeReceiverSvc.getReceivers()
.subscribe(message => {
let receiverInit$ = this.noticeReceiverSvc.getReceivers().subscribe(
message => {
this.receiverTableLoading = false;
if (message.code === 0) {
this.receivers = message.data;
@@ -47,16 +48,18 @@ export class AlertNoticeComponent implements OnInit {
console.warn(message.msg);
}
receiverInit$.unsubscribe();
}, error => {
},
error => {
console.error(error.msg);
this.receiverTableLoading = false;
receiverInit$.unsubscribe();
});
}
);
}
loadRulesTable() {
this.ruleTableLoading = true;
let rulesInit$ = this.noticeRuleSvc.getNoticeRules()
.subscribe(message => {
let rulesInit$ = this.noticeRuleSvc.getNoticeRules().subscribe(
message => {
this.ruleTableLoading = false;
if (message.code === 0) {
this.rules = message.data;
@@ -64,71 +67,85 @@ export class AlertNoticeComponent implements OnInit {
console.warn(message.msg);
}
rulesInit$.unsubscribe();
}, error => {
},
error => {
console.error(error.msg);
this.ruleTableLoading = false;
rulesInit$.unsubscribe();
});
}
);
}
onDeleteOneNoticeReceiver(receiveId : number) {
onDeleteOneNoticeReceiver(receiveId: number) {
this.modal.confirm({
nzTitle: '请确认是否删除！',
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.deleteOneNoticeReceiver(receiveId)
});
}
deleteOneNoticeReceiver(receiveId : number) {
const deleteReceiver$ = this.noticeReceiverSvc.deleteReceiver(receiveId)
.pipe(finalize(() => {
deleteReceiver$.unsubscribe();
}))
.subscribe(message => {
if (message.code === 0) {
this.notifySvc.success("删除成功！", "");
this.loadReceiversTable();
} else {
this.notifySvc.error("删除失败！", message.msg);
deleteOneNoticeReceiver(receiveId: number) {
const deleteReceiver$ = this.noticeReceiverSvc
.deleteReceiver(receiveId)
.pipe(
finalize(() => {
deleteReceiver$.unsubscribe();
})
)
.subscribe(
message => {
if (message.code === 0) {
this.notifySvc.success('删除成功！', '');
this.loadReceiversTable();
} else {
this.notifySvc.error('删除失败！', message.msg);
}
},
error => {
this.notifySvc.error('删除失败！', error.msg);
}
}, error => {
this.notifySvc.error("删除失败！", error.msg);
})
);
}
onDeleteOneNoticeRule(ruleId : number) {
onDeleteOneNoticeRule(ruleId: number) {
this.modal.confirm({
nzTitle: '请确认是否删除！',
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.deleteOneNoticeRule(ruleId)
});
}
deleteOneNoticeRule(ruleId : number) {
const deleteRule$ = this.noticeRuleSvc.deleteNoticeRule(ruleId)
.pipe(finalize(() => {
deleteRule$.unsubscribe();
}))
.subscribe(message => {
if (message.code === 0) {
this.notifySvc.success("删除成功！", "");
this.loadRulesTable();
} else {
this.notifySvc.error("删除失败！", message.msg);
deleteOneNoticeRule(ruleId: number) {
const deleteRule$ = this.noticeRuleSvc
.deleteNoticeRule(ruleId)
.pipe(
finalize(() => {
deleteRule$.unsubscribe();
})
)
.subscribe(
message => {
if (message.code === 0) {
this.notifySvc.success('删除成功！', '');
this.loadRulesTable();
} else {
this.notifySvc.error('删除失败！', message.msg);
}
},
error => {
this.notifySvc.error('删除失败！', error.msg);
}
}, error => {
this.notifySvc.error("删除失败！", error.msg);
})
);
}
// start 新增或修改通知接收人弹出框
isManageReceiverModalVisible : boolean = false;
isManageReceiverModalVisible: boolean = false;
isManageReceiverModalAdd: boolean = true;
isManageReceiverModalOkLoading: boolean = false;
receiver!: NoticeReceiver;
@@ -138,7 +155,7 @@ export class AlertNoticeComponent implements OnInit {
this.isManageReceiverModalVisible = true;
this.isManageReceiverModalAdd = true;
}
onEditOneNoticeReceiver(receiver : NoticeReceiver) {
onEditOneNoticeReceiver(receiver: NoticeReceiver) {
this.receiver = receiver;
this.isManageReceiverModalVisible = true;
this.isManageReceiverModalAdd = false;
@@ -150,44 +167,56 @@ export class AlertNoticeComponent implements OnInit {
onManageReceiverModalOk() {
this.isManageReceiverModalOkLoading = true;
if (this.isManageReceiverModalAdd) {
const modalOk$ = this.noticeReceiverSvc.newReceiver(this.receiver)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isManageReceiverModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isManageReceiverModalVisible = false;
this.notifySvc.success("新增成功！", "");
this.loadReceiversTable();
} else {
this.notifySvc.error("新增失败！", message.msg);
const modalOk$ = this.noticeReceiverSvc
.newReceiver(this.receiver)
.pipe(
finalize(() => {
modalOk$.unsubscribe();
this.isManageReceiverModalOkLoading = false;
})
)
.subscribe(
message => {
if (message.code === 0) {
this.isManageReceiverModalVisible = false;
this.notifySvc.success('新增成功！', '');
this.loadReceiversTable();
} else {
this.notifySvc.error('新增失败！', message.msg);
}
},
error => {
this.notifySvc.error('新增失败！', error.msg);
}
}, error => {
this.notifySvc.error("新增失败！", error.msg);
})
);
} else {
const modalOk$ = this.noticeReceiverSvc.editReceiver(this.receiver)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isManageReceiverModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isManageReceiverModalVisible = false;
this.notifySvc.success("修改成功！", "");
this.loadReceiversTable();
} else {
this.notifySvc.error("修改失败！", message.msg);
const modalOk$ = this.noticeReceiverSvc
.editReceiver(this.receiver)
.pipe(
finalize(() => {
modalOk$.unsubscribe();
this.isManageReceiverModalOkLoading = false;
})
)
.subscribe(
message => {
if (message.code === 0) {
this.isManageReceiverModalVisible = false;
this.notifySvc.success('修改成功！', '');
this.loadReceiversTable();
} else {
this.notifySvc.error('修改失败！', message.msg);
}
},
error => {
this.notifySvc.error('修改失败！', error.msg);
}
}, error => {
this.notifySvc.error("修改失败！", error.msg);
})
);
}
}
// start 新增或修改通知策略弹出框
isManageRuleModalVisible : boolean = false;
isManageRuleModalVisible: boolean = false;
isManageRuleModalAdd: boolean = true;
isManageRuleModalOkLoading: boolean = false;
rule!: NoticeRule;
@@ -199,43 +228,53 @@ export class AlertNoticeComponent implements OnInit {
this.isManageRuleModalAdd = true;
}
onEditOneNoticeRule(rule : NoticeRule) {
onEditOneNoticeRule(rule: NoticeRule) {
this.rule = rule;
this.isManageRuleModalVisible = true;
this.isManageRuleModalAdd = false;
this.receiversOption.push({
value: rule.receiverId,
label: rule.receiverName
})
});
}
loadReceiversOption() {
let receiverOption$ = this.noticeReceiverSvc.getReceivers()
.subscribe(message => {
let receiverOption$ = this.noticeReceiverSvc.getReceivers().subscribe(
message => {
if (message.code === 0) {
let data = message.data;
this.receiversOption = [];
data.forEach(item => {
let label = item.name + '-';
let label = `${item.name}-`;
switch (item.type) {
case 0: label = label + 'Phone';break;
case 1: label = label + 'Email';break;
case 2: label = label + 'WebHook';break;
case 3: label = label + 'WeChat';break;
case 0:
label = `${label}Phone`;
break;
case 1:
label = `${label}Email`;
break;
case 2:
label = `${label}WebHook`;
break;
case 3:
label = `${label}WeChat`;
break;
}
this.receiversOption.push({
value: item.id,
label: label
});
})
});
} else {
console.warn(message.msg);
}
receiverOption$.unsubscribe();
}, error => {
},
error => {
console.error(error.msg);
receiverOption$.unsubscribe();
});
}
);
}
onManageRuleModalCancel() {
@@ -250,40 +289,51 @@ export class AlertNoticeComponent implements OnInit {
});
this.isManageRuleModalOkLoading = true;
if (this.isManageRuleModalAdd) {
const modalOk$ = this.noticeRuleSvc.newNoticeRule(this.rule)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isManageRuleModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isManageRuleModalVisible = false;
this.notifySvc.success("新增成功！", "");
this.loadRulesTable();
} else {
this.notifySvc.error("新增失败！", message.msg);
const modalOk$ = this.noticeRuleSvc
.newNoticeRule(this.rule)
.pipe(
finalize(() => {
modalOk$.unsubscribe();
this.isManageRuleModalOkLoading = false;
})
)
.subscribe(
message => {
if (message.code === 0) {
this.isManageRuleModalVisible = false;
this.notifySvc.success('新增成功！', '');
this.loadRulesTable();
} else {
this.notifySvc.error('新增失败！', message.msg);
}
},
error => {
this.notifySvc.error('新增失败！', error.msg);
}
}, error => {
this.notifySvc.error("新增失败！", error.msg);
})
);
} else {
const modalOk$ = this.noticeRuleSvc.editNoticeRule(this.rule)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isManageRuleModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isManageRuleModalVisible = false;
this.notifySvc.success("修改成功！", "");
this.loadRulesTable();
} else {
this.notifySvc.error("修改失败！", message.msg);
const modalOk$ = this.noticeRuleSvc
.editNoticeRule(this.rule)
.pipe(
finalize(() => {
modalOk$.unsubscribe();
this.isManageRuleModalOkLoading = false;
})
)
.subscribe(
message => {
if (message.code === 0) {
this.isManageRuleModalVisible = false;
this.notifySvc.success('修改成功！', '');
this.loadRulesTable();
} else {
this.notifySvc.error('修改失败！', message.msg);
}
},
error => {
this.notifySvc.error('修改失败！', error.msg);
}
}, error => {
this.notifySvc.error("修改失败！", error.msg);
})
);
}
}
}

9
web-app/src/app/routes/alert/alert-routing.module.ts
View File

@@ -1,8 +1,9 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {AlertCenterComponent} from "./alert-center/alert-center.component";
import {AlertSettingComponent} from "./alert-setting/alert-setting.component";
import {AlertNoticeComponent} from "./alert-notice/alert-notice.component";
import { AlertCenterComponent } from './alert-center/alert-center.component';
import { AlertNoticeComponent } from './alert-notice/alert-notice.component';
import { AlertSettingComponent } from './alert-setting/alert-setting.component';
const routes: Routes = [
{ path: '', component: AlertCenterComponent },
@@ -16,4 +17,4 @@ const routes: Routes = [
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AlertRoutingModule { }
export class AlertRoutingModule {}

252
web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
View File

@@ -17,7 +17,7 @@
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
新增阈值
</button>
<button nz-button nzType="primary" (click)="onEditAlertDefine()" >
<button nz-button nzType="primary" (click)="onEditAlertDefine()">
<i nz-icon nzType="edit" nzTheme="outline"></i>
编辑
</button>
@@ -29,110 +29,110 @@
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<nz-table #fixedTable [nzData]="defines"
[nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total"
nzFrontPagination ="false"
[nzLoading] = "tableLoading"
nzShowSizeChanger
[nzShowTotal]="rangeTemplate"
[nzPageSizeOptions]="[8,15,25]"
(nzQueryParams)="onTablePageChange($event)"
nzShowPagination = "true" [nzScroll]="{ x: '1150px', y: '1240px' }">
<nz-table
#fixedTable
[nzData]="defines"
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzTotal]="total"
nzFrontPagination="false"
[nzLoading]="tableLoading"
nzShowSizeChanger
[nzShowTotal]="rangeTemplate"
[nzPageSizeOptions]="[8, 15, 25]"
(nzQueryParams)="onTablePageChange($event)"
nzShowPagination="true"
[nzScroll]="{ x: '1150px', y: '1240px' }"
>
<thead>
<tr>
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">指标对象</th>
<th nzAlign="center">阈值触发表达式</th>
<th nzAlign="center">告警级别</th>
<th nzAlign="center">触发次数</th>
<th nzAlign="center">通知模版</th>
<th nzAlign="center">全局默认</th>
<th nzAlign="center">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th>
</tr>
<tr>
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">指标对象</th>
<th nzAlign="center">阈值触发表达式</th>
<th nzAlign="center">告警级别</th>
<th nzAlign="center">触发次数</th>
<th nzAlign="center">通知模版</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]="checkedDefineIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center">
<span>{{ data.app + '.' + data.metric + '.' + data.field }}</span>
</td>
<td nzAlign="center">
<span>{{ data.expr}}</span>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.priority == 0" nzColor="red">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>紧急告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 1" nzColor="orange">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>严重告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 2" nzColor="yellow">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>警告告警</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.times }}</td>
<td nzAlign="center">{{ data.template }}</td>
<td nzAlign="center">
<nz-tag *ngIf="data.preset" nzColor="green">
<span>是</span>
</nz-tag>
<nz-tag *ngIf="!data.preset" nzColor="orange">
<span>否</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控">
<i nz-icon nzType="link" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onEditOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="修改告警配置">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="删除告警配置">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</td>
</tr>
<tr *ngFor="let data of fixedTable.data">
<td nzAlign="center" nzLeft [nzChecked]="checkedDefineIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center">
<span>{{ data.app + '.' + data.metric + '.' + data.field }}</span>
</td>
<td nzAlign="center">
<span>{{ data.expr }}</span>
</td>
<td nzAlign="center">
<nz-tag *ngIf="data.priority == 0" nzColor="red">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>紧急告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 1" nzColor="orange">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>严重告警</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 2" nzColor="yellow">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>警告告警</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.times }}</td>
<td nzAlign="center">{{ data.template }}</td>
<td nzAlign="center">
<nz-tag *ngIf="data.preset" nzColor="green">
<span>是</span>
</nz-tag>
<nz-tag *ngIf="!data.preset" nzColor="orange">
<span>否</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控">
<i nz-icon nzType="link" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onEditOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="修改告警配置">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="删除告警配置">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</td>
</tr>
</tbody>
</nz-table>
<ng-template #rangeTemplate>
总量 {{ total }}
</ng-template>
<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
<!-- 新增或修改告警定义弹出框 -->
<nz-modal
[(nzVisible)]="isManageModalVisible"
[nzTitle]="isManageModalAdd?'新增告警阈值' : '修改告警阈值'"
[nzTitle]="isManageModalAdd ? '新增告警阈值' : '修改告警阈值'"
(nzOnCancel)="onManageModalCancel()"
(nzOnOk)="onManageModalOk()"
nzMaskClosable="false"
nzWidth="60%"
[nzOkLoading]="isManageModalOkLoading"
>
<div *nzModalContent class = "-inner-content">
<div *nzModalContent class="-inner-content">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'target' nzRequired="true">指标对象</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">指标对象</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues">
</nz-cascader>
<nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues"> </nz-cascader>
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-col [nzSpan]="8" nzOffset="7">
<nz-collapse>
<nz-collapse-panel
[nzActive] = "isManageModalAdd"
nzHeader="支持的阈值触发表达式环境变量与操作符"
>
<nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的阈值触发表达式环境变量与操作符">
<nz-list nzSize="small" nzSplit="false">
<nz-list-item *ngIf="cascadeValues.length == 3">
<code>{{cascadeValues[2]}} : 选中的指标对象</code>
<code>{{ cascadeValues[2] }} : 选中的指标对象</code>
</nz-list-item>
<nz-list-item>
<code>instance : 所属行实例值</code>
@@ -146,29 +146,39 @@
</nz-col>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'expr' nzRequired="true" nzTooltipTitle="根据此表达式来计算判断是否触发阈值,表达式环境变量和操作符见上方">
<nz-form-label
[nzSpan]="7"
nzFor="expr"
nzRequired="true"
nzTooltipTitle="根据此表达式来计算判断是否触发阈值,表达式环境变量和操作符见上方"
>
阈值触发表达式
</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea [(ngModel)]="define.expr" rows="3" nz-input
name="expr" id="expr" placeholder="根据此表达式计算判断是否触发阈值.&#10;示例: equals&#40;instance,&quot;cpu1&quot;&#41; &amp;&amp; usage&gt;40">
<textarea
[(ngModel)]="define.expr"
rows="3"
nz-input
name="expr"
id="expr"
placeholder='根据此表达式计算判断是否触发阈值.&#10;示例: equals&#40;instance,"cpu1"&#41; &amp;&amp; usage&gt;40'
>
</textarea>
</nz-textarea-count>
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "priority"
nzTooltipTitle="触发阈值的告警级别,从低到高依次为:警告-warning，严重-critical，紧急-emergency">
<nz-form-label
nzSpan="7"
nzRequired="true"
nzFor="priority"
nzTooltipTitle="触发阈值的告警级别,从低到高依次为:警告-warning，严重-critical，紧急-emergency"
>
告警级别
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-select
[(ngModel)]="define.priority"
nzAllowClear
nzPlaceHolder="Choose"
name="priority" id="priority"
>
<nz-select [(ngModel)]="define.priority" nzAllowClear nzPlaceHolder="Choose" name="priority" id="priority">
<nz-option [nzValue]="0" nzLabel="紧急告警"></nz-option>
<nz-option [nzValue]="1" nzLabel="严重告警"></nz-option>
<nz-option [nzValue]="2" nzLabel="警告告警"></nz-option>
@@ -176,28 +186,24 @@
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "duration" nzTooltipTitle="设置触发阈值多少次之后才会发送告警">
<nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" nzTooltipTitle="设置触发阈值多少次之后才会发送告警">
触发次数
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1"
name="duration" id="duration">
<nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1" name="duration" id="duration">
</nz-input-number>
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-col [nzSpan]="8" nzOffset="7">
<nz-collapse>
<nz-collapse-panel
[nzActive] = "isManageModalAdd"
nzHeader="支持的通知模版环境变量"
>
<nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的通知模版环境变量">
<nz-list nzSize="small" nzSplit="false">
<nz-list-item *ngIf="cascadeValues.length == 3">
<code>&#36;&#40;metric&#41; : 选中的指标对象名称</code>
</nz-list-item>
<nz-list-item *ngIf="cascadeValues.length == 3">
<code>&#36;&#40;{{cascadeValues[2]}}&#41; : 选中的指标对象值</code>
<code>&#36;&#40;{{ cascadeValues[2] }}&#41; : 选中的指标对象值</code>
</nz-list-item>
<nz-list-item>
<code>&#36;&#40;instance&#41; : 所在行实例值</code>
@@ -214,33 +220,37 @@
</nz-col>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'template' nzRequired="true" nzTooltipTitle="告警触发后发送的通知信息模版,模版环境变量见上方">
<nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" nzTooltipTitle="告警触发后发送的通知信息模版,模版环境变量见上方">
通知模版
</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="200">
<textarea [(ngModel)]="define.template" rows="3" nz-input
name="template" id="template" placeholder="请输入告警的通知模版.&#10;示例: ${app}.${metrics}.${metric}'s value is too high">
<textarea
[(ngModel)]="define.template"
rows="3"
nz-input
name="template"
id="template"
placeholder="请输入告警的通知模版.&#10;示例: ${app}.${metrics}.${metric}'s value is too high"
>
</textarea>
</nz-textarea-count>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控">
<nz-form-label nzSpan="7" nzRequired="true" nzFor="preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控">
全局默认
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
</nz-form-control>
</nz-form-item >
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "enable" nzTooltipTitle="此告警阈值配置开启生效或关闭">
启用告警
</nz-form-label>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" nzTooltipTitle="此告警阈值配置开启生效或关闭"> 启用告警 </nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="define.enable" name="enable" id="enable"></nz-switch>
</nz-form-control>
</nz-form-item >
</nz-form-item>
</form>
</div>
</nz-modal>
@@ -274,21 +284,17 @@
>
<nz-table #t [nzData]="$asTransferItems(items)" nzSize="small">
<thead>
<tr>
<th [nzChecked]="stat.checkAll" [nzIndeterminate]="stat.checkHalf"
(nzCheckedChange)="onItemSelectAll($event)"></th>
<th *ngIf="direction=='left'">未关联监控</th>
<th *ngIf="direction=='right'">已关联监控</th>
</tr>
<tr>
<th [nzChecked]="stat.checkAll" [nzIndeterminate]="stat.checkHalf" (nzCheckedChange)="onItemSelectAll($event)"></th>
<th *ngIf="direction == 'left'">未关联监控</th>
<th *ngIf="direction == 'right'">已关联监控</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
<td
[nzChecked]="!!data.checked"
(nzCheckedChange)="onItemSelect(data)"
></td>
<td>{{ data.name }}</td>
</tr>
<tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
<td [nzChecked]="!!data.checked" (nzCheckedChange)="onItemSelect(data)"></td>
<td>{{ data.name }}</td>
</tr>
</tbody>
</nz-table>
</ng-template>

5
web-app/src/app/routes/alert/alert-setting/alert-setting.component.spec.ts
View File

@@ -8,9 +8,8 @@ describe('AlertSettingComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AlertSettingComponent ]
})
.compileComponents();
declarations: [AlertSettingComponent]
}).compileComponents();
});
beforeEach(() => {

270
web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
View File

@@ -1,31 +1,32 @@
import { Component, OnInit } from '@angular/core';
import {NzTableQueryParams} from "ng-zorro-antd/table";
import {NzModalService} from "ng-zorro-antd/modal";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {AlertDefineService} from "../../../service/alert-define.service";
import {AlertDefine} from "../../../pojo/AlertDefine";
import {finalize, map} from "rxjs/operators";
import {AppDefineService} from "../../../service/app-define.service";
import {TransferChange, TransferItem} from "ng-zorro-antd/transfer";
import {zip} from "rxjs";
import {MonitorService} from "../../../service/monitor.service";
import {Message} from "../../../pojo/Message";
import {AlertDefineBind} from "../../../pojo/AlertDefineBind";
import {Monitor} from "../../../pojo/Monitor";
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { NzTableQueryParams } from 'ng-zorro-antd/table';
import { TransferChange, TransferItem } from 'ng-zorro-antd/transfer';
import { zip } from 'rxjs';
import { finalize, map } from 'rxjs/operators';
import { AlertDefine } from '../../../pojo/AlertDefine';
import { AlertDefineBind } from '../../../pojo/AlertDefineBind';
import { Message } from '../../../pojo/Message';
import { Monitor } from '../../../pojo/Monitor';
import { AlertDefineService } from '../../../service/alert-define.service';
import { AppDefineService } from '../../../service/app-define.service';
import { MonitorService } from '../../../service/monitor.service';
@Component({
selector: 'app-alert-setting',
templateUrl: './alert-setting.component.html',
styles: [
]
styles: []
})
export class AlertSettingComponent implements OnInit {
constructor(private modal: NzModalService,
private notifySvc: NzNotificationService,
private appDefineSvc: AppDefineService,
private monitorSvc: MonitorService,
private alertDefineSvc: AlertDefineService) { }
constructor(
private modal: NzModalService,
private notifySvc: NzNotificationService,
private appDefineSvc: AppDefineService,
private monitorSvc: MonitorService,
private alertDefineSvc: AlertDefineService
) {}
pageIndex: number = 1;
pageSize: number = 8;
@@ -39,19 +40,25 @@ export class AlertSettingComponent implements OnInit {
ngOnInit(): void {
this.loadAlertDefineTable();
// 查询监控层级
const getHierarchy$ = this.appDefineSvc.getAppHierarchy()
.pipe(finalize(() => {
getHierarchy$.unsubscribe();
}))
.subscribe(message => {
if (message.code === 0) {
this.appHierarchies = message.data;
} else {
console.warn(message.msg);
const getHierarchy$ = this.appDefineSvc
.getAppHierarchy()
.pipe(
finalize(() => {
getHierarchy$.unsubscribe();
})
)
.subscribe(
message => {
if (message.code === 0) {
this.appHierarchies = message.data;
} else {
console.warn(message.msg);
}
},
error => {
console.warn(error.msg);
}
}, error => {
console.warn(error.msg);
})
);
}
sync() {
@@ -60,8 +67,8 @@ export class AlertSettingComponent implements OnInit {
loadAlertDefineTable() {
this.tableLoading = true;
let alertDefineInit$ = this.alertDefineSvc.getAlertDefines(this.pageIndex - 1, this.pageSize)
.subscribe(message => {
let alertDefineInit$ = this.alertDefineSvc.getAlertDefines(this.pageIndex - 1, this.pageSize).subscribe(
message => {
this.tableLoading = false;
this.checkedAll = false;
this.checkedDefineIds.clear();
@@ -74,10 +81,12 @@ export class AlertSettingComponent implements OnInit {
console.warn(message.msg);
}
alertDefineInit$.unsubscribe();
}, error => {
},
error => {
this.tableLoading = false;
alertDefineInit$.unsubscribe();
});
}
);
}
onNewAlertDefine() {
@@ -89,7 +98,7 @@ export class AlertSettingComponent implements OnInit {
onEditOneAlertDefine(alertDefineId: number) {
if (alertDefineId == null) {
this.notifySvc.warning("未选中任何待编辑项！","");
this.notifySvc.warning('未选中任何待编辑项！', '');
return;
}
this.editAlertDefine(alertDefineId);
@@ -98,15 +107,15 @@ export class AlertSettingComponent implements OnInit {
onEditAlertDefine() {
// 编辑时只能选中一个
if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) {
this.notifySvc.warning("未选中任何待编辑项！","");
this.notifySvc.warning('未选中任何待编辑项！', '');
return;
}
if (this.checkedDefineIds.size > 1) {
this.notifySvc.warning("只能对一个选中项进行编辑！","");
this.notifySvc.warning('只能对一个选中项进行编辑！', '');
return;
}
let alertDefineId = 0;
this.checkedDefineIds.forEach(item => alertDefineId = item);
this.checkedDefineIds.forEach(item => (alertDefineId = item));
this.editAlertDefine(alertDefineId);
}
@@ -115,25 +124,31 @@ export class AlertSettingComponent implements OnInit {
this.isManageModalVisible = true;
this.isManageModalOkLoading = false;
// 查询告警定义信息
const getDefine$ = this.alertDefineSvc.getAlertDefine(alertDefineId)
.pipe(finalize(() => {
getDefine$.unsubscribe();
}))
.subscribe(message => {
if (message.code === 0) {
this.define = message.data;
this.cascadeValues = [this.define.app, this.define.metric, this.define.field];
} else {
this.notifySvc.error("查询此监控定义详情失败！",message.msg);
const getDefine$ = this.alertDefineSvc
.getAlertDefine(alertDefineId)
.pipe(
finalize(() => {
getDefine$.unsubscribe();
})
)
.subscribe(
message => {
if (message.code === 0) {
this.define = message.data;
this.cascadeValues = [this.define.app, this.define.metric, this.define.field];
} else {
this.notifySvc.error('查询此监控定义详情失败！', message.msg);
}
},
error => {
this.notifySvc.error('查询此监控定义详情失败！', error.msg);
}
}, error => {
this.notifySvc.error("查询此监控定义详情失败！",error.msg);
})
);
}
onDeleteAlertDefines() {
if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) {
this.notifySvc.warning("未选中任何待删除项！","");
this.notifySvc.warning('未选中任何待删除项！', '');
return;
}
this.modal.confirm({
@@ -141,7 +156,7 @@ export class AlertSettingComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.deleteAlertDefines(this.checkedDefineIds)
});
}
@@ -154,33 +169,34 @@ export class AlertSettingComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOkDanger: true,
nzOkType: "primary",
nzOkType: 'primary',
nzOnOk: () => this.deleteAlertDefines(defineIds)
});
}
deleteAlertDefines(defineIds: Set<number>) {
if (defineIds == null || defineIds.size == 0) {
this.notifySvc.warning("未选中任何待删除项！","");
this.notifySvc.warning('未选中任何待删除项！', '');
return;
}
this.tableLoading = true;
const deleteDefines$ = this.alertDefineSvc.deleteAlertDefines(defineIds)
.subscribe(message => {
const deleteDefines$ = this.alertDefineSvc.deleteAlertDefines(defineIds).subscribe(
message => {
deleteDefines$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success("删除成功！", "");
this.notifySvc.success('删除成功！', '');
this.loadAlertDefineTable();
} else {
this.tableLoading = false;
this.notifySvc.error("删除失败！", message.msg);
this.notifySvc.error('删除失败！', message.msg);
}
}, error => {
},
error => {
this.tableLoading = false;
deleteDefines$.unsubscribe();
this.notifySvc.error("删除失败！", error.msg)
})
this.notifySvc.error('删除失败！', error.msg);
}
);
}
// begin: 列表多选分页逻辑
@@ -201,6 +217,7 @@ export class AlertSettingComponent implements OnInit {
}
/**
* 分页回调
*
* @param params 页码信息
*/
onTablePageChange(params: NzTableQueryParams) {
@@ -211,7 +228,6 @@ export class AlertSettingComponent implements OnInit {
}
// end: 列表多选逻辑
// start 新增修改告警定义model
isManageModalVisible = false;
isManageModalOkLoading = false;
@@ -227,39 +243,51 @@ export class AlertSettingComponent implements OnInit {
this.define.metric = this.cascadeValues[1];
this.define.field = this.cascadeValues[2];
if (this.isManageModalAdd) {
const modalOk$ = this.alertDefineSvc.newAlertDefine(this.define)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isManageModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isManageModalVisible = false;
this.notifySvc.success("新增成功！", "");
this.loadAlertDefineTable();
} else {
this.notifySvc.error("新增失败！", message.msg);
const modalOk$ = this.alertDefineSvc
.newAlertDefine(this.define)
.pipe(
finalize(() => {
modalOk$.unsubscribe();
this.isManageModalOkLoading = false;
})
)
.subscribe(
message => {
if (message.code === 0) {
this.isManageModalVisible = false;
this.notifySvc.success('新增成功！', '');
this.loadAlertDefineTable();
} else {
this.notifySvc.error('新增失败！', message.msg);
}
},
error => {
this.notifySvc.error('新增失败！', error.msg);
}
}, error => {
this.notifySvc.error("新增失败！", error.msg);
})
);
} else {
const modalOk$ = this.alertDefineSvc.editAlertDefine(this.define)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isManageModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isManageModalVisible = false;
this.notifySvc.success("修改成功！", "");
this.loadAlertDefineTable();
} else {
this.notifySvc.error("修改失败！", message.msg);
const modalOk$ = this.alertDefineSvc
.editAlertDefine(this.define)
.pipe(
finalize(() => {
modalOk$.unsubscribe();
this.isManageModalOkLoading = false;
})
)
.subscribe(
message => {
if (message.code === 0) {
this.isManageModalVisible = false;
this.notifySvc.success('修改成功！', '');
this.loadAlertDefineTable();
} else {
this.notifySvc.error('修改失败！', message.msg);
}
},
error => {
this.notifySvc.error('修改失败！', error.msg);
}
}, error => {
this.notifySvc.error("修改失败！", error.msg);
})
);
}
}
// end 新增修改告警定义model
@@ -280,7 +308,7 @@ export class AlertSettingComponent implements OnInit {
if (defineBindData.data != undefined) {
defineBindData.data.forEach(bind => {
bindRecode[bind.monitorId] = bind.monitorName;
})
});
}
let listTmp: any[] = [];
if (monitorData.data != undefined) {
@@ -290,12 +318,13 @@ export class AlertSettingComponent implements OnInit {
name: monitor.name,
key: monitor.id,
direction: bindRecode[monitor.id] == undefined ? 'left' : 'right'
})
})
});
});
}
return listTmp;
})
).subscribe(list => this.transferData = list);
)
.subscribe(list => (this.transferData = list));
}
onConnectModalCancel() {
this.isConnectModalVisible = false;
@@ -311,23 +340,29 @@ export class AlertSettingComponent implements OnInit {
bind.monitorName = item.name;
defineBinds.push(bind);
}
})
const applyBind$ = this.alertDefineSvc.applyAlertDefineMonitorsBind(this.currentAlertDefineId, defineBinds)
.pipe(finalize(() => {
applyBind$.unsubscribe();
}))
.subscribe(message => {
this.isConnectModalOkLoading = false;
if (message.code === 0) {
this.notifySvc.success("应用成功！", "");
this.isConnectModalVisible = false;
this.loadAlertDefineTable();
} else {
this.notifySvc.error("应用失败！", message.msg);
});
const applyBind$ = this.alertDefineSvc
.applyAlertDefineMonitorsBind(this.currentAlertDefineId, defineBinds)
.pipe(
finalize(() => {
applyBind$.unsubscribe();
})
)
.subscribe(
message => {
this.isConnectModalOkLoading = false;
if (message.code === 0) {
this.notifySvc.success('应用成功！', '');
this.isConnectModalVisible = false;
this.loadAlertDefineTable();
} else {
this.notifySvc.error('应用失败！', message.msg);
}
},
error => {
this.notifySvc.error('应用失败！', error.msg);
}
}, error => {
this.notifySvc.error("应用失败！", error.msg);
})
);
}
change(ret: TransferChange): void {
const listKeys = ret.list.map(l => l.key);
@@ -344,5 +379,4 @@ export class AlertSettingComponent implements OnInit {
});
}
// end 告警定义与监控关联model
}

37
web-app/src/app/routes/alert/alert.module.ts
View File

@@ -1,24 +1,21 @@
import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared';
import { AlertRoutingModule } from './alert-routing.module';
import {NzBreadCrumbModule} from "ng-zorro-antd/breadcrumb";
import {NzDividerModule} from "ng-zorro-antd/divider";
import {AlertCenterComponent} from "./alert-center/alert-center.component";
import {AlertSettingComponent} from "./alert-setting/alert-setting.component";
import {AlertNoticeComponent} from "./alert-notice/alert-notice.component";
import {NzTagModule} from "ng-zorro-antd/tag";
import {NzRadioModule} from "ng-zorro-antd/radio";
import {NzSwitchModule} from "ng-zorro-antd/switch";
import {NzCascaderModule} from "ng-zorro-antd/cascader";
import {NzTransferModule} from "ng-zorro-antd/transfer";
import {NzCollapseModule} from "ng-zorro-antd/collapse";
import {NzListModule} from "ng-zorro-antd/list";
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzListModule } from 'ng-zorro-antd/list';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzSwitchModule } from 'ng-zorro-antd/switch';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzTransferModule } from 'ng-zorro-antd/transfer';
const COMPONENTS: Type<void>[] = [
AlertCenterComponent,
AlertSettingComponent,
AlertNoticeComponent
];
import { AlertCenterComponent } from './alert-center/alert-center.component';
import { AlertNoticeComponent } from './alert-notice/alert-notice.component';
import { AlertRoutingModule } from './alert-routing.module';
import { AlertSettingComponent } from './alert-setting/alert-setting.component';
const COMPONENTS: Array<Type<void>> = [AlertCenterComponent, AlertSettingComponent, AlertNoticeComponent];
@NgModule({
imports: [
@@ -34,6 +31,6 @@ const COMPONENTS: Type<void>[] = [
NzCollapseModule,
NzListModule
],
declarations: COMPONENTS,
declarations: COMPONENTS
})
export class AlertModule { }
export class AlertModule {}