告警模块

src/main/webapp/app/alarm/alarm-list/alarm-list.component.html

-<p>
-  alarm-list works!
-</p>
+<div nz-row class="breadcrumbs" >
+  <div nz-col nzSpan="16">
+    <nz-breadcrumb class="padding-8-0">
+      <nz-breadcrumb-item>
+        首页
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        <a>告警管理</a>
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        告警记录
+      </nz-breadcrumb-item>
+    </nz-breadcrumb>
+  </div>
+  <div nz-col nzSpan="8" class="text-right">
+    <button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
+    <button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
+    <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
+  </div>
+</div>
+
+<div nz-row class="search-form">
+  <div nz-col nzSpan="16">
+    <span>当前告警数：120</span>
+  </div>
+</div>
+<nz-table #nzTable [nzData]="eventList" nzSingleSort>
+  <thead>
+  <tr>
+    <th nzShowSort>产生时间</th>
+    <th >级别</th>
+    <th >名称</th>
+    <th nzWidth="15%">告警信息</th>
+    <th >类别</th>
+    <th >资源分组</th>
+    <th >持续时间</th>
+    <th >产生事件</th>
+    <th>状态</th>
+    <th>发送记录</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of warnList">
+    <td>{{data.lastchangeDate}}</td>
+    <td>级别</td>
+    <td>名称</td>
+    <td>{{data.description}}</td>
+    <td>类别</td>
+    <td>资源分组</td>
+    <td>{{data.continuedTime}}</td>
+    <td>产生事件</td>
+    <td>{{data.stateName}}</td>
+    <td><i nz-icon type="profile" theme="outline"></i></td>
+  </tr>
+  </tbody>
+</nz-table>
\ No newline at end of file

src/main/webapp/app/alarm/alarm-list/alarm-list.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {AlarmService} from '../alarm.service';
+import {pageSize} from '../../app.constants';
 
 @Component({
-  selector: 'smart-alarm-list',
-  templateUrl: './alarm-list.component.html',
-  styles: []
+    selector: 'smart-alarm-list',
+    templateUrl: './alarm-list.component.html',
+    styles: []
 })
 export class AlarmListComponent implements OnInit {
 
-  constructor() { }
+    eventList = [];
+    pageNum = 1;
+    pageCount = pageSize;
 
-  ngOnInit() {
-  }
+    constructor(public alarmSer: AlarmService) {
+    }
+
+    ngOnInit() {
+        this.getList();
+    }
+
+    getList() {
+        const data = {
+            pageNum:this.pageNum,
+            pageCount:this.pageCount,
+        };
+        this.alarmSer.eventFind(data).subscribe(
+            (res) => {
+
+            }
+        );
+    }
 
 }

src/main/webapp/app/alarm/alarm.module.ts

@@ -8,11 +8,17 @@ import {AlarmSetComponent} from './alarm-set/alarm-set.component';
 import {NowAlarmComponent} from './now-alarm/now-alarm.component';
 import {SendSetComponent} from './send-set/send-set.component';
 import {AlarmService} from './alarm.service';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {NgZorroAntdModule} from 'ng-zorro-antd';
+import {SendLogComponent} from './modal/send-log/send-log.component';
 
 @NgModule({
     imports: [
         CommonModule,
-        NgxEchartsModule
+        NgxEchartsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgZorroAntdModule.forRoot()
     ],
     declarations: [
         AlarmManageComponent,
@@ -21,6 +27,7 @@ import {AlarmService} from './alarm.service';
         AlarmSetComponent,
         NowAlarmComponent,
         SendSetComponent,
+        SendLogComponent
     ],
     providers:[
         AlarmService

src/main/webapp/app/alarm/alarm.service.ts

@@ -9,9 +9,13 @@ export class AlarmService {
     constructor(private http: HttpClient) {
     }
 
-    //角色列表
-    role(): Observable<any>{
-        return this.http.get(SERVER_API_URL + '/role');
+    //告警list
+    eventFind(data): Observable<any>{
+        return this.http.post(SERVER_API_URL + '/event/find',data);
     }
 
+    //告警推送日志
+    alertFind(data): Observable<any>{
+        return this.http.post(SERVER_API_URL + '/alert/find',data);
+    }
 }
\ No newline at end of file

src/main/webapp/app/alarm/modal/send-log/send-log.component.html

+<nz-modal [nzWidth]="700" [(nzVisible)]="isShow" nzTitle="发送记录" (nzOnCancel)="closeModal()" (nzOnOk)="closeModal()">
+  <nz-table #nzTable [nzData]="logList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
+    <thead>
+    <tr>
+      <th>告警名称</th>
+      <th>告警时间</th>
+      <th>告警资源</th>
+      <th>告警内容</th>
+      <th>状态</th>
+      <th>发送方式</th>
+      <th>发送对象</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of logList">
+      <td>{{data.subject}}</td>
+      <td>{{data.clock}}</td>
+      <td>告警资源</td>
+      <td>{{data.message}}</td>
+      <td>类别</td>
+      <td>资源分组</td>
+      <td>{{data.continuedTime}}</td>
+      <td>产生事件</td>
+      <td>{{data.stateName}}</td>
+      <td class="list-icon"><i class="anticon anticon-profile"></i></td>
+    </tr>
+    </tbody>
+  </nz-table>
+</nz-modal>

src/main/webapp/app/alarm/modal/send-log/send-log.component.ts

+import {Component, OnInit} from '@angular/core';
+import {AlarmService} from '../../alarm.service';
+import {pageSize} from '../../../app.constants';
+
+@Component({
+    selector: 'smart-send-log',
+    templateUrl: './send-log.component.html',
+    styles: []
+})
+export class SendLogComponent implements OnInit {
+
+    isShow = false;
+    data;
+    logList = [];
+    loading = false;
+
+    pageCount = pageSize;
+    pageNum = 1;
+    totalNum;
+
+    constructor(public alarmSer: AlarmService) {
+    }
+
+    ngOnInit() {
+        // this.getList();
+    }
+
+    showModal(data) {
+        this.data = data;
+        this.isShow = true;
+        this.getList();
+    }
+
+    //获取列表
+    getList() {
+        const data1 = {
+            hostids: [this.data.hostid],
+            groupid: [this.data.groupid],
+            eventPage: this.pageNum,
+            pageRecords: this.pageCount
+        };
+        this.alarmSer.alertFind(data1).subscribe(
+            (res) => {
+                this.logList = res.data.data;
+                this.totalNum = res.data.totalNum;
+            }
+        );
+    }
+
+    //关闭
+    closeModal() {
+        this.isShow = false;
+    }
+
+    //翻页
+    change(e){
+        this.pageNum = e;
+        this.getList();
+    }
+
+}

src/main/webapp/app/alarm/now-alarm/now-alarm.component.html

-<p>
-  now-alarm works!
-</p>
+<div nz-row class="breadcrumbs">
+    <div nz-col nzSpan="16">
+        <nz-breadcrumb class="padding-8-0">
+            <nz-breadcrumb-item>
+                首页
+            </nz-breadcrumb-item>
+            <nz-breadcrumb-item>
+                <a>告警管理</a>
+            </nz-breadcrumb-item>
+            <nz-breadcrumb-item>
+                当前告警
+            </nz-breadcrumb-item>
+        </nz-breadcrumb>
+    </div>
+    <div nz-col nzSpan="8" class="text-right">
+        <button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
+        <button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
+        <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
+    </div>
+</div>
+
+<div nz-row class="search-form">
+    <div nz-col nzSpan="16">
+        <span>当前告警数：120</span>
+    </div>
+</div>
+
+<nz-table #nzTable [nzData]="warnList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
+    <thead>
+    <tr>
+        <th nzShowSort>产生时间</th>
+        <th>级别</th>
+        <th>名称</th>
+        <th nzWidth="15%">告警信息</th>
+        <th>类别</th>
+        <th>资源分组</th>
+        <th>持续时间</th>
+        <th>产生事件</th>
+        <th>状态</th>
+        <th>发送记录</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of warnList">
+        <td>
+            <nz-timeline-item>{{data.clock}}</nz-timeline-item>
+        </td>
+        <td>
+            <ng-container *ngIf=" data.priority == 4 || data.priority == 5">
+                <nz-tag [nzColor]="'#cf5c4b'"></nz-tag>
+            </ng-container>
+            <ng-container *ngIf=" data.priority == 2 || data.priority == 3">
+                <nz-tag [nzColor]="'#f18633'"></nz-tag>
+            </ng-container>
+        </td>
+        <td>{{data.hostName}}</td>
+        <td>{{data.description}}</td>
+        <td>类别</td>
+        <td>资源分组</td>
+        <td>{{data.continuedTime}}</td>
+        <td>产生事件</td>
+        <td>{{data.stateName}}</td>
+        <td class="list-icon" (click)="showModal(data)"><i class="anticon anticon-profile"></i></td>
+    </tr>
+    </tbody>
+</nz-table>
+
+<smart-send-log #sendLog></smart-send-log>
\ No newline at end of file

src/main/webapp/app/alarm/now-alarm/now-alarm.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
+import {AlarmService} from '../alarm.service';
+import {NzMessageService} from 'ng-zorro-antd';
+import {SendLogComponent} from '../modal/send-log/send-log.component';
+import {pageSize} from '../../app.constants';
 
 @Component({
-  selector: 'smart-now-alarm',
-  templateUrl: './now-alarm.component.html',
-  styles: []
+    selector: 'smart-now-alarm',
+    templateUrl: './now-alarm.component.html',
+    styles: [
+            `
+            .list-icon{
+                font-size: 20px;
+                text-align: center;
+                color: #8cb6ce;
+            }
+        `
+    ]
 })
 export class NowAlarmComponent implements OnInit {
+    @ViewChild('sendLog') sendLog:SendLogComponent;
+    warnList = [];
 
-  constructor() { }
+    loading = false;
+    pageCount = pageSize;
+    pageNum = 1;
+    totalNum;
 
-  ngOnInit() {
-  }
+    constructor(public alarmSer: AlarmService, public message: NzMessageService) {
+    }
+
+    ngOnInit() {
+        this.findWarning();
+    }
+
+    findWarning() {
+        this.loading = true;
+        const data = {
+            obj:{
+                isWaring:'yes'
+            },
+            pageCount:this.pageCount,
+            pageNum:this.pageNum
+        };
+        this.alarmSer.eventFind(data).subscribe(
+            (res) => {
+                if (res.errCode = 10000) {
+                    this.warnList = res.data.data;
+                    this.totalNum = res.data.totalNum;
+                } else {
+                    this.message.info(res.errMsg);
+                }
+                this.loading = false;
+            }
+        );
+    }
+
+    change(e){
+        this.pageNum = e;
+        this.findWarning();
+    }
+
+    //打开modal
+    showModal(data){
+        this.sendLog.showModal(data);
+    }
 
 }

src/main/webapp/app/app.constants.ts

@@ -6,4 +6,4 @@ export const VERSION = process.env.VERSION;
 export const DEBUG_INFO_ENABLED: boolean = !!process.env.DEBUG_INFO_ENABLED;
 export const SERVER_API_URL = '/zabbixBox';
 export const BUILD_TIMESTAMP = process.env.BUILD_TIMESTAMP;
-export const pageSize = 20;
+export const pageSize = 25;

src/main/webapp/app/app.module.ts

@@ -86,7 +86,7 @@ import {BasicEditComponent} from './modal/basic-edit/basic-edit.component';
         BasicEditComponent,
         CreateGroupComponent,
         NewTypeComponent,
-        AppComponent
+        AppComponent,
     ],
     providers: [
         LayoutService,

src/main/webapp/app/modal/basi-check/basi-check.component.html

@@ -174,8 +174,8 @@
                         <nz-form-control nz-col [nzSpan]="6">
                             <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
                                 <nz-option nzValue="=" nzLabel="="></nz-option>
-                                <nz-option nzValue="&gt;" nzLabel=">"></nz-option>
-                                <nz-option nzValue="&lt;" nzLabel="<"></nz-option>
+                                <nz-option nzValue=">" nzLabel=">"></nz-option>
+                                <nz-option nzValue="<" nzLabel="<"></nz-option>
                             </nz-select>
                         </nz-form-control>
                         <nz-form-control nz-col [nzSpan]="6">
@@ -205,8 +205,8 @@
                         <nz-form-control nz-col [nzSpan]="6">
                             <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
                                 <nz-option nzValue="=" nzLabel="="></nz-option>
-                                <nz-option nzValue="&gt;" nzLabel=">"></nz-option>
-                                <nz-option nzValue="&lt;" nzLabel="<"></nz-option>
+                                <nz-option nzValue=">" nzLabel=">"></nz-option>
+                                <nz-option nzValue="<" nzLabel="<"></nz-option>
                             </nz-select>
                         </nz-form-control>
                         <nz-form-control nz-col [nzSpan]="6">

src/main/webapp/app/modal/basi-check/basi-check.component.ts

@@ -145,10 +145,10 @@ export class BasiCheckComponent implements OnInit {
         };
         if (this.conditionType == 'commonly') {   //常规
             this.conditionList.forEach(res => {
-                data.condition += '{' + this.validateForm.name + ':' + this.validateForm.key_ + '.last}' + res.equal + '' + res.value ;
+                data.condition += '{' + this.validateForm.name + ':' + this.validateForm.key_ + '.last()}' + res.equal + '' + res.value ;
             });
             this.faultConditionList.forEach(res => {
-                data.faultCondition += '{' + this.validateForm.name + ':' + this.validateForm.key_ + '.last}' + res.equal + '' + res.value;
+                data.faultCondition += '{' + this.validateForm.name + ':' + this.validateForm.key_ + '.last()}' + res.equal + '' + res.value;
             });
         } else {           //高级
             data.condition = this.validateForm.condition_high;

src/main/webapp/app/overAll/basic/basic.component.ts

@@ -268,9 +268,7 @@ export class BasicComponent implements OnInit {
         };
         this.overAllSer.findDetail(data).subscribe(
             (res) => {
-                console.log(res);
                 this.dataSet[item.host].list = res.data;
-                console.log(this.dataSet);
                 this.toTree();
             }
         );