diff --git a/web-app/src/app/pojo/AlertDefineBind.ts b/web-app/src/app/pojo/AlertDefineBind.ts
new file mode 100644
index 0000000..09e0505
--- /dev/null
+++ b/web-app/src/app/pojo/AlertDefineBind.ts
@@ -0,0 +1,8 @@
+export class AlertDefineBind {
+ id!: number;
+ alertDefineId!: number;
+ monitorId!: number;
+ monitorName!: string;
+ gmtCreate!: number;
+ gmtUpdate!: number;
+}
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index 7d41ad5..d4c2c81 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -82,6 +82,9 @@
| {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} |
+
@@ -97,15 +100,15 @@
总量 {{ total }}
-
+
+
+
+
+
+
+
+
+
+
+ |
+ 监控 |
+
+
+
+
+ |
+ {{ data.name }} |
+
+
+
+
+
+
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
index 000736b..8bc7651 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
@@ -6,8 +6,14 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
import {NzMessageService} from "ng-zorro-antd/message";
import {AlertDefineService} from "../../../service/alert-define.service";
import {AlertDefine} from "../../../pojo/AlertDefine";
-import {finalize} from "rxjs/operators";
+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";
@Component({
selector: 'app-alert-setting',
@@ -23,6 +29,7 @@ export class AlertSettingComponent implements OnInit {
private notifySvc: NzNotificationService,
private msg: NzMessageService,
private appDefineSvc: AppDefineService,
+ private monitorSvc: MonitorService,
private alertDefineSvc: AlertDefineService) { }
pageIndex: number = 1;
@@ -76,9 +83,9 @@ export class AlertSettingComponent implements OnInit {
onNewAlertDefine() {
this.define = new AlertDefine();
- this.isModalAdd = true;
- this.isModalVisible = true;
- this.isModalOkLoading = false;
+ this.isManageModalAdd = true;
+ this.isManageModalVisible = true;
+ this.isManageModalOkLoading = false;
}
onEditOneAlertDefine(alertDefineId: number) {
@@ -105,9 +112,9 @@ export class AlertSettingComponent implements OnInit {
}
editAlertDefine(alertDefineId: number) {
- this.isModalAdd = false;
- this.isModalVisible = true;
- this.isModalOkLoading = false;
+ this.isManageModalAdd = false;
+ this.isManageModalVisible = true;
+ this.isManageModalOkLoading = false;
// 查询告警定义信息
const getDefine$ = this.alertDefineSvc.getAlertDefine(alertDefineId)
.pipe(finalize(() => {
@@ -207,28 +214,28 @@ export class AlertSettingComponent implements OnInit {
// start 新增修改告警定义model
- isModalVisible = false;
- isModalOkLoading = false;
- isModalAdd = true;
+ isManageModalVisible = false;
+ isManageModalOkLoading = false;
+ isManageModalAdd = true;
define!: AlertDefine;
cascadeValues: string[] = [];
- onModalCancel() {
- this.isModalVisible = false;
+ onManageModalCancel() {
+ this.isManageModalVisible = false;
}
- onModalOk() {
- this.isModalOkLoading = true;
+ onManageModalOk() {
+ this.isManageModalOkLoading = true;
this.define.app = this.cascadeValues[0];
this.define.metric = this.cascadeValues[1];
this.define.field = this.cascadeValues[2];
- if (this.isModalAdd) {
+ if (this.isManageModalAdd) {
const modalOk$ = this.alertDefineSvc.newAlertDefine(this.define)
.pipe(finalize(() => {
modalOk$.unsubscribe();
- this.isModalOkLoading = false;
+ this.isManageModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
- this.isModalVisible = false;
+ this.isManageModalVisible = false;
this.notifySvc.success("新增成功！", "");
this.loadAlertDefineTable();
} else {
@@ -241,11 +248,11 @@ export class AlertSettingComponent implements OnInit {
const modalOk$ = this.alertDefineSvc.editAlertDefine(this.define)
.pipe(finalize(() => {
modalOk$.unsubscribe();
- this.isModalOkLoading = false;
+ this.isManageModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
- this.isModalVisible = false;
+ this.isManageModalVisible = false;
this.notifySvc.success("修改成功！", "");
this.loadAlertDefineTable();
} else {
@@ -256,4 +263,86 @@ export class AlertSettingComponent implements OnInit {
})
}
}
+ // end 新增修改告警定义model
+
+ // start 告警定义与监控关联model
+ isConnectModalVisible = false;
+ isConnectModalOkLoading = false;
+ transferData: TransferItem[] = [];
+ currentAlertDefineId!: number;
+ $asTransferItems = (data: unknown): TransferItem[] => data as TransferItem[];
+ onOpenConnectModal(alertDefineId: number, app: string) {
+ this.isConnectModalVisible = true;
+ this.currentAlertDefineId = alertDefineId;
+ zip(this.alertDefineSvc.getAlertDefineMonitorsBind(alertDefineId), this.monitorSvc.getMonitorsByApp(app))
+ .pipe(
+ map(([defineBindData, monitorData]: [Message, Message]) => {
+ let bindRecode: Record = {};
+ if (defineBindData.data != undefined) {
+ defineBindData.data.forEach(bind => {
+ bindRecode[bind.monitorId] = bind.monitorName;
+ })
+ }
+ let listTmp: any[] = [];
+ if (monitorData.data != undefined) {
+ monitorData.data.forEach(monitor => {
+ listTmp.push({
+ id: monitor.id,
+ name: monitor.name,
+ key: monitor.id,
+ direction: bindRecode[monitor.id] == undefined ? 'left' : 'right'
+ })
+ })
+ }
+ return listTmp;
+ })
+ ).subscribe(list => this.transferData = list);
+ }
+ onConnectModalCancel() {
+ this.isConnectModalVisible = false;
+ }
+ onConnectModalOk() {
+ this.isConnectModalOkLoading = true;
+ let defineBinds: AlertDefineBind[] = [];
+ this.transferData.forEach(item => {
+ if (item.direction == 'right') {
+ let bind = new AlertDefineBind();
+ bind.alertDefineId = this.currentAlertDefineId;
+ bind.monitorId = item.id;
+ 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);
+ }
+ }, error => {
+ this.notifySvc.error("应用失败！", error.msg);
+ })
+ }
+ change(ret: TransferChange): void {
+ const listKeys = ret.list.map(l => l.key);
+ const hasOwnKey = (e: TransferItem): boolean => e.hasOwnProperty('key');
+ this.transferData = this.transferData.map(e => {
+ if (listKeys.includes(e.key) && hasOwnKey(e)) {
+ if (ret.to === 'left') {
+ delete e.hide;
+ } else if (ret.to === 'right') {
+ e.hide = false;
+ }
+ }
+ return e;
+ });
+ }
+ // end 告警定义与监控关联model
}
diff --git a/web-app/src/app/routes/alert/alert.module.ts b/web-app/src/app/routes/alert/alert.module.ts
index ca774ba..559356f 100644
--- a/web-app/src/app/routes/alert/alert.module.ts
+++ b/web-app/src/app/routes/alert/alert.module.ts
@@ -10,6 +10,7 @@ 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";
const COMPONENTS: Type[] = [
AlertCenterComponent,
@@ -27,6 +28,7 @@ const COMPONENTS: Type[] = [
NzRadioModule,
NzSwitchModule,
NzCascaderModule,
+ NzTransferModule,
],
declarations: COMPONENTS,
})
diff --git a/web-app/src/app/service/alert-define.service.ts b/web-app/src/app/service/alert-define.service.ts
index 729aa73..2d2cd5d 100644
--- a/web-app/src/app/service/alert-define.service.ts
+++ b/web-app/src/app/service/alert-define.service.ts
@@ -4,6 +4,7 @@ import {Observable} from "rxjs";
import {Message} from "../pojo/Message";
import {Page} from "../pojo/Page";
import {AlertDefine} from "../pojo/AlertDefine";
+import {AlertDefineBind} from "../pojo/AlertDefineBind";
const alert_define_uri = "/alert/define";
const alert_defines_uri = "/alert/defines";
@@ -27,14 +28,13 @@ export class AlertDefineService {
return this.http.get>(`${alert_define_uri}/${alertDefineId}`);
}
- /**
- * 应用告警定义与监控关联
- * @param alertDefineId 告警定义ID
- * @param monitorMap 关联的监控ID-监控名称
- */
public applyAlertDefineMonitorsBind(alertDefineId: number,
- monitorMap: Record): Observable> {
- return this.http.post>(`${alert_define_uri}/${alertDefineId}/monitors`, monitorMap);
+ binds: AlertDefineBind[]): Observable> {
+ return this.http.post>(`${alert_define_uri}/${alertDefineId}/monitors`, binds);
+ }
+
+ public getAlertDefineMonitorsBind(alertDefineId: number) : Observable> {
+ return this.http.get>(`${alert_define_uri}/${alertDefineId}/monitors`);
}
public deleteAlertDefines(alertDefineIds: Set) : Observable> {
diff --git a/web-app/src/app/service/monitor.service.ts b/web-app/src/app/service/monitor.service.ts
index b1f195e..a8b2336 100644
--- a/web-app/src/app/service/monitor.service.ts
+++ b/web-app/src/app/service/monitor.service.ts
@@ -69,6 +69,10 @@ export class MonitorService {
return this.http.get>(`${monitor_uri}/${monitorId}`);
}
+ public getMonitorsByApp(app: string) : Observable> {
+ return this.http.get>(`${monitors_uri}/${app}`);
+ }
+
public getMonitors(app: string, pageIndex: number, pageSize: number) : Observable>> {
app = app.trim();
pageIndex = pageIndex ? pageIndex : 0;
|