[web-app] 告警配置列表,新增告警定义，修改告警定义功能

2021-12-12 18:32:23 +08:00
parent f1f2a04b8d
commit 9d2b7908de
6 changed files with 218 additions and 14 deletions
--- a/web-app/src/app/pojo/AlertDefine.ts
+++ b/web-app/src/app/pojo/AlertDefine.ts
@@ -3,12 +3,12 @@ export class AlertDefine {
  app!: string;
  metric!: string;
  field!: string;
-  preset!: boolean;
+  preset: boolean = false;
  expr!: string;
  // 告警级别 0:高-emergency-紧急告警-红色 1:中-critical-严重告警-橙色 2:低-warning-警告告警-黄色
-  priority!: number;
-  duration!: number;
-  enable!: boolean;
+  priority: number = 2;
+  duration: number = 600;
+  enable: boolean = true;
  template!: string;
  creator!: string;
  modifier!: string;
--- 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
@@ -70,7 +70,7 @@
        <span>警告告警</span>
      </nz-tag>
    </td>
-    <td nzAlign="center">{{ data.duration }}</td>
+    <td nzAlign="center">{{ data.duration + 's' }}</td>
    <td nzAlign="center">{{ data.template }}</td>
    <td nzAlign="center">
      <nz-tag *ngIf="data.preset" nzColor="green">
@@ -96,3 +96,84 @@
 <ng-template #rangeTemplate>
  总量 {{ total }}
 </ng-template>
+
+
+<nz-modal
+  [(nzVisible)]="isModalVisible"
+  [nzTitle]="isModalAdd?'新增告警阈值' : '修改告警阈值'"
+  (nzOnCancel)="onModalCancel()"
+  (nzOnOk)="onModalOk()"
+  nzMaskClosable="false"
+  nzWidth="60%"
+  [nzOkLoading]="isModalOkLoading"
+>
+  <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-control [nzSpan]="8">
+          <nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues">
+          </nz-cascader>
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'expr' nzRequired="true">阈值触发表达式</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="请输入阈值判断表达式">
+            </textarea>
+          </nz-textarea-count>
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label nzSpan="7"
+                       nzRequired="true"
+                       nzFor= "priority">告警级别
+        </nz-form-label>
+        <nz-form-control nzSpan="8">
+          <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>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "duration">持续时间</nz-form-label>
+        <nz-form-control nzSpan="8">
+          <nz-input-number [(ngModel)]="define.duration" [nzMin]="10" [nzMax]="10000" [nzStep]="10"
+                           name="duration" id="duration" nzPlaceHolder="请输入告警的持续时间">
+          </nz-input-number>
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'template' nzRequired="true">通知模版</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <nz-textarea-count [nzMaxCharacterCount]="100">
+            <textarea [(ngModel)]="define.template" rows="3" nz-input
+                      name="template" id="template"  placeholder="请输入告警的通知模版">
+            </textarea>
+          </nz-textarea-count>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "preset">默认预置</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-label nzSpan="7" nzRequired="true" nzFor= "enable">启用告警</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 >
+    </form>
+  </div>
+</nz-modal>
--- 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,6 +6,8 @@ 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 {AppDefineService} from "../../../service/app-define.service";

@Component({
  selector: 'app-alert-setting',
@@ -20,6 +22,7 @@ export class AlertSettingComponent implements OnInit {
              private modal: NzModalService,
              private notifySvc: NzNotificationService,
              private msg: NzMessageService,
+              private appDefineSvc: AppDefineService,
              private alertDefineSvc: AlertDefineService) { }

  pageIndex: number = 1;
@@ -29,8 +32,24 @@ export class AlertSettingComponent implements OnInit {
  tableLoading: boolean = true;
  checkedDefineIds = new Set<number>();

+  appHierarchies!: any[];
+
  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);
+        }
+      }, error => {
+        console.warn(error.msg);
+      })
  }

  loadAlertDefineTable() {
@@ -56,11 +75,54 @@ export class AlertSettingComponent implements OnInit {
  }

  onNewAlertDefine() {
+    this.define = new AlertDefine();
+    this.isModalAdd = true;
+    this.isModalVisible = true;
+    this.isModalOkLoading = false;
+  }

+  onEditOneAlertDefine(alertDefineId: number) {
+    if (alertDefineId == null) {
+      this.notifySvc.warning("未选中任何待编辑项！","");
+      return;
+    }
+    this.editAlertDefine(alertDefineId);
  }

  onEditAlertDefine() {
+    // 编辑时只能选中一个
+    if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) {
+      this.notifySvc.warning("未选中任何待编辑项！","");
+      return;
+    }
+    if (this.checkedDefineIds.size > 1) {
+      this.notifySvc.warning("只能对一个选中项进行编辑！","");
+      return;
+    }
+    let alertDefineId = 0;
+    this.checkedDefineIds.forEach(item => alertDefineId = item);
+    this.editAlertDefine(alertDefineId);
+  }

+  editAlertDefine(alertDefineId: number) {
+    this.isModalAdd = false;
+    this.isModalVisible = true;
+    this.isModalOkLoading = 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);
+        }
+      }, error => {
+        this.notifySvc.error("查询此监控定义详情失败！",error.msg);
+      })
  }

  onDeleteAlertDefines() {
@@ -91,10 +153,6 @@ export class AlertSettingComponent implements OnInit {
    });
  }

-  onEditOneAlertDefine(alertDefineId: number) {
-
-  }
-

  deleteAlertDefines(defineIds: Set<number>) {
    if (defineIds == null || defineIds.size == 0) {
@@ -119,7 +177,7 @@ export class AlertSettingComponent implements OnInit {
      })
  }

-  // begin: 列表多选逻辑
+  // begin: 列表多选分页逻辑
  checkedAll: boolean = false;
  onAllChecked(checked: boolean) {
    if (checked) {
@@ -135,8 +193,6 @@ export class AlertSettingComponent implements OnInit {
      this.checkedDefineIds.delete(monitorId);
    }
  }
-  // end: 列表多选逻辑
-
  /**
   * 分页回调
   * @param params 页码信息
@@ -145,6 +201,59 @@ export class AlertSettingComponent implements OnInit {
    const { pageSize, pageIndex, sort, filter } = params;
    this.pageIndex = pageIndex;
    this.pageSize = pageSize;
-    // this.loadMonitorTable();
+    this.loadAlertDefineTable();
+  }
+  // end: 列表多选逻辑
+
+
+  // start 新增修改告警定义model
+  isModalVisible = false;
+  isModalOkLoading = false;
+  isModalAdd = true;
+  define!: AlertDefine;
+  cascadeValues: string[] = [];
+  onModalCancel() {
+    this.isModalVisible = false;
+  }
+  onModalOk() {
+    this.isModalOkLoading = true;
+    this.define.app = this.cascadeValues[0];
+    this.define.metric = this.cascadeValues[1];
+    this.define.field = this.cascadeValues[2];
+    if (this.isModalAdd) {
+      const modalOk$ = this.alertDefineSvc.newAlertDefine(this.define)
+        .pipe(finalize(() => {
+          modalOk$.unsubscribe();
+          this.isModalOkLoading = false;
+        }))
+        .subscribe(message => {
+          if (message.code === 0) {
+            this.isModalVisible = false;
+            this.notifySvc.success("新增成功！", "");
+            this.loadAlertDefineTable();
+          } else {
+            this.notifySvc.error("新增失败！", message.msg);
+          }
+        }, error => {
+          this.notifySvc.error("新增失败！", error.msg);
+        })
+    } else {
+      const modalOk$ = this.alertDefineSvc.editAlertDefine(this.define)
+        .pipe(finalize(() => {
+          modalOk$.unsubscribe();
+          this.isModalOkLoading = false;
+        }))
+        .subscribe(message => {
+          if (message.code === 0) {
+            this.isModalVisible = false;
+            this.notifySvc.success("修改成功！", "");
+            this.loadAlertDefineTable();
+          } else {
+            this.notifySvc.error("修改失败！", message.msg);
+          }
+        }, error => {
+          this.notifySvc.error("修改失败！", error.msg);
+        })
+    }
  }
 }
--- a/web-app/src/app/routes/alert/alert.module.ts
+++ b/web-app/src/app/routes/alert/alert.module.ts
@@ -7,6 +7,9 @@ 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";

 const COMPONENTS: Type<void>[] = [
  AlertCenterComponent,
@@ -21,6 +24,9 @@ const COMPONENTS: Type<void>[] = [
    NzDividerModule,
    NzBreadCrumbModule,
    NzTagModule,
+    NzRadioModule,
+    NzSwitchModule,
+    NzCascaderModule,
  ],
  declarations: COMPONENTS,
 })
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
@@ -25,6 +25,7 @@ export class MonitorNewComponent implements OnInit {
  profileForm: FormGroup = new FormGroup({});
  detected: boolean = true;
  passwordVisible: boolean = false;
+  // 是否显示加载中
  isSpinning:boolean = false
  constructor(private appDefineSvc: AppDefineService,
              private monitorSvc: MonitorService,
--- a/web-app/src/app/service/app-define.service.ts
+++ b/web-app/src/app/service/app-define.service.ts
@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import {HttpClient, HttpParams} from '@angular/common/http';
 import {Message} from "../pojo/Message";
 import {Observable} from "rxjs";
 import {ParamDefine} from "../pojo/ParamDefine";

+const app_hierarchy = '/apps/hierarchy';

@Injectable({
  providedIn: 'root'
@@ -20,4 +21,10 @@ export class AppDefineService {
    return this.http.get<Message<ParamDefine[]>>(paramDefineUri);
  }

+  public getAppHierarchy() : Observable<Message<any>> {
+    let httpParams = new HttpParams().append("lang",'zh-CN');
+    const options = { params: httpParams };
+    return this.http.get<Message<any>>(app_hierarchy,options);
+  }
+
 }