Skip to content

S
smart
Commit f327cbed authored by wangqinghua's avatar wangqinghua
Browse files
Options

告警模块

parent 6ebceaa7
Show whitespace changes
Inline Side-by-side
Showing with 318 additions and 25 deletions
src/main/webapp/app/alarm/alarm-list/alarm-list.component.html
View file @ f327cbed
<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
View file @ f327cbed
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',
......@@ -7,9 +9,27 @@ import { Component, OnInit } from '@angular/core';
})
export class AlarmListComponent implements OnInit {
constructor() { }
eventList = [];
pageNum = 1;
pageCount = pageSize;
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
View file @ f327cbed
......@@ -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
View file @ f327cbed
......@@ -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 0 → 100644
View file @ f327cbed
<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 0 → 100644
View file @ f327cbed
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
View file @ f327cbed
<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
View file @ f327cbed
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: []
styles: [
`
.list-icon{
font-size: 20px;
text-align: center;
color: #8cb6ce;
}
`
]
})
export class NowAlarmComponent implements OnInit {
@ViewChild('sendLog') sendLog:SendLogComponent;
warnList = [];
loading = false;
pageCount = pageSize;
pageNum = 1;
totalNum;
constructor() { }
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
View file @ f327cbed
......@@ -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
View file @ f327cbed
......@@ -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
View file @ f327cbed
......@@ -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
View file @ f327cbed
......@@ -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
View file @ f327cbed
......@@ -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();
}
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment